@base-framework/base 2.6.1 → 2.6.2

package/es6/legacy/es5/modules/layout.js

@@ -1,1679 +0,0 @@
-/* base framework module */
-/*
-	this will create a layout builder object
-	and shortcut functions.
-*/
-(function(global)
-{
-	"use strict";
-
-	/**
-	 * LayoutParser
-	 *
-	 * This will parse JSON layouts.
-	 * @class
-	 */
-	var LayoutParser = base.Class.extend(
-	{
-		/**
-		 * @member {array} _reserved
-		 * @protected
-		 */
-		_reserved: [
-			'tag',
-			'bind',
-			'onCreated',
-			'route',
-			'switch',
-			'useParent',
-			'useState',
-			'useData',
-			'addState',
-			'map',
-			'for',
-			'html',
-			'onSet',
-			'onState',
-			'watch',
-			'context',
-			'useContext',
-			'addContext',
-			'role',
-			'aria',
-			'cache'
-		],
-
-		/**
-		 * This will get the tag name of an element.
-		 *
-		 * @param {object} obj
-		 * @return {string}
-		 */
-		getElementTag: function(obj)
-		{
-			var type = 'div';
-
-			var node = obj.tag || obj.t;
-			if (typeof node !== 'undefined')
-			{
-				type = obj.tag = node;
-			}
-
-			return type;
-		},
-
-		/**
-		 * This will setup the element children.
-		 *
-		 * @param {object} obj
-		 */
-		setupChildren: function(obj)
-		{
-			if(obj.nest)
-			{
-				obj.children = obj.nest;
-				obj.nest = null;
-			}
-		},
-
-		/**
-		 * This will parse a layout element.
-		 *
-		 * @param {object} obj
-		 * @return {object}
-		 */
-		parseElement: function(obj)
-		{
-			var attr = {},
-			children = [];
-
-			var tag = this.getElementTag(obj);
-			if(tag === 'button')
-			{
-				attr.type = attr.type || 'button';
-			}
-
-			this.setupChildren(obj);
-			var reserved = this._reserved;
-
-			for (var key in obj)
-			{
-				if (obj.hasOwnProperty(key))
-				{
-					var value = obj[key];
-					if(value === undefined || value === null)
-					{
-						continue;
-					}
-
-					if (base.inArray(reserved, key) !== -1)
-					{
-						continue;
-					}
-
-					/* we need to filter the children from the attr
-					settings. the children need to keep their order. */
-					if (typeof value !== 'object')
-					{
-						attr[key] = value;
-					}
-					else
-					{
-						if (key === 'children')
-						{
-							//Array.prototype.push.apply(children, value);
-							children = children.concat(value);
-						}
-						else
-						{
-							children.push(value);
-						}
-					}
-				}
-			}
-
-			return {
-				tag: tag,
-				attr: attr,
-				children: children
-			};
-		}
-	});
-
-	var WATCHER_PATTERN = /(\[\[(.*?)\]\])/g;
-
-	/**
-	 * WatcherHelper
-	 *
-	 * This helper creates watcher callBacks, parses watcher strings
-	 * and sets up watchers.
-	 */
-	var WatcherHelper =
-	{
-		/**
-		 * This will get the property names to be watched.
-		 *
-		 * @protected
-		 * @param {string} string
-		 * @return {(array|null)}
-		 */
-		_getWatcherProps: function(string)
-		{
-			var pattern = /\[\[(.*?)\]\]/g;
-			var matches = string.match(pattern);
-			if(matches)
-			{
-				pattern = /(\[\[|\]\])/g;
-				for(var i = 0, length = matches.length; i < length; i++)
-				{
-					matches[i] = matches[i].replace(pattern, '');
-				}
-			}
-			return matches;
-		},
-
-		/**
-		 * This will update an element attribute.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {string} attr
-		 * @param {string} value
-		 */
-		updateAttr: function(ele, attr, value)
-		{
-			if(attr === 'text' || attr === 'textContent')
-			{
-				ele.textContent = value;
-			}
-			else if(attr === 'innerHTML')
-			{
-				ele.innerHTML = value;
-			}
-			else
-			{
-				if(attr.substring(4, 1) === '-')
-				{
-					base.setAttr(ele, attr, value);
-				}
-				else
-				{
-					ele[attr] = value;
-				}
-			}
-		},
-
-		/**
-		 * This will get a watcher callBack.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {(object|array)} data
-		 * @param {string} string
-		 * @param {string} attr
-		 * @param {boolean} isArray
-		 * @return {function}
-		 */
-		_getWatcherCallBack: function(ele, data, string, attr, isArray)
-		{
-			var self = this;
-			return function()
-			{
-				var count = 0,
-				value = string.replace(WATCHER_PATTERN, function()
-				{
-					var watcherData = (isArray)? data[count] : data;
-					count++;
-					var result = watcherData.get(arguments[2]);
-					return (typeof result !== 'undefined'? result : '');
-				});
-				self.updateAttr(ele, attr, value);
-			};
-		},
-
-		/**
-		 * This will get the parent data.
-		 *
-		 * @param {object} parent
-		 * @returns {object|null}
-		 */
-		getParentData: function(parent)
-		{
-			if(parent.data)
-			{
-				return parent.data;
-			}
-
-			if(parent.context && parent.context.data)
-			{
-				return parent.context.data;
-			}
-
-			if(parent.state)
-			{
-				return parent.state;
-			}
-
-			return null;
-		},
-
-		/**
-		 * This will get a watcher value.
-		 *
-		 * @private
-		 * @param {(string|object)} settings
-		 * @param {object} parent
-		 * @return {array}
-		 */
-		getValue: function(settings, parent)
-		{
-			if(typeof settings === 'string')
-			{
-				settings =
-				{
-					value: settings
-				};
-			}
-
-			var value = settings.value;
-			if(base.isArray(value) === false)
-			{
-				/**
-				 * This will setup an array watcher based on a string.
-				 */
-				value = [value, this.getParentData(parent)];
-			}
-			else
-			{
-				/**
-				 * This will check to add the default data.
-				 */
-				if(value.length < 2)
-				{
-					value.push(this.getParentData(parent));
-				}
-			}
-			return value;
-		},
-
-		/**
-		 * This will get the prop values.
-		 *
-		 * @param {object} data
-		 * @param {string} string
-		 * @param {bool} isArray
-		 * @return {array}
-		 */
-		getPropValues: function(data, props, isArray)
-		{
-			var values = [];
-
-			for(var i = 0, length = props.length; i < length; i++)
-			{
-				var watcherData = (isArray)? data[i] : data;
-				var value = watcherData.get(props[i]);
-				value = (typeof value !== 'undefined'? value : '');
-				values.push(value);
-			}
-
-			return values;
-		},
-
-		/**
-		 * This will get the watcher callBack.
-		 *
-		 * @param {object} settings
-		 * @param {object} ele
-		 * @param {object} data
-		 * @param {string} string
-		 * @param {bool} isDataArray
-		 * @return {function}
-		 */
-		getCallBack: function(settings, ele, data, string, isDataArray)
-		{
-			var callBack,
-			overrideCallBack = settings.callBack;
-			if(typeof overrideCallBack === 'function')
-			{
-				var self = this;
-				var props = string.match(WATCHER_PATTERN);
-				var isMultiProp = (props && props.length > 1);
-				callBack = function(value, committer)
-				{
-					value = (isMultiProp !== true)? value : self.getPropValues(data, props, isDataArray);
-					overrideCallBack(ele, value, committer);
-				};
-			}
-			else
-			{
-				var attr = settings.attr || 'textContent';
-				callBack = this._getWatcherCallBack(ele, data, string, attr, isDataArray);
-			}
-			return callBack;
-		},
-
-		/**
-		 * This will add a data watcher.
-		 *
-		 * @private
-		 * @param {object} ele
-		 * @param {(string|object)} settings
-		 * @param {object} parent
-		 */
-		addDataWatcher: function(ele, settings, parent)
-		{
-			var value = this.getValue(settings, parent),
-			data = value[1];
-			if(!data)
-			{
-				return false;
-			}
-
-			var string = value[0],
-			isDataArray = base.isArray(data);
-
-			var callBack = this.getCallBack(settings, ele, data, string, isDataArray);
-			var props = this._getWatcherProps(string);
-			for(var i = 0, length = props.length; i < length; i++)
-			{
-				var watcherData = (isDataArray)? data[i] : data;
-				this.addWatcher(ele, watcherData, props[i], callBack);
-			}
-		},
-
-		/**
-		 * This will setup a data watcher.
-		 *
-		 * @param {object} ele
-		 * @param {(string|object)} settings
-		 * @param {object} parent
-		 */
-		setup: function(ele, settings, parent)
-		{
-			if(!settings)
-			{
-				return false;
-			}
-
-			if(Array.isArray(settings))
-			{
-				settings = {
-					attr: settings[2],
-					value: [settings[0], settings[1]]
-				};
-			}
-
-			this.addDataWatcher(ele, settings, parent);
-		},
-
-		/**
-		 * This will add a watcher.
-		 *
-		 * @private
-		 * @param {object} ele
-		 * @param {object} data
-		 * @param {string} prop
-		 * @param {function} callBack
-		 */
-		addWatcher: function(ele, data, prop, callBack)
-		{
-			base.DataBinder.watch(ele, data, prop, callBack);
-		}
-	};
-
-	/**
-	 * This will create a watch element.
-	 *
-	 * @param {object} data
-	 * @param {string} prop
-	 * @returns {function}
-	 */
-	global.Watch = function(data, prop)
-	{
-		return function(callBack)
-		{
-			return {
-				onSet: [data, prop, function(ele, value)
-				{
-					return callBack(value);
-				}]
-			};
-		};
-	};
-
-	base.DataTracker.addType('context', function(data)
-	{
-		if(!data)
-		{
-			return false;
-		}
-
-		data.parent.removeContextBranch(data.branch);
-	});
-
-	var parser = new LayoutParser();
-
-	/**
-	 * LayoutBuilder
-	 *
-	 * This will build JSON layouts.
-	 *
-	 * @class
-	 * @augments base.htmlBuilder
-	 */
-	var LayoutBuilder = base.htmlBuilder.extend(
-	{
-		/**
-		 * This will create a new element.
-		 *
-		 * @override
-		 * @param {string} nodeName The node name.
-		 * @param {object} attrObject The node attributes.
-		 * @param {object} container The node container.
-		 * @param {object} parent
-		 * @return {object} The new element.
-		 */
-		create: function(nodeName, attrObject, container, parent)
-		{
-			var obj = document.createElement(nodeName);
-			this._addElementAttrs(obj, attrObject, parent);
-			this.append(container, obj);
-			return obj;
-		},
-
-		/**
-		 * This will add the element attributes.
-		 *
-		 * @protected
-		 * @param {object} obj
-		 * @param {object} attrObject
-		 * @param {object} parent
-		 */
-		_addElementAttrs: function(obj, attrObject, parent)
-		{
-			/* we want to check if we have attrributes to add */
-			if(!attrObject || typeof attrObject !== 'object')
-			{
-				return false;
-			}
-
-			/* we need to add the type if set to stop ie
-			from removing the value if set after the value is
-			added */
-			var type = attrObject.type;
-			if(typeof type !== 'undefined')
-			{
-				base.setAttr(obj, 'type', type);
-			}
-
-			/* we want to add each attr to the obj */
-			for(var prop in attrObject)
-			{
-				/* we have already added the type so we need to
-				skip if the prop is type */
-				if(attrObject.hasOwnProperty(prop) === false || prop === 'type')
-				{
-					continue;
-				}
-
-				var attrPropValue = attrObject[prop];
-
-				/* we want to check to add the attr settings
-				 by property name */
-				if(prop === 'innerHTML')
-				{
-					obj.innerHTML = attrPropValue;
-				}
-				else if(prop.indexOf('-') !== -1)
-				{
-					// this will handle data and aria attributes
-					base.setAttr(obj, prop, attrPropValue);
-				}
-				else
-				{
-					this.addAttr(obj, prop, attrPropValue, parent);
-				}
-			}
-		},
-
-		/**
-		 * This will add an element attribute.
-		 *
-		 * @param {object} obj
-		 * @param {object} attr
-		 * @param {string} value
-		 */
-		addAttr: function(obj, attr, value, parent)
-		{
-			if(value === '' || !attr)
-			{
-				return false;
-			}
-
-			/* we want to check to add a value or an event listener */
-			var type = typeof value;
-			if(type === 'function')
-			{
-				/* this will add the event using the base events
-				so the event is tracked */
-				attr = removeEventPrefix(attr);
-				base.addListener(attr, obj, function(e)
-				{
-					value.call(this, e, parent);
-				});
-			}
-			else
-			{
-				var attrName = normalizeAttr(attr);
-				obj[attrName] = value;
-			}
-		},
-
-		/**
-		 * This will render a function/Unit/Component.
-		 *
-		 * @param {object|function} layout
-		 * @param {object} container
-		 * @param {object} [parent]
-		 * @returns {object} The layout Unit or Component
-		 */
-		render: function(layout, container, parent)
-		{
-			if(!layout)
-			{
-				return;
-			}
-
-			switch(typeof layout)
-			{
-				case 'object':
-					if(layout.isUnit === true)
-					{
-						this.createComponent(layout, container, parent);
-						return layout;
-					}
-				default:
-					var component = Jot(layout);
-					var jot = new component();
-					this.createComponent(jot, container, parent);
-					return jot;
-			}
-		},
-
-		/**
-		 * This will build a JSON layout.
-		 *
-		 * @param {object} obj The JSON layout.
-		 * @param {object} [container] The parent receiving the layout.
-		 * @param {object} [parent] The component adding the layout.
-		 * @return {object} The doc Frag element.
-		 */
-		build: function(obj, container, parent)
-		{
-			var fragment = this.createDocFragment();
-
-			if (base.isArray(obj))
-			{
-				var item;
-				for (var i = 0, length = obj.length; i < length; i++)
-				{
-					item = obj[i];
-					this.buildElement(item, fragment, parent);
-				}
-			}
-			else
-			{
-				this.buildElement(obj, fragment, parent);
-			}
-
-			if(container && typeof container === 'object')
-			{
-				container.appendChild(fragment);
-			}
-			return fragment;
-		},
-
-		/**
-		 * This will build an element or component.
-		 *
-		 * @param {object} obj
-		 * @param {object} container
-		 * @param {object} [parent] The component adding the layout.
-		 */
-		buildElement: function(obj, container, parent)
-		{
-			if(!obj)
-			{
-				return;
-			}
-
-			if(obj.component || obj.isUnit === true)
-			{
-				this.createComponent(obj, container, parent);
-			}
-			else
-			{
-				this.createElement(obj, container, parent);
-			}
-		},
-
-		/**
-		 * This will append a child element to a parent.
-		 *
-		 * @override
-		 * @param {object} parent
-		 * @param {object} child
-		 */
-		append: function(parent, child)
-		{
-			parent.appendChild(child);
-		},
-
-		/**
-		 * This will create an element.
-		 *
-		 * @protected
-		 * @param {object} obj
-		 * @param {object} container
-		 * @param {object} [parent] The component adding the layout.
-		 */
-		createElement: function(obj, container, parent)
-		{
-			var settings = parser.parseElement(obj);
-			var ele = this.createNode(settings, container, parent);
-
-			var propName = obj.cache;
-			if(parent && propName)
-			{
-				parent[propName] = ele;
-			}
-
-			/* we want to recursively add the children to
-			the new element */
-			var children = settings.children;
-			if (children.length > 0)
-			{
-				var child;
-				for (var i = 0, length = children.length; i < length; i++)
-				{
-					child = children[i];
-					if(child === null)
-					{
-						continue;
-					}
-
-					this.buildElement(child, ele, parent);
-				}
-			}
-
-			this.addElementDirectives(ele, obj, parent);
-		},
-
-		/**
-		 * This will add the element directives.
-		 *
-		 * @param {object} ele
-		 * @param {object} obj
-		 * @param {object} [parent]
-		 */
-		addElementDirectives: function(ele, obj, parent)
-		{
-			if(typeof obj.onCreated === 'function')
-			{
-				obj.onCreated(ele, parent);
-			}
-
-			/* this will check to bind the element to
-			the prop of a data */
-			var bind = obj.bind;
-			if(bind)
-			{
-				this.bindElement(ele, bind, parent);
-			}
-
-			if(obj.route)
-			{
-				this.addRoute(ele, obj.route, parent);
-			}
-
-			if(obj.switch)
-			{
-				this.addSwitch(ele, obj.switch, parent);
-			}
-
-			if(obj.html)
-			{
-				this.addHtml(ele, obj.html);
-			}
-
-			if(obj.useContext)
-			{
-				this.useContext(ele, obj.useContext, parent);
-			}
-
-			if(obj.addContext)
-			{
-				this.addContext(ele, obj.addContext, parent);
-			}
-
-			if(obj.context)
-			{
-				this.context(ele, obj.context, parent);
-			}
-
-			if(obj.role)
-			{
-				this.addRole(ele, obj.role, parent);
-			}
-
-			if(obj.aria)
-			{
-				this.addAria(ele, obj.aria, parent);
-			}
-
-			if(parent)
-			{
-				var onState = obj.onState;
-				if(onState && onState.length)
-				{
-					this.onState(ele, onState, parent);
-				}
-
-				var onSet = obj.onSet;
-				if(onSet && onSet.length)
-				{
-					this.onSet(ele, onSet, parent);
-				}
-
-				var map = obj.map;
-				if(map && map.length)
-				{
-					this.map(ele, map, parent);
-				}
-
-				var forBind = obj.for;
-				if(forBind && forBind.length)
-				{
-					this.for(ele, forBind, parent);
-				}
-
-				var useParent = obj.useParent;
-				if(useParent)
-				{
-					this.useParent(ele, useParent, parent);
-				}
-
-				var useData = obj.useData;
-				if(useData)
-				{
-					this.useData(ele, useData, parent);
-				}
-
-				var useState = obj.useState;
-				if(useState)
-				{
-					this.useState(ele, useState, parent);
-				}
-
-				var addState = obj.addState;
-				if(addState)
-				{
-					this.addState(ele, addState, parent);
-				}
-			}
-
-			if(obj.watch)
-			{
-				this.watch(ele, obj.watch, parent);
-			}
-		},
-
-		/**
-		 * This will get the data source from the parent component.
-		 *
-		 * @protected
-		 * @param {object} parent
-		 * @return {(object|boolean)}
-		 */
-		_getDataSource: function(parent)
-		{
-			if(!parent)
-			{
-				return false;
-			}
-
-			if(parent.data)
-			{
-				return parent.data;
-			}
-
-			if(parent.context && parent.context.data)
-			{
-				return parent.context.data;
-			}
-
-			if(parent.state)
-			{
-				return parent.state;
-			}
-
-			return false;
-		},
-
-		/**
-		 * This will bind an element to data.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {(string|array)} bind
-		 * @param {*} parent
-		 */
-		bindElement: function(ele, bind, parent)
-		{
-			var data, prop, filter;
-
-			if(typeof bind === 'string')
-			{
-				data = this._getDataSource(parent);
-				if(!data)
-				{
-					return false;
-				}
-
-				prop = bind;
-			}
-			else
-			{
-				if(typeof bind[0] !== 'object')
-				{
-					var dataSource = this._getDataSource(parent);
-					if(!dataSource)
-					{
-						return false;
-					}
-					else
-					{
-						bind.unshift(dataSource);
-					}
-				}
-
-				data = bind[0];
-				prop = bind[1];
-				filter = bind[2];
-			}
-
-			base.DataBinder.bind(ele, data, prop, filter);
-		},
-
-		/**
-		 * This will add a route.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {(object|array)} route
-		 * @param {object} parent
-		 */
-		addRoute: function(ele, route, parent)
-		{
-			if(!route)
-			{
-				return false;
-			}
-
-			if(base.isArray(route))
-			{
-				for(var i = 0, length = route.length; i < length; i++)
-				{
-					this.setupRoute(ele, route[i], parent);
-				}
-			}
-			else
-			{
-				this.setupRoute(ele, route, parent);
-			}
-		},
-
-		/**
-		 * This will setup a route.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {object} route
-		 * @param {object} parent
-		 */
-		setupRoute: function(ele, route, parent)
-		{
-			// this will check to resume route
-			// if(this.checkResume(route))
-			// {
-			// 	this.resumeRoute(ele, route.component.route);
-			// 	return;
-			// }
-
-			route.container = ele;
-			route.parent = parent;
-			var newRoute = base.router.add(route);
-
-			this.trackRoute(ele, newRoute);
-		},
-
-		/**
-		 * This will check to resume route.
-		 *
-		 * @param {object} route
-		 */
-		checkResume: function(route)
-		{
-			return (route && route.component && route.component.route);
-		},
-
-		/**
-		 * This will resume a route.
-		 *
-		 * @param {object} ele
-		 * @param {object} route
-		 */
-		resumeRoute: function(ele, route)
-		{
-			base.router.resume(route, ele);
-
-			this.trackRoute(ele, route);
-		},
-
-		/**
-		 * This will track a route.
-		 *
-		 * @param {object} ele
-		 * @param {object} route
-		 */
-		trackRoute: function(ele, route)
-		{
-			base.DataTracker.add(ele, 'routes',
-			{
-				route: route
-			});
-		},
-
-		/**
-		 * This will add a switch.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {array} group
-		 * @param {object} parent
-		 */
-		addSwitch: function(ele, group, parent)
-		{
-			var route = group[0];
-			// this will check to resume switch
-			// if(this.checkResume(route))
-			// {
-			// 	this.resumeSwitch(ele, group);
-			// 	return;
-			// }
-
-			for(var i = 0, length = group.length; i < length; i++)
-			{
-				route = group[i];
-				route.container = ele;
-				route.parent = parent;
-			}
-
-			var id = base.router.addSwitch(group);
-			this.trackSwitch(ele, id);
-		},
-
-		resumeSwitch: function(ele, group)
-		{
-			var id = base.router.resumeSwitch(group, ele);
-			this.trackSwitch(ele, id);
-		},
-
-		/**
-		 * This will track a switch.
-		 *
-		 * @param {object} ele
-		 * @param {int} id
-		 */
-		trackSwitch: function(ele, id)
-		{
-			base.DataTracker.add(ele, 'switch',
-			{
-				id: id
-			});
-		},
-
-		/**
-		 * This will add aria attributes.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {array} role
-		 * @param {object} parent
-		 */
-		addRole: function(ele, role, parent)
-		{
-			if(!role)
-			{
-				return;
-			}
-
-			if(role)
-			{
-				base.setAttr(ele, 'role', role);
-			}
-		},
-
-		/**
-		 * This will add aria attributes.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {array} attributes
-		 * @param {object} parent
-		 */
-		addAria: function(ele, attributes, parent)
-		{
-			if(!attributes)
-			{
-				return;
-			}
-
-			var role = attributes.role;
-			if(role)
-			{
-				base.setAttr(ele, 'role', role);
-				attributes.role = null;
-			}
-
-			/**
-			 * This will setup the onSet callBack.
-			 *
-			 * @param {string} attr
-			 * @return {function}
-			 */
-			var onSetCallBack = function(attr)
-			{
-				return function(ele, val)
-				{
-					var text = (val)? "true" : "false";
-					base.setAttr(ele, attr, text);
-				};
-			};
-
-			for(var prop in attributes)
-			{
-				if(attributes.hasOwnProperty(prop) === false || attributes[prop] === null)
-				{
-					continue;
-				}
-
-				var value = attributes[prop];
-				var attr = 'aria-' + prop;
-
-				/* this will setup an onSet to change the attr value
-				when the data chnages. */
-				if(Array.isArray(value))
-				{
-					value.push(onSetCallBack(attr));
-					this.onSet(ele, value, parent);
-				}
-				else
-				{
-					base.setAttr(ele, attr, value);
-				}
-			}
-		},
-
-		/**
-		 * This will get the parent context.
-		 *
-		 * @param {object|null} parent
-		 * @returns {object|null}
-		 */
-		getParentContext: function(parent)
-		{
-			return (!parent)? null : parent.getContext();
-		},
-
-		/**
-		 * This will set the context attributes.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {function} context
-		 * @param {object} [parent]
-		 */
-		context: function(ele, context, parent)
-		{
-			if(typeof context !== 'function')
-			{
-				return;
-			}
-
-			var parentContext = this.getParentContext(parent);
-			var attributes = context(parentContext);
-			if(!attributes)
-			{
-				return;
-			}
-
-			this._addElementAttrs(ele, attributes, parent);
-			this.addElementDirectives(ele, attributes, parent);
-		},
-
-		/**
-		 * This will use the parent context.
-		 *
-		 * @param {object} ele
-		 * @param {function} callBack
-		 * @param {object} [parent]
-		 * @returns {void}
-		 */
-		useContext: function(ele, callBack, parent)
-		{
-			if(typeof callBack !== 'function')
-			{
-				return;
-			}
-
-			var parentContext = this.getParentContext(parent);
-			callBack(parentContext);
-		},
-
-		/**
-		 * This will add context the parent context.
-		 *
-		 * @param {object} ele
-		 * @param {array} callBack
-		 * @param {object} [parent]
-		 * @returns {void}
-		 */
-		addContext: function(ele, callBack, parent)
-		{
-			if(typeof callBack !== 'function' || !parent)
-			{
-				return;
-			}
-
-			var parentContext = this.getParentContext(parent);
-			var childContext = callBack(parentContext);
-			if(!childContext)
-			{
-				return;
-			}
-
-			parent.addContextBranch(childContext[0], childContext[1]);
-		},
-
-		/**
-		 * This will track the child context on the element.
-		 *
-		 * @param {object} ele
-		 * @param {string} branchName
-		 * @param {object} parent
-		 */
-		trackContext: function(ele, branchName, parent)
-		{
-			base.DataTracker.add(ele, 'context',
-			{
-				branch: branchName,
-				parent: parent
-			});
-		},
-
-		/**
-		 * This will add a watcher.
-		 *
-		 * @protected
-		 * @param {object} ele
-		 * @param {(array|object)} watcher
-		 * @param {object} [parent]
-		 */
-		watch: function(ele, watcher, parent)
-		{
-			if(!watcher)
-			{
-				return false;
-			}
-
-			if(base.isArray(watcher) && typeof watcher[0] !== 'string')
-			{
-				for(var i = 0, length = watcher.length; i < length; i++)
-				{
-					WatcherHelper.setup(ele, watcher[i], parent);
-				}
-			}
-			else
-			{
-				WatcherHelper.setup(ele, watcher, parent);
-			}
-		},
-
-		/**
-		 * This will pass the parent state to the callBack.
-		 *
-		 * @param {object} ele
-		 * @param {function} callBack
-		 * @param {object} parent
-		 */
-		useParent: function(ele, callBack, parent)
-		{
-			if(!callBack || !parent)
-			{
-				return false;
-			}
-
-			callBack(parent, ele);
-		},
-
-		/**
-		 * This will pass the parent state to the callBack.
-		 *
-		 * @param {object} ele
-		 * @param {function} callBack
-		 * @param {object} parent
-		 */
-		useData: function(ele, callBack, parent)
-		{
-			if(!callBack || !parent)
-			{
-				return false;
-			}
-
-			callBack(parent.data, ele);
-		},
-
-		/**
-		 * This will pass the parent state to the callBack.
-		 *
-		 * @param {object} ele
-		 * @param {function} callBack
-		 * @param {object} parent
-		 */
-		useState: function(ele, callBack, parent)
-		{
-			if(!callBack || !parent)
-			{
-				return false;
-			}
-
-			callBack(parent.state, ele);
-		},
-
-		/**
-		 * This will pass the parent state to the callBack.
-		 *
-		 * @param {object} ele
-		 * @param {function} callBack
-		 * @param {object} parent
-		 */
-		addState: function(ele, callBack, parent)
-		{
-			if(!callBack || !parent)
-			{
-				return false;
-			}
-
-			if(parent.stateHelper)
-			{
-				var state = parent.state;
-				var states = callBack(state);
-				parent.stateHelper.addStates(states);
-			}
-		},
-
-		/**
-		 * This will map children to the element.
-		 *
-		 * @param {object} ele
-		 * @param {array} settings
-		 * @param {object} parent
-		 */
-		map: function(ele, settings, parent)
-		{
-			var items = settings[0];
-			if(!items || items.length < 1)
-			{
-				return;
-			}
-
-			var item = settings[1];
-			var children = [];
-			for(var i = 0, length = items.length; i < length; i++)
-			{
-				var row = items[i];
-				if(!row)
-				{
-					continue;
-				}
-
-				var layout = item(row, i);
-				if(layout === null)
-				{
-					continue;
-				}
-
-				children.push(layout);
-			}
-
-			return this.build(children, ele, parent);
-		},
-
-		/**
-		 * This will watch a data attr and update the
-		 * children to the element when the attr value is updated.
-		 *
-		 * @param {object} ele
-		 * @param {array} settings
-		 * @param {object} parent
-		 */
-		for: function(ele, settings, parent)
-		{
-			var data, prop, item, scope;
-
-			if(settings.length < 3)
-			{
-				var parentData = this.getParentSetData(parent);
-				if(!parentData)
-				{
-					return;
-				}
-
-				data = parentData;
-				prop = settings[0];
-				item = settings[1];
-				scope = settings[2];
-			}
-			else
-			{
-				data = settings[0];
-				prop = settings[1];
-				item = settings[2];
-				scope = settings[3];
-			}
-
-			var scopeData = (scope !== false);
-			var self = this;
-			base.DataBinder.watch(ele, data, prop, function(items)
-			{
-				self.removeAll(ele);
-				if(!items || items.length < 1)
-				{
-					return;
-				}
-
-				var children = [];
-				for(var i = 0, length = items.length; i < length; i++)
-				{
-					var scoped = (scopeData)? data.scope(prop + '[' + i + ']') : null;
-					var layout = item(items[i], i, scoped);
-					if(layout === null)
-					{
-						continue;
-					}
-
-					children.push(layout);
-				}
-
-				return self.build(children, ele, parent);
-			});
-		},
-
-		/**
-		 * This will add an onState watcher.
-		 *
-		 * @param {object} ele
-		 * @param {array} onState
-		 * @param {object} parent
-		 */
-		onState: function(ele, onState, parent)
-		{
-			this.onUpdate(ele, parent.state, onState, parent);
-		},
-
-		/**
-		 * This will get the parent set data.
-		 *
-		 * @param {object} parent
-		 * @returns {object|null}
-		 */
-		getParentSetData: function(parent)
-		{
-			if(parent.data)
-			{
-				return parent.data;
-			}
-
-			if(parent.context && parent.context.data)
-			{
-				return parent.context.data;
-			}
-
-			return null;
-		},
-
-		/**
-		 * This will add an onSet watcher.
-		 *
-		 * @param {object} ele
-		 * @param {array} onSet
-		 * @param {object} parent
-		 */
-		onSet: function(ele, onSet, parent)
-		{
-			var data = this.getParentSetData(parent);
-			this.onUpdate(ele, data, onSet, parent);
-		},
-
-		/**
-		 * This will setup a data watcher.
-		 *
-		 * @param {object} ele
-		 * @param {object} data
-		 * @param {string} prop
-		 * @param {(function|object)} callBack
-		 * @param {string} parent
-		 */
-		onUpdate: function(ele, data, settings, parent)
-		{
-			var prop,
-			self = this,
-			callBack, update;
-
-			if(base.isArray(settings[0]))
-			{
-				for(var i = 0, maxLength = settings.length; i < maxLength; i++)
-				{
-					var itemSettings = settings[i];
-					if(!itemSettings)
-					{
-						continue;
-					}
-
-					this.onUpdate(ele, data, itemSettings, parent);
-				}
-				return;
-			}
-
-			if(settings.length < 3)
-			{
-				prop = settings[0];
-				callBack = settings[1];
-			}
-			else
-			{
-				data = settings[0];
-				prop = settings[1];
-				callBack = settings[2];
-			}
-
-			if(!data || !prop)
-			{
-				return false;
-			}
-
-			switch(typeof callBack)
-			{
-				case 'object':
-					update = function(value)
-					{
-						self.addClass(ele, callBack, value);
-					};
-					break;
-				case 'function':
-					update = function(value)
-					{
-						self.updateElement(ele, callBack, prop, value, parent);
-					};
-					break;
-			}
-
-			base.DataBinder.watch(ele, data, prop, update);
-		},
-
-		/**
-		 * This will setup a data watcher.
-		 *
-		 * @private
-		 * @param {object} ele
-		 * @param {function} callBack
-		 * @param {string} value
-		 * @param {string} parent
-		 */
-		updateElement: function(ele, callBack, prop, value, parent)
-		{
-			var result = callBack(ele, value, parent);
-			switch(typeof result)
-			{
-				case 'object':
-					if(parent && result && result.isUnit === true && parent.persist === true && parent.state)
-					{
-						var key = prop + ':' + value,
-						state = parent.state,
-						previousResult = state.get(key);
-						if(typeof previousResult !== 'undefined')
-						{
-							result = previousResult;
-						}
-
-						state.set(key, result);
-					}
-					this.rebuild(ele, result, parent);
-					break;
-				case 'string':
-					this.addHtml(ele, result);
-					break;
-			}
-		},
-
-		/**
-		 * This will add or remove a class from an element.
-		 *
-		 * @param {object} ele
-		 * @param {object} stateStyles
-		 * @param {*} newValue
-		 */
-		addClass: function(ele, stateStyles, newValue)
-		{
-			for(var prop in stateStyles)
-			{
-				if(!stateStyles.hasOwnProperty(prop) || !prop)
-				{
-					continue;
-				}
-
-				if(stateStyles[prop] === newValue)
-				{
-					base.addClass(ele, prop);
-				}
-				else
-				{
-					base.removeClass(ele, prop);
-				}
-			}
-		},
-
-		/**
-		 * This will reset an element innerHTML and rebuild.
-		 *
-		 * @private
-		 * @param {object} ele
-		 * @param {object} layout
-		 * @param {object} parent
-		 */
-		rebuild: function(ele, layout, parent)
-		{
-			this.removeAll(ele);
-			this.build(layout, ele, parent);
-		},
-
-		/**
-		 * This will create a component.
-		 *
-		 * @protected
-		 * @param {object} obj
-		 * @param {object} container
-		 * @param {object} parent
-		 */
-		createComponent: function(obj, container, parent)
-		{
-			// this will allow both cached components or native components
-			var component = obj.component || obj;
-			component.parent = parent;
-
-			if(parent && parent.persist === true && component.persist !== false)
-			{
-				component.persist = true;
-			}
-
-			if(component.cacheable && parent)
-			{
-				parent[component.cacheable] = component;
-			}
-
-			component.setup(container);
-
-			if(obj.component && typeof obj.onCreated === 'function')
-			{
-				obj.onCreated(component);
-			}
-		},
-
-		/**
-		 * This will create a node.
-		 *
-		 * @param {object} settings
-		 * @param {object} container
-		 * @param {object} parent
-		 * @return {object}
-		 */
-		createNode: function(settings, container, parent)
-		{
-			var tag = settings.tag;
-			if(tag !== 'text')
-			{
-				return this.create(tag, settings.attr, container, parent);
-			}
-
-			var attr = settings.attr;
-			var text = attr.textContent || attr.text;
-			return this.createTextNode(text, container);
-		}
-	});
-
-	var builder = base.extend.builder = new LayoutBuilder();
-
-	/**
-	 * This will build a JSON layout.
-	 *
-	 * @param {object} obj
-	 * @param {object} [container]
-	 * @param {object} [parent]
-	 * @return {object}
-	 */
-	base.extend.buildLayout = function(obj, container, parent)
-	{
-		builder.build(obj, container, parent);
-	};
-})(this);