@base-framework/base 2.6.0 → 2.6.1

package/es5/modules/animations.js

@@ -0,0 +1,1080 @@
+/* base framework module */
+/*
+	javascript animation add and remove with full object
+	animation tracking
+*/
+(function()
+{
+	"use strict";
+
+	var math =
+	{
+		round: function(number)
+		{
+			return ~~ (0.5 + number);
+		},
+
+		floor: function(number)
+		{
+			return ~~number;
+		}
+	};
+
+	/* this will add and remove animations */
+	base.extend.animations =
+	{
+		version: '1.0.1',
+
+		/* this class tracks all objects being animated and can
+		add and remove them when completed */
+		animating:
+		{
+			objects: [],
+
+			/* this will create a new animation obj form the params obj
+			and add it to the objects array to be tracked.
+			@param (object) obj = the animation params
+			@return (object) the animation object */
+			add: function(obj)
+			{
+				var animation = null,
+				self = this;
+
+				/* we want to setup the animation to remove itself when
+				finished */
+				var removeAnimation = function(status)
+				{
+					self.remove(animation);
+					/* this will check to return the animation call back
+					and return the status */
+					var callBack = obj.callBack;
+					if(typeof callBack === 'function')
+					{
+						callBack(status);
+					}
+				};
+
+				/* this will create a new animation object and we
+				want to add it to the objects array */
+				animation = new AnimationController(obj, removeAnimation);
+				this.objects.push(animation);
+				return animation;
+			},
+
+			/* this will stop and remove an animation obj form the
+			params obj and remove it from being tracked.
+			@param (object) obj = the animation obj
+			@return (object) an instance of the animating object */
+			remove: function(obj)
+			{
+				this.stopAnimation(obj);
+
+				var objects = this.objects;
+				var indexNumber = base.inArray(objects, obj);
+				if(indexNumber > -1)
+				{
+					objects.splice(indexNumber, 1);
+				}
+				return this;
+			},
+
+			/* this will remove and stop any animation still active
+			on an element.
+			@param (object) element
+			@return (object) an instance of the animating object */
+			removeByElement: function(element)
+			{
+				if(!element)
+				{
+					return this;
+				}
+
+				var animations = this.checkAnimating(element);
+				if(animations !== false)
+				{
+					for(var i = 0, maxLength = animations.length; i < maxLength; i++)
+					{
+						/* we want to remove the animation fron the object array */
+						this.remove(animations[i]);
+					}
+				}
+				return this;
+			},
+
+			/* this will stop an animation if its still active.
+			@param (object) animation = the animation object
+			@return (object) an instance of the animating object */
+			stopAnimation: function(animation)
+			{
+				if(!animation || typeof animation !== 'object')
+				{
+					return this;
+				}
+
+				if(animation.status !== 'stopped')
+				{
+					/* we want to stop the animation */
+					animation.stop();
+				}
+				return this;
+			},
+
+			/* this will get all active aniamtion objects for an element.
+			@param (object) element
+			@return (array) an array of animation objects */
+			checkAnimating: function(element)
+			{
+				var animationArray = [];
+
+				if(element && typeof element === 'object')
+				{
+					/* we want to get any timers set for our object */
+					var objects = this.objects;
+					for(var i = 0, maxLength = objects.length; i < maxLength; i++)
+					{
+						 var animation = objects[i];
+						 if(animation.element === element)
+						 {
+							animationArray.push(animation);
+						 }
+					}
+				}
+				return (animationArray.length >= 1)? animationArray : false;
+			},
+
+			/* this will stop all previous aniamtions on an element.
+			@param (object) element = the element
+			@return (object) an instance of the animating object */
+			stopPreviousAnimations: function(element)
+			{
+				/* we want to remove the timers and class names
+				from the object */
+				this.removeByElement(element);
+				return this;
+			},
+
+			reset: function()
+			{
+				this.objects = [];
+				return this;
+			}
+		},
+
+		add: function(obj)
+		{
+			return this.animating.add(obj);
+		},
+
+		remove: function(obj)
+		{
+			this.animating.remove(obj);
+		},
+
+		/* this will setup the request animation frame to
+		allow backwards compat. */
+		setupAnimationFrame: function()
+		{
+			var w = window;
+			/* setup request for prefix or setTimeout if
+			not supported */
+			w.requestAnimationFrame = (
+				w.requestAnimationFrame ||
+				w.mozRequestAnimationFrame ||
+				w.webkitRequestAnimationFrame ||
+				w.msRequestAnimationFrame ||
+				function(callBack)
+				{
+					return w.setTimeout(callBack, 1000 / 60);
+				}
+			);
+
+			/* setup cancel for prefix or setTimeout if
+			not supported */
+			w.cancelAnimationFrame = (
+				w.cancelAnimationFrame ||
+				w.mozCancelAnimationFrame ||
+				function(requestID)
+				{
+					w.clearTimeout(requestID);
+				}
+			);
+		},
+
+		stop: function(element)
+		{
+			this.animating.stopPreviousAnimations(element);
+		}
+	};
+
+	/* we want to setup the animation frame to support
+	all browsers */
+	base.animations.setupAnimationFrame();
+
+	/*
+		Animation class
+
+		this will create a new animation object to animate
+		attr, css, or css method properties.
+
+		animations can update multiple properties in one
+		aniamtion.
+		@param (object) element
+		@param (object) settings
+	*/
+	var Animation = base.Class.extend(
+	{
+		constructor: function(element, settings)
+		{
+			this.element = element;
+
+			/* this will track the animation properties being
+			animated */
+			this.movements = [];
+			this.setupMovements(settings);
+		},
+
+		setup: function()
+		{
+			this.setupMovements(settings);
+		},
+
+		addMovement: function(property)
+		{
+			this.movements.push(property);
+		},
+
+		setupMovements: function(settings)
+		{
+			var movement,
+			element = this.element,
+			self = this;
+
+			var addMovement = function(movementSettings)
+			{
+				movement = Movement.create(element, movementSettings);
+				self.addMovement(movement);
+			};
+
+			/* this will check if we have multiple properties to
+			add or only one property */
+			var property = settings.property;
+			if(base.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: function(delta)
+		{
+			var movements = this.movements,
+			length = movements.length;
+			for(var i = 0; i < length; i++)
+			{
+				movements[i].step(delta);
+			}
+		}
+	});
+
+	/*
+		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
+	*/
+	var Value = base.Class.extend(
+	{
+		constructor: function(settings)
+		{
+			this.value = null;
+			this.setup(settings);
+		},
+
+		setup: function(settings)
+		{
+			var 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: function(settings)
+		{
+			/* we need to get the end value with any extra data
+			to check for combining and to get the units */
+			var 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: function(text)
+		{
+			if(typeof text !== 'undefined')
+			{
+				text = this.getString(text);
+
+				/* we need to remove the numbers or plus or minus equals
+				to get the units */
+				var pattern = /([0-9.\-\+=])/g;
+				return text.replace(pattern, '');
+			}
+			return '';
+		},
+
+		checkCombind: function(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 */
+				var 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: function(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: function(text)
+		{
+			if(typeof text !== 'undefined')
+			{
+				/* we need to remove any non numeric data from the value
+				and convert to number after */
+				var 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: function(endValue)
+		{
+			/* we want to check if we are adding to the start or
+			just modifying the value */
+			var value = this.value;
+			var endTotal = value.end;
+			var startValue = value.start;
+			if(value.combining === true)
+			{
+				endTotal = (this.getString(endValue).indexOf("-") === -1)? (startValue + endTotal) : startValue - endTotal;
+			}
+			return (endTotal >= startValue)? true : false;
+		},
+
+		combindValue: function(delta)
+		{
+			return (this.value.end * delta);
+		},
+
+		calcValue: function(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: function(delta)
+		{
+			var step;
+			var value = this.value;
+			if(value.combining === true)
+			{
+				step = this.combindValue;
+			}
+			else
+			{
+				step = this.calcValue;
+			}
+			return (this.step = step).apply(this, base.listToArray(arguments));
+		},
+
+		update: function(delta)
+		{
+			var step = this.step(delta);
+			var value = this.value;
+
+			/* we want to check to add or subtract the step
+			by the increase prop */
+			return this.applyStep(value, step);
+		},
+
+		increaseValue: function(value, step)
+		{
+			var start = value.start;
+			return (start + step) + value.units;
+		},
+
+		decreaseValue: function(value, step)
+		{
+			var 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: function(value, step)
+		{
+			var applyStep = (value.increasing === true)? this.increaseValue : this.decreaseValue;
+			return (this.applyStep = applyStep).apply(this, base.listToArray(arguments));
+		}
+	});
+
+	/*
+		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
+	*/
+	var Movement = base.Class.extend(
+	{
+		constructor: function(element, settings)
+		{
+			this.element = element;
+			this.property = null;
+			this.value = null;
+
+			this.setup(settings);
+		},
+
+		setup: function(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: function(element, settings)
+		{
+			var 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: function(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: function(settings)
+		{
+			var 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: function(settings)
+		{
+			var 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: function(value, end)
+		{
+			return value;
+		},
+
+		getEndValue: function(text)
+		{
+			return text;
+		},
+
+		setupProperty: function(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: function(delta)
+		{
+			return this.value.update(delta);
+		},
+
+		step: function(delta)
+		{
+			var value = this.updateValue(delta);
+			this.update(value);
+		},
+
+		/* this should be overridden by the update
+		property type being animated.
+		@param (mixed) value */
+		update: function(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);
+	};
+
+	/*
+		AttrMovement class
+
+		this will create an attr movement object that can
+		update the property when animated.
+
+		@param (object) element
+		@param (object) settings
+	*/
+	var AttrMovement = Movement.extend(
+	{
+		constructor: function(element, settings)
+		{
+			Movement.call(this, 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: function(value, end)
+		{
+			var start = 0;
+			if(typeof value === 'undefined')
+			{
+				start = this.element[this.property];
+			}
+			else
+			{
+				start = this.getValue(value);
+			}
+			return start;
+		},
+
+		filterValue: function(value)
+		{
+			var filter;
+
+			var 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: function(value)
+		{
+			value = this.filterValue(value);
+			this.element[this.property] = value;
+		}
+	});
+
+	var CssMovement = Movement.extend(
+	{
+		constructor: function(element, settings)
+		{
+			this.style = element.style;
+			Movement.call(this, 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: function(value, end)
+		{
+			var start = 0;
+			if(typeof value === 'undefined')
+			{
+				var element = this.element,
+				property = this.property,
+				method = this.method;
+				if(method)
+				{
+					var values = base.css(element, property);
+					if(values !== 'none')
+					{
+						var cssPattern = new RegExp('(?:' + method + '\((.+)\))', 'g');
+						values.replace(cssPattern, function(fullMatch, params)
+						{
+							start = (typeof params === 'string')? params.split(',') : null;
+						});
+					}
+					else
+					{
+						var unit;
+						var pattern = /\d+/g;
+						var 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
+				{
+					var params = base.css(element, property);
+					start = (typeof params === 'string')? params.split(' ') : null;
+				}
+			}
+			else
+			{
+				start = this.getCssValue(value);
+			}
+			return start;
+		},
+
+		getEndValue: function(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: function(text)
+		{
+			var textType = typeof text;
+			if(textType !== 'undefined')
+			{
+				var value,
+				self = this;
+
+				if(textType === 'string')
+				{
+					/* this will check to setup the css value by
+					checking if we are using a css method
+					e.g. transform: translate3d() */
+					var cssPattern = /(?:(\w+\s*)\((.+)\))/g;
+					text.replace(cssPattern, function(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: function(settings)
+		{
+			var valueArray = [];
+			var values = this.getValue(settings);
+			if(values)
+			{
+				if(base.isArray(values.end))
+				{
+					var 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: function(method)
+		{
+			if(typeof this.method !== 'string')
+			{
+				this.method = method;
+			}
+		},
+
+		updateValue: function(delta)
+		{
+			var valueArray = [];
+			var 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: function(value)
+		{
+			var method = this.method;
+			if(method)
+			{
+				value = method + '(' + value.join(', ') + ')';
+			}
+			else
+			{
+				value = value.join(' ');
+			}
+			this.style[this.property] = value;
+		}
+	});
+
+	/*
+		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
+	*/
+	var AnimationController = base.Class.extend(
+	{
+		constructor: function(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: function(settings)
+		{
+			this.animationCallBack = this.animate.bind(this);
+
+			var element = this.element;
+			if(typeof element === 'object')
+			{
+				/* we want to start the animation by the animation
+				delay settings */
+				var callBack = base.createCallBack(this, this.setupAnimation, [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: function(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: function()
+		{
+			/* 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: function()
+		{
+			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: function(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: function(t)
+		{
+			var 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: function()
+		{
+			this.timePassed = new Date() - this.startTime;
+			var percent = this.timePassed / this.duration;
+			var progress = this.progress = (percent > 1)? 1 : percent;
+
+			var 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: function(status)
+		{
+			var self = this;
+			var action = function()
+			{
+				switch(status)
+				{
+					case 'started':
+						break;
+					case 'stopped':
+						break;
+					case 'completed':
+					case 'error':
+						self.checkCallBack();
+						break;
+				}
+			};
+
+			/* we want to save the status and call the
+			action function */
+			this.status = status;
+			action();
+		},
+
+		checkCallBack: function()
+		{
+			var callBack = this.callBack;
+			if(typeof callBack === 'function')
+			{
+				callBack.call(null, this.status);
+			}
+		},
+
+		/* this will start the animation by setting up the
+		animation timer. */
+		startTimer: function()
+		{
+			/* 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: function()
+		{
+			var w = window;
+			if(this.timer)
+			{
+				w.cancelAnimationFrame(this.timer);
+				this.updateStatus('stopped');
+			}
+
+			if(this.delayTimer)
+			{
+				w.clearTimeout(this.delayTimer);
+			}
+			return this;
+		}
+	});
+
+	/* this will add an animation to an element.
+	@param (object) paramsObj = the animation params
+	@return (object) the animation object */
+	base.extend.addAnimation = function(paramsObj)
+	{
+		return base.animations.add(paramsObj);
+	};
+
+	/* this will stop all animations on an element.
+	@param (object) element = the element */
+	base.extend.stopAnimations = function(element)
+	{
+		base.animations.stop(element);
+	};
+})();