diff --git a/index.js b/index.js index 394a94d..51450e4 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,4 @@ -module.exports = function(imgs){ - - return new Kineograph(imgs); - -}; +module.exports = Kineograph; /** * Initialize a new `Kineograph`. @@ -14,258 +10,236 @@ function Kineograph(imgs) { if(!document || !imgs) return; - var el = mixin( document.createElement('div') ); + var _images = {}; + var _animations = []; + var _animating = undefined; + var _showing = undefined; + var _unloop = false; + var _unloop_callback = undefined; + var _timeouts = []; + var _finish = false; + var _fps = 25; - el.className = 'kineograph'; + var self = document.createElement('div'); + + self.className = 'kineograph'; if(imgs instanceof Array) imgs = {'_default':imgs}; for(var i in imgs){ for(var j in imgs[i]){ - image.apply(el, [imgs[i][j], i]); + image(imgs[i][j], i); } } - return el; - -}; - -/** -* Public variables -* -* @api public -*/ - -Kineograph.prototype._images = {}; -Kineograph.prototype._animations = []; -Kineograph.prototype._animating = undefined; -Kineograph.prototype._unloop = false; -Kineograph.prototype._unloop_callback = undefined; -Kineograph.prototype._timeouts = []; -Kineograph.prototype._finish = false; -Kineograph.prototype._fps = 25; - -/** -* Add an animation to the end of the cue and start playing if it isn't already. -* -* @param {String} ani - the animation name to add -* @param {Number} loop - the number of times the animation should play -* @param {Function} callback - the optional method to call when finished -* @return {Kineograph} -* @api public -*/ - -Kineograph.prototype.play = function(ani, loop, callback){ - - add.apply(this, [ani, loop, callback]); - - if(!this._animating) this.next(); + /** + * Add an animation to the end of the cue and start playing if it isn't already. + * + * @param {String} ani - the animation name to add + * @param {Number} loop - the number of times the animation should play + * @param {Function} callback - the optional method to call when finished + * @return {Kineograph} + * @api public + */ - return this; - -} + self.play = function(ani, loop, callback){ -/** -* Begin animating the next animation in the cue -* -* @return {Kineograph} -* @api public -*/ - -Kineograph.prototype.next = function(){ + add(ani, loop, callback) + + if(!_animating) self.next(); - this._unloop = false; - this.stop(); + return self; + + } - if(!this._animations.length){ this._animating = false; return; } + /** + * Begin animating the next animation in the cue + * + * @return {Kineograph} + * @api public + */ - this._animating = this._animations.shift(); - - play.apply(this, [this._animating.ani, this._animating.loop, this._animating.callback]); + self.next = function(){ - return this; + _unloop = false; + self.stop(); -} + if(!_animations.length){ _animating = false; return; } -/** -* Unloop any currently looping animations and allow the sequence to move onwards. -* -* @param {Function} callback - callback which is called when the loop has finished gracefully -* @return {Kineograph} -* @api public -*/ + _animating = _animations.shift(); + + play(_animating.ani, _animating.loop, _animating.callback) -Kineograph.prototype.unloop = function(callback){ + return self; - this._unloop = true; - this._unloop_callback = callback; + } - return this; + /** + * Unloop any currently looping animations and allow the sequence to move onwards. + * + * @param {Function} callback - callback which is called when the loop has finished gracefully + * @return {Kineograph} + * @api public + */ -} + self.unloop = function(callback){ -/** -* Stop any currently playing animations, without prejudice. -* -* @return {Kineograph} -* @api public -*/ + _unloop = true; + _unloop_callback = callback; -Kineograph.prototype.stop = function(){ + return self; - while(this._timeouts.length){ - - clearTimeout(this._timeouts.shift()); - } - this._animating = undefined; - - return this; + /** + * Stop any currently playing animations, without prejudice. + * + * @return {Kineograph} + * @api public + */ -} + self.stop = function(){ -/** -* Change the fps. -* -* @return {Kineograph} -* @api public -*/ - -Kineograph.prototype.fps = function(val){ + while(_timeouts.length){ + + clearTimeout(_timeouts.shift()); + + } - if(typeof val === 'number') - this._fps = val; + _animating = undefined; - return this; + return self; -} + } -/** -* Mixin the Kineograph properties. -* -* @param {HTMLElement} el -* @return {HTMLElement} -* @api private -*/ + /** + * Change the fps. + * + * @return {Kineograph} + * @api public + */ -function mixin(el) { - - for (var key in Kineograph.prototype){ - el[key] = Kineograph.prototype[key]; - } + self.fps = function(val){ - return el; + if(typeof val === 'number') + _fps = val; -} + return self; -/** -* Add a frame to the animation -* -* @param {String} path - the relative path to the image -* @param {String} key - an animtion name for the image -* @api private -*/ + } -function image(path, key){ + /** + * Add a frame to the animation + * + * @param {String} path - the relative path to the image + * @param {String} key - an animtion name for the image + * @api private + */ - var img = this.appendChild( document.createElement( 'img' ) ); - img.src = path; - img.style.visibility = 'hidden'; + function image(path, key){ - if(this._images[key]) - this._images[key].push(img); - else - this._images[key] = [img]; + var img = self.appendChild( document.createElement( 'img' ) ); + img.src = path; + img.style.visibility = 'hidden'; -} + console.log(_images); -/** -* Add an animation to the cue -* -* @param {String} ani - the animation name to add -* @param {Number} loop - the number of times the animation should play -* @param {Function} callback - the optional method to call when finished -* @api private -*/ + if(_images[key]) + _images[key].push(img); + else + _images[key] = [img]; -function add(ani, loop, callback){ + } - ani = typeof ani === 'string' ? ani : '_default'; - loop = typeof loop === 'number' ? parseInt(loop) : 1; + /** + * Add an animation to the cue + * + * @param {String} ani - the animation name to add + * @param {Number} loop - the number of times the animation should play + * @param {Function} callback - the optional method to call when finished + * @api private + */ - if(!this._images[ani]) - throw new Error(ani + ' does not exist'); + function add(ani, loop, callback){ - this._animations.push({ani:ani, loop:loop, callback:callback}); + ani = typeof ani === 'string' ? ani : '_default'; + loop = typeof loop === 'number' ? parseInt(loop) : 1; -} + if(!_images[ani]) + throw new Error(ani + ' does not exist'); -/** -* Play a sequence of images from start to end -* -* @param {String} ani - the animation name to play -* @param {Number} loop - the number of times the animation should play -* @param {Function} callback - the optional method to call when finished -* @api private -*/ + _animations.push({ani:ani, loop:loop, callback:callback}); -function play(ani, loop, callback){ + } - var indefinate = !loop; - - loop--; + /** + * Play a sequence of images from start to end + * + * @param {String} ani - the animation name to play + * @param {Number} loop - the number of times the animation should play + * @param {Function} callback - the optional method to call when finished + * @api private + */ - var self = this; + function play(ani, loop, callback){ - for(var i = 0; i < this._images[ani].length; i++){ + var indefinate = !loop; - var timeout = setTimeout(function(img, last){ + loop--; + + for(var i = 0; i < _images[ani].length; i++){ - return function(){ + var timeout = setTimeout(function(img, last){ + + return function(){ - show(img); + show(img); - if(last){ + if(last){ - if(indefinate && !self._unloop){ - play.apply(self, [ani, loop, callback]); - }else{ - if(!loop || self._unloop){ - if(callback) - callback(); - if(self._unloop_callback) - self._unloop_callback(); - self.next(); + if(indefinate && !_unloop){ + play(ani, loop, callback); }else{ - play.apply(self, [ani, loop, callback]); + if(!loop || _unloop){ + if(callback) + callback(); + if(_unloop_callback) + _unloop_callback(); + self.next(); + }else{ + play(ani, loop, callback); + } } } } - } - }(this._images[ani][i], !(i < this._images[ani].length - 1)), 1000 / this._fps * i); + }(_images[ani][i], !(i < _images[ani].length - 1)), 1000 / _fps * i); - this._timeouts.push(timeout); + _timeouts.push(timeout); + } } -} -/** -* Show a particular image -* -* @param {HTMLElement} img - the image element to show -* @api private -*/ + /** + * Show a particular image + * + * @param {HTMLElement} img - the image element to show + * @api private + */ + + function show(img){ -function show(img){ + img.style.visibility = 'visible'; - img.style.visibility = 'visible'; + if(_showing) + _showing.style.visibility = 'hidden'; - if(this._showing) - this._showing.style.visibility = 'hidden'; + _showing = img; - this._showing = img; + } + + return self; + +}; -} \ No newline at end of file diff --git a/index2.js b/index2.js deleted file mode 100644 index 8bdb09d..0000000 --- a/index2.js +++ /dev/null @@ -1,248 +0,0 @@ -module.exports = Kineograph; - -/** -* Initialize a new `Kineograph`. -* -* @api public -*/ - -function Kineograph(imgs) { - - if(!document || !imgs) return; - - var self = document.createElement('div'); - - self.className = 'kineograph'; - - if(imgs instanceof Array) - imgs = {'_default':imgs}; - - for(var i in imgs){ - for(var j in imgs[i]){ - image(imgs[i][j], i); - } - } - - /** - * Public variables - * - * @api public - */ - - var _images = {}; - var _animations = []; - var _animating = undefined; - var _unloop = false; - var _unloop_callback = undefined; - var _timeouts = []; - var _finish = false; - var _fps = 25; - - /** - * Add an animation to the end of the cue and start playing if it isn't already. - * - * @param {String} ani - the animation name to add - * @param {Number} loop - the number of times the animation should play - * @param {Function} callback - the optional method to call when finished - * @return {Kineograph} - * @api public - */ - - self.play = function(ani, loop, callback){ - - add(ani, loop, callback) - - if(!_animating) self.next(); - - return self; - - } - - /** - * Begin animating the next animation in the cue - * - * @return {Kineograph} - * @api public - */ - - self.next = function(){ - - _unloop = false; - self.stop(); - - if(!_animations.length){ _animating = false; return; } - - _animating = _animations.shift(); - - play(_animating.ani, _animating.loop, _animating.callback) - - return self; - - } - - /** - * Unloop any currently looping animations and allow the sequence to move onwards. - * - * @param {Function} callback - callback which is called when the loop has finished gracefully - * @return {Kineograph} - * @api public - */ - - self.unloop = function(callback){ - - _unloop = true; - _unloop_callback = callback; - - return self; - - } - - /** - * Stop any currently playing animations, without prejudice. - * - * @return {Kineograph} - * @api public - */ - - self.stop = function(){ - - while(_timeouts.length){ - - clearTimeout(_timeouts.shift()); - - } - - _animating = undefined; - - return self; - - } - - /** - * Change the fps. - * - * @return {Kineograph} - * @api public - */ - - self.fps = function(val){ - - if(typeof val === 'number') - _fps = val; - - return self; - - } - - /** - * Add a frame to the animation - * - * @param {String} path - the relative path to the image - * @param {String} key - an animtion name for the image - * @api private - */ - - function image(path, key){ - - var img = self.appendChild( document.createElement( 'img' ) ); - img.src = path; - img.style.visibility = 'hidden'; - - if(_images[key]) - _images[key].push(img); - else - _images[key] = [img]; - - } - - /** - * Add an animation to the cue - * - * @param {String} ani - the animation name to add - * @param {Number} loop - the number of times the animation should play - * @param {Function} callback - the optional method to call when finished - * @api private - */ - - function add(ani, loop, callback){ - - ani = typeof ani === 'string' ? ani : '_default'; - loop = typeof loop === 'number' ? parseInt(loop) : 1; - - if(!_images[ani]) - throw new Error(ani + ' does not exist'); - - _animations.push({ani:ani, loop:loop, callback:callback}); - - } - - /** - * Play a sequence of images from start to end - * - * @param {String} ani - the animation name to play - * @param {Number} loop - the number of times the animation should play - * @param {Function} callback - the optional method to call when finished - * @api private - */ - - function play(ani, loop, callback){ - - var indefinate = !loop; - - loop--; - - for(var i = 0; i < _images[ani].length; i++){ - - var timeout = setTimeout(function(img, last){ - - return function(){ - - show(img); - - if(last){ - - if(indefinate && !_unloop){ - play(ani, loop, callback); - }else{ - if(!loop || _unloop){ - if(callback) - callback(); - if(_unloop_callback) - _unloop_callback(); - self.next(); - }else{ - play(ani, loop, callback); - } - } - } - } - - }(_images[ani][i], !(i < _images[ani].length - 1)), 1000 / _fps * i); - - _timeouts.push(timeout); - - } - } - - /** - * Show a particular image - * - * @param {HTMLElement} img - the image element to show - * @api private - */ - - function show(img){ - - img.style.visibility = 'visible'; - - if(_showing) - _showing.style.visibility = 'hidden'; - - _showing = img; - - } - - return self; - -}; -