Merge pull request #42 from josex2r/refactor

Refactor

Author: josex2r

CONTRIBUTING.md

@@ -6,26 +6,20 @@ Please don't edit files in the `dist` subdirectory as they are generated via Gru
 ### Code style
 Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
 
-### PhantomJS
-While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers.
-
 ## Modifying the code
 First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed.
 
-Test that Grunt's CLI is installed by running `grunt --version`.  If the command isn't found, run `npm install -g grunt-cli`.  For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started).
-
 1. Fork and clone the repo.
 1. Run `npm install` to install all dependencies (including Grunt).
-1. Run `grunt` to grunt this project.
+1. Run `gulp server` to run the server and start debugging the library.
 
 Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.
 
 ## Submitting pull requests
 
 1. Create a new branch, please don't work in your `master` branch directly.
-1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail.
+1. Add failing tests for the change you want to make. Run `npm test` to see the tests fail.
 1. Fix stuff.
-1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
-1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere.
+1. Run `npm test` to see if the tests pass. Repeat steps 2-4 until done.
 1. Update the documentation to reflect any changes.
 1. Push to your fork and submit a pull request.

README.md

@@ -1,159 +1,167 @@
 # jQuery-SlotMachine [![Build Status](https://travis-ci.org/josex2r/jQuery-SlotMachine.svg?branch=master)](https://travis-ci.org/josex2r/jQuery-SlotMachine) [![Dependency Status](https://david-dm.org/josex2r/jQuery-SlotMachine.svg)](https://david-dm.org/josex2r/jQuery-SlotMachine) [![devDependency Status](https://david-dm.org/josex2r/jQuery-SlotMachine/dev-status.svg)](https://david-dm.org/josex2r/jQuery-SlotMachine#info=devDependencies)
 
-A simple, lightweight jQuery plugin to make slot machine animation effect.
+> :mega: jQuery is not neccessary now! The name it's just legacy.
 
