diff --git a/src/jquery.slotmachine.js b/src/jquery.slotmachine.js index cd199ca..8dcc22a 100644 --- a/src/jquery.slotmachine.js +++ b/src/jquery.slotmachine.js @@ -9,11 +9,11 @@ var pluginName = "slotMachine", defaults = { - active: 0, //Active element [int] - delay: 200, //Animation time [int] - auto: false, //Repeat delay [false||int] - spins: 5, //Number of spins when auto [int] - randomize: null, //Randomize function, must return an integer with the selected position + active: 0, //Active element [Number] + delay: 200, //Animation time [Number] + auto: false, //Repeat delay [false||Number] + spins: 5, //Number of spins when auto [Number] + randomize: null, //Randomize function, must return a number with the selected position complete: null, //Callback function(result) stopHidden: true, //Stops animations if the element isnĀ“t visible on the screen direction: 'up' //Animation direction ['up'||'down'] @@ -92,11 +92,11 @@ function Timer(fn, delay) { var startTime, - self = this, - timer, - _fn = fn, - _args = arguments, - _delay = delay; + self = this, + timer, + _fn = fn, + _args = arguments, + _delay = delay; this.running = false; @@ -248,10 +248,32 @@ } } + /** + * @desc PUBLIC - Custom setTimeout using requestAnimationFrame + * @param function cb - Callback + * @param Number timeout - Timeout delay + */ + SlotMachine.prototype.raf = function(cb, timeout) { + var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, + startTime = new Date().getTime(), + _rafHandler = function(timestamp){ + var drawStart = new Date().getTime(), + diff = drawStart - startTime; + + if(diff < timeout){ + _raf(_rafHandler); + }else if(typeof cb === 'function'){ + cb(); + } + }; + + _raf(_rafHandler); + }; + /** * @desc PUBLIC - Get element offset top - * @param int index - Element position - * @return int - Negative offset in px + * @param Number index - Element position + * @return Number - Negative offset in px */ SlotMachine.prototype.getTileOffset = function(index) { var offset = 0; @@ -263,7 +285,7 @@ /** * @desc PUBLIC - Get current showing element index - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype.getVisibleTile = function() { var firstTileHeight = this.$tiles.first().height(), @@ -274,7 +296,7 @@ /** * @desc PUBLIC - Changes randomize function - * @param function|int - Set new randomize function + * @param function|Number - Set new randomize function */ SlotMachine.prototype.setRandomize = function(rnd) { if (typeof rnd === 'number') { @@ -289,7 +311,7 @@ /** * @desc PUBLIC - Get random element different than last shown * @param boolean cantBeTheCurrent - true||undefined if cant be choosen the current element, prevents repeat - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype.getRandom = function(cantBeTheCurrent) { var rnd, @@ -303,7 +325,7 @@ /** * @desc PUBLIC - Get random element based on the custom randomize function - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype.getCustom = function() { var choosen; @@ -321,7 +343,7 @@ /** * @desc PRIVATE - Get the previous element (no direction related) - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype._getPrev = function() { var prevIndex = (this.active - 1 < 0) ? (this.$tiles.length - 1) : (this.active - 1); @@ -330,7 +352,7 @@ /** * @desc PRIVATE - Get the next element (no direction related) - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype._getNext = function() { var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0; @@ -339,7 +361,7 @@ /** * @desc PUBLIC - Get the previous element dor selected direction - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype.getPrev = function() { return this._direction.selected === 'up' ? this._getPrev() : this._getNext(); @@ -347,7 +369,7 @@ /** * @desc PUBLIC - Get the next element - * @return int - Element index + * @return Number - Element index */ SlotMachine.prototype.getNext = function() { return this._direction.selected === 'up' ? this._getNext() : this._getPrev(); @@ -371,17 +393,15 @@ * @param string||boolean fade - Set fade gradient effect */ SlotMachine.prototype._setAnimationFX = function(FX_SPEED, fade) { - var self = this; - - setTimeout(function() { - self.$tiles.removeClass([FX_FAST, FX_NORMAL, FX_SLOW].join(' ')).addClass(FX_SPEED); + this.raf(function() { + this.$tiles.removeClass([FX_FAST, FX_NORMAL, FX_SLOW].join(' ')).addClass(FX_SPEED); if (fade !== true || FX_SPEED === FX_STOP) { - self.$slot.add(self.$tiles).removeClass(FX_GRADIENT); + this.$slot.add(this.$tiles).removeClass(FX_GRADIENT); } else { - self.$slot.add(self.$tiles).addClass(FX_GRADIENT); + this.$slot.add(this.$tiles).addClass(FX_GRADIENT); } - }, this.settings.delay / 4); + }.bind(this), this.settings.delay / 4); }; /** @@ -393,7 +413,7 @@ /** * @desc PRIVATE - Checks if the machine is on the screen - * @return int - Returns true if machine is on the screen + * @return Number - Returns true if machine is on the screen */ SlotMachine.prototype.isVisible = function() { //Stop animation if element is [above||below] screen, best for performance @@ -405,7 +425,7 @@ /** * @desc PUBLIC - SELECT previous element relative to the current active element - * @return int - Returns result index + * @return Number - Returns result index */ SlotMachine.prototype.prev = function() { this.futureActive = this.getPrev(); @@ -416,7 +436,7 @@ /** * @desc PUBLIC - SELECT next element relative to the current active element - * @return int - Returns result index + * @return Number - Returns result index */ SlotMachine.prototype.next = function() { this.futureActive = this.getNext(); @@ -427,8 +447,8 @@ /** * @desc PUBLIC - Starts shuffling the elements - * @param int repeations - Number of shuffles (undefined to make infinite animation - * @return int - Returns result index + * @param Number repeations - Number of shuffles (undefined to make infinite animation + * @return Number - Returns result index */ SlotMachine.prototype.shuffle = function(spins, onComplete) { var self = this; @@ -495,7 +515,7 @@ /** * @desc PUBLIC - Stop shuffling the elements - * @return int - Returns result index + * @return Number - Returns result index */ SlotMachine.prototype.stop = function(showGradient) { if (!this.isRunning) { @@ -553,9 +573,9 @@ }); //Disable blur - setTimeout(function() { - self._setAnimationFX(FX_STOP, false); - }, delay / 1.75); + this.raf(function() { + this._setAnimationFX(FX_STOP, false); + }.bind(this), delay / 1.75); return this.active; }; @@ -572,7 +592,7 @@ } self.isRunning = true; if (!self.isVisible() && self.settings.stopHidden === true) { - setTimeout(function() { + self.raf(function() { self._timer.reset(); }, 500); } else {