@base-framework/base 2.6.0 → 2.6.1

package/es6/modules/router/history-controller.js

@@ -0,0 +1,216 @@
+import {base} from '../../core.js';
+
+/**
+ * History
+ *
+ * This will setup the history controller.
+ * @class
+ */
+export class HistoryController
+{
+    /**
+     * This will check if browser based navigation is supported
+     *
+     * @returns boolean
+     */
+    static browserIsSupported()
+    {
+        return ('history' in window && 'pushState' in window.history);
+    }
+
+    /**
+     * This will create a History Object based on navigation support
+     *
+     * @param {Router} router
+     * @returns History
+     */
+    static setup(router)
+    {
+        if(HistoryController.browserIsSupported())
+        {
+            return new BrowserHistory(router).setup();
+        }
+        return new HashHistory(router).setup();
+    }
+}
+
+let routerNumber = 0;
+
+/**
+ * History
+ *
+ * This will setup the history controller.
+ * @class
+ */
+class History
+{
+	/**
+	 * @constructor
+	 * @param {object} router
+	 */
+	constructor(router)
+	{
+		this.router = router;
+		this.locationId = 'base-app-router-' + routerNumber++;
+		this.callBack = this.check.bind(this);
+	}
+
+	/**
+	 * This will check if the history api is supported
+	 * and add events.
+	 *
+	 * @return {object} a reference to the object.
+	 */
+	setup()
+	{
+		this.addEvent();
+		return this;
+	}
+}
+
+class BrowserHistory extends History
+{
+	/**
+	 * This will add the events.
+	 *
+	 * @return {object} a reference to the object.
+	 */
+	addEvent()
+	{
+		base.on('popstate', window, this.callBack);
+		return this;
+	}
+
+	/**
+	 * This will remove the events.
+	 *
+	 * @return {object} a reference to the object.
+	 */
+	removeEvent()
+	{
+		base.off('popstate', window, this.callBack);
+		return this;
+	}
+
+	/**
+	 * This will check to activate the router.
+	 *
+	 * @param {object} evt
+	 */
+	check(evt)
+	{
+		/* we want to check if the event has a state and if the
+		state location is from the background */
+		let state = evt.state;
+		if(!state || state.location !== this.locationId)
+		{
+			return false;
+		}
+
+		evt.preventDefault();
+		evt.stopPropagation();
+
+		this.router.checkActiveRoutes(state.uri);
+	}
+
+	/**
+	 * This will create a state object.
+	 *
+	 * @param {string} uri
+	 * @param {*} data
+	 * @return {object}
+	 */
+	createState(uri, data)
+	{
+		let stateObj = {
+			location: this.locationId,
+			uri: uri
+		};
+
+		if(data && typeof data === 'object')
+		{
+			stateObj = Object.assign(stateObj, data);
+		}
+
+		return stateObj;
+	}
+
+	/**
+	 * This will add a state to the history.
+	 *
+	 * @param {string} uri
+	 * @param {object} data
+	 * @param {boolean} replace
+	 * @return {object} a reference to the object.
+	 */
+	addState(uri, data, replace)
+	{
+		let history = window.history,
+		lastState = history.state;
+
+		if(lastState && lastState.uri === uri)
+		{
+			return this;
+		}
+
+		let stateObj = this.createState(uri, data);
+
+		/* this will check to push state or
+		replace state */
+		replace = (replace === true);
+		let method = (replace === false)? 'pushState' : 'replaceState';
+		history[method](stateObj, null, uri);
+
+		return this;
+	}
+}
+
+class HashHistory extends History
+{
+	/**
+	 * This will add the events.
+	 *
+	 * @return {object} a reference to the object.
+	 */
+	addEvent()
+	{
+		base.on('hashchange', window, this.callBack);
+		return this;
+	}
+
+	/**
+	 * This will remove the events.
+	 *
+	 * @return {object} a reference to the object.
+	 */
+	removeEvent()
+	{
+		base.off('hashchange', window, this.callBack);
+		return this;
+	}
+
+	/**
+	 * This will check to activate the router.
+	 *
+	 * @param {object} evt
+	 */
+	check(evt)
+	{
+		this.router.checkActiveRoutes(evt.newURL);
+	}
+
+	/**
+	 * This will add a state to the history.
+	 *
+	 * @param {string} uri
+	 * @param {object} data
+	 * @param {boolean} replace
+	 * @return {object} a reference to the object.
+	 */
+	addState(uri, data, replace)
+	{
+		window.location.hash = uri;
+
+		return this;
+	}
+}

