|
1 |
| -/*! SlotMachine - v2.1.0 - 2015-07-21 |
| 1 | +/*! SlotMachine - v2.2.0 - 2015-11-05 |
2 | 2 | * https://github.com/josex2r/jQuery-SlotMachine
|
3 | 3 | * Copyright (c) 2015 Jose Luis Represa; Licensed MIT */
|
4 | 4 | (function($, window, document, undefined) {
|
5 | 5 |
|
6 | 6 | var pluginName = "slotMachine",
|
7 | 7 | defaults = {
|
8 |
| - active: 0, //Active element [int] |
9 |
| - delay: 200, //Animation time [int] |
10 |
| - auto: false, //Repeat delay [false||int] |
11 |
| - spins: 5, //Number of spins when auto [int] |
12 |
| - randomize: null, //Randomize function, must return an integer with the selected position |
| 8 | + active: 0, //Active element [Number] |
| 9 | + delay: 200, //Animation time [Number] |
| 10 | + auto: false, //Repeat delay [false||Number] |
| 11 | + spins: 5, //Number of spins when auto [Number] |
| 12 | + randomize: null, //Randomize function, must return a number with the selected position |
13 | 13 | complete: null, //Callback function(result)
|
14 | 14 | stopHidden: true, //Stops animations if the element isn´t visible on the screen
|
15 | 15 | direction: 'up' //Animation direction ['up'||'down']
|
|
88 | 88 |
|
89 | 89 | function Timer(fn, delay) {
|
90 | 90 | var startTime,
|
91 |
| - self = this, |
92 |
| - timer, |
93 |
| - _fn = fn, |
94 |
| - _args = arguments, |
95 |
| - _delay = delay; |
| 91 | + self = this, |
| 92 | + timer, |
| 93 | + _fn = fn, |
| 94 | + _args = arguments, |
| 95 | + _delay = delay; |
96 | 96 |
|
97 | 97 | this.running = false;
|
98 | 98 |
|
|
244 | 244 | }
|
245 | 245 | }
|
246 | 246 |
|
| 247 | + /** |
| 248 | + * @desc PUBLIC - Custom setTimeout using requestAnimationFrame |
| 249 | + * @param function cb - Callback |
| 250 | + * @param Number timeout - Timeout delay |
| 251 | + */ |
| 252 | + SlotMachine.prototype.raf = function(cb, timeout) { |
| 253 | + var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, |
| 254 | + startTime = new Date().getTime(), |
| 255 | + _rafHandler = function(/*timestamp*/){ |
| 256 | + var drawStart = new Date().getTime(), |
| 257 | + diff = drawStart - startTime; |
| 258 | + |
| 259 | + if(diff < timeout){ |
| 260 | + _raf(_rafHandler); |
| 261 | + }else if(typeof cb === 'function'){ |
| 262 | + cb(); |
| 263 | + } |
| 264 | + }; |
| 265 | + |
| 266 | + _raf(_rafHandler); |
| 267 | + }; |
| 268 | + |
247 | 269 | /**
|
248 | 270 | * @desc PUBLIC - Get element offset top
|
249 |
| - * @param int index - Element position |
250 |
| - * @return int - Negative offset in px |
| 271 | + * @param Number index - Element position |
| 272 | + * @return Number - Negative offset in px |
251 | 273 | */
|
252 | 274 | SlotMachine.prototype.getTileOffset = function(index) {
|
253 | 275 | var offset = 0;
|
|
259 | 281 |
|
260 | 282 | /**
|
261 | 283 | * @desc PUBLIC - Get current showing element index
|
262 |
| - * @return int - Element index |
| 284 | + * @return Number - Element index |
263 | 285 | */
|
264 | 286 | SlotMachine.prototype.getVisibleTile = function() {
|
265 | 287 | var firstTileHeight = this.$tiles.first().height(),
|
|
270 | 292 |
|
271 | 293 | /**
|
272 | 294 | * @desc PUBLIC - Changes randomize function
|
273 |
| - * @param function|int - Set new randomize function |
| 295 | + * @param function|Number - Set new randomize function |
274 | 296 | */
|
275 | 297 | SlotMachine.prototype.setRandomize = function(rnd) {
|
276 | 298 | if (typeof rnd === 'number') {
|
|
285 | 307 | /**
|
286 | 308 | * @desc PUBLIC - Get random element different than last shown
|
287 | 309 | * @param boolean cantBeTheCurrent - true||undefined if cant be choosen the current element, prevents repeat
|
288 |
| - * @return int - Element index |
| 310 | + * @return Number - Element index |
289 | 311 | */
|
290 | 312 | SlotMachine.prototype.getRandom = function(cantBeTheCurrent) {
|
291 | 313 | var rnd,
|
|
299 | 321 |
|
300 | 322 | /**
|
301 | 323 | * @desc PUBLIC - Get random element based on the custom randomize function
|
302 |
| - * @return int - Element index |
| 324 | + * @return Number - Element index |
303 | 325 | */
|
304 | 326 | SlotMachine.prototype.getCustom = function() {
|
305 | 327 | var choosen;
|
|
317 | 339 |
|
318 | 340 | /**
|
319 | 341 | * @desc PRIVATE - Get the previous element (no direction related)
|
320 |
| - * @return int - Element index |
| 342 | + * @return Number - Element index |
321 | 343 | */
|
322 | 344 | SlotMachine.prototype._getPrev = function() {
|
323 | 345 | var prevIndex = (this.active - 1 < 0) ? (this.$tiles.length - 1) : (this.active - 1);
|
|
326 | 348 |
|
327 | 349 | /**
|
328 | 350 | * @desc PRIVATE - Get the next element (no direction related)
|
329 |
| - * @return int - Element index |
| 351 | + * @return Number - Element index |
330 | 352 | */
|
331 | 353 | SlotMachine.prototype._getNext = function() {
|
332 | 354 | var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0;
|
|
335 | 357 |
|
336 | 358 | /**
|
337 | 359 | * @desc PUBLIC - Get the previous element dor selected direction
|
338 |
| - * @return int - Element index |
| 360 | + * @return Number - Element index |
339 | 361 | */
|
340 | 362 | SlotMachine.prototype.getPrev = function() {
|
341 | 363 | return this._direction.selected === 'up' ? this._getPrev() : this._getNext();
|
342 | 364 | };
|
343 | 365 |
|
344 | 366 | /**
|
345 | 367 | * @desc PUBLIC - Get the next element
|
346 |
| - * @return int - Element index |
| 368 | + * @return Number - Element index |
347 | 369 | */
|
348 | 370 | SlotMachine.prototype.getNext = function() {
|
349 | 371 | return this._direction.selected === 'up' ? this._getNext() : this._getPrev();
|
|
367 | 389 | * @param string||boolean fade - Set fade gradient effect
|
368 | 390 | */
|
369 | 391 | SlotMachine.prototype._setAnimationFX = function(FX_SPEED, fade) {
|
370 |
| - var self = this; |
371 |
| - |
372 |
| - setTimeout(function() { |
373 |
| - self.$tiles.removeClass([FX_FAST, FX_NORMAL, FX_SLOW].join(' ')).addClass(FX_SPEED); |
| 392 | + this.raf(function() { |
| 393 | + this.$tiles.removeClass([FX_FAST, FX_NORMAL, FX_SLOW].join(' ')).addClass(FX_SPEED); |
374 | 394 |
|
375 | 395 | if (fade !== true || FX_SPEED === FX_STOP) {
|
376 |
| - self.$slot.add(self.$tiles).removeClass(FX_GRADIENT); |
| 396 | + this.$slot.add(this.$tiles).removeClass(FX_GRADIENT); |
377 | 397 | } else {
|
378 |
| - self.$slot.add(self.$tiles).addClass(FX_GRADIENT); |
| 398 | + this.$slot.add(this.$tiles).addClass(FX_GRADIENT); |
379 | 399 | }
|
380 |
| - }, this.settings.delay / 4); |
| 400 | + }.bind(this), this.settings.delay / 4); |
381 | 401 | };
|
382 | 402 |
|
383 | 403 | /**
|
|
389 | 409 |
|
390 | 410 | /**
|
391 | 411 | * @desc PRIVATE - Checks if the machine is on the screen
|
392 |
| - * @return int - Returns true if machine is on the screen |
| 412 | + * @return Number - Returns true if machine is on the screen |
393 | 413 | */
|
394 | 414 | SlotMachine.prototype.isVisible = function() {
|
395 | 415 | //Stop animation if element is [above||below] screen, best for performance
|
|
401 | 421 |
|
402 | 422 | /**
|
403 | 423 | * @desc PUBLIC - SELECT previous element relative to the current active element
|
404 |
| - * @return int - Returns result index |
| 424 | + * @return Number - Returns result index |
405 | 425 | */
|
406 | 426 | SlotMachine.prototype.prev = function() {
|
407 | 427 | this.futureActive = this.getPrev();
|
|
412 | 432 |
|
413 | 433 | /**
|
414 | 434 | * @desc PUBLIC - SELECT next element relative to the current active element
|
415 |
| - * @return int - Returns result index |
| 435 | + * @return Number - Returns result index |
416 | 436 | */
|
417 | 437 | SlotMachine.prototype.next = function() {
|
418 | 438 | this.futureActive = this.getNext();
|
|
423 | 443 |
|
424 | 444 | /**
|
425 | 445 | * @desc PUBLIC - Starts shuffling the elements
|
426 |
| - * @param int repeations - Number of shuffles (undefined to make infinite animation |
427 |
| - * @return int - Returns result index |
| 446 | + * @param Number repeations - Number of shuffles (undefined to make infinite animation |
| 447 | + * @return Number - Returns result index |
428 | 448 | */
|
429 | 449 | SlotMachine.prototype.shuffle = function(spins, onComplete) {
|
430 | 450 | var self = this;
|
|
491 | 511 |
|
492 | 512 | /**
|
493 | 513 | * @desc PUBLIC - Stop shuffling the elements
|
494 |
| - * @return int - Returns result index |
| 514 | + * @return Number - Returns result index |
495 | 515 | */
|
496 | 516 | SlotMachine.prototype.stop = function(showGradient) {
|
497 | 517 | if (!this.isRunning) {
|
|
549 | 569 | });
|
550 | 570 |
|
551 | 571 | //Disable blur
|
552 |
| - setTimeout(function() { |
553 |
| - self._setAnimationFX(FX_STOP, false); |
554 |
| - }, delay / 1.75); |
| 572 | + this.raf(function() { |
| 573 | + this._setAnimationFX(FX_STOP, false); |
| 574 | + }.bind(this), delay / 1.75); |
555 | 575 |
|
556 | 576 | return this.active;
|
557 | 577 | };
|
|
568 | 588 | }
|
569 | 589 | self.isRunning = true;
|
570 | 590 | if (!self.isVisible() && self.settings.stopHidden === true) {
|
571 |
| - setTimeout(function() { |
| 591 | + self.raf(function() { |
572 | 592 | self._timer.reset();
|
573 | 593 | }, 500);
|
574 | 594 | } else {
|
|
0 commit comments