diff --git a/README.md b/README.md index fdd9c22..b091116 100644 --- a/README.md +++ b/README.md @@ -76,41 +76,47 @@ Change spin result, if the returned value is out of bounds, the element will be machine.setRandomize(foo); //foo must be a function (should return int) or an int ``` +Change spin direction, machine must not be running: + +```javascript +machine.setDirection(direction); //direction must be a String ('up' || 'down') +``` + ## Params Params must be an object, optionally containing the next parammeters: -### active +#### active Set the first element active: 0 -### delay +#### delay Set spin animation time delay: 200 -### auto +#### auto Pass an int as miliseconds to make the machine auto rotate auto: false -### spins +#### spins The number of spins when auto is enabled spins: false -### stopHidden +#### stopHidden Stop animation if the element is above or below the screen stopHidden: true -### randomize +#### randomize Pass a function to select your own random element. This function must return an integer between 0 (first element) and max number of elements. @@ -125,6 +131,11 @@ $('#foo').slotMachine({ } }); ``` +#### direction + +Animation direction ('up' || 'down') + + direction: 'up' ## Authors diff --git a/bower.json b/bower.json index ae0f1cd..3593463 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "jQuery-SlotMachine", "description": "A simple jQuery plugin to make slot machine animation effect", - "version": "2.0.11", + "version": "2.1.0", "keywords": [ "slots", "gambling", diff --git a/dist/jquery.slotmachine.js b/dist/jquery.slotmachine.js index 8ff567e..19b74b8 100644 --- a/dist/jquery.slotmachine.js +++ b/dist/jquery.slotmachine.js @@ -1,4 +1,4 @@ -/*! SlotMachine - v2.0.11 - 2015-07-21 +/*! SlotMachine - v2.1.0 - 2015-07-21 * https://github.com/josex2r/jQuery-SlotMachine * Copyright (c) 2015 Jose Luis Represa; Licensed MIT */ (function($, window, document, undefined) { @@ -11,7 +11,8 @@ spins: 5, //Number of spins when auto [int] randomize: null, //Randomize function, must return an integer with the selected position complete: null, //Callback function(result) - stopHidden: true //Stops animations if the element isn´t visible on the screen + stopHidden: true, //Stops animations if the element isn´t visible on the screen + direction: 'up' //Animation direction ['up'||'down'] }; var FX_FAST = 'slotMachineBlurFast', @@ -208,8 +209,30 @@ //Set min top offset this._minTop = -this._$fakeFirstTile.outerHeight(); + //Direction parammeters + this._direction = { + selected: this.settings.direction === 'down' ? 'down' : 'up', + up: { + initial: this.getTileOffset(this.active), + first: 0, + last: this.getTileOffset(this.$tiles.length), + to: this._maxTop, + firstToLast: this.getTileOffset(this.$tiles.length), + lastToFirst: 0 + }, + down: { + initial: this.getTileOffset(this.active), + first: this.getTileOffset(this.$tiles.length), + last: 0, + to: this._minTop, + firstToLast: this.getTileOffset(this.$tiles.length), + lastToFirst: 0 + }, + get: function(param){return this[this.selected][param];} + }; + //Show active element - this.$container.css('margin-top', this.getTileOffset(this.active)); + this.$container.css('margin-top', this._direction.get('initial')); //Start auto animation if (this.settings.auto !== false) { @@ -222,7 +245,7 @@ } /** - * @desc PRIVATE - Get element offset top + * @desc PUBLIC - Get element offset top * @param int index - Element position * @return int - Negative offset in px */ @@ -235,7 +258,7 @@ }; /** - * @desc PRIVATE - Get current showing element index + * @desc PUBLIC - Get current showing element index * @return int - Element index */ SlotMachine.prototype.getVisibleTile = function() { @@ -260,7 +283,7 @@ }; /** - * @desc PRIVATE - Get random element different than last shown + * @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 */ @@ -275,7 +298,7 @@ }; /** - * @desc PRIVATE - Get random element based on the custom randomize function + * @desc PUBLIC - Get random element based on the custom randomize function * @return int - Element index */ SlotMachine.prototype.getCustom = function() { @@ -293,23 +316,51 @@ }; /** - * @desc PRIVATE - Get the previous element + * @desc PRIVATE - Get the previous element (no direction related) * @return int - Element index */ - SlotMachine.prototype.getPrev = function() { + SlotMachine.prototype._getPrev = function() { var prevIndex = (this.active - 1 < 0) ? (this.$tiles.length - 1) : (this.active - 1); return prevIndex; }; /** - * @desc PRIVATE - Get the next element + * @desc PRIVATE - Get the next element (no direction related) * @return int - Element index */ - SlotMachine.prototype.getNext = function() { + SlotMachine.prototype._getNext = function() { var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0; return nextIndex; }; + /** + * @desc PUBLIC - Get the previous element dor selected direction + * @return int - Element index + */ + SlotMachine.prototype.getPrev = function() { + return this._direction.selected === 'up' ? this._getPrev() : this._getNext(); + }; + + /** + * @desc PUBLIC - Get the next element + * @return int - Element index + */ + SlotMachine.prototype.getNext = function() { + return this._direction.selected === 'up' ? this._getNext() : this._getPrev(); + }; + + /** + * @desc PUBLIC - Set the spin direction + * @return Object - Direction data + */ + SlotMachine.prototype.setDirection = function(direction) { + if (this.isRunning) { + return; + } + this._direction.selected = direction === 'down' ? 'down' : 'up'; + return this._direction[this._direction.selected]; + }; + /** * @desc PRIVATE - Set CSS classes to make speed effect * @param string FX_SPEED - Element speed [FX_FAST_BLUR||FX_NORMAL_BLUR||FX_SLOW_BLUR||FX_STOP] @@ -333,7 +384,7 @@ * @desc PRIVATE - Reset active element position */ SlotMachine.prototype._resetPosition = function() { - this.$container.css('margin-top', this.getTileOffset(this.active)); + this.$container.css('margin-top', this._direction.get('initial')); }; /** @@ -371,7 +422,7 @@ }; /** - * @desc PRIVATE - Starts shuffling the elements + * @desc PUBLIC - Starts shuffling the elements * @param int repeations - Number of shuffles (undefined to make infinite animation * @return int - Returns result index */ @@ -421,10 +472,10 @@ self.stop(); } else { this.$container.animate({ - marginTop: this._maxTop + marginTop: this._direction.get('to') }, delay, 'linear', function() { //Reset top position - self.$container.css('margin-top', 0); + self.$container.css('margin-top', self._direction.get('first')); if (spins - 1 <= 0) { self.stop(); @@ -439,7 +490,7 @@ }; /** - * @desc PRIVATE - Stop shuffling the elements + * @desc PUBLIC - Stop shuffling the elements * @return int - Returns result index */ SlotMachine.prototype.stop = function(showGradient) { @@ -465,12 +516,12 @@ if (this.futureActive > this.active) { //We are moving to the prev (first to last) if (this.active === 0 && this.futureActive === this.$tiles.length - 1) { - this.$container.css('margin-top', this.getTileOffset(this.$tiles.length)); + this.$container.css('margin-top', this._direction.get('firstToLast')); } } else { //We are moving to the next (last to first) if (this.active === this.$tiles.length - 1 && this.futureActive === 0) { - this.$container.css('margin-top', 0); + this.$container.css('margin-top', this._direction.get('lastToFirst')); } } @@ -506,7 +557,7 @@ }; /** - * @desc PRIVATE - Start auto shufflings, animation stops each 3 repeations. Then restart animation recursively + * @desc PUBLIC - Start auto shufflings, animation stops each 3 repeations. Then restart animation recursively */ SlotMachine.prototype.auto = function() { var self = this; @@ -529,8 +580,6 @@ }, this.settings.auto); }; - - /* * Create new plugin instance if needed and return it */ diff --git a/dist/jquery.slotmachine.min.js b/dist/jquery.slotmachine.min.js index d2128eb..90199f5 100644 --- a/dist/jquery.slotmachine.min.js +++ b/dist/jquery.slotmachine.min.js @@ -1,4 +1,4 @@ -/*! SlotMachine - v2.0.11 - 2015-07-21 +/*! SlotMachine - v2.1.0 - 2015-07-21 * https://github.com/josex2r/jQuery-SlotMachine * Copyright (c) 2015 Jose Luis Represa; Licensed MIT */ -!function(a,b,c,d){function e(a,b){var c,d,e=this,f=a,g=arguments,h=b;this.running=!1,this.onpause=function(){},this.onresume=function(){},this.cancel=function(){this.running=!1,clearTimeout(d)},this.pause=function(){this.running&&(b-=(new Date).getTime()-c,this.cancel(),this.onpause())},this.resume=function(){this.running||(this.running=!0,c=(new Date).getTime(),d=setTimeout(function(){f.apply(e,Array.prototype.slice.call(g,2,g.length))},b),this.onresume())},this.reset=function(){this.cancel(),this.running=!0,b=h,d=setTimeout(function(){f.apply(e,Array.prototype.slice.call(g,2,g.length))},h)},this.add=function(a){this.pause(),b+=a,this.resume()},this.resume()}function f(b,c){this.element=b,this.settings=a.extend({},i,c),this.defaults=i,this.name=h,this.$slot=a(b),this.$tiles=this.$slot.children(),this.$container=null,this._minTop=null,this._maxTop=null,this._$fakeFirstTile=null,this._$fakeLastTile=null,this._timer=null,this._oncompleteStack=[this.settings.complete],this._spinsLeft=null,this.futureActive=null,this.isRunning=!1,this.isStopping=!1,this.active=this.settings.active,this.$slot.css("overflow","hidden"),(this.settings.active<0||this.settings.active>=this.$tiles.length)&&(this.settings.active=0,this.active=0),this.$container=this.$tiles.wrapAll('
').parent(),this._maxTop=-this.$container.height(),this._$fakeFirstTile=this.$tiles.last().clone(),this._$fakeLastTile=this.$tiles.first().clone(),this.$container.prepend(this._$fakeFirstTile),this.$container.append(this._$fakeLastTile),this._minTop=-this._$fakeFirstTile.outerHeight(),this.$container.css("margin-top",this.getTileOffset(this.active)),this.settings.auto!==!1&&(this.settings.auto===!0?this.shuffle():this.auto())}function g(b,c){var d;return a.data(b[0],"plugin_"+h)?d=a.data(b[0],"plugin_"+h):(d=new f(b,c),a.data(b[0],"plugin_"+h,d)),d}var h="slotMachine",i={active:0,delay:200,auto:!1,spins:5,randomize:null,complete:null,stopHidden:!0},j="slotMachineBlurFast",k="slotMachineBlurMedium",l="slotMachineBlurSlow",m="slotMachineGradient",n=m;a(c).ready(function(){var b='#slotMachineBlurFilterFast',c='#slotMachineBlurFilterMedium',d='#slotMachineBlurFilterSlow',e='#slotMachineFadeMask';a("body").append("')}),"function"!=typeof a.easing.easeOutBounce&&a.extend(a.easing,{easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?7.5625*d*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}}),f.prototype.getTileOffset=function(a){for(var b=0,c=0;a>c;c++)b+=this.$tiles.eq(c).outerHeight();return-b+this._minTop},f.prototype.getVisibleTile=function(){var a=this.$tiles.first().height(),b=parseInt(this.$container.css("margin-top").replace(/px/,""),10);return Math.abs(Math.round(b/a))-1},f.prototype.setRandomize=function(a){this.settings.randomize="number"==typeof a?function(){return a}:a},f.prototype.getRandom=function(a){var b,c=a||!1;do b=Math.floor(Math.random()*this.$tiles.length);while(c&&b===this.active&&b>=0);return b},f.prototype.getCustom=function(){var a;if(null!==this.settings.randomize&&"function"==typeof this.settings.randomize){var b=this.settings.randomize.apply(this,[this.active]);(0>b||b>=this.$tiles.length)&&(b=0),a=b}else a=this.getRandom();return a},f.prototype.getPrev=function(){var a=this.active-1<0?this.$tiles.length-1:this.active-1;return a},f.prototype.getNext=function(){var a=this.active+1a(b).scrollTop()+a(b).height(),d=a(b).scrollTop()>this.$slot.height()+this.$slot.offset().top;return!c&&!d},f.prototype.prev=function(){return this.futureActive=this.getPrev(),this.isRunning=!0,this.stop(!1),this.futureActive},f.prototype.next=function(){return this.futureActive=this.getNext(),this.isRunning=!0,this.stop(!1),this.futureActive},f.prototype.shuffle=function(a,b){var c=this;b!==d&&(this._oncompleteStack[1]=b),this.isRunning=!0;var e=this.settings.delay;if(null===this.futureActive){var f=this.getCustom();this.futureActive=f}if("number"==typeof a)switch(a){case 1:case 2:this._setAnimationFX(l,!0);break;case 3:case 4:this._setAnimationFX(k,!0),e/=1.5;break;default:this._setAnimationFX(j,!0),e/=2}else this._setAnimationFX(j,!0),e/=2;return this.isVisible()||this.settings.stopHidden!==!0?this.$container.animate({marginTop:this._maxTop},e,"linear",function(){c.$container.css("margin-top",0),0>=a-1?c.stop():c.shuffle(a-1)}):(a=0,c.stop()),this.futureActive},f.prototype.stop=function(a){if(this.isRunning){if(this.isStopping)return this.futureActive;var b=this;this.$container.clearQueue().stop(!0,!1),this._setAnimationFX(l,a===d?!0:a),this.isRunning=!0,this.isStopping=!0,this.active=this.getVisibleTile(),this.futureActive>this.active?0===this.active&&this.futureActive===this.$tiles.length-1&&this.$container.css("margin-top",this.getTileOffset(this.$tiles.length)):this.active===this.$tiles.length-1&&0===this.futureActive&&this.$container.css("margin-top",0),this.active=this.futureActive;var c=3*this.settings.delay;return this.$container.animate({marginTop:this.getTileOffset(this.active)},c,"easeOutBounce",function(){b.isStopping=!1,b.isRunning=!1,b.futureActive=null,"function"==typeof b._oncompleteStack[0]&&b._oncompleteStack[0].apply(b,[b.active]),"function"==typeof b._oncompleteStack[1]&&b._oncompleteStack[1].apply(b,[b.active])}),setTimeout(function(){b._setAnimationFX(n,!1)},c/1.75),this.active}},f.prototype.auto=function(){var a=this;this._timer=new e(function(){"function"!=typeof a.settings.randomize&&(a.futureActive=a.getNext()),a.isRunning=!0,a.isVisible()||a.settings.stopHidden!==!0?a.shuffle(a.settings.spins,function(){a._timer.reset()}):setTimeout(function(){a._timer.reset()},500)},this.settings.auto)},a.fn[h]=function(b){if(1===this.length)return g(this,b);var c=this;return a.map(c,function(a,d){var e=c.eq(d);return g(e,b)})}}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){function e(a,b){var c,d,e=this,f=a,g=arguments,h=b;this.running=!1,this.onpause=function(){},this.onresume=function(){},this.cancel=function(){this.running=!1,clearTimeout(d)},this.pause=function(){this.running&&(b-=(new Date).getTime()-c,this.cancel(),this.onpause())},this.resume=function(){this.running||(this.running=!0,c=(new Date).getTime(),d=setTimeout(function(){f.apply(e,Array.prototype.slice.call(g,2,g.length))},b),this.onresume())},this.reset=function(){this.cancel(),this.running=!0,b=h,d=setTimeout(function(){f.apply(e,Array.prototype.slice.call(g,2,g.length))},h)},this.add=function(a){this.pause(),b+=a,this.resume()},this.resume()}function f(b,c){this.element=b,this.settings=a.extend({},i,c),this.defaults=i,this.name=h,this.$slot=a(b),this.$tiles=this.$slot.children(),this.$container=null,this._minTop=null,this._maxTop=null,this._$fakeFirstTile=null,this._$fakeLastTile=null,this._timer=null,this._oncompleteStack=[this.settings.complete],this._spinsLeft=null,this.futureActive=null,this.isRunning=!1,this.isStopping=!1,this.active=this.settings.active,this.$slot.css("overflow","hidden"),(this.settings.active<0||this.settings.active>=this.$tiles.length)&&(this.settings.active=0,this.active=0),this.$container=this.$tiles.wrapAll('
').parent(),this._maxTop=-this.$container.height(),this._$fakeFirstTile=this.$tiles.last().clone(),this._$fakeLastTile=this.$tiles.first().clone(),this.$container.prepend(this._$fakeFirstTile),this.$container.append(this._$fakeLastTile),this._minTop=-this._$fakeFirstTile.outerHeight(),this._direction={selected:"down"===this.settings.direction?"down":"up",up:{initial:this.getTileOffset(this.active),first:0,last:this.getTileOffset(this.$tiles.length),to:this._maxTop,firstToLast:this.getTileOffset(this.$tiles.length),lastToFirst:0},down:{initial:this.getTileOffset(this.active),first:this.getTileOffset(this.$tiles.length),last:0,to:this._minTop,firstToLast:this.getTileOffset(this.$tiles.length),lastToFirst:0},get:function(a){return this[this.selected][a]}},this.$container.css("margin-top",this._direction.get("initial")),this.settings.auto!==!1&&(this.settings.auto===!0?this.shuffle():this.auto())}function g(b,c){var d;return a.data(b[0],"plugin_"+h)?d=a.data(b[0],"plugin_"+h):(d=new f(b,c),a.data(b[0],"plugin_"+h,d)),d}var h="slotMachine",i={active:0,delay:200,auto:!1,spins:5,randomize:null,complete:null,stopHidden:!0,direction:"up"},j="slotMachineBlurFast",k="slotMachineBlurMedium",l="slotMachineBlurSlow",m="slotMachineGradient",n=m;a(c).ready(function(){var b='#slotMachineBlurFilterFast',c='#slotMachineBlurFilterMedium',d='#slotMachineBlurFilterSlow',e='#slotMachineFadeMask';a("body").append("')}),"function"!=typeof a.easing.easeOutBounce&&a.extend(a.easing,{easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?7.5625*d*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}}),f.prototype.getTileOffset=function(a){for(var b=0,c=0;a>c;c++)b+=this.$tiles.eq(c).outerHeight();return-b+this._minTop},f.prototype.getVisibleTile=function(){var a=this.$tiles.first().height(),b=parseInt(this.$container.css("margin-top").replace(/px/,""),10);return Math.abs(Math.round(b/a))-1},f.prototype.setRandomize=function(a){this.settings.randomize="number"==typeof a?function(){return a}:a},f.prototype.getRandom=function(a){var b,c=a||!1;do b=Math.floor(Math.random()*this.$tiles.length);while(c&&b===this.active&&b>=0);return b},f.prototype.getCustom=function(){var a;if(null!==this.settings.randomize&&"function"==typeof this.settings.randomize){var b=this.settings.randomize.apply(this,[this.active]);(0>b||b>=this.$tiles.length)&&(b=0),a=b}else a=this.getRandom();return a},f.prototype._getPrev=function(){var a=this.active-1<0?this.$tiles.length-1:this.active-1;return a},f.prototype._getNext=function(){var a=this.active+1a(b).scrollTop()+a(b).height(),d=a(b).scrollTop()>this.$slot.height()+this.$slot.offset().top;return!c&&!d},f.prototype.prev=function(){return this.futureActive=this.getPrev(),this.isRunning=!0,this.stop(!1),this.futureActive},f.prototype.next=function(){return this.futureActive=this.getNext(),this.isRunning=!0,this.stop(!1),this.futureActive},f.prototype.shuffle=function(a,b){var c=this;b!==d&&(this._oncompleteStack[1]=b),this.isRunning=!0;var e=this.settings.delay;if(null===this.futureActive){var f=this.getCustom();this.futureActive=f}if("number"==typeof a)switch(a){case 1:case 2:this._setAnimationFX(l,!0);break;case 3:case 4:this._setAnimationFX(k,!0),e/=1.5;break;default:this._setAnimationFX(j,!0),e/=2}else this._setAnimationFX(j,!0),e/=2;return this.isVisible()||this.settings.stopHidden!==!0?this.$container.animate({marginTop:this._direction.get("to")},e,"linear",function(){c.$container.css("margin-top",c._direction.get("first")),0>=a-1?c.stop():c.shuffle(a-1)}):(a=0,c.stop()),this.futureActive},f.prototype.stop=function(a){if(this.isRunning){if(this.isStopping)return this.futureActive;var b=this;this.$container.clearQueue().stop(!0,!1),this._setAnimationFX(l,a===d?!0:a),this.isRunning=!0,this.isStopping=!0,this.active=this.getVisibleTile(),this.futureActive>this.active?0===this.active&&this.futureActive===this.$tiles.length-1&&this.$container.css("margin-top",this._direction.get("firstToLast")):this.active===this.$tiles.length-1&&0===this.futureActive&&this.$container.css("margin-top",this._direction.get("lastToFirst")),this.active=this.futureActive;var c=3*this.settings.delay;return this.$container.animate({marginTop:this.getTileOffset(this.active)},c,"easeOutBounce",function(){b.isStopping=!1,b.isRunning=!1,b.futureActive=null,"function"==typeof b._oncompleteStack[0]&&b._oncompleteStack[0].apply(b,[b.active]),"function"==typeof b._oncompleteStack[1]&&b._oncompleteStack[1].apply(b,[b.active])}),setTimeout(function(){b._setAnimationFX(n,!1)},c/1.75),this.active}},f.prototype.auto=function(){var a=this;this._timer=new e(function(){"function"!=typeof a.settings.randomize&&(a.futureActive=a.getNext()),a.isRunning=!0,a.isVisible()||a.settings.stopHidden!==!0?a.shuffle(a.settings.spins,function(){a._timer.reset()}):setTimeout(function(){a._timer.reset()},500)},this.settings.auto)},a.fn[h]=function(b){if(1===this.length)return g(this,b);var c=this;return a.map(c,function(a,d){var e=c.eq(d);return g(e,b)})}}(jQuery,window,document); \ No newline at end of file diff --git a/package.json b/package.json index 4ed8960..2447617 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery-slotmachine", - "version": "2.0.11", + "version": "2.1.0", "engines": { "node": ">= 0.8.0" }, diff --git a/slotmachine.jquery.json b/slotmachine.jquery.json index 3d7df71..55e30d7 100644 --- a/slotmachine.jquery.json +++ b/slotmachine.jquery.json @@ -11,7 +11,7 @@ "winning", "machine" ], - "version": "2.0.11", + "version": "2.1.0", "download": "https://github.com/josex2r/jQuery-SlotMachine", "homepage": "https://github.com/josex2r/jQuery-SlotMachine", "demo": "http://josex2r.github.io/jQuery-SlotMachine/", diff --git a/src/jquery.slotmachine.js b/src/jquery.slotmachine.js index 881a207..cd199ca 100644 --- a/src/jquery.slotmachine.js +++ b/src/jquery.slotmachine.js @@ -1,5 +1,5 @@ /* - * jQuery Slot Machine v2.0.11 + * jQuery Slot Machine v2.1.0 * https://github.com/josex2r/jQuery-SlotMachine * * Copyright 2014 Jose Luis Represa @@ -15,7 +15,8 @@ spins: 5, //Number of spins when auto [int] randomize: null, //Randomize function, must return an integer with the selected position complete: null, //Callback function(result) - stopHidden: true //Stops animations if the element isn´t visible on the screen + stopHidden: true, //Stops animations if the element isn´t visible on the screen + direction: 'up' //Animation direction ['up'||'down'] }; var FX_FAST = 'slotMachineBlurFast', @@ -212,8 +213,30 @@ //Set min top offset this._minTop = -this._$fakeFirstTile.outerHeight(); + //Direction parammeters + this._direction = { + selected: this.settings.direction === 'down' ? 'down' : 'up', + up: { + initial: this.getTileOffset(this.active), + first: 0, + last: this.getTileOffset(this.$tiles.length), + to: this._maxTop, + firstToLast: this.getTileOffset(this.$tiles.length), + lastToFirst: 0 + }, + down: { + initial: this.getTileOffset(this.active), + first: this.getTileOffset(this.$tiles.length), + last: 0, + to: this._minTop, + firstToLast: this.getTileOffset(this.$tiles.length), + lastToFirst: 0 + }, + get: function(param){return this[this.selected][param];} + }; + //Show active element - this.$container.css('margin-top', this.getTileOffset(this.active)); + this.$container.css('margin-top', this._direction.get('initial')); //Start auto animation if (this.settings.auto !== false) { @@ -226,7 +249,7 @@ } /** - * @desc PRIVATE - Get element offset top + * @desc PUBLIC - Get element offset top * @param int index - Element position * @return int - Negative offset in px */ @@ -239,7 +262,7 @@ }; /** - * @desc PRIVATE - Get current showing element index + * @desc PUBLIC - Get current showing element index * @return int - Element index */ SlotMachine.prototype.getVisibleTile = function() { @@ -264,7 +287,7 @@ }; /** - * @desc PRIVATE - Get random element different than last shown + * @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 */ @@ -279,7 +302,7 @@ }; /** - * @desc PRIVATE - Get random element based on the custom randomize function + * @desc PUBLIC - Get random element based on the custom randomize function * @return int - Element index */ SlotMachine.prototype.getCustom = function() { @@ -297,23 +320,51 @@ }; /** - * @desc PRIVATE - Get the previous element + * @desc PRIVATE - Get the previous element (no direction related) * @return int - Element index */ - SlotMachine.prototype.getPrev = function() { + SlotMachine.prototype._getPrev = function() { var prevIndex = (this.active - 1 < 0) ? (this.$tiles.length - 1) : (this.active - 1); return prevIndex; }; /** - * @desc PRIVATE - Get the next element + * @desc PRIVATE - Get the next element (no direction related) * @return int - Element index */ - SlotMachine.prototype.getNext = function() { + SlotMachine.prototype._getNext = function() { var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0; return nextIndex; }; + /** + * @desc PUBLIC - Get the previous element dor selected direction + * @return int - Element index + */ + SlotMachine.prototype.getPrev = function() { + return this._direction.selected === 'up' ? this._getPrev() : this._getNext(); + }; + + /** + * @desc PUBLIC - Get the next element + * @return int - Element index + */ + SlotMachine.prototype.getNext = function() { + return this._direction.selected === 'up' ? this._getNext() : this._getPrev(); + }; + + /** + * @desc PUBLIC - Set the spin direction + * @return Object - Direction data + */ + SlotMachine.prototype.setDirection = function(direction) { + if (this.isRunning) { + return; + } + this._direction.selected = direction === 'down' ? 'down' : 'up'; + return this._direction[this._direction.selected]; + }; + /** * @desc PRIVATE - Set CSS classes to make speed effect * @param string FX_SPEED - Element speed [FX_FAST_BLUR||FX_NORMAL_BLUR||FX_SLOW_BLUR||FX_STOP] @@ -337,7 +388,7 @@ * @desc PRIVATE - Reset active element position */ SlotMachine.prototype._resetPosition = function() { - this.$container.css('margin-top', this.getTileOffset(this.active)); + this.$container.css('margin-top', this._direction.get('initial')); }; /** @@ -375,7 +426,7 @@ }; /** - * @desc PRIVATE - Starts shuffling the elements + * @desc PUBLIC - Starts shuffling the elements * @param int repeations - Number of shuffles (undefined to make infinite animation * @return int - Returns result index */ @@ -425,10 +476,10 @@ self.stop(); } else { this.$container.animate({ - marginTop: this._maxTop + marginTop: this._direction.get('to') }, delay, 'linear', function() { //Reset top position - self.$container.css('margin-top', 0); + self.$container.css('margin-top', self._direction.get('first')); if (spins - 1 <= 0) { self.stop(); @@ -443,7 +494,7 @@ }; /** - * @desc PRIVATE - Stop shuffling the elements + * @desc PUBLIC - Stop shuffling the elements * @return int - Returns result index */ SlotMachine.prototype.stop = function(showGradient) { @@ -469,12 +520,12 @@ if (this.futureActive > this.active) { //We are moving to the prev (first to last) if (this.active === 0 && this.futureActive === this.$tiles.length - 1) { - this.$container.css('margin-top', this.getTileOffset(this.$tiles.length)); + this.$container.css('margin-top', this._direction.get('firstToLast')); } } else { //We are moving to the next (last to first) if (this.active === this.$tiles.length - 1 && this.futureActive === 0) { - this.$container.css('margin-top', 0); + this.$container.css('margin-top', this._direction.get('lastToFirst')); } } @@ -510,7 +561,7 @@ }; /** - * @desc PRIVATE - Start auto shufflings, animation stops each 3 repeations. Then restart animation recursively + * @desc PUBLIC - Start auto shufflings, animation stops each 3 repeations. Then restart animation recursively */ SlotMachine.prototype.auto = function() { var self = this; @@ -533,8 +584,6 @@ }, this.settings.auto); }; - - /* * Create new plugin instance if needed and return it */