@base-framework/base 2.6.0

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

@@ -0,0 +1,219 @@
+import {base} from '../../core.js';
+import {TwoWaySource} from './two-way-source.js';
+
+/**
+ * This will set an element attr by the setAttribute method.
+ *
+ * @param {object} element
+ * @param {string} attr
+ * @param {mixed} value
+ */
+const SetAttr = (element, attr, value) =>
+{
+	base.setAttr(element, attr, value);
+};
+
+const UpdateRadioAttr = (element, attr, value) =>
+{
+	element.checked = (element.value === value);
+};
+
+const UpdateCheckboxAttr = (element, attr, value) =>
+{
+	value = (value == 1);
+	UpdateAttr(element, attr, value);
+};
+
+/**
+ * This will update an element attr by the bracket notation.
+ *
+ * @param {object} element
+ * @param {string} attr
+ * @param {nixed} value
+ */
+const UpdateAttr = (element, attr, value) =>
+{
+	element[attr] = value;
+};
+
+const GetAttr = (element, attr) =>
+{
+	return base.getAttr(element, attr);
+};
+
+const GetAttribute = (element, attr) =>
+{
+	return element[attr];
+};
+
+/**
+ * ElementSource
+ *
+ * This will create an element source to use with
+ * a connection.
+ * @class
+ * @augments TwoWaySource
+ */
+export class ElementSource extends TwoWaySource
+{
+	/**
+	 * @constructor
+	 * @param {object} element
+	 * @param {string} attr
+	 * @param {(string|function)} [filter]
+	 */
+	constructor(element, attr, filter)
+	{
+		super();
+		this.element = element;
+		this.attr = this.getAttrBind(attr);
+		this.addSetMethod(element, this.attr);
+
+		this.filter = (typeof filter === 'string')? this.setupFilter(filter) : filter;
+	}
+
+	addSetMethod(element, attr)
+	{
+		if(attr.substring(4, 1) === '-')
+		{
+			this.setValue = SetAttr;
+			this.getValue = GetAttr;
+		}
+		else
+		{
+			this.getValue = GetAttribute;
+
+			var type = element.type;
+			if(type)
+			{
+				switch(type)
+				{
+					case 'checkbox':
+						this.setValue = UpdateCheckboxAttr;
+						return;
+					case 'radio':
+						this.setValue = UpdateRadioAttr;
+						return;
+				}
+			}
+
+			this.setValue = UpdateAttr;
+		}
+	}
+
+	/**
+	 * This will get the bind attribute.
+	 *
+	 * @param {string} [customAttr]
+	 * @return {string}
+	 */
+	getAttrBind(customAttr)
+	{
+		/* this will setup the custom attr if the prop
+		has specified one. */
+		if(customAttr)
+		{
+			return customAttr;
+		}
+
+		let attr = 'textContent';
+		/* if no custom attr has been requested we will get the
+		default attr of the element */
+		let element = this.element;
+		if(!(element && typeof element === 'object'))
+		{
+			return attr;
+		}
+
+		let tagName = element.tagName.toLowerCase();
+		if (tagName === "input" || tagName === "textarea" || tagName === "select")
+		{
+			let 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(filter)
+	{
+		let pattern = /(\[\[[^\]]+\]\])/;
+		return (value) =>
+		{
+			return filter.replace(pattern, value);
+		};
+	}
+
+	/**
+	 * This will set a value on an element.
+	 *
+	 * @param {*} value
+	 */
+	set(value)
+	{
+		let 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);
+		}
+
+		this.setValue(element, this.attr, value);
+	}
+
+	/**
+	 * This will get the value from an element.
+	 */
+	get()
+	{
+		let element = this.element;
+		if(!element || typeof element !== 'object')
+		{
+			return '';
+		}
+
+		return this.getValue(element, this.attr);
+	}
+
+	/**
+	 * The callBack when updated.
+	 *
+	 * @param {*} value
+	 * @param {object} committer
+	 */
+	callBack(value, committer)
+	{
+		if(committer !== this.element)
+		{
+			this.set(value);
+		}
+	}
+}

package/modules/data-binder/one-way-connection.js

