feat: partial rewrite

BREAKING CHANGE: Lot of things changed, mostly the public API
- `Promise` support, most public methods returns a promise.
- `shuffle` arguments.
- `stop` arguments.
- `run` has been deleted, this feature can be achieved using promises.
- `constructor` options have been shrinked.

Author: josex2r

README.md

@@ -34,9 +34,10 @@ const el = document.querySelector('#machine');
 
 const machine = new SlotMachine(el, {
   active: 1,
-  delay: 450,
-  auto: 1500
+  delay: 450
 });
+
+machine.shuffle();
 ```
 
 > Lookup the sourcecode in the [examples page](http://josex2r.github.io/jQuery-SlotMachine/) to see more examples.
@@ -71,85 +72,70 @@ const machine = new SlotMachine(element, {
 });
 ```
 
-| 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                                                                  |
+| 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                                                            |
+| **randomize**  | `Function` | `() => number` | Function (returns number) that returns the next active element (random value as default) |
+| **direction**  | `String`   | `up`           | The spin direction (possible values are `up` and `down`)                                 |
 
 ### 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.
+- `machine.active`: The current `active` element.
 
 ### 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.
+`machine.shuffle(spins: number): Promise<void>`: Starts spining the machine.
+
+**Arguments**:
+  - spins (`Number`): Optionally set the number of spins until stop.
 
 ```javascript
 // 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
+machine.shuffle(Infinity);
 ```
 
-`machine.stop(callback)`: Manually stops the machine.
-  - callback(`Function`): Callback triggered when the machine stops.
+`machine.stop(spins: number): Promise<void>`: Manually stops the machine.
 
-For example, start spinning the machine and stop it after pressing a button:
+**Arguments**:
+  - spins (`Number`): Set the number of spins until stop. Use `0` to inmediate stop.
 
 ```javascript
-machine.shuffle(99999);
-// Add the button listener
-myButton.addEventListener('click', () => {
-  // Stop spinning
-  machine.stop();
-});
+// Start spinning the machine
+machine.shuffle(Infinity);
+// Do 4 spins an then stop
+machine.stop(4);
 ```
 
-`machine.next()`/`machine.prev()`: Spin to the next/previous element.
+`machine.next(): Promise<void>`/`machine.prev(): Promise<void>`: Spins to the **next/previous** element.
 
 ```javascript
 // Spin to the previous element
 machine.prev();
+
 // Spin to the next element
 machine.next();
 ```
 
-`machine.run()`: Starts the preview mode, it will spin/stop given a delay (more info in options).
-
-```javascript
-machine.run();
-```
+### Usefull recipes
 
-`machine.run()`: Destroys the machine. It will be useful when you want to reuse DOM.
+To create an inifite carousel effect (as the previous versions `run` method) use a recursive function:
 
 ```javascript
-machine.destroy();
+(async function run() {
+  await machine.shuffle(5)
+  await timeout(1000);
+  run();
+})();
 ```
 
 ## Authors

dist/slotmachine.css

@@ -1,24 +1,32 @@
-.slotMachineNoTransition {
-    transition: none !important;
+.slot-machine__tile--no-transition {
+  transition: none !important;
 }
 
-.slotMachineBlurFast {
-    filter: blur(5px);
+.slot-machine__tile--blur-fast {
+  filter: blur(5px);
 }
 
-.slotMachineBlurMedium {
-    filter: blur(3px);
+.slot-machine__tile--blur-medium {
+  filter: blur(3px);
 }
 
-.slotMachineBlurSlow {
-    filter: blur(2px);
+.slot-machine__tile--blur-slow {
+  filter: blur(2px);
 }
 
-.slotMachineBlurTurtle {
-    filter: blur(1px);
+.slot-machine__tile--blur-turtle {
+  filter: blur(1px);
 }
 
-.slotMachineGradient {
-    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );
-    mask: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask');
+.slot-machine__container--gradient, .slot-machine__tile--gradient {
+  -webkit-mask-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, rgba(0, 0, 0, 0)),
+    color-stop(25%, rgba(0, 0, 0, 1)),
+    color-stop(75%, rgba(0, 0, 0, 1)),
+    color-stop(100%, rgba(0, 0, 0, 0))
+  );
+  mask: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask');
 }

lib/constants.ts

@@ -0,0 +1,25 @@
+import { Options } from './types';
+
+function randomInteger(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export const DEFAULTS: Required<Options> = {
+  active: 0, // Active element [Number]
+  delay: 200, // Animation time [Number]
+  randomize: (_, max) => randomInteger(0, max), // Randomize function, must return a number with the selected position
+  direction: 'up', // Animation direction ['up'||'down']
+};
+
+export enum CONTAINER_FX {
+  GRADIENT = 'slot-machine__container--gradient',
+}
+
+export enum TILE_FX {
+  NO_TRANSITION = 'slot-machine__tile--no-transition',
+  FAST = 'slot-machine__tile--blur-fast',
+  NORMAL = 'slot-machine__tile--blur-medium',
+  SLOW = 'slot-machine__tile--blur-slow',
+  TURTLE = 'slot-machine__tile--blur-turtle',
+  STOP = 'slot-machine__tile--gradient',
+}

lib/dom.ts

@@ -0,0 +1,62 @@
+export class Container {
+  element: HTMLElement;
+  tiles: Tile[] = [];
+  tileNodes: Tile[] = [];
+
+  constructor(public container: HTMLElement) {
+    const tileElements = [].slice.call(this.container.children) as HTMLElement[];
+
+    this.container.style.overflow = 'hidden';
+    this.element = document.createElement('div');
+    this.element.classList.add('slot-machine__container');
+    this.element.style.transition = '1s ease-in-out';
+    this.container.appendChild(this.element);
+    this.tiles = [...tileElements].map((element) => new Tile(element));
+    this.tileNodes = [
+      this.tiles[this.tiles.length - 1].clone(),
+      ...this.tiles,
+      this.tiles[0].clone(),
+    ];
+    this.wrapTiles();
+  }
+
+  private wrapTiles() {
+    this.tileNodes.forEach((tile) => {
+      this.element.appendChild(tile.element);
+    });
+  }
+
+  private get lastTileOffset() {
+    return this.tiles[0].offset;
+  }
+
+  getTileOffset(index: number) {
+    let offset = 0;
+
+    for (let i = 0; i < index; i++) {
+      offset += this.tiles[i].offset;
+    }
+
+    return -this.lastTileOffset - offset;
+  }
+
+  get maxTopOffset() {
+    return -1 * (this.tiles.reduce((acc, { offset }) => acc + offset, 0) + this.lastTileOffset);
+  }
+}
+
+export class Tile {
+  constructor(public element: HTMLElement) {
+    this.element.classList.add('slot-machine__tile');
+  }
+
+  clone() {
+    const element = this.element.cloneNode(true) as HTMLElement;
+
+    return new Tile(element);
+  }
+
+  get offset() {
+    return this.element.offsetHeight;
+  }
+}