New feature! Animation direction

Author: josex2r

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
 

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",

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
    */

dist/jquery.slotmachine.min.js

@@ -1,6 +1,6 @@
 {
   "name": "jquery-slotmachine",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "engines": {
     "node": ">= 0.8.0"
   },

package.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/",