Possible UI

by Sam Fereday

HTML

<div id="container">
  <div>[...]</div>
</div>

CSS

body {
  padding: 2em;
  font: 85%/1.4em arial;
}

div {
  float: left;
  clear: both;
}

JavaScript

/* The idea here is that you'd connect up your UI elements or data to a templating engine of some sort. Rather than render the html from within here, you literally send in the ui element data that you have, then use it to create things of your choosing later on.
You can inject data in to here as well, so you might pass in to something like h'bars using {{}} etc. */

// Temporary properties
var c = document.getElementById("container");

/* Useable elements (could be moved to seperate files) */
// Text box
var TextBox = function( options )
{
		
    if(!options)
    	options = {
      		width: 40,
          height: 20,
          colour: "#000000",
          size: 24
      }

		// Defaults
		this.width = 	options.width;
    this.height = options.height;
    this.colour = options.colour;
    this.size = 	options.size;
    this.innerText = "";
        
}
TextBox.prototype.setText = function(str)
{
		this.innerText = str;
    return this;
}
TextBox.prototype.setSize = function(n)
{
		this.size = n;
    return this;
}
TextBox.prototype.setColour = function(str)
{
		this.color = str;
    return this;
}

// Doubt this will be here forever, it's just to test
TextBox.prototype.createHTML = function(as)
{

		// Element placeholder
    var newElement = document.createElement(as || "span");

		// Just a simple html parser
    newElement.innerHTML = "<br />" + this.innerText;
    newElement.style.fontSize = this.size + "px";
    newElement.style.color = this.color;
    
    // Stick in the dom
    c.appendChild(newElement);
    
    return newElement;
    
}

// Colour bar
var ColourBar = function( options )
{
		
    if(!options)
    	options = {
      		width: 40,
          height: 20,
          background: "#000000"
      }

		// Defaults
		this.width = 	options.width;
    this.height = options.height;
    this.background = options.background;
    this.childElement = null;
        
}
ColourBar.prototype.setDimensions = function(w, h)
{
		this.width = w;
    this.height = h;
  ...