-[Check the example page!](http://josex2r.github.io/jQuery-SlotMachine/)
+A simple, and lightweight piece of code to make slot machine animation effect.
+It also exports a js wrapper to allow the usage with jQuery.
+
+To preview what you can do [check the example page!](http://josex2r.github.io/jQuery-SlotMachine/)
 
 ## Installation
 
-Install the component using [Bower](http://bower.io/):
+Install the component using [npm](https://www.npmjs.com/package/jquery-slotmachine):
 
-```sh
-$ bower install jquery-slotmachine --save
+```bash
+npm install jquery-slotmachine --save
 ```
 
-Include the script located in *dist* folder *after* the jQuery library:
+Install the component using [Bower](http://bower.io/):
 
-```html
-<script src="/path/to/jquery.slotmachine.min.js"></script>
+```bash
+bower install jquery-slotmachine --save
 ```
 
-## Usage
-
-Creating the machine:
+## Example
 
-```javascript
-var machine = $(foo).slotMachine( params );
+```html
+<div id="machine">
+  <div>Madrid</div>
+  <div>London</div>
+  <div>New York</div>
+</div>
+
+<script>
+const el = document.querySelector('#machine');
+const machine = new SlotMachine(el, {
+  active: 1,
+  delay: 450,
+  auto: 1500
+});
+</script>
 ```
 
-Get machine instance:
+> Lookup the sourcecode in the [examples page](http://josex2r.github.io/jQuery-SlotMachine/) to see more examples.
 
-```javascript
-var machine = $(foo).slotMachine();
-```
+## Usage
 
-Shuffle:
+Include the script located in *dist* folder:
 
-```javascript
-machine.shuffle( repeat, onStopCallback ); //No args to make rotate infinitely, `repeat` is optional
+```html
+<script src="/path/to/slotmachine.min.js"></script>
 ```
 
-Change the selected element:
+Then you can make it work calling the lib in your app:
 
 ```javascript
-machine.prev(); //Previous element
-
-machine.next(); //Next element
+const element = document.getElementById('my-machine');
+const machine = new SlotMachine(element, { /* options */ });
 ```
 
-Stop the machine:
+If you preffer jQuery style then import the wrapper *after* the jQuery library:
 
-```javascript
-machine.stop();
+```html
+<script src="/path/to/jquery.min.js"></script>
+<script src="/path/to/jslotmachine.min.js"></script>
+<script src="/path/to/jquery.slotmachine.min.js"></script>
 ```
 
-Get selected element:
-
 ```javascript
-machine.active; //Current element index
+$(document).ready(function(){
+  $('#my-machine').slotMachine({ /* options */ });
+});
 ```
 
-Get the selected element if shuffling:
+### Settings
 
-```javascript
-machine.futureActive; //Future active element index
-```
-
-Check if the machine is running:
+Use the first argument of the function to pass an object with the options:
 
 ```javascript
-machine.running; //Returns boolean
+const machine = new SlotMachine(element, {
+  active: 2,
+  auto: true
+});
 ```
 
-Check if the machine is stopping:
+| Name           | Type       | Default       | Description                                                                         |
+|----------------|------------|---------------|-------------------------------------------------------------------------------------|
+| **active**     | `Number`   | `0`           | The initial visible element (0 means the first one)                                 |
+| **delay**      | `Number`   | `200`         | Duration (in ms) of each spin                                                       |
+| **auto**       | `Boolean`  | `false`       | Runs the carousel mode when creating the machine                                    |
+| **spins**      | `Number`   | `5`           | Number of spins after stop in carousel mode                                         |
+| **randomize**  | `Function` | `null`        | Function (returns number) that is going to be called to set the next active element |
+| **onComplete** | `Function` | `null`        | Callback after each spin in carousel mode                                           |
+| **inViewport** | `Boolean`  | `true`        | Only spin when the machine is inside the viewport                                   |
+| **direction**  | `String`   | `up`          | The spin direction (possible values are `up` and `down`)                            |
+| **transition** | `String`   | `ease-in-out` | The CSS transition                                                                  |
+
+### Properties
+
+- `machine.nextActive`: Get the next active element (only while shuffling).
+- `machine.nextIndex`: Next element index according to the current direction.
+- `machine.prevIndex`: Prev element index according to the current direction.
+- `machine.random`: Get rando index between the machine bounds.
+- `machine.running`: Check if the machine is running.
+- `machine.stopping`: Check if the machine is stopping.
+- `machine.visible`: Check if the machine is visible.
+- `machine.visibleTile`: Get the current visible element in the machine viewport.
+- `machine.active`: Alias to the `active` setting.
+- `machine.randomize`: Alias to the `randomize` setting.
+- `machine.direction`: Alias to the `direction` setting.
+- `machine.transition`: Alias to the `transition` setting.
+
+### Methods
+
+`machine.shuffle(spins, callback)`: Starts spining the machine.
+  - spins (`Number`): Optionally set the number of spins.
+  - callback(`Function`): Callback triggered when the machine stops.
 
 ```javascript
-machine.stopping; //Returns boolean
+// Do a single spin
+machine.shuffle();
+// Do a single spin and then shows an alert
+machine.shuffle(() => alert('Stop!'));
+// Do 5 spins before stop
+machine.shuffle(5);
+// Do 7 spins and then showing an alert
+machine.shuffle(7, () => alert('Stop!'));
+// "Infinite" spins
+machine.shuffle(9999999); // O_O
 ```
 
-Check if the machine is visible:
-
-```javascript
-machine.visible; //Returns boolean
-```
+`machine.stop(callback)`: Manually stops the machine.
+  - callback(`Function`): Callback triggered when the machine stops.
 
-Change spin result, if the returned value is out of bounds, the element will be randomly choosen:
+For example, start spinning the machine and stop it after pressing a button:
 
 ```javascript
-machine.randomize = foo; //foo must be a function (should return int) or an int
+machine.shuffle(99999);
+// Add the button listener
+myButton.addEventListener('click', () => {
+  // Stop spinning
+  machine.stop();
+});
 ```
 
-Change spin direction, machine must not be running:
+`machine.next()`/`machine.prev()`: Spin to the next/previous element.
 
 ```javascript
-machine.direction = direction; //direction must be a String ('up' || 'down')
+// Spin to the previous element
+machine.prev();
+// Spin to the next element
+machine.next();
 ```
 
-Destroy the machine. It will be useful when you want to reuse DOM:
+`machine.run()`: Starts the preview mode, it will spin/stop given a delay (more info in options).
 
 ```javascript
-machine.destroy();
+machine.run();
 ```
 
-## Params
-
-Params must be an object, optionally containing the next parammeters:
-
-#### active
-
-Set the first element
-
-    active: 0
-
-#### delay
-
-Set spin animation time
-
-    delay: 200
-
-#### auto
-
-Pass an int as miliseconds to make the machine auto rotate
-
-    auto: false
-
-#### spins
-
-The number of spins when auto is enabled
-
-    spins: false
-
-#### stopHidden
-
-Stop animation if the element is above or below the screen
-
-    stopHidden: true
-
-#### 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.
-
-    randomize: function(activeElementIndex){} //activeElementIndex = current selected index
-
-Example (this machine always shows first element):
+`machine.run()`: Destroys the machine. It will be useful when you want to reuse DOM.
 
 ```javascript
-$('#foo').slotMachine({
-	randomize : function(activeElementIndex){
-		return 0;
-	}
-});
+machine.destroy();
 ```
-#### 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": "3.0.1",
+  "version": "4.0.0",
   "keywords": [
         "slots",
         "gambling",

dist/jquery.slotmachine.css

@@ -1,5 +1,5 @@
 /*
- * jQuery Slot Machine v3.0.1
+ * jQuery Slot Machine v4.0.0
  * https://github.com/josex2r/jQuery-SlotMachineundefined
  *
  * Copyright 2014 Jose Luis Represa