@base-framework/base 2.6.0

package/modules/animations/css-movement.js

@@ -0,0 +1,170 @@
+import {Movement} from './movement.js';
+import {base} from '../../core.js';
+
+export class CssMovement extends Movement
+{
+	constructor(element, settings)
+	{
+		this.style = element.style;
+		super(element, settings);
+	}
+
+	/* this will get start value of the property being animated.
+	@param (string) value = the value being modified
+	@return (string) the type of units */
+	getStartValue(value, end)
+	{
+		let start = 0;
+		if(typeof value === 'undefined')
+		{
+			let element = this.element,
+			property = this.property,
+			method = this.method;
+			if(method)
+			{
+				let values = base.getCss(element, property);
+				if(values !== 'none')
+				{
+					let cssPattern = new RegExp('(?:' + method + '\((.+)\))', 'g');
+					values.replace(cssPattern, (fullMatch, params) =>
+					{
+						start = (typeof params === 'string')? params.split(',') : null;
+					});
+				}
+				else
+				{
+					let unit,
+					pattern = /\d+/g,
+					length = end.length;
+					start = [];
+					for(var i = 0; i < length; i++)
+					{
+						/* we want to ensure that we add the same units */
+						unit = end[i].replace(pattern, '');
+						start.push(0 + unit);
+					}
+				}
+			}
+			else
+			{
+				let params = base.getCss(element, property);
+				start = (typeof params === 'string')? params.split(' ') : null;
+			}
+		}
+		else
+		{
+			start = this.getCssValue(value);
+		}
+		return start;
+	}
+
+	getEndValue(text)
+	{
+		return this.getCssValue(text);
+	}
+
+	/* this will get the number from an value and remove
+	any other marks including chars.
+	@param (mixed) text = the text to get the value from
+	@return (number) the number value */
+	getCssValue(text)
+	{
+		let textType = typeof text;
+		if(textType !== 'undefined')
+		{
+			let value;
+
+			if(textType === 'string')
+			{
+				/* this will check to setup the css value by
+				checking if we are using a css method
+				e.g. transform: translate3d() */
+				let cssPattern = /(?:(\w+\s*)\((.+)\))/g;
+				text.replace(cssPattern, (fullMatch, method, params) =>
+				{
+					value = (typeof params === 'string')? params.split(',') : null;
+					self.setMethod(method);
+				});
+
+				if(value === undefined)
+				{
+					/* this will check to split by space to allow
+					short hand */
+					value = text.split(' ');
+				}
+				return value;
+			}
+			else
+			{
+				return text;
+			}
+		}
+		return 0;
+	}
+
+	/* this will create a new value object array for the
+	property values to be updated.
+	@param (object) settings
+	@return (array) the values array */
+	createValue(settings)
+	{
+		let valueArray = [],
+		values = this.getValue(settings);
+		if(values)
+		{
+			if(Array.isArray(values.end))
+			{
+				let start = values.start,
+				end = values.end;
+				for(var i = 0, length = end.length; i < length; i++)
+				{
+					valueArray.push(new Value({
+						start: start[i],
+						end: end[i]
+					}));
+				}
+			}
+			else
+			{
+				valueArray.push(new Value(values));
+			}
+		}
+		return valueArray;
+	}
+
+	setMethod(method)
+	{
+		if(typeof this.method !== 'string')
+		{
+			this.method = method;
+		}
+	}
+
+	updateValue(delta)
+	{
+		let valueArray = [],
+		values = this.value;
+		if(values.length)
+		{
+			for(var i = 0, length = values.length; i < length; i++)
+			{
+				valueArray.push(values[i].update(delta));
+			}
+		}
+		return valueArray;
+	}
+
+	update(value)
+	{
+		let method = this.method;
+		if(method)
+		{
+			value = method + '(' + value.join(', ') + ')';
+		}
+		else
+		{
+			value = value.join(' ');
+		}
+		this.style[this.property] = value;
+	}
+}

package/modules/animations/movement.js

