@base-framework/base 2.6.1 → 2.6.3

package/modules/animation/animation.js

@@ -1,236 +0,0 @@
-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

@@ -1,231 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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;
-	}
-}