@base-framework/base 2.6.0

package/modules/layout/layout-parser.js

@@ -0,0 +1,134 @@
+/**
+ * LayoutParser
+ *
+ * This will parse JSON layouts.
+ * @class
+ */
+export class LayoutParser
+{
+	constructor()
+	{
+		/**
+		 * @member {array} _reserved
+		 * @protected
+		 */
+		this._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(obj)
+	{
+		let type = 'div',
+		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(obj)
+	{
+		if(obj.nest)
+		{
+			obj.children = obj.nest;
+			obj.nest = null;
+		}
+	}
+
+	/**
+	 * This will parse a layout element.
+	 *
+	 * @param {object} obj
+	 * @return {object}
+	 */
+	parseElement(obj)
+	{
+		let attr = {},
+		children = [];
+
+		let tag = this.getElementTag(obj);
+		if(tag === 'button')
+		{
+			attr.type = attr.type || 'button';
+		}
+
+		this.setupChildren(obj);
+		const reserved = this._reserved;
+
+		for (var key in obj)
+		{
+			if (obj.hasOwnProperty(key))
+			{
+				var value = obj[key];
+				if (value === undefined || value === null)
+				{
+					continue;
+				}
+
+				if (reserved.indexOf(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,
+			attr,
+			children
+		};
+	}
+}

package/modules/layout/watcher-helper.js

@@ -0,0 +1,282 @@
+import {base} from '../../core.js';
+import {dataBinder} from '../data-binder/data-binder.js';
+
+const WATCHER_PATTERN = /(\[\[(.*?)\]\])/g;
+
+/**
+ * WatcherHelper
+ *
+ * This helper creates watcher callBacks, parses watcher strings
+ * and sets up watchers.
+ */
+export const WatcherHelper =
+{
+	/**
+	 * This will get the property names to be watched.
+	 *
+	 * @protected
+	 * @param {string} string
+	 * @return {(array|null)}
+	 */
+	_getWatcherProps(string)
+	{
+		let pattern = /\[\[(.*?)\]\]/g,
+		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(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 {(string|array)} data
+	 * @param {string} string
+	 * @param {string} attr
+	 * @param {boolean} isArray
+	 * @return {function}
+	 */
+	_getWatcherCallBack(ele, data, string, attr, isArray)
+	{
+		return () =>
+		{
+			let count = 0,
+			value = string.replace(WATCHER_PATTERN, function()
+			{
+				let watcherData = (isArray)? data[count] : data;
+				count++;
+
+				let result = watcherData.get(arguments[2]);
+				return (typeof result !== 'undefined'? result : '');
+			});
+			this.updateAttr(ele, attr, value);
+		};
+	},
+
+	/**
+	 * This will get the parent data.
+	 *
+	 * @param {object} parent
+	 * @returns {object|null}
+	 */
+	getParentData(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(settings, parent)
+	{
+		if(typeof settings === 'string')
+		{
+			settings =
+			{
+				value: settings
+			};
+		}
+
+		let value = settings.value;
+		if(Array.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(data, props, isArray)
+	{
+		let 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(settings, ele, data, string, isDataArray)
+	{
+		let callBack,
+		overrideCallBack = settings.callBack;
+		if(typeof overrideCallBack === 'function')
+		{
+			let props = string.match(WATCHER_PATTERN);
+			let isMultiProp = (props && props.length > 1);
+			callBack = (value, committer) =>
+			{
+				value = (isMultiProp !== true)? value : this.getPropValues(data, props, isDataArray);
+				overrideCallBack(ele, value, committer);
+			};
+		}
+		else
+		{
+			let 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(ele, settings, parent)
+	{
+		let value = this.getValue(settings, parent),
+		data = value[1];
+		if(!data)
+		{
+			return;
+		}
+
+		let string = value[0],
+		isDataArray = Array.isArray(data);
+
+		let callBack = this.getCallBack(settings, ele, data, string, isDataArray),
+		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(ele, settings, parent)
+	{
+		if(!settings)
+		{
+			return;
+		}
+
+		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(ele, data, prop, callBack)
+	{
+		dataBinder.watch(ele, data, prop, callBack);
+	}
+};

package/modules/mouse/mouse.js

@@ -0,0 +1,114 @@
+import {base} from '../../core.js';
+
+/**
+ * Mouse
+ *
+ * This will create a mouse event object.
+ * @class
+ */
+export class Mouse
+{
+	/**
+	 * @contrustor
+	 * @param {string} [mode]
+	 * @param {function} [callBackFn]
+	 * @param {object} [obj]
+	 * @param {boolean} [capture]
+	 */
+	constructor(mode, callBackFn, obj, capture)
+	{
+		/* this will store the mouse position */
+		this.position = { x: null, y: null };
+		this.callBackFn = callBackFn;
+		this.obj = obj || window;
+		this.capture = capture || false;
+
+		/* the mouse can be tracked by different modes
+		and this will control the tracking position mode */
+		this.mode = mode || 'page';
+	}
+
+	/**
+	 * This will update the mode.
+	 *
+	 * @param {string} mode
+	 */
+	updateMode(mode)
+	{
+		let selectedMode = 'page';
+
+		switch(mode)
+		{
+			case 'client':
+			case 'screen':
+				selectedMode = mode;
+				break;
+		}
+
+		this.mode = selectedMode;
+	}
+
+	/**
+	 * This will update the position.
+	 *
+	 * @param {object} e
+	 * @return {object}
+	 */
+	updatePosition(e)
+	{
+		let x, y;
+
+		if(e)
+		{
+			/* we need to check if the mode is set to
+			client or return page position */
+			switch(this.mode)
+			{
+				case 'client':
+				case 'screen':
+					x = e.clientX || e.pageX;
+					y = e.clientY || e.pageY;
+					break;
+				default:
+					x = e.pageX;
+					y = e.pageY;
+			}
+		}
+
+		return {
+			y,
+			x
+		};
+	}
+
+	/**
+	 * This will start tracking.
+	 */
+	start()
+	{
+		let callBackFn = this.callBackFn;
+		/* we want to update mouse position and
+		standardize the return */
+		const mouseResults = (e) =>
+		{
+			let position = this.position = this.updatePosition(e);
+
+			/* we can now send the mouse wheel results to
+			the call back function */
+			if(typeof callBackFn === 'function')
+			{
+				callBackFn.call(position, e);
+			}
+		};
+
+		base.events.add('mousemove', this.obj, mouseResults, this.capture, true, callBackFn);
+	}
+
+	/**
+	 * This will stop tracking.
+	 */
+	stop()
+	{
+		base.off('mousemove', this.obj, this.callBackFn, this.capture);
+	}
+}

package/modules/router/component-helper.js

@@ -0,0 +1,163 @@
+import { builder } from "../layout/layout-builder.js";
+
+/**
+ * ComponentHelper
+ *
+ * This will create a helper to create and destroy components
+ * that are added to a route.
+ * @class
+ */
+export class ComponentHelper
+{
+	/**
+	 * @constructor
+	 * @param {object} route
+	 * @param {object} settings
+	 */
+	constructor(route, settings)
+	{
+		this.route = route;
+
+		this.template = settings.component;
+		this.component = null;
+		this.hasTemplate = false;
+
+		this.setup = false;
+		this.container = settings.container;
+		this.persist = settings.persist;
+		this.parent = settings.parent;
+
+		this.setupTemplate();
+	}
+
+	/**
+	 * This will create the component.
+	 *
+	 * @param {object} params
+	 */
+	focus(params)
+	{
+		if(this.setup === false)
+		{
+			this.create();
+		}
+
+		this.update(params);
+	}
+
+	/**
+	 * This will setup the template.
+	 * @protected
+	 */
+	setupTemplate()
+	{
+		let template = this.template;
+		if(typeof template === 'string')
+		{
+			template = this.template = window[template];
+			if(!template)
+			{
+				return;
+			}
+		}
+
+		let type = typeof template;
+		if(type === 'function')
+		{
+			this.component = new this.template({
+				route: this.route,
+				persist: this.persist,
+				parent: this.parent
+			});
+		}
+		else if(type === 'object')
+		{
+			if(!this.template.isUnit)
+			{
+				this.template = Jot(this.template);
+			}
+
+			let comp = this.component = this.template;
+			let persist = (comp.persist !== false);
+
+			comp.route = this.route;
+			comp.persist = persist;
+			comp.parent = this.parent;
+			this.persist = persist;
+		}
+
+		this.hasTemplate = true;
+	}
+
+	/**
+	 * This will create the route component.
+	 * @protected
+	 */
+	create()
+	{
+		if(!this.hasTemplate)
+		{
+			return false;
+		}
+
+		this.setup = true;
+
+		let comp = this.component;
+		if(!this.persist || !comp)
+		{
+			comp = this.component = this.template;
+		}
+
+		builder.render(comp, this.container, this.parent);
+	}
+
+	/**
+	 * This will remove the component.
+	 */
+	remove()
+	{
+		if(this.setup !== true)
+		{
+			return false;
+		}
+
+		this.setup = false;
+
+		let component = this.component;
+		if(!component)
+		{
+			return false;
+		}
+
+		if(typeof component.destroy === 'function')
+		{
+			component.destroy();
+		}
+
+		// this will remove the reference to the component if persit is false
+		if(this.persist === false)
+		{
+			this.component = null;
+		}
+	}
+
+	/**
+	 * This will call the component update method and pass the params.
+	 *
+	 * @protected
+	 * @param {object} params
+	 */
+	update(params)
+	{
+		let component = this.component;
+		if(!component)
+		{
+			return false;
+		}
+
+		if(typeof component.update === 'function')
+		{
+			component.update(params);
+		}
+	}
+}