@base-framework/base 2.6.0

package/modules/component/component.js

@@ -0,0 +1,230 @@
+import {base} from '../../core.js';
+import {Unit} from './unit.js';
+import {state} from '../state/state.js';
+import {EventHelper} from './event-helper.js';
+import {StateHelper} from './state-helper.js';
+
+export {Unit} from './unit.js';
+export {Jot} from './jot.js';
+export {Watch} from '../layout/layout-builder.js';
+
+/**
+ * Component
+ *
+ * @class
+ * @augments Unit
+ *
+ * This will allow components to be extended
+ * from a single factory.
+ *
+ * @example
+ * class QuickFlashPanel extends base.Component
+ *	{
+ *		constructor(props)
+ *		{
+ *			// this will setup the component id
+ *			super(props);
+ *		},
+ *
+ *		render()
+ *		{
+ *			return {
+ *
+ *			};
+ *		}
+ *	}
+ */
+export class Component extends Unit
+{
+	/**
+	 * @constructor
+	 * @param {object} [props]
+	 */
+	constructor(props)
+	{
+		super(props);
+
+		/**
+		 * @param {bool} isComponent
+		 */
+		this.isComponent = true;
+
+		/* this will allow the component to override the
+		state target id to add a custom id */
+		/**
+		 * @member {string} [stateTargetId] // optional override of state id
+		 */
+		this.stateTargetId = null;
+	}
+
+	/**
+	 * This will initialize the component.
+	 * @protected
+	 */
+	initialize()
+	{
+		this.setupContext();
+		this.beforeSetup();
+		this.addStates();
+		this.buildLayout();
+		this.addEvents();
+		this.afterSetup();
+	}
+
+	/**
+	 * This will setup the state target.
+	 *
+	 * @protected
+	 * @param {string} [id]
+	 */
+	setupStateTarget(id)
+	{
+		let targetId = id || this.stateTargetId || this.id;
+		this.state = state.getTarget(targetId);
+	}
+
+	/**
+	 * Override this to setup the component states.
+	 * @return {object}
+	 */
+	setupStates()
+	{
+		/*
+		return {
+			action: 'state'
+		};
+
+		or
+
+		return {
+			action:
+			{
+				state: 'state',
+				callBack(state, prevState)
+				{
+
+				}
+			}
+		};*/
+
+		return {
+
+		};
+	}
+
+	/**
+	 * This will add the states.
+	 * @protected
+	 */
+	addStates()
+	{
+		/* this will check to restore previous a previous state if the
+		component has been preserved. */
+		let state = this.state;
+		if(state)
+		{
+			this.stateHelper.restore(state);
+			return;
+		}
+
+		/* this will only setupa state manager if
+		we have states */
+		let states = this.setupStates();
+		if(base.isEmpty(states))
+		{
+			return;
+		}
+
+		this.setupStateTarget();
+		this.stateHelper = new StateHelper(this.state, states);
+	}
+
+	/**
+	 * This will remove the states.
+	 * @protected
+	 */
+	removeStates()
+	{
+		let state = this.state;
+		if(!state)
+		{
+			return false;
+		}
+
+		this.stateHelper.removeRemoteStates();
+		state.remove();
+	}
+
+	/**
+	 * This will setup the event helper.
+	 *
+	 * @protected
+	 */
+	setupEventHelper()
+	{
+		if(!this.events)
+		{
+			this.events = new EventHelper();
+		}
+	}
+
+	/**
+	 * This will setup the events.
+	 *
+	 * @protected
+	 * @return {array}
+	 */
+	setupEvents()
+	{
+		return [
+			//['action', element, function(e){}, false]
+		];
+	}
+
+	/**
+	 * This will add the events.
+	 *
+	 * @protected
+	 */
+	addEvents()
+	{
+		let events = this.setupEvents();
+		if(events.length < 1)
+		{
+			return false;
+		}
+
+		this.setupEventHelper();
+		this.events.addEvents(events);
+	}
+
+	/**
+	 * This will remove the events.
+	 * @protected
+	 */
+	removeEvents()
+	{
+		let events = this.events;
+		if(events)
+		{
+			events.reset();
+		}
+	}
+
+	/**
+	 * This will prepare the component to be destroyed.
+	 */
+	prepareDestroy()
+	{
+		this.rendered = false;
+		this.beforeDestroy();
+		this.removeEvents();
+		this.removeStates();
+		this.removeContext();
+
+		if(this.data && this.persist === false)
+		{
+			this.data.unlink();
+		}
+	}
+}

package/modules/component/event-helper.js