package/es6/modules/router/nav-link.js

@@ -0,0 +1,124 @@
+import {router} from './router.js';
+import {Component} from '../component/component.js';
+
+/**
+ * NavLink
+ *
+ * This will create a nav link that will add an active
+ * class when the browser route path matches the link
+ * href.
+ *
+ * @class
+ */
+export class NavLink extends Component
+{
+    /**
+     * This will configure the link active class.
+     *
+     * @protected
+     */
+    beforeSetup()
+    {
+        this.selectedClass = this.activeClass || 'active';
+    }
+
+    /**
+     * This will render the component.
+     *
+     * @return {object}
+     */
+    render()
+    {
+        let href = this.href,
+        text = this.text,
+        watchers = this.setupWatchers(href, text);
+
+        return {
+            tag: 'a',
+            className: this.className || null,
+            onState: ['selected', {
+                [this.selectedClass]: true
+            }],
+            href: this.getString(href),
+            text: this.getString(text),
+            children: this.children,
+            watch: watchers
+        };
+    }
+
+    /**
+     * This will get string.
+     *
+     * @param {string} string
+     * @return {(string|null)}
+     */
+    getString(string)
+    {
+        let type = typeof string;
+        return (type !== 'object' && type !== 'undefined')? string : null;
+    }
+
+    /**
+     * This will setup the watchers.
+     *
+     * @protected
+     * @param {string} href
+     * @param {string} text
+     * @return {array}
+     */
+    setupWatchers(href, text)
+    {
+        let exact = (this.exact !== false),
+        data = router.data;
+
+        let watchers = [];
+
+        if(href && typeof href === 'object')
+        {
+            watchers.push(
+            {
+                attr: 'href',
+                value: href
+            });
+        }
+
+        if(text && typeof text === 'object')
+        {
+            watchers.push(
+            {
+                attr: 'text',
+                value: text
+            });
+        }
+
+        watchers.push({
+            value: ['[[path]]', data],
+            callBack: (ele, value) =>
+            {
+                let path = ele.pathname + ele.hash;
+				let selected = exact? (value === path) : (new RegExp('^' + ele.pathname + '($|#|\/|\\.).*').test(value));
+                this.update(ele, selected);
+            }
+        });
+
+        return watchers;
+    }
+
+    setupStates()
+    {
+        return {
+            selected: false
+        };
+    }
+
+    /**
+     * This will update the class on the element.
+     *
+     * @param {object} ele
+     * @param {bool} selected
+     */
+    update(ele, selected)
+    {
+        this.state.set('selected', selected);
+    }
+}

package/es6/modules/router/route.js

