jsbeans

/*!
 * Copyright (c) 2009 Francesco Mele jsbeans@francescomele.com
 *
 * This Software is licenced under the LGPL Licence (GNU Lesser General 
 * Public License).
 * In addition to the LGPL Licence the Software is subject to the 
 * following conditions:
 * 
 * 	i	every modification must be public and comunicated to the Author
 * 	ii	every "jsbean" added to this library must be self consistent 
 * 		except for the dependence from jsbeans-x.x.x.js
 * 	iii	copyright notice and this permission notice shall be included 
 * 		in all copies or substantial portions of the Software
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */
/**
 * <code>jsbeans.Layout</code> is a small CSS Framework.<br/>
 * It's a JavaScript-only way to render layouts in various format, from 1 fixed column layout to 3 liquid columns plus header, footer, and so on.
 * @namespace jsbeans
 * @class Layout
 * @static
 * */
jsbeans.Layout = {
	/**
	 * The main method. Nothing will happen until {@method} <code class="methd">dispose</code> invocation.<br/>
	 * @method dispose
	 * @param opts {JSON} everything needed:
	 * <pre>
	 * template: String, // the desired layout. May be a string or one of provided templates. Required
	 * blocks: JSON, // a list of blocks for current template. Each block is a JSON and eventually may have a list in JSON form of key/value pairs for styles. Required
	 * matches: JSON, // a list of key/value pairs in JSON format. Key is the name of a block and its value is the id of DOM Object used for that block. Using matches developer is not forced to change DOM's ids. Optional
	 * </pre>
	 * @static
	 * */
	dispose: function(opts) {
		var res = opts.template;

		var blocks = opts.blocks || {};
		var mats = opts.matches || {};
		for (var block in blocks) {
			try {
				var match = mats[block] || block;
				var b = document.getElementById("" + match);
				res = res.replace("#" + block + "#", b.innerHTML);
				// remove 'old' DOM
				b.parentNode.removeChild(b);
			}
			catch(e) {}
		}
		// loads new contents
		opts.container.innerHTML = res;
		// must iterate twice because DOMs have to be loaded into page first
		for (var block in blocks) {
			try {
				this._applyStyles(document.getElementById("" + block), blocks[block]);
			}
			catch(e){}
		}
	},
	/**
	 * A JSON representing current provided templates for rendering Layouts.<br/>
	 * Developer may add any templates matching his needs using internal template engine sintax
	 * @property templates
	 * @type JSON
	 * */
	templates: {
		/**
		 * A vertical-blocks-style layout.<br/>
		 * Blocks are:
		 * <ol>
		 * <li>header</li>
		 * <li>menu</li>
		 * <li>content</li>
		 * <li>footer</li>
		 * </ol>
		 * @property templates.SINGLE_COLUMN
		 * @type String
		 * @final
		 * */
		SINGLE_COLUMN: "<div id=\"header\">#header#</div>"
			+ "<div id=\"menu\">#menu#</div>"
			+ "<div id=\"content\">#content#</div>"
			+ "<div id=\"footer\">#footer#</div>",
		/**
		 * A classic layout with a menu on the left.<br/>
		 * Blocks are:
		 * <ol>
		 * <li>header</li>
		 * <li>menu</li>
		 * <li>content</li>
		 * <li>footer</li>
		 * </ol>
		 * @property templates.TWO_COLUMNS
		 * @type String
		 * @final
		 * */
		TWO_COLUMNS: "<div id=\"header\">#header#</div>"
			+ "<div id=\"container\">"
			+ "<div id=\"menu\" style=\"width:150px;float:left;height:100%\">#menu#</div>"
			+ "<div id=\"content\"style=\"margin-left:150px\">#content#</div>"
			+ "</div>"
			+ "<div id=\"footer\" style=\"clear:both;\">#footer#</div>",
		/**
		 * A 3-columns layout.<br/>
		 * Blocks are:
		 * <ol>
		 * <li>header</li>
		 * <li>columnleft</li>
		 * <li>columnright</li>
		 * <li>content</li>
		 * <li>footer</li>
		 * </ol>
		 * @property templates.THREE_COLUMNS
		 * @type String
		 * @final
		 * */
		THREE_COLUMNS: "<div id=\"header\">#header#</div>"
			+ "<div id=\"container\">"
			+ "<div id=\"columnleft\" style=\"width:150px;float:left;height:100%\">#columnleft#</div>"
			+ "<div id=\"columnright\" style=\"width:150px;float:right;height:100%\">#columnright#</div>"
			+ "<div id=\"content\"style=\"margin-right:150px;margin-left:150px;\">#content#</div>"
			+ "</div>"
			+ "<div id=\"footer\">#footer#</div>"
	},
	/**
	 * Sets each styles found in {@param} <code class="param">styles</code> on {@param} <code class="param">object</code>
	 * @method _applyStyles
	 * @param object {DOM} the DOM Object going to be 'styled'
	 * @param styles {JSON} key/value pairs on which key is a style property and value its ... value :)
	 * @private
	 * */
	_applyStyles: function(object, styles) {
		for (var style in styles) {
			object.style["" + style] = "" + styles[style];
		}
	}
};