@@ -0,0 +1,119 @@
+import {base} from '../../core.js';
+
+/**
+ * EventHelper
+ *
+ * This will create an event object to make
+ * adding and removing events easier.
+ * @class
+ */
+export class EventHelper
+{
+	/**
+	 * @constructor
+	 */
+	constructor()
+	{
+		this.events = [];
+	}
+
+	/**
+	 * This will add an array of events.
+	 *
+	 * @param {array} events
+	 */
+	addEvents(events)
+	{
+		let length = events.length;
+		if(length < 1)
+		{
+			return false;
+		}
+
+		let event;
+		for(var i = 0; i < length; i++)
+		{
+			event = events[i];
+			this.on(...event);
+		}
+	}
+
+	/**
+	 * This will add an event.
+	 *
+	 * @param {string} event
+	 * @param {object} obj
+	 * @param {function} callBack
+	 * @param {boolean} capture
+	 */
+	on(event, obj, callBack, capture)
+	{
+		base.on(event, obj, callBack, capture);
+
+		this.events.push({
+			event,
+			obj,
+			callBack,
+			capture
+		});
+	}
+
+	/**
+	 * This will remove an event.
+	 *
+	 * @param {string} event
+	 * @param {object} obj
+	 * @param {function} callBack
+	 * @param {boolean} capture
+	 */
+	off(event, obj, callBack, capture)
+	{
+		base.off(event, obj, callBack, capture);
+
+		let option,
+		events = this.events;
+		for(var i = 0, length = events.length; i < length; i++)
+		{
+			option = events[i];
+			if(option.event === event && option.obj === obj)
+			{
+				events.splice(i, 1);
+				break;
+			}
+		}
+	}
+
+	/**
+	 * This will set all events.
+	 */
+	set()
+	{
+		let event,
+		events = this.events;
+		for(var i = 0, length = events.length; i < length; i++)
+		{
+			event = events[i];
+			base.on(event.event, event.obj, event.callBack, event.capture);
+		}
+	}
+
+	unset()
+	{
+		let event,
+		events = this.events;
+		for(var i = 0, length = events.length; i < length; i++)
+		{
+			event = events[i];
+			base.off(event.event, event.obj, event.callBack, event.capture);
+		}
+	}
+
+	/**
+	 * This will reset the events.
+	 */
+	reset()
+	{
+		this.unset();
+		this.events = [];
+	}
+}

package/modules/component/jot.js

@@ -0,0 +1,144 @@
+import {Unit} from './unit.js';
+import {Component} from './component.js';
+
+/**
+ * This will store the jot shorthand method alaises.
+ */
+const JOT_SHORTHAND_METHODS =
+{
+    created: 'onCreated',
+    state: 'setupStates',
+    events: 'setupEevents',
+    before: 'beforeSetup',
+    render: 'render',
+    after: 'afterSetup',
+    destroy: 'beforeDestroy'
+};
+
+/**
+ * This will get the jot method by value. If the method is an
+ * object, it will be nested in a function.
+ *
+ * @param {object|function} value
+ * @returns {function}
+ */
+const getJotShorthandMethod = (value) =>
+{
+    const valueType = (typeof value);
+    return (valueType === 'function')? value : function()
+    {
+        return value;
+    };
+};
+
+/**
+ * This will create a jot component object that will be used
+ * to create the jot component.
+ *
+ * @param {object} settings
+ * @returns {object}
+ */
+const JotComponent = (settings) =>
+{
+    const component = {};
+    if(!settings)
+    {
+        return component;
+    }
+
+    for(var prop in settings)
+    {
+        if(settings.hasOwnProperty(prop) === false)
+        {
+            continue;
+        }
+
+        let value = settings[prop];
+        let alias = JOT_SHORTHAND_METHODS[prop];
+        if(alias)
+        {
+            component[alias] = getJotShorthandMethod(value);
+            continue;
+        }
+
+        component[prop] = value;
+    }
+
+    return component;
+};
+
+/**
+ * This will create a component class.
+ *
+ * @param {object} settings
+ * @returns {class}
+ */
+const createComponentClass = (settings) =>
+{
+    class Child extends Component
+    {
+
+    }
+
+    Object.assign(Child.prototype, settings);
+    return Child;
+};
+
+/**
+ * This will create a unit class.
+ *
+ * @param {object} settings
+ * @returns {class}
+ */
+ const createUnitClass = (settings) =>
+ {
+    class Child extends Unit
+    {
+
+    }
+
+    Object.assign(Child.prototype, settings);
+    return Child;
+ };
+
+/**
+ * This will create a shorthand component.
+ *
+ * @param {object|function} layout
+ * @returns {function}
+ */
+export const Jot = function(layout)
+{
+    if(!layout)
+    {
+        return null;
+    }
+
+    let settings;
+    switch(typeof layout)
+    {
+        case 'object':
+            if(layout.render)
+            {
+                settings = JotComponent(layout);
+                return createComponentClass(settings);
+            }
+
+            settings = {
+                render: function()
+                {
+                    return layout;
+                }
+            };
+
+            // this will create a stateless and dataless unit
+            return createUnitClass(settings);
+        case 'function':
+            settings = {
+                render: layout
+            };
+
+            // this will create a stateless and dataless unit
+            return createUnitClass(settings);
+    }
+};