@@ -0,0 +1,401 @@
+import {ComponentHelper} from './component-helper.js';
+import {SimpleData} from '../data/data.js';
+import {Import} from '../import/import.js';
+
+/**
+ * This will setup a route uri pattern.
+ *
+ * @param {string} uri
+ * @return {string}
+ */
+const routePattern = (uri) =>
+{
+	let uriQuery = "";
+	if(uri)
+	{
+		let filter = /\//g;
+		uriQuery = uri.replace(filter, "\/");
+
+		/* this will setup for optional slashes before the optional params */
+		let optionalSlash = /(\/):[^\/(]*?\?/g;
+		uriQuery = uriQuery.replace(optionalSlash, (str) =>
+		{
+			let pattern = /\//g;
+			return str.replace(pattern, '(?:$|\/)');
+		});
+
+		/* this will setup for optional params and params
+		and stop at the last slash or query start */
+		let param = /(:[^\/?&($]+)/g;
+		let optionalParams = /(\?\/+\*?)/g;
+		uriQuery = uriQuery.replace(optionalParams, '?\/*');
+		uriQuery = uriQuery.replace(param, (str) =>
+		{
+			return (str.indexOf('.') < 0)? '([^\/|?]+)' : '([^\/|?]+.*)';
+		});
+
+		/* we want to setup the wild card and param
+		checks to be modified to the route uri string */
+		let allowAll = /(\*)/g;
+		uriQuery = uriQuery.replace(allowAll, '.*');
+	}
+
+	/* we want to set and string end if the wild card is not set */
+	uriQuery += (uri[uri.length - 1] === '*')? '' : '$';
+	return uriQuery;
+};
+
+/**
+ * This will get the default route params.
+ *
+ * @param {array} params
+ * @return {(object|null)}
+ */
+const getParamDefaults = (params) =>
+{
+	if(params.length)
+	{
+		let defaults = {};
+		for(var i = 0, length = params.length; i < length; i++)
+		{
+			defaults[params[i]] = null;
+		}
+		return defaults;
+	}
+	return null;
+};
+
+/**
+ * This will get the param keys from the uri.
+ *
+ * @param {string} uri
+ * @return {array}
+ */
+const paramPattern = (uri) =>
+{
+	let params = [];
+	if(!uri)
+	{
+		return params;
+	}
+
+	let filter = /[\*?]/g;
+	uri = uri.replace(filter, '');
+
+	let pattern = /:(.[^.\/?&($]+)\?*/g,
+	matches = uri.match(pattern);
+	if(matches === null)
+	{
+		return params;
+	}
+
+	for(var i = 0, maxLength = matches.length; i < maxLength; i++)
+	{
+		var param = matches[i];
+		if(param)
+		{
+			param = param.replace(':', '');
+			params.push(param);
+		}
+	}
+	return params;
+};
+
+let routeCount = 0;
+
+/**
+ * Route
+ *
+ * This will create a route.
+ * @class
+ * @augments SimpleData
+ */
+export class Route extends SimpleData
+{
+	/**
+	 * @constructor
+	 * @param {object} settings
+	 */
+	constructor(settings)
+	{
+		let uri = settings.baseUri;
+
+		const paramKeys = paramPattern(uri);
+		let params = getParamDefaults(paramKeys);
+		super(params);
+
+		this.uri = uri;
+		this.paramKeys = paramKeys;
+
+		this.setupRoute(settings);
+		this.set('active', false);
+	}
+
+	/**
+	 * This will setup the route settings.
+	 *
+	 * @protected
+	 * @param {object} settings
+	 */
+	setupRoute(settings)
+	{
+		this.id = settings.id || 'bs-rte-' + routeCount++;
+
+		this.path = null;
+		this.referralPath = null;
+
+		/* route reg ex */
+		let uriMatch = routePattern(this.uri);
+		this.uriQuery = new RegExp('^' + uriMatch);
+
+		/* params */
+		this.params = null;
+
+		/* this will setup the template and route component
+		if one has been set */
+		this.setupComponentHelper(settings);
+
+		this.callBack = settings.callBack;
+		this.title = settings.title;
+	}
+
+	/**
+	 * This will update the route title.
+	 *
+	 * @param {string|function} title
+	 */
+	setTitle(title)
+	{
+		base.router.updateTitle({
+			title: title,
+			stage: this.stage
+		});
+	}
+
+	/**
+	 * This will deactivate the route.
+	 */
+	deactivate()
+	{
+		this.set('active', false);
+
+		let controller = this.controller;
+		if(controller)
+		{
+			controller.remove();
+		}
+	}
+
+	/**
+	 * This will get the route layout.
+	 *
+	 * @param {object} settings
+	 * @returns {object|null}
+	 */
+	getLayout(settings)
+	{
+		if(settings.component)
+		{
+			return settings.component;
+		}
+
+		let imported = settings.import;
+		if(!imported)
+		{
+			return null;
+		}
+
+		if(typeof imported === 'string')
+		{
+			imported = {
+				src: imported
+			};
+		}
+
+		return Import(imported);
+	}
+
+	/**
+	 * This will setup the route layout.
+	 *
+	 * @protected
+	 * @param {object} settings
+	 */
+	setupComponentHelper(settings)
+	{
+		const component = this.getLayout(settings);
+		if(component)
+		{
+			let {container, persist = false, parent} = settings;
+
+			const helperSettings =
+			{
+				component,
+				container,
+				persist,
+				parent
+			};
+			this.controller = new ComponentHelper(this, helperSettings);
+		}
+	}
+
+	/**
+	 * This will resume the route.
+	 *
+	 * @param {object} container
+	 */
+	resume(container)
+	{
+		let controller = this.controller;
+		if(controller)
+		{
+			controller.container = container;
+		}
+	}
+
+	/**
+	 * This will set the route path.
+	 *
+	 * @param {string} path
+	 * @param {string} referralPath
+	 */
+	setPath(path, referralPath)
+	{
+		this.path = path;
+		this.referralPath = referralPath;
+	}
+
+	/**
+	 * This will select the route.
+	 */
+	select()
+	{
+		this.set('active', true);
+
+		let params = this.stage,
+		callBack = this.callBack;
+		if(typeof callBack === 'function')
+		{
+			callBack(params);
+		}
+
+		let controller = this.controller;
+		if(controller)
+		{
+			controller.focus(params);
+		}
+
+		let path = this.path;
+		if(!path)
+		{
+			return;
+		}
+
+		let hash = path.split('#')[1];
+		if(!hash)
+		{
+			return;
+		}
+
+		this.scrollToId(hash);
+	}
+
+	/**
+	 * This will scroll to the element by id.
+	 *
+	 * @param {string} hash
+	 * @returns void
+	 */
+	scrollToId(hash)
+	{
+		if(!hash)
+		{
+			return;
+		}
+
+		let ele = document.getElementById(hash);
+		if(!ele)
+		{
+			return;
+		}
+
+		ele.scrollIntoView(true);
+	}
+
+	/**
+	 * This will check if a route matches the path.
+	 *
+	 * @param {string} path
+	 * @return {(object|boolean)}
+	 */
+	match(path)
+	{
+		let matched = false;
+
+		/* we want to check to use the supplied uri or get the
+		current uri if not setup */
+		let result = path.match(this.uriQuery);
+		if(result === null)
+		{
+			this.resetParams();
+			return matched;
+		}
+
+		if(result && typeof result === 'object')
+		{
+			/* this will remove the first match from the
+			the params */
+			result.shift();
+			matched = result;
+			/* this will get the uri params of the route
+			and if set will save them to the route */
+			this.setParams(result);
+		}
+
+		return matched;
+	}
+
+	/**
+	 * This will reset the params.
+	 */
+	resetParams()
+	{
+		this.stage = {};
+	}
+
+	/**
+	 * This will set the params.
+	 *
+	 * @param {object} values
+	 */
+	setParams(values)
+	{
+		if(values && typeof values === 'object')
+		{
+			let keys = this.paramKeys;
+			if(keys)
+			{
+				let params = {};
+				for(var i = 0, maxL = keys.length; i < maxL; i++)
+				{
+					var key = keys[i];
+					if(typeof key !== 'undefined')
+					{
+						params[key] = values[i];
+					}
+				}
+				this.set(params);
+			}
+		}
+	}
+
+	/**
+	 * This will get the params.
+	 *
+	 * @return {object}
+	 */
+	getParams()
+	{
+		return this.stage;
+	}
+}