getters + setters

Author: josex2r

dist/slotmachine.js

@@ -202,15 +202,15 @@ module.exports = class SlotMachine {
    * @return {Number} - Element index
    */
   get prevIndex () {
-    return this.direction === 'up' ? this._nextIndex : this._prevIndex;
+    return this.direction.key === 'up' ? this._nextIndex : this._prevIndex;
   }
 
   /**
    * @desc PUBLIC - Get the next element
    * @return {Number} - Element index
    */
   get nextIndex () {
-    return this.direction === 'up' ? this._prevIndex : this._nextIndex;
+    return this.direction.key === 'up' ? this._prevIndex : this._nextIndex;
   }
 
   /**
@@ -219,11 +219,13 @@ module.exports = class SlotMachine {
    * @return {Number} - Returns true if machine is on the screen
    */
   get visible () {
-    const above = this.element.offsetTop > window.scrollY + window.innerHeight;
-    const below = window.scrollY > this.element.innerHeight + this.element.offsetTop;
+    const rect = this.element.getBoundingClientRect();
+    const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+    const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
+    const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
+    const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
 
-    // Stop animation if element is [above||below] screen, best for performance
-    return !above && !below;
+    return vertInView && horInView;
   }
 
   /**

dist/slotmachine.min.js

@@ -0,0 +1,100 @@
+/* eslint-disable no-undef */
+
+describe('Constructor', () => {
+  let machine;
+  let shuffleSpy;
+  let autoSpy;
+
+  beforeEach(() => {
+    shuffleSpy = sinon.spy(SlotMachine.prototype, 'shuffle');
+    autoSpy = sinon.spy(SlotMachine.prototype, 'auto');
+  });
+
+  afterEach(() => {
+    shuffleSpy.restore();
+    autoSpy.restore();
+    if (machine) {
+      machine.element.remove();
+    }
+  });
+
+  it('has element', () => {
+    machine = render();
+    const element = document.getElementById(id);
+
+    expect(machine.element).to.be.equal(element);
+  });
+
+  it('element does not have overflow', () => {
+    machine = render();
+
+    expect(machine.element.style.overflow).to.be.equal('hidden');
+  });
+
+  it('has settings', () => {
+    machine = render();
+
+    expect(machine.settings).to.exist;
+  });
+
+  [
+    { active: 0, result: 0 },
+    { active: 1, result: 1 },
+    { active: 99, result: 0 },
+    { active: -99, result: 0 },
+    { active: '0', result: 0 },
+    { active: {}, result: 0 },
+    { active: null, result: 0 },
+    { active: undefined, result: 0 }
+  ].forEach((testCase) => {
+    it(`sets active: ${testCase.active}`, () => {
+      machine = render({
+        active: testCase.active
+      });
+
+      expect(machine.active).to.be.equal(testCase.result);
+    });
+  });
+
+  it('wraps tiles and adds offsets', () => {
+    machine = render();
+
+    expect(machine.container.classList.contains('slotMachineContainer')).to.be.true;
+    expect(machine.container.children).to.have.lengthOf(5);
+  });
+
+  ['up', 'down'].forEach((direction) => {
+    it(`sets direction: ${direction}`, () => {
+      machine = render({
+        direction: direction
+      });
+
+      expect(machine.direction.key).to.be.equal(direction);
+    });
+  });
+
+  it('does not auto start', () => {
+    machine = render();
+
+    expect(shuffleSpy).to.not.have.been.called;
+    expect(autoSpy).to.not.have.been.called;
+  });
+
+  it('shuffles when auto is set to true', () => {
+    machine = render({
+      auto: true
+    });
+
+    expect(shuffleSpy).to.have.been.called;
+    expect(autoSpy).to.not.have.been.called;
+  });
+
+  it('run auto when auto is set to number', () => {
+    machine = render({
+      auto: 1
+    });
+
+    expect(shuffleSpy).to.not.have.been.called;
+    expect(autoSpy).to.have.been.called;
+  });
+});