@base-framework/base 2.6.0 → 2.6.1

package/es6/modules/data-binder/connection-tracker.js

@@ -0,0 +1,113 @@
+import {base} from '../../core.js';
+
+/**
+ * ConnectionTracker
+ *
+ * This will create a new connection tracker to track active
+ * connections in the data binder.
+ * @class
+ */
+export class ConnectionTracker
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		/**
+		 * @member {object} connections
+		 */
+		this.connections = {};
+	}
+
+	/**
+	 * This will add a new connection to be tracked.
+	 *
+	 * @param {string} id
+	 * @param {string} attr
+	 * @param {object} connection
+	 * @return {object}
+	 */
+	add(id, attr, connection)
+	{
+		let connections = this.find(id);
+		return (connections[attr] = connection);
+	}
+
+	/**
+	 * This will get a connection.
+	 *
+	 * @param {string} id
+	 * @param {string} attr
+	 * @return {(object|bool)}
+	 */
+	get(id, attr)
+	{
+		let connections = this.connections[id];
+		if(connections)
+		{
+			return (connections[attr] || false);
+		}
+		return false;
+	}
+
+	/**
+	 * This will find a connection.
+	 *
+	 * @param {string} id
+	 * @return {object}
+	 */
+	find(id)
+	{
+		let connections = this.connections;
+		return (connections[id] || (connections[id] = {}));
+	}
+
+	/**
+	 * This will remove a connection or all connections by id.
+	 * @param {string} id
+	 * @param {string} [attr]
+	 */
+	remove(id, attr)
+	{
+		let connections = this.connections[id];
+		if(!connections)
+		{
+			return false;
+		}
+
+		let connection;
+		if(attr)
+		{
+			connection = connections[attr];
+			if(connection)
+			{
+				connection.unsubscribe();
+				delete connections[attr];
+			}
+
+			/* this will remove the msg from the elements
+			if no elements are listed under the msg */
+			if(base.isEmpty(connections))
+			{
+				delete this.connections[id];
+			}
+		}
+		else
+		{
+			for(var prop in connections)
+			{
+				if(connections.hasOwnProperty(prop))
+				{
+					connection = connections[prop];
+					if(connection)
+					{
+						connection.unsubscribe();
+					}
+				}
+			}
+
+			delete this.connections[id];
+		}
+	}
+}

package/es6/modules/data-binder/connection.js

@@ -0,0 +1,16 @@
+/**
+ * Connection
+ *
+ * This will create a connection.
+ * @class
+ */
+export class Connection
+{
+	/**
+	 * This will be used to unsubscribe.
+	 */
+	unsubscribe()
+	{
+
+	}
+}

package/es6/modules/data-binder/data-binder.js