@@ -0,0 +1,131 @@
+import {CssMovement} from './css-movement.js';
+import {AttrMovement} from './attr-movement.js';
+
+/*
+	Movement class
+
+	this will create a movement object that can
+	update the property when animated. this is an abstract
+	class and should be extended to use.
+
+	@param (object) element
+	@param (object) settings
+*/
+export class Movement
+{
+	constructor(element, settings)
+	{
+		this.element = element;
+		this.property = null;
+		this.value = null;
+
+		this.setup(settings);
+	}
+
+	setup(settings)
+	{
+		this.setupProperty(settings);
+	}
+
+	/* this will return a new movement object by the
+	property type.
+	@param (object) element
+	@param (object) settings
+	@return (object) the new movement */
+	setupMovementType(element, settings)
+	{
+		let movement,
+		type = this.getType(element, settings);
+		switch(type)
+		{
+			case 'css':
+				movement = new CssMovement(element, settings);
+				break;
+			case 'attr':
+				movement = new AttrMovement(element, settings);
+				break;
+		}
+		return movement;
+	}
+
+	getType(element, settings)
+	{
+		return (element.style && settings.property in element.style)? 'css' : 'attr';
+	}
+
+	/* this will create a new value object for the
+	property value to be updated.
+	@param (object) settings
+	@return (object) the value object */
+	createValue(settings)
+	{
+		let values = this.getValue(settings);
+		return new Value(values);
+	}
+
+	/* this will get the start and end values of the
+	movement to be used to create a new value object.
+	@param (object) settings
+	@return (object) the start and end values */
+	getValue(settings)
+	{
+		let endValue = this.getEndValue(settings.endValue),
+		startValue = this.getStartValue(settings.startValue, endValue);
+
+		return {
+			start: startValue,
+			end: endValue
+		};
+	}
+
+	/* this will get start value of the property being animated.
+	@param (string) value = the value being modified
+	@return (string) the type of units */
+	getStartValue(value, end)
+	{
+		return value;
+	}
+
+	getEndValue(text)
+	{
+		return text;
+	}
+
+	setupProperty(settings)
+	{
+		this.property = settings.property;
+		this.value = this.createValue(settings);
+	}
+
+	/* this will update the value object
+	@param (number) delta
+	return (mixed) the proprety value */
+	updateValue(delta)
+	{
+		return this.value.update(delta);
+	}
+
+	step(delta)
+	{
+		var value = this.updateValue(delta);
+		this.update(value);
+	}
+
+	/* this should be overridden by the update
+	property type being animated.
+	@param (mixed) value */
+	update(value)
+	{
+
+	}
+}
+
+/* this is a static moethod that can create
+anewinstance of amovement by thepreopty type.
+@param (object) element
+@param (object) settings
+@return (object) the new movement */
+Movement.create = function(element, settings)
+{
+	return this.prototype.setupMovementType(element, settings);
+};

package/modules/animations/value.js

