@base-framework/base 2.6.0

package/modules/animation/animation.js

@@ -0,0 +1,236 @@
+import {base} from '../../core.js';
+
+/**
+ * This will remove a class and hide an element.
+ *
+ * @param {object} obj
+ * @param {string} animationClass
+ * @param {function} callBack
+ */
+const removeClassAndHide = (obj, animationClass, callBack) =>
+{
+	obj.style.display = 'none';
+	removeAnimationClass(obj, animationClass, callBack);
+};
+
+/**
+ * This will remove a class when the animation is finished.
+ *
+ * @param {object} obj
+ * @param {string} animationClass
+ * @param {function} callBack
+ */
+const removeAnimationClass = (obj, animationClass, callBack) =>
+{
+	if(typeof callBack === 'function')
+	{
+		callBack.call();
+	}
+
+	base.removeClass(obj, animationClass);
+	animate.animating.remove(obj);
+};
+
+const getElement = (element) =>
+{
+	return (typeof element === 'string')? document.getElementById(element) : element;
+};
+
+/* this will add and remove css animations */
+export const animate =
+{
+	/* this class tracks all objects being animated and can
+	add and remove them when completed */
+	animating:
+	{
+		/**
+		 * @param array objects
+		 */
+		objects: [],
+
+		/**
+		 * This will add an animation.
+		 *
+		 * @param {object} object
+		 * @param {string} className
+		 * @param {int} timer
+		 */
+		add(object, className, timer)
+		{
+			if(!object)
+			{
+				return;
+			}
+
+			this.stopPreviousAnimations(object);
+			this.objects.push({
+				object,
+				className,
+				timer
+			});
+		},
+
+		/**
+		 * This will remove an animation from an element.
+		 *
+		 * @param {object} object
+		 * @param {string} removeClass
+		 */
+		remove(object, removeClass)
+		{
+			if(!object)
+			{
+				return;
+			}
+
+			let animations = this.checkAnimating(object);
+			if(animations === false)
+			{
+				return;
+			}
+
+			let animation, indexNumber,
+			objects = this.objects;
+			for(var i = 0, maxLength = animations.length; i < maxLength; i++)
+			{
+				animation = animations[i];
+				/* we want to stop the timer */
+				this.stopTimer(animation);
+
+				if(removeClass)
+				{
+					/* we want to remove the className */
+					base.removeClass(animation.object, animation.className);
+				}
+
+				/* we want to remove the animation fron the object array */
+				//var indexNumber = this.objects.indexOf(animation);
+				indexNumber = objects.indexOf(animation);
+				if(indexNumber > -1)
+				{
+					objects.splice(indexNumber, 1);
+				}
+			}
+		},
+
+		/**
+		 * This will stop an animation timer.
+		 * @param {object} animation
+		 */
+		stopTimer(animation)
+		{
+			if(animation)
+			{
+				let timer = animation.timer;
+				window.clearTimeout(timer);
+			}
+		},
+
+		/**
+		 * This will check if the element is animating.
+		 * @param {object} obj
+		 * @return {(array|bool)}
+		 */
+		checkAnimating(obj)
+		{
+			let animation,
+			animationArray = [];
+
+			/* we want to get any timers set for our object */
+			let objects = this.objects;
+			for(var i = 0, maxLength = objects.length; i < maxLength; i++)
+			{
+				animation = objects[i];
+				if(animation.object === obj)
+				{
+					animationArray.push(animation);
+				}
+			}
+
+			return (animationArray.length > 0)? animationArray : false;
+		},
+
+		/**
+		 * This will stop previous animations still animating.
+		 * @param {object} obj
+		 */
+		stopPreviousAnimations(obj)
+		{
+			this.remove(obj, 1);
+		},
+
+		/**
+		 * This will reset the objects.
+		 */
+		reset()
+		{
+			this.objects = [];
+		}
+	},
+
+	/**
+	 * This will create an animation.
+	 *
+	 * @param {object} obj
+	 * @param {string} animationClass
+	 * @param {int} duration
+	 * @param {function} callBack
+	 * @param {funtion} endCallBack
+	 */
+	create(obj, animationClass, duration, callBack, endCallBack)
+	{
+		let animationCallBack = base.createCallBack(null, callBack, [obj, animationClass, endCallBack]);
+
+		let timer = window.setTimeout(animationCallBack, duration);
+		this.animating.add(obj, animationClass, timer);
+	},
+
+	/**
+	 * This will add an animation then hide the element.
+	 *
+	 * @param {object} object
+	 * @param {string} animationClass
+	 * @param {int} duration
+	 * @param {function} endCallBack
+	 */
+	hide(object, animationClass, duration, endCallBack)
+	{
+		let obj = getElement(object);
+		base.addClass(obj, animationClass);
+
+		this.create(obj, animationClass, duration, removeClassAndHide, endCallBack);
+	},
+
+	/**
+	 * This will add an animation then show the element.
+	 *
+	 * @param {object} object
+	 * @param {string} animationClass
+	 * @param {int} duration
+	 * @param {function} endCallBack
+	 */
+	show(object, animationClass, duration, endCallBack)
+	{
+		let obj = getElement(object);
+		base.addClass(obj, animationClass);
+		obj.style.display = 'block';
+
+		this.create(obj, animationClass, duration, removeAnimationClass, endCallBack);
+	},
+
+	/**
+	 * This will add an animation to the element.
+	 *
+	 * @param {object} object
+	 * @param {string} animationClass
+	 * @param {int} duration
+	 * @param {function} endCallBack
+	 */
+	set(object, animationClass, duration, endCallBack)
+	{
+		let obj = getElement(object);
+		base.addClass(obj, animationClass);
+
+		this.create(obj, animationClass, duration, removeAnimationClass, endCallBack);
+	}
+};