@@ -0,0 +1,352 @@
+import {base} from '../../core.js';
+export {DataPubSub} from './data-pub-sub.js';
+import {pubSub} from './data-pub-sub.js';
+import {OneWayConnection} from './one-way-connection.js';
+import {TwoWayConnection} from './two-way-connection.js';
+import {ConnectionTracker} from './connection-tracker.js';
+
+/**
+ * DataBinder
+ *
+ * This will create a data binder object that can
+ * create one way and two way data bindings.
+ * @class
+ */
+export class DataBinder
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		this.version = "1.0.1";
+		this.attr = 'bindId';
+
+		/**
+		 * @member {array} blockedKeys
+		 * @protected
+		 */
+		this.blockedKeys = [
+			20, //caps lock
+			37, //arrows
+			38,
+			39,
+			40
+		];
+
+		this.connections = new ConnectionTracker();
+
+		this.idCount = 0;
+		this.setup();
+	}
+
+	/**
+	 * This will setup the events.
+	 * @protected
+	 */
+	setup()
+	{
+		this.setupEvents();
+	}
+
+	/**
+	 * This will bind an element to a data property.
+	 *
+	 * @param {object} element
+	 * @param {object} data
+	 * @param {string} prop
+	 * @param {(string|function)} [filter]
+	 * @return {object} an instance of the databinder.
+	 */
+	bind(element, data, prop, filter)
+	{
+		let bindProp = prop,
+		bindAttr = null;
+
+		if(prop.indexOf(':') !== -1)
+		{
+			/* this will setup the custom attr if the prop
+			has specified one. */
+			let parts = prop.split(':');
+			if(parts.length > 1)
+			{
+				bindProp = parts[1];
+				bindAttr = parts[0];
+			}
+		}
+
+		/* this will setup the model bind attr to the
+		element and assign a bind id attr to support
+		two way binding */
+		let connection = this.setupConnection(element, data, bindProp, bindAttr, filter);
+
+		/* we want to get the starting value of the
+		data and set it on our element */
+		let connectionElement = connection.element,
+		value = data.get(bindProp);
+		if(typeof value !== 'undefined')
+		{
+			connectionElement.set(value);
+		}
+		else
+		{
+			/* this will set the element value
+			as the prop value */
+			value = connectionElement.get();
+			if(value !== '')
+			{
+				connection.data.set(value);
+			}
+		}
+		return this;
+	}
+
+	/**
+	 * This will bind an element to a data property.
+	 *
+	 * @protected
+	 * @param {object} element
+	 * @param {object} data
+	 * @param {string} prop
+	 * @param {string} customAttr
+	 * @param {(string|function)} [filter]
+	 * @return {object} The new connection.
+	 */
+	setupConnection(element, data, prop, customAttr, filter)
+	{
+		let id = this.getBindId(element),
+		connection = new TwoWayConnection(),
+
+		// this will create the data source
+		dataSource = connection.addData(data, prop);
+		// this will subscribe the data to the element
+		dataSource.subscribe(id);
+
+		/* this will add the data binding
+		attr to our element so it will subscribe to
+		the two data changes */
+		let dataId = data.getDataId(),
+		msg = dataId + ':' + prop;
+
+		// this will create the element source
+		let elementSource = connection.addElement(element, customAttr, filter);
+		// this will subscribe the element to the data
+		elementSource.subscribe(msg);
+
+		this.addConnection(id, 'bind', connection);
+
+		return connection;
+	}
+
+	/**
+	 * This will add a new connection to the
+	 * connection tracker.
+	 *
+	 * @protected
+	 * @param {string} id
+	 * @param {string} attr
+	 * @param {object} connection
+	 */
+	addConnection(id, attr, connection)
+	{
+		this.connections.add(id, attr, connection);
+	}
+
+	/**
+	 * This will set the bind id.
+	 *
+	 * @param {object} element
+	 */
+	setBindId(element)
+	{
+		let id = 'db-' + this.idCount++;
+		element.dataset[this.attr] = id;
+		element[this.attr] = id;
+		return id;
+	}
+
+	/**
+	 * This will get the bind id.
+	 *
+	 * @param {object} element
+	 * @return {string}
+	 */
+	getBindId(element)
+	{
+		return element[this.attr] || this.setBindId(element);
+	}
+
+	/**
+	 * This will unbind the element.
+	 *
+	 * @param {object} element
+	 * @return {object} an instance of the data binder.
+	 */
+	unbind(element)
+	{
+		let id = element[this.attr];
+		if(id)
+		{
+			this.connections.remove(id);
+		}
+		return this;
+	}
+
+	/**
+	 * This will setup a watcher for an element.
+	 *
+	 * @param {object} element
+	 * @param {object} data
+	 * @param {string} prop
+	 * @param {function} callBack
+	 */
+	watch(element, data, prop, callBack)
+	{
+		if(!element || typeof element !== 'object')
+		{
+			return false;
+		}
+
+		let connection = new OneWayConnection();
+
+		// this will create the one way source
+		const source = connection.addSource(data);
+		source.subscribe(prop, callBack);
+
+		// this will add the new connection to the connection tracker
+		const id = this.getBindId(element),
+		attr = data.getDataId() + ':' + prop;
+		this.addConnection(id, attr, connection);
+
+		let value = data.get(prop);
+		if(typeof value !== 'undefined')
+		{
+			callBack(value);
+		}
+	}
+
+	/**
+	 * This will remove a watcher from an element.
+	 *
+	 * @param {object} element
+	 * @param {object} data
+	 * @param {string} prop
+	 */
+	unwatch(element, data, prop)
+	{
+		if(!element || typeof element !== 'object')
+		{
+			return false;
+		}
+
+		let id = element[this.attr];
+		if(id)
+		{
+			let attr = data.getDataId() + ':' + prop;
+			this.connections.remove(id, attr);
+		}
+	}
+
+	/**
+	 * This will publish to the pub sub.
+	 *
+	 * @param {string} msg
+	 * @param {*} value
+	 * @param {object} committer
+	 * @return {object} an instance of the data binder.
+	 */
+	publish(msg, value, committer)
+	{
+		pubSub.publish(msg, value, committer);
+		return this;
+	}
+
+	/**
+	 * This will check if an element is bound.
+	 *
+	 * @protected
+	 * @param {object} element
+	 * @return {boolean}
+	 */
+	isDataBound(element)
+	{
+		if(element)
+		{
+			let id = element[this.attr];
+			if(id)
+			{
+				return id;
+			}
+		}
+		return false;
+	}
+
+	isBlocked(evt)
+	{
+		if(evt.type !== 'keyup')
+		{
+			return false;
+		}
+
+		/* this will check to block ctrl, shift or alt +
+		buttons */
+		return (this.blockedKeys.indexOf(evt.keyCode) !== -1);
+	}
+
+	/**
+	 * This is the callBack for the chnage event.
+	 *
+	 * @param {object} evt
+	 */
+	bindHandler(evt)
+	{
+		if(this.isBlocked(evt))
+		{
+			return true;
+		}
+
+		let target = evt.target || evt.srcElement,
+		id = this.isDataBound(target);
+		if(id)
+		{
+			let connection = this.connections.get(id, 'bind');
+			if(connection)
+			{
+				let value = connection.element.get();
+				/* this will publish to the ui and to the
+				model that subscribes to the element */
+				pubSub.publish(id, value, target);
+			}
+		}
+		evt.stopPropagation();
+	}
+
+	/**
+	 * This wil setup the events.
+	 * @protected
+	 */
+	setupEvents()
+	{
+		this.changeHandler = this.bindHandler.bind(this);
+
+		this.addEvents();
+	}
+
+	/**
+	 * This will add the events.
+	 */
+	addEvents()
+	{
+		base.on(["change", "keyup"], document, this.changeHandler, false);
+	}
+
+	/**
+	 * This will remove the events.
+	 */
+	removeEvents()
+	{
+		base.off(["change", "keyup"], document, this.changeHandler, false);
+	}
+}
+
+export const dataBinder = new DataBinder();