@@ -0,0 +1,46 @@
+import {OneWaySource} from './one-way-source.js';
+import {Connection} from './connection.js';
+
+/**
+ * OneWayConnection
+ *
+ * This will create a one way connection.
+ * @class
+ * @augments Connection
+ */
+export class OneWayConnection extends Connection
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		super();
+
+		/**
+		 * @member {object} source
+		 */
+		this.source = null;
+	}
+
+	/**
+	 * This will setup the connection source.
+	 *
+	 * @param {object} data
+	 * @return {object}
+	 */
+	addSource(data)
+	{
+		return (this.source = new OneWaySource(data));
+	}
+
+	/**
+	 * This will be used to unsubscribe.
+	 * @override
+	 */
+	unsubscribe()
+	{
+		this.source.unsubscribe();
+		this.source = null;
+	}
+}

package/modules/data-binder/one-way-source.js

@@ -0,0 +1,43 @@
+import {Source} from './source.js';
+
+/**
+ * OneWaySource
+ *
+ * This will create a one way source to use with
+ * a connection.
+ * @class
+ * @augments Source
+ */
+export class OneWaySource extends Source
+{
+	/**
+	 * This will setup the data source.
+	 *
+	 * @param {object} data
+	 */
+	constructor(data)
+	{
+		super();
+		this.data = data;
+	}
+
+	/**
+	 * This will subscribe to a message.
+	 *
+	 * @param {string} msg
+	 * @param {function} callBack
+	 */
+	subscribe(msg, callBack)
+	{
+		this.msg = msg;
+		this.token = this.data.on(msg, callBack);
+	}
+
+	/**
+	 * This will unsubscribe from the message.
+	 */
+	unsubscribe()
+	{
+		this.data.off(this.msg, this.token);
+	}
+}

package/modules/data-binder/source.js

@@ -0,0 +1,36 @@
+/**
+ * Source
+ *
+ * This will create a new source to use with
+ * a connection.
+ * @class
+ */
+export class Source
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		/**
+		 * @member {string} msg
+		 * @protected
+		 */
+		this.msg = null;
+
+		/**
+		 * @member {string} token
+		 */
+		this.token = null;
+	}
+
+	/**
+	 * This will set the token.
+	 *
+	 * @param {string} token
+	 */
+	setToken(token)
+	{
+		this.token = token;
+	}
+}

package/modules/data-binder/two-way-connection.js

@@ -0,0 +1,75 @@
+import {DataSource} from './data-source.js';
+import {ElementSource} from './element-source.js';
+import {Connection} from './connection.js';
+
+/**
+ * TwoWayConnection
+ *
+ * This will setup a two way connection.
+ * @class
+ * @augments Connection
+ */
+export class TwoWayConnection extends Connection
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		super();
+
+		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(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(data, prop)
+	{
+		return (this.data = new DataSource(data, prop));
+	}
+
+	/**
+	 * This will unsubscribe from a source.
+	 *
+	 * @param {object} source
+	 */
+	unsubscribeSource(source)
+	{
+		if(source)
+		{
+			source.unsubscribe();
+		}
+	}
+
+	/**
+	 * This will be used to unsubscribe.
+	 * @override
+	 */
+	unsubscribe()
+	{
+		this.unsubscribeSource(this.element);
+		this.unsubscribeSource(this.data);
+
+		this.element = null;
+		this.data = null;
+	}
+}

package/modules/data-binder/two-way-source.js

@@ -0,0 +1,41 @@
+import {Source} from './source.js';
+import {pubSub} from './data-pub-sub.js';
+
+/**
+ * TwoWaySource
+ *
+ * This will create a two way source to use with
+ * a connection.
+ * @class
+ * @augments Source
+ */
+export class TwoWaySource extends Source
+{
+	/**
+	 * This will subscribe to a message.
+	 *
+	 * @param {string} msg
+	 */
+	subscribe(msg)
+	{
+		this.msg = msg;
+		let callBack = this.callBack.bind(this);
+		this.token = pubSub.on(msg, callBack);
+	}
+
+	/**
+	 * This will unsubscribe from a message.
+	 */
+	unsubscribe()
+	{
+		pubSub.off(this.msg, this.token);
+	}
+
+	/**
+	 * Override this to setup cource callBack.
+	 */
+	callBack()
+	{
+
+	}
+}