@base-framework/base 2.6.0 → 2.6.1

package/es6/legacy/es5/modules/prototypes/data-binder.js

@@ -0,0 +1,1089 @@
+/* base framework module */
+(function()
+{
+	"use strict";
+
+	/**
+	 * DataPubSub
+	 *
+	 * This is a pub sub class to allow subscribers to
+	 * listen for updates when published by publishers.
+	 * @class
+	 */
+	var DataPubSub = base.Class.extend(
+	{
+		/**
+		 * @constructor
+		 */
+		constructor: function()
+		{
+			/**
+			 * @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: function(msg)
+		{
+			var callBacks = this.callBacks;
+			return (callBacks[msg] || (callBacks[msg] = []));
+		},
+
+		/**
+		 * This will reset pub sub.
+		 */
+		reset: function()
+		{
+			this.callBacks = {};
+			this.lastToken = -1;
+		},
+
+		/**
+		 * This will add a subscriber.
+		 *
+		 * @param {string} msg
+		 * @param {function} callBack
+		 * @return {string} The subscriber token.
+		 */
+		on: function(msg, callBack)
+		{
+			var token = (++this.lastToken);
+			var list = this.get(msg);
+			list.push({
+				token: token,
+				callBack: callBack
+			});
+			return token;
+		},
+
+		/**
+		 * This will remove a subscriber.
+		 *
+		 * @param {string} msg
+		 * @param {string} token
+		 */
+		off: function(msg, token)
+		{
+			var list = this.callBacks[msg] || false;
+			if(list === false)
+			{
+				return false;
+			}
+
+			var 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: function(msg)
+		{
+			var callBacks = this.callBacks;
+			if(callBacks[msg])
+			{
+				delete callBacks[msg];
+			}
+		},
+
+		/**
+		 * This will publish a message.
+		 *
+		 * @param {string} msg
+		 * @param {string} value
+		 * @param {object} committer
+		 */
+		publish: function(msg)
+		{
+			var i, length,
+			list = this.callBacks[msg] || false;
+			if(list === false)
+			{
+				return false;
+			}
+
+			var 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);
+			}
+		}
+	});
+
+	var pubSub = new DataPubSub();
+	base.extend.DataPubSub = DataPubSub;
+
+	/**
+	 * Source
+	 *
+	 * This will create a new source to use with
+	 * a connection.
+	 * @class
+	 */
+	var Source = base.Class.extend(
+	{
+		/**
+		 * @constructor
+		 */
+		constructor: function()
+		{
+			/**
+			 * @member {string} msg
+			 * @protected
+			 */
+			this.msg = null;
+
+			/**
+			 * @member {string} token
+			 */
+			this.token = null;
+		},
+
+		/**
+		 * This will set the token.
+		 *
+		 * @param {string} token
+		 */
+		setToken: function(token)
+		{
+			this.token = token;
+		}
+	});
+
+	/**
+	 * OneWaySource
+	 *
+	 * This will create a one way source to use with
+	 * a connection.
+	 * @class
+	 * @augments Source
+	 */
+	var OneWaySource = Source.extend(
+	{
+		/**
+		 * This will setup the data source.
+		 *
+		 * @param {object} data
+		 */
+		constructor: function(data)
+		{
+			Source.call(this);
+			this.data = data;
+		},
+
+		/**
+		 * This will subscribe to a message.
+		 *
+		 * @param {string} msg
+		 * @param {function} callBack
+		 */
+		subscribe: function(msg, callBack)
+		{
+			this.msg = msg;
+			this.token = this.data.on(msg, callBack);
+		},
+
+		/**
+		 * This will unsubscribe from the message.
+		 */
+		unsubscribe: function()
+		{
+			this.data.off(this.msg, this.token);
+		}
+	});
+
+	/**
+	 * TwoWaySource
+	 *
+	 * This will create a two way source to use with
+	 * a connection.
+	 * @class
+	 * @augments Source
+	 */
+	var TwoWaySource = Source.extend(
+	{
+		/**
+		 * @member {function} callBack
+		 */
+		callBack: null,
+
+		/**
+		 * This will subscribe to a message.
+		 *
+		 * @param {string} msg
+		 */
+		subscribe: function(msg)
+		{
+			this.msg = msg;
+			var callBack = base.bind(this, this.callBack);
+			this.token = pubSub.on(msg, callBack);
+		},
+
+		/**
+		 * This will unsubscribe from a message.
+		 */
+		unsubscribe: function()
+		{
+			pubSub.off(this.msg, this.token);
+		}
+	});
+
+	/**
+	 * DataSource
+	 *
+	 * This will create a data source to use with
+	 * a connection.
+	 * @class
+	 * @augments TwoWaySource
+	 */
+	var DataSource = TwoWaySource.extend(
+	{
+		/**
+		 * @constructor
+		 * @param {object} data
+		 * @param {string} prop
+		 */
+		constructor: function(data, prop)
+		{
+			TwoWaySource.call(this);
+			this.data = data;
+			this.prop = prop;
+		},
+
+		/**
+		 * This will set the data value.
+		 *
+		 * @param {*} value
+		 */
+		set: function(value)
+		{
+			this.data.set(this.prop, value);
+		},
+
+		/**
+		 * This will get the data value.
+		 */
+		get: function()
+		{
+			return this.data.get(this.prop);
+		},
+
+		/**
+		 * The callBack when updated.
+		 *
+		 * @param {*} value
+		 * @param {object} committer
+		 */
+		callBack: function(value, committer)
+		{
+			if(this.data !== committer)
+			{
+				this.data.set(this.prop, value, committer);
+			}
+		}
+	});
+
+	/**
+	 * ElementSource
+	 *
+	 * This will create an element source to use with
+	 * a connection.
+	 * @class
+	 * @augments TwoWaySource
+	 */
+	var ElementSource = TwoWaySource.extend(
+	{
+		/**
+		 * @constructor
+		 * @param {object} element
+		 * @param {string} attr
+		 * @param {(string|function)} [filter]
+		 */
+		constructor: function(element, attr, filter)
+		{
+			TwoWaySource.call(this);
+			this.element = element;
+			this.attr = this.getAttrBind(attr);
+
+			if(typeof filter === 'string')
+			{
+				filter = this.setupFilter(filter);
+			}
+			this.filter = filter;
+		},
+
+		/**
+		 * This will get the bind attribute.
+		 *
+		 * @param {string} [customAttr]
+		 * @return {string}
+		 */
+		getAttrBind: function(customAttr)
+		{
+			/* this will setup the custom attr if the prop
+			has specified one. */
+			if(customAttr)
+			{
+				return customAttr;
+			}
+
+			var attr = 'textContent';
+			/* if no custom attr has been requested we will get the
+			default attr of the element */
+			var element = this.element;
+			if(!(element && typeof element === 'object'))
+			{
+				return attr;
+			}
+
+			var tagName = element.tagName.toLowerCase();
+			if (tagName === "input" || tagName === "textarea" || tagName === "select")
+			{
+				var type = element.type;
+				if(type)
+				{
+					switch(type)
+					{
+						case 'checkbox':
+							attr = 'checked';
+							break;
+						case 'file':
+							attr = 'files';
+							break;
+						default:
+							attr = 'value';
+					}
+				}
+				else
+				{
+					attr = 'value';
+				}
+			}
+			return attr;
+		},
+
+		/**
+		 * This will setup a filter callBack.
+		 *
+		 * @param {string} filter
+		 * @return {function}
+		 */
+		setupFilter: function(filter)
+		{
+			var pattern = /(\[\[[^\]]+\]\])/;
+			return function(value)
+			{
+				return filter.replace(pattern, value);
+			};
+		},
+
+		/**
+		 * This will set a value on an element.
+		 *
+		 * @param {*} value
+		 */
+		set: function(value)
+		{
+			var element = this.element;
+			if(!element || typeof element !== 'object')
+			{
+				return false;
+			}
+
+			/* this will check to apply the option filter before
+			setting the value */
+			if(this.filter)
+			{
+				value = this.filter(value);
+			}
+
+			var attr = this.attr,
+			type = element.type;
+			if(type)
+			{
+				switch(type)
+				{
+					case 'checkbox':
+						value = (value == 1);
+						break;
+					case 'radio':
+						element.checked = (element.value === value);
+						return true;
+				}
+			}
+
+			if(attr.substring(4, 1) === '-')
+			{
+				base.setAttr(element, attr, value);
+			}
+			else
+			{
+				element[attr] = value;
+			}
+		},
+
+		/**
+		 * This will get the value from an element.
+		 */
+		get: function()
+		{
+			var element = this.element;
+			if(!element || typeof element !== 'object')
+			{
+				return '';
+			}
+
+			var attr = this.attr;
+			return (attr.substring(4, 1) === '-')? base.getAttr(element, attr) : element[attr];
+		},
+
+		/**
+		 * The callBack when updated.
+		 *
+		 * @param {*} value
+		 * @param {object} committer
+		 */
+		callBack: function(value, committer)
+		{
+			if(committer !== this.element)
+			{
+				this.set(value);
+			}
+		}
+	});
+
+	/**
+	 * Connection
+	 *
+	 * This will create a connection.
+	 * @class
+	 */
+	var Connection = base.Class.extend(
+	{
+		/**
+		 * This will be used to unsubscribe.
+		 */
+		unsubscribe: function()
+		{
+
+		}
+	});
+
+	/**
+	 * OneWayConnection
+	 *
+	 * This will create a one way connection.
+	 * @class
+	 * @augments Connection
+	 */
+	var OneWayConnection = Connection.extend(
+	{
+		/**
+		 * @constructor
+		 */
+		constructor: function()
+		{
+			/**
+			 * @member {object} source
+			 */
+			this.source = null;
+		},
+
+		/**
+		 * This will setup the connection source.
+		 *
+		 * @param {object} data
+		 * @return {object}
+		 */
+		addSource: function(data)
+		{
+			return (this.source = new OneWaySource(data));
+		},
+
+		/**
+		 * This will be used to unsubscribe.
+		 * @override
+		 */
+		unsubscribe: function()
+		{
+			this.source.unsubscribe();
+			this.source = null;
+		}
+	});
+
+	/**
+	 * TwoWayConnection
+	 *
+	 * This will setup a two way connection.
+	 * @class
+	 * @augments Connection
+	 */
+	var TwoWayConnection = Connection.extend(
+	{
+		/**
+		 * @constructor
+		 */
+		constructor: function()
+		{
+			this.element = null;
+			this.data = null;
+		},
+
+		/**
+		 * This will add the element source.
+		 *
+		 * @param {object} element
+		 * @param {string} attr
+		 * @param {(string|function)} filter
+		 * @return {object}
+		 */
+		addElement: function(element, attr, filter)
+		{
+			return (this.element = new ElementSource(element, attr, filter));
+		},
+
+		/**
+		 * This will add the data source.
+		 *
+		 * @param {object} data
+		 * @param {string} prop
+		 * @return {object}
+		 */
+		addData: function(data, prop)
+		{
+			return (this.data = new DataSource(data, prop));
+		},
+
+		/**
+		 * This will unsubscribe from a source.
+		 *
+		 * @param {object} source
+		 */
+		unsubscribeSource: function(source)
+		{
+			if(source)
+			{
+				source.unsubscribe();
+			}
+		},
+
+		/**
+		 * This will be used to unsubscribe.
+		 * @override
+		 */
+		unsubscribe: function()
+		{
+			this.unsubscribeSource(this.element);
+			this.unsubscribeSource(this.data);
+
+			this.element = null;
+			this.data = null;
+		}
+	});
+
+	/**
+	 * ConnectionTracker
+	 *
+	 * This will create a new connection tracker to track active
+	 * connections in the data binder.
+	 * @class
+	 */
+	var ConnectionTracker = base.Class.extend(
+	{
+		/**
+		 * @constructor
+		 */
+		constructor: function()
+		{
+			/**
+			 * @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: function(id, attr, connection)
+		{
+			var connections = this.find(id);
+			return (connections[attr] = connection);
+		},
+
+		/**
+		 * This will get a connection.
+		 *
+		 * @param {string} id
+		 * @param {string} attr
+		 * @return {(object|bool)}
+		 */
+		get: function(id, attr)
+		{
+			var connections = this.connections[id];
+			if(connections)
+			{
+				return (connections[attr] || false);
+			}
+			return false;
+		},
+
+		/**
+		 * This will find a connection.
+		 *
+		 * @param {string} id
+		 * @return {object}
+		 */
+		find: function(id)
+		{
+			var 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: function(id, attr)
+		{
+			var connections = this.connections[id];
+			if(!connections)
+			{
+				return false;
+			}
+
+			var 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];
+			}
+		}
+	});
+
+	/**
+	 * DataBinder
+	 *
+	 * This will create a data binder object that can
+	 * create one way and two way data bindings.
+	 * @class
+	 */
+	var DataBinder = base.Class.extend(
+	{
+		/**
+		 * @constructor
+		 */
+		constructor: function()
+		{
+			this.version = "1.0.1";
+			this.attr = 'dataBindId';
+
+			this.connections = new ConnectionTracker();
+
+			this.idCount = 0;
+			this.setup();
+		},
+
+		/**
+		 * This will setup the events.
+		 * @protected
+		 */
+		setup: function()
+		{
+			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: function(element, data, prop, filter)
+		{
+			var bindSettings = this.getPropSettings(prop);
+			prop = bindSettings.prop;
+
+			/* this will setup the model bind attr to the
+			element and assign a bind id attr to support
+			two way binding */
+			var connection = this.setupConnection(element, data, prop, bindSettings.attr, filter);
+
+			/* we want to get the starting value of the
+			data and set it on our element */
+			var connectionElement = connection.element,
+			value = data.get(prop);
+			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: function(element, data, prop, customAttr, filter)
+		{
+			var id = this.getBindId(element);
+			var connection = new TwoWayConnection();
+
+			// this will create the data source
+			var 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 */
+			var dataId = data.getDataId(),
+			msg = dataId + ':' + prop;
+
+			// this will create the element source
+			var 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: function(id, attr, connection)
+		{
+			this.connections.add(id, attr, connection);
+		},
+
+		/**
+		 * This will set the bind id.
+		 *
+		 * @param {object} element
+		 */
+		setBindId: function(element)
+		{
+			var id = 'db-' + this.idCount++;
+			element[this.attr] = id;
+			return id;
+		},
+
+		/**
+		 * This will get the bind id.
+		 *
+		 * @param {object} element
+		 * @return {string}
+		 */
+		getBindId: function(element)
+		{
+			return element[this.attr] || this.setBindId(element);
+		},
+
+		/**
+		 * This will parse the prop to get the settings.
+		 *
+		 * @param {string} prop
+		 * @return {object}
+		 */
+		getPropSettings: function(prop)
+		{
+			var bindProp = prop,
+			bindAttr = null;
+
+			/* this will setup the custom attr if the prop
+			has specified one. */
+			if(prop.indexOf(':') !== -1)
+			{
+				var parts = prop.split(':');
+				bindProp = parts[1];
+				bindAttr = parts[0];
+			}
+
+			return {
+				prop: bindProp,
+				attr: bindAttr
+			};
+		},
+
+		/**
+		 * This will unbind the element.
+		 *
+		 * @param {object} element
+		 * @return {object} an instance of the data binder.
+		 */
+		unbind: function(element)
+		{
+			var 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: function(element, data, prop, callBack)
+		{
+			if(!element || typeof element !== 'object')
+			{
+				return false;
+			}
+
+			var connection = new OneWayConnection();
+
+			// this will create the one way source
+			var source = connection.addSource(data);
+			source.subscribe(prop, callBack);
+
+			// this will add the new connection to the connection tracker
+			var id = this.getBindId(element);
+			var attr = data.getDataId() + ':' + prop;
+			this.addConnection(id, attr, connection);
+
+			var 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: function(element, data, prop)
+		{
+			if(!element || typeof element !== 'object')
+			{
+				return false;
+			}
+
+			var id = element[this.attr];
+			if(id)
+			{
+				var 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: function(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: function(element)
+		{
+			if(element)
+			{
+				var id = element[this.attr];
+				if(id)
+				{
+					return id;
+				}
+			}
+			return false;
+		},
+
+		/**
+		 * @member {array} blockedKeys
+		 * @protected
+		 */
+		blockedKeys: [
+			9, //tab
+			18, //alt
+			20, //caps lock
+			37, //arrows
+			38,
+			39,
+			40
+		],
+
+		isBlocked: function(evt)
+		{
+			if(evt.type !== 'keyup')
+			{
+				return false;
+			}
+
+			return (evt.altKey !== false || base.inArray(this.blockedKeys, evt.keyCode) !== -1);
+		},
+
+		/**
+		 * This is the callBack for the chnage event.
+		 *
+		 * @param {object} evt
+		 */
+		bindHandler: function(evt)
+		{
+			if(this.isBlocked(evt))
+			{
+				return true;
+			}
+
+			var target = evt.target || evt.srcElement;
+			var id = this.isDataBound(target);
+			if(id)
+			{
+				var connection = this.connections.get(id, 'bind');
+				if(connection)
+				{
+					var 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 will setup the on change handler and
+		add the events. this needs to be setup before adding
+		the events. */
+		changeHandler: null,
+
+		/**
+		 * This wil setup the events.
+		 * @protected
+		 */
+		setupEvents: function()
+		{
+			this.changeHandler = base.bind(this, this.bindHandler);
+
+			this.addEvents();
+		},
+
+		/**
+		 * This will add the events.
+		 */
+		addEvents: function()
+		{
+			base.on(["change", "keyup"], document, this.changeHandler, false);
+		},
+
+		/**
+		 * This will remove the events.
+		 */
+		removeEvents: function()
+		{
+			base.off(["change", "keyup"], document, this.changeHandler, false);
+		}
+	});
+
+	base.extend.DataBinder = new DataBinder();
+})();