package/es6/modules/data-binder/data-pub-sub.js

@@ -0,0 +1,141 @@
+let lastToken = -1;
+
+/**
+ * DataPubSub
+ *
+ * This is a pub sub class to allow subscribers to
+ * listen for updates when published by publishers.
+ * @class
+ */
+export class DataPubSub
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		/**
+		 * @member {object} callBacks
+		 * @protected
+		 */
+		this.callBacks = {};
+
+		/**
+		 * @member {int} lastToken
+		 * @protected
+		 */
+		this.lastToken = -1;
+	}
+
+	/**
+	 * This will get a subscriber array.
+	 *
+	 * @param {string} msg
+	 * @return {array}
+	 */
+	get(msg)
+	{
+		let callBacks = this.callBacks;
+		return (callBacks[msg] || (callBacks[msg] = []));
+	}
+
+	/**
+	 * This will reset pub sub.
+	 */
+	reset()
+	{
+		this.callBacks = {};
+		this.lastToken = -1;
+		lastToken = -1;
+	}
+
+	/**
+	 * This will add a subscriber.
+	 *
+	 * @param {string} msg
+	 * @param {function} callBack
+	 * @return {string} The subscriber token.
+	 */
+	on(msg, callBack)
+	{
+		let token = (++lastToken),
+		list = this.get(msg);
+		list.push({
+			token: token,
+			callBack: callBack
+		});
+		return token;
+	}
+
+	/**
+	 * This will remove a subscriber.
+	 *
+	 * @param {string} msg
+	 * @param {string} token
+	 */
+	off(msg, token)
+	{
+		let list = this.callBacks[msg] || false;
+		if(list === false)
+		{
+			return false;
+		}
+
+		let length = list.length;
+		for (var i = 0; i < length; i++ )
+		{
+			var item = list[i];
+			if(item.token === token)
+			{
+				list.splice(i, 1);
+				break;
+			}
+		}
+	}
+
+	/**
+	 * This will delete a message.
+	 *
+	 * @param {string} msg
+	 */
+	remove(msg)
+	{
+		let callBacks = this.callBacks;
+		if(callBacks[msg])
+		{
+			delete callBacks[msg];
+		}
+	}
+
+	/**
+	 * This will publish a message.
+	 *
+	 * @param {string} msg
+	 * @param {string} value
+	 * @param {object} committer
+	 */
+	publish(msg)
+	{
+		let i, length,
+		list = this.callBacks[msg] || false;
+		if(list === false)
+		{
+			return false;
+		}
+
+		let args = Array.prototype.slice.call(arguments, 1);
+
+		length = list.length;
+		for (i = 0; i < length; i++)
+		{
+			var item = list[i];
+			if(!item)
+			{
+				continue;
+			}
+			item.callBack.apply(this, args);
+		}
+	}
+}
+
+export const pubSub = new DataPubSub();

package/es6/modules/data-binder/data-source.js

@@ -0,0 +1,56 @@
+import {TwoWaySource} from './two-way-source.js';
+
+/**
+ * DataSource
+ *
+ * This will create a data source to use with
+ * a connection.
+ * @class
+ * @augments TwoWaySource
+ */
+export class DataSource extends TwoWaySource
+{
+	/**
+	 * @constructor
+	 * @param {object} data
+	 * @param {string} prop
+	 */
+	constructor(data, prop)
+	{
+		super();
+		this.data = data;
+		this.prop = prop;
+	}
+
+	/**
+	 * This will set the data value.
+	 *
+	 * @param {*} value
+	 */
+	set(value)
+	{
+		this.data.set(this.prop, value);
+	}
+
+	/**
+	 * This will get the data value.
+	 */
+	get()
+	{
+		return this.data.get(this.prop);
+	}
+
+	/**
+	 * The callBack when updated.
+	 *
+	 * @param {*} value
+	 * @param {object} committer
+	 */
+	callBack(value, committer)
+	{
+		if(this.data !== committer)
+		{
+			this.data.set(this.prop, value, committer);
+		}
+	}
+}