package/modules/animations/animation-controller.js

@@ -0,0 +1,231 @@
+import {Animation} from './animation.js';
+
+/*
+	AnimationController
+
+	this will create an animation controller object
+	that will animate a target property or properties
+	on an element over a duration.
+
+	@param (object) settings = the animation settings
+	@param [(function)] callBack = the function to call back
+	when the animation is done
+*/
+export class AnimationController
+{
+	constructor(settings, callBack)
+	{
+		/* this is the delay of the animation in milliseconds */
+		this.delay = settings.delay || 0;
+		this.delayTimer = null;
+		this.startTime = null;
+
+		/* this is the animation duration in milliseconds */
+		this.duration = settings.duration || 0;
+
+		this.element = this.getElement(settings.element);
+		this.status = 'stopped';
+		this.animation = null;
+
+		/* this will be the call back function to return
+		when the animation is complete or errors */
+		this.callBack = callBack;
+
+		/* this will setup the fps */
+		this.fps = settings.fps || 60;
+
+		/* this will setup the new animation object and start
+		the animation if all is correct or stop and return an
+		error */
+		this.setup(settings);
+	}
+
+	setup(settings)
+	{
+		this.animationCallBack = this.animate.bind(this);
+
+		let element = this.element;
+		if(typeof element === 'object')
+		{
+			/* we want to start the animation by the animation
+			delay settings */
+			let callBack = this.setupAnimation.bind(this, element, settings);
+			this.delayTimer = window.setTimeout(callBack, this.delay);
+		}
+		else
+		{
+			/* we do not have an element or property to
+			animate so we wantto return an error */
+			this.updateStatus('error');
+		}
+		return this;
+	}
+
+	setupAnimation(element, settings)
+	{
+		this.animation = new Animation(element, settings);
+		this.start(settings);
+	}
+
+	/* this will start the animation by getting the start time
+	and starting the animation timer */
+	start()
+	{
+		/* this will track the time passed and the progress
+		of the animation */
+		this.startTime = new Date();
+		this.timePassed = 0;
+		this.progress = 0;
+		this.timer = null;
+
+		this.startTimer();
+		return this;
+	}
+
+	stop()
+	{
+		this.stopTimer();
+		return this;
+	}
+
+	/* this will get the element that is being used.
+	@param (mixed) element = the element selector or object
+	@return (object) the element */
+	getElement(element)
+	{
+		return (typeof element === 'string')? document.querySelector(element) : element;
+	}
+
+	/* this will get the delta to be used with the animation.
+	@return (number) the current delta */
+	delta(t)
+	{
+		let delta = 0;
+
+		switch(this.ease)
+		{
+			case 'easeInOut':
+			case 'easeInOutQuad':
+				delta = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+				break;
+			case 'easeIn':
+			case 'easeInQuad':
+				delta = (t * t);
+				break;
+			case 'easeInCubic':
+				delta = (t * t * t);
+				break;
+			case 'easeInQuart':
+				delta = (t * t * t * t);
+				break;
+			case 'easeInCirc':
+				delta = (1 - Math.sin(Math.acos(t)));
+				break;
+			case 'easeOut':
+			case 'easeOutQuad':
+				delta = (t * (2 - t));
+				break;
+			case 'easeOutCubic':
+				delta = ((--t) * t * t + 1);
+				break;
+			case 'easeOutQuart':
+				delta = (1 - (--t) * t * t * t);
+				break;
+			case 'linear':
+				delta = t;
+				break;
+			default:
+				delta = t;
+		}
+		return delta;
+	}
+
+	/* this will perform the animation on the element by
+	incrementally updating the element object property
+	by the timed progress. */
+	animate()
+	{
+		this.timePassed = new Date() - this.startTime;
+
+		let percent = this.timePassed / this.duration,
+		progress = this.progress = (percent > 1)? 1 : percent;
+
+		let delta = this.delta(progress);
+		this.animation.step(delta);
+
+		/* if the progress is 1 the animation is complete */
+		if(progress >= 1)
+		{
+			this.stopTimer();
+			this.updateStatus('completed');
+		}
+		else
+		{
+			this.timer = window.requestAnimationFrame(this.animationCallBack);
+		}
+	}
+
+	updateStatus(status)
+	{
+		let action = () =>
+		{
+			switch(status)
+			{
+				case 'started':
+					break;
+				case 'stopped':
+					break;
+				case 'completed':
+				case 'error':
+					this.checkCallBack();
+					break;
+			}
+		};
+
+		/* we want to save the status and call the
+		action function */
+		this.status = status;
+		action();
+	}
+
+	checkCallBack()
+	{
+		let callBack = this.callBack;
+		if(typeof callBack === 'function')
+		{
+			callBack(this.status);
+		}
+	}
+
+	/* this will start the animation by setting up the
+	animation timer. */
+	startTimer()
+	{
+		/* this will check to stop any previous timer before
+		creating a new timer */
+		this.stopTimer();
+
+		/* we want to call the animation first to not show a
+		delay in the animation before the callback is called */
+		this.updateStatus('started');
+		this.animate();
+		return this;
+	}
+
+	/* this will stop the animation timer if still setup */
+	stopTimer()
+	{
+		var w = window;
+		if(this.timer)
+		{
+			w.cancelAnimationFrame(this.timer);
+			this.updateStatus('stopped');
+		}
+
+		if(this.delayTimer)
+		{
+			w.clearTimeout(this.delayTimer);
+		}
+		return this;
+	}
+}