@@ -0,0 +1,187 @@
+import {base} from '../../core.js';
+
+/*
+	Value class
+
+	this will create a movement property value that can
+	update the property value when animated.
+
+	this will automatically get the units of the value
+	and check for value combining to inherit the start
+	value and add or remove the end value from the
+	start.
+
+	@param (object) settings
+*/
+export class Value
+{
+	constructor(settings)
+	{
+		this.value = null;
+		this.setup(settings);
+	}
+
+	setup(settings)
+	{
+		let value = this.value = this.createValue(settings);
+		/* we want to check if we are increasing or
+		decreasing the target */
+		value.increasing = this.isIncreasing(settings.end);
+	}
+
+	createValue(settings)
+	{
+		/* we need to get the end value with any extra data
+		to check for combining and to get the units */
+		let endValue = settings.end,
+		startValue = this.getValue(settings.start),
+		value = this.getValue(endValue);
+
+		return {
+			combining: this.checkCombind(endValue),
+			start: startValue,
+			end: value,
+			units: this.getUnits(endValue),
+			difference: (Math.abs(startValue - value))
+		};
+	}
+
+	/* this will get the units of the property being animated.
+	@param (string) text = the value being modified
+	@return (string) the type of units */
+	getUnits(text)
+	{
+		if(typeof text !== 'undefined')
+		{
+			text = this.getString(text);
+
+			/* we need to remove the numbers or plus or minus equals
+			to get the units */
+			let pattern = /([0-9.\-\+=])/g;
+			return text.replace(pattern, '');
+		}
+		return '';
+	}
+
+	checkCombind(end)
+	{
+		if(typeof end !== 'undefined')
+		{
+			end = this.getString(end);
+			/* we want to check if we have a plus or minus equals to
+			show that we are using the current position as the start */
+			let pattern = /(\+=|-=)/g,
+			matches = end.match(pattern);
+			if(matches)
+			{
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/* this will convert any type to a string
+	@param (mixed) value = the value to convert
+	@return (string) the value string */
+	getString(value)
+	{
+		return (typeof value !== 'string')? value.toString() : value;
+	}
+
+	/* this will get the number from an value and remove
+	any other marks including chars.
+	@param (mixed) text = the text to get the value from
+	@return (number) the number value */
+	getValue(text)
+	{
+		if(typeof text !== 'undefined')
+		{
+			/* we need to remove any non numeric data from the value
+			and convert to number after */
+			let pattern = /(\+=|-=|[^0-9.-])/g;
+			text = this.getString(text);
+			return (text.replace(pattern, '') * 1);
+		}
+		return 0;
+	}
+
+	/* this will check if the element is increasing or decreasing the
+	target.
+	@return (bool) true or false */
+	isIncreasing(endValue)
+	{
+		/* we want to check if we are adding to the start or
+		just modifying the value */
+		let value = this.value,
+		endTotal = value.end,
+		startValue = value.start;
+		if(value.combining === true)
+		{
+			endTotal = (this.getString(endValue).indexOf("-") === -1)? (startValue + endTotal) : startValue - endTotal;
+		}
+		return (endTotal >= startValue);
+	}
+
+	combindValue(delta)
+	{
+		return (this.value.end * delta);
+	}
+
+	calcValue(delta)
+	{
+		return (this.value.difference * delta);
+	}
+
+	/* this will setup theproper method to step the
+	value by checking for combining and currying
+	theproper function to step the value.
+	@param (number) delta
+	@return (number) the value step */
+	step(delta)
+	{
+		let step,
+		value = this.value;
+		if(value.combining === true)
+		{
+			step = this.combindValue;
+		}
+		else
+		{
+			step = this.calcValue;
+		}
+		return (this.step = step).apply(this, base.listToArray(arguments));
+	}
+
+	update(delta)
+	{
+		let step = this.step(delta),
+		value = this.value;
+
+		/* we want to check to add or subtract the step
+		by the increase prop */
+		return this.applyStep(value, step);
+	}
+
+	increaseValue(value, step)
+	{
+		let start = value.start;
+		return (start + step) + value.units;
+	}
+
+	decreaseValue(value, step)
+	{
+		let start = value.start;
+		return (start - step) + value.units;
+	}
+
+	/* this will setup the proper method to apply the
+	step by checking for increasing and currying
+	the proper function to applyu the step value.
+	@param (object) value
+	@return (number) the value step */
+	applyStep(value, step)
+	{
+		let applyStep = (value.increasing === true)? this.increaseValue : this.decreaseValue;
+		return (this.applyStep = applyStep).apply(this, base.listToArray(arguments));
+	}
+}

package/modules/atom/atom.js

@@ -0,0 +1,54 @@
+import {Objects} from "../../shared/objects.js";
+
+/**
+ * Atom
+ *
+ * This will create an interface for atoms to
+ * extend from a parent atom.
+ * @class
+ */
+export const Atom = function()
+{
+
+};
+
+/**
+ * This will extend the atom to a child atom.
+ * @static
+ * @param {(object|function)}
+ * @return {function} The child atom constructor.
+ */
+Atom.extend = function extend(childLayout)
+{
+	let parent = this;
+
+	/*
+	this will setup a layout function to call to standardize
+	the interface for non function atoms.
+	*/
+	if(typeof childLayout === 'object')
+	{
+		let layoutObject = childLayout;
+		childLayout = (props) =>
+		{
+			return Objects.cloneObject(layoutObject);
+		};
+	}
+
+	const child = (props = {}) =>
+	{
+		props = props || {};
+		let layout = childLayout(props),
+
+		// we want to check to merge the layout with the parent layout
+		parentLayout = parent(props);
+		if(typeof parentLayout === 'object')
+		{
+			layout = Objects.extendObject(parentLayout, layout);
+		}
+		return layout;
+	};
+
+	child.extend = extend;
+	return child;
+};