wess · August 18, 2010 19:57
diff --git a/views.js b/views.js
 <script type="text/javascript" charset="utf-8">
 		;(function($){
 			var views = {};
 			views.FULL_WIDTH = "100%";
 			
 			views.__builder = Class.extend({
 				init: function(options)
 				{
 					this.styles 	= options.styles || false;
 					this.classes 	= options.classes || false;
 					this.id			= options.id || false;
 					this.tag		= options.tag || 'div';
 					this.commit		= options.commit || true;
 					
 					this.target		= (options.target == document.body)? document.body : $(options.target)[0] || document.body;
 				},
 				
 				set: function(key, val)
 				{
 					this[key] = val;
 				},
 				
 				render: function()
 				{
 					this.element = document.createElement(this.tag);

 					if(this.id)
 						this.attr('id',this.id);

 					if(this.classes)
 						this.attr('class', this.classes.join(" "));
 						
 					this.__styles();
 					
 					if(this.commit)
 						this.target.appendChild(this.element);
 					
 					return this.element;
 				},
 				
 				__styles: function()
 				{
 					var styleString = '';
 					
 					if(this.styles)
 					{
 						for(item in this.styles)
 							styleString += "%@:%@;".$$(item, this.styles[item]);
 					}
 					
 					this.attr('style', styleString);
 				},
 				
 				attr: function(key, value)
 				{
 					this.element.setAttribute(key, value);
 				}
 			});

 			// Page types are divs with absolute position.
 			views.Page = function(options)
 			{
 				var background = options.background || false;
 				
 				var styles = {
 					position:'absolute',
 					top:0,
 					left:0,
 					bottom:0,
 					right:0,
 					width:views.FULL_WIDTH,
 					height:"100%",
 					background:'red'
 				}
 				 
 				if(background)
 					styles.background = background

 				this.builder = new views.__builder({
 					styles: styles,
 					classes: ['mk-main-pane'],
 					tag: 'div',
 					target: document.body,
 					commit: true
 				});
 				
 				this.element = this.builder.render();
 				
 				var children = options.children || {};
 				if(Object.size(children) > 0)
 				{
 					for(child in children)
 					{
 						children[child].set("id", child);
 						this.element.appendChild(children[child].render());
 					}
 				}
 			};
 			
 			views.Pane = function(options)
 			{
 				var options = options || {};
 				var layout 	= options.layout || { top: 0, left:0, right:0, bottom:"", width:"", height:"" };
 				var styles 	= options.styles || {};
 				var tag 	= 'div';
 				
 				var classes = options.classes || [];
 				classes.push('mk-general-pane');
 				
 				Object.extend(styles, {
 					position:"absolute",
 					top: layout.top || "",
 					left: layout.left || "",
 					right: layout.right || "",
 					bottom:layout.bottom || "",
 					width:layout.width || "",
 					height:layout.height || ""
 				});
 				
 				this.builder = new views.__builder({
 					styles: styles,
 					classes: classes,
 					tag: 'div',
 					commit: options.commit || false
 				});
 				
 				return this.builder;
 			}
 			
 			window.views = views;
 		})(Sizzle);
 </script>
 </head>
 <body>
 <script type="text/javascript" charset="utf-8">
 	var mainPage = new views.Page({
 		children: {
 			header: views.Pane({
 				layout: { top: 0, left: 0, right:0, width:views.FULL_WIDTH, height:"60px" },
 				styles: {
 					background:"blue",
 					"border-bottom": "1px solid black"
 				},
 				classes: ['header']
 			}),
 			
 			leftCol: views.Pane({
 				layout: { top: "61px", left:0, bottom:0, width:"200px", height:"auto"},
 				styles: {
 					background:"green"
 				},
 				
 				classes: ['col']
 			})
 		}
 	})
 </script>
 </body>
	<script type="text/javascript" charset="utf-8">
	;(function($){
	var views = {};
	views.FULL_WIDTH = "100%";

	views.__builder = Class.extend({
	init: function(options)
	{
	this.styles = options.styles \|\| false;
	this.classes = options.classes \|\| false;
	this.id = options.id \|\| false;
	this.tag = options.tag \|\| 'div';
	this.commit = options.commit \|\| true;

	this.target = (options.target == document.body)? document.body : $(options.target)[0] \|\| document.body;
	},

	set: function(key, val)
	{
	this[key] = val;
	},

	render: function()
	{
	this.element = document.createElement(this.tag);

	if(this.id)
	this.attr('id',this.id);

	if(this.classes)
	this.attr('class', this.classes.join(" "));

	this.__styles();

	if(this.commit)
	this.target.appendChild(this.element);

	return this.element;
	},

	__styles: function()
	{
	var styleString = '';

	if(this.styles)
	{
	for(item in this.styles)
	styleString += "%@:%@;".$$(item, this.styles[item]);
	}

	this.attr('style', styleString);
	},

	attr: function(key, value)
	{
	this.element.setAttribute(key, value);
	}
	});

	// Page types are divs with absolute position.
	views.Page = function(options)
	{
	var background = options.background \|\| false;

	var styles = {
	position:'absolute',
	top:0,
	left:0,
	bottom:0,
	right:0,
	width:views.FULL_WIDTH,
	height:"100%",
	background:'red'
	}

	if(background)
	styles.background = background

	this.builder = new views.__builder({
	styles: styles,
	classes: ['mk-main-pane'],
	tag: 'div',
	target: document.body,
	commit: true
	});

	this.element = this.builder.render();

	var children = options.children \|\| {};
	if(Object.size(children) > 0)
	{
	for(child in children)
	{
	children[child].set("id", child);
	this.element.appendChild(children[child].render());
	}
	}
	};

	views.Pane = function(options)
	{
	var options = options \|\| {};
	var layout = options.layout \|\| { top: 0, left:0, right:0, bottom:"", width:"", height:"" };
	var styles = options.styles \|\| {};
	var tag = 'div';

	var classes = options.classes \|\| [];
	classes.push('mk-general-pane');

	Object.extend(styles, {
	position:"absolute",
	top: layout.top \|\| "",
	left: layout.left \|\| "",
	right: layout.right \|\| "",
	bottom:layout.bottom \|\| "",
	width:layout.width \|\| "",
	height:layout.height \|\| ""
	});

	this.builder = new views.__builder({
	styles: styles,
	classes: classes,
	tag: 'div',
	commit: options.commit \|\| false
	});

	return this.builder;
	}

	window.views = views;
	})(Sizzle);
	</script>
	</head>
	<body>
	<script type="text/javascript" charset="utf-8">
	var mainPage = new views.Page({
	children: {
	header: views.Pane({
	layout: { top: 0, left: 0, right:0, width:views.FULL_WIDTH, height:"60px" },
	styles: {
	background:"blue",
	"border-bottom": "1px solid black"
	},
	classes: ['header']
	}),

	leftCol: views.Pane({
	layout: { top: "61px", left:0, bottom:0, width:"200px", height:"auto"},
	styles: {
	background:"green"
	},

	classes: ['col']
	})
	}
	})
	</script>
	</body>