package/modules/animations/animation.js

@@ -0,0 +1,64 @@
+import {Movement} from './movement.js';
+
+export class Animation
+{
+	constructor(element, settings)
+	{
+		this.element = element;
+
+		/* this will track the animation properties being
+		animated */
+		this.movements = [];
+		this.setupMovements(settings);
+	}
+
+	setup()
+	{
+		this.setupMovements(settings);
+	}
+
+	addMovement(property)
+	{
+		this.movements.push(property);
+	}
+
+	setupMovements(settings)
+	{
+		let movement,
+		element = this.element;
+
+		const addMovement = (movementSettings) =>
+		{
+			movement = Movement.create(element, movementSettings);
+			this.addMovement(movement);
+		};
+
+		/* this will check if we have multiple properties to
+		add or only one property */
+		let property = settings.property;
+		if(Array.isArray(property))
+		{
+			for(var i = 0, length = property.length; i < length; i++)
+			{
+				addMovement(property[i]);
+			}
+		}
+		else
+		{
+			addMovement(settings);
+		}
+	}
+
+	/* this will step the animation movements by the
+	delta.
+	@param (number) delta */
+	step(delta)
+	{
+		let movements = this.movements,
+		length = movements.length;
+		for(var i = 0; i < length; i++)
+		{
+			movements[i].step(delta);
+		}
+	}
+}

package/modules/animations/attr-movement.js

@@ -0,0 +1,66 @@
+import {Movement} from './movement.js';
+import {base} from '../../core.js';
+
+/*
+	AttrMovement class
+
+	this will create an attr movement object that can
+	update the property when animated.
+
+	@param (object) element
+	@param (object) settings
+*/
+export class AttrMovement extends Movement
+{
+	constructor(element, settings)
+	{
+		super(element, settings);
+		this.filter = settings.filter;
+	}
+
+	/* 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')
+		{
+			start = this.element[this.property];
+		}
+		else
+		{
+			start = this.getValue(value);
+		}
+		return start;
+	}
+
+	filterValue(value)
+	{
+		let filter,
+
+		callBack = this.filter;
+		if(typeof callBack === 'function')
+		{
+			/* this will add the step to the value */
+			filter = function(value)
+			{
+				return callBack(value);
+			};
+		}
+		else
+		{
+			filter = function(value)
+			{
+				return value;
+			};
+		}
+		return (this.filterValue = filter).apply(this, base.listToArray(arguments));
+	}
+
+	update(value)
+	{
+		value = this.filterValue(value);
+		this.element[this.property] = value;
+	}
+}