Revert "Chore: Refactoring Controls for mobile"

src/lib/Controls.js

@@ -24,14 +24,11 @@ class Controls {
         this.controlsEl = this.controlsWrapperEl.appendChild(document.createElement('div'));
         this.controlsEl.className = 'bp-controls';
 
-        // Bind event handlers
-        this.mousemoveHandler = throttle(this.mousemoveHandler.bind(this), CONTROLS_AUTO_HIDE_TIMEOUT_IN_MILLIS - 500);
-        this.moouseenterHandler = this.mouseenterHandler.bind(this);
-        this.mouseleaveHandler = this.mouseleaveHandler.bind(this);
-        this.focusinHandler = this.focusinHandler.bind(this);
-        this.focusoutHandler = this.focusoutHandler.bind(this);
-
-        this.bindControlListeners();
+        this.containerEl.addEventListener('mousemove', this.mousemoveHandler);
+        this.controlsEl.addEventListener('mouseenter', this.mouseenterHandler);
+        this.controlsEl.addEventListener('mouseleave', this.mouseleaveHandler);
+        this.controlsEl.addEventListener('focusin', this.focusinHandler);
+        this.controlsEl.addEventListener('focusout', this.focusoutHandler);
     }
 
     /**
@@ -50,14 +47,6 @@ class Controls {
         });
     }
 
-    bindControlListeners() {
-        this.containerEl.addEventListener('mousemove', this.mousemoveHandler);
-        this.controlsEl.addEventListener('mouseenter', this.mouseenterHandler);
-        this.controlsEl.addEventListener('mouseleave', this.mouseleaveHandler);
-        this.controlsEl.addEventListener('focusin', this.focusinHandler);
-        this.controlsEl.addEventListener('focusout', this.focusoutHandler);
-    }
-
     /**
      * Checks if the button is a preview controls button
      *
@@ -66,10 +55,7 @@ class Controls {
      * @return {boolean} true if element is a preview control button
      */
     isPreviewControlButton(element) {
-        return (
-            !!element &&
-            (element.classList.contains('bp-controls-btn') || element.parentNode.classList.contains('bp-controls-btn'))
-        );
+        return !!element && element.classList.contains('bp-controls-btn');
     }
 
     /**
@@ -99,56 +85,56 @@ class Controls {
      * @private
      * @return {void}
      */
-    mousemoveHandler() {
+    mousemoveHandler = throttle(() => {
         this.containerEl.classList.add(SHOW_PREVIEW_CONTROLS_CLASS);
         this.resetTimeout();
-    }
+    }, CONTROLS_AUTO_HIDE_TIMEOUT_IN_MILLIS - 500);
 
     /**
      * Mouse enter handler
      *
      * @private
      * @return {void}
      */
-    mouseenterHandler() {
+    mouseenterHandler = () => {
         this.blockHiding = true;
-    }
+    };
 
     /**
      * Mouse leave handler
      *
      * @private
      * @return {void}
      */
-    mouseleaveHandler() {
+    mouseleaveHandler = () => {
         this.blockHiding = false;
-    }
+    };
 
     /**
      * Handles all focusin events for the module.
      *
      * @param {Event} event - A DOM-normalized event object.
      * @return {void}
      */
-    focusinHandler(event) {
+    focusinHandler = (event) => {
         // When we focus onto a preview control button, show controls
         if (this.isPreviewControlButton(event.target)) {
             this.containerEl.classList.add(SHOW_PREVIEW_CONTROLS_CLASS);
         }
-    }
+    };
 
     /**
      * Handles all focusout events for the module.
      *
      * @param {Event} event - A DOM-normalized event object.
      * @return {void}
      */
-    focusoutHandler(event) {
+    focusoutHandler = (event) => {
         // When we focus out of a control button and aren't focusing onto another control button, hide the controls
         if (this.isPreviewControlButton(event.target) && !this.isPreviewControlButton(event.relatedTarget)) {
             this.containerEl.classList.remove(SHOW_PREVIEW_CONTROLS_CLASS);
         }
-    }
+    };
 
     /**
      * Adds buttons to controls

src/lib/Controls.scss

@@ -18,7 +18,9 @@
     transition: opacity .5s;
 }
 
-.box-show-preview-controls .bp-controls {
+.box-show-preview-controls .bp-controls,
+.bp-controls:hover,
+.bp-controls:focus {
     opacity: 1;
 }
 

src/lib/__tests__/Controls-test.js

@@ -6,7 +6,6 @@ let controls;
 let clock;
 
 const sandbox = sinon.sandbox.create();
-let stubs;
 
 const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls';
 
@@ -18,7 +17,6 @@ describe('lib/Controls', () => {
     beforeEach(() => {
         fixture.load('__tests__/Controls-test.html');
         controls = new Controls(document.getElementById('test-controls-container'));
-        stubs = {};
     });
 
     afterEach(() => {
@@ -30,7 +28,6 @@ describe('lib/Controls', () => {
         }
 
         controls = null;
-        stubs = null;
     });
 
     describe('constructor()', () => {
@@ -47,15 +44,15 @@ describe('lib/Controls', () => {
 
     describe('destroy()', () => {
         it('should remove the correct event listeners', () => {
-            stubs.containerElEventListener = sandbox.stub(controls.containerEl, 'removeEventListener');
-            stubs.controlsElEventListener = sandbox.stub(controls.controlsEl, 'removeEventListener');
+            const containerElEventListener = sandbox.stub(controls.containerEl, 'removeEventListener');
+            const controlsElEventListener = sandbox.stub(controls.controlsEl, 'removeEventListener');
 
             controls.destroy();
-            expect(stubs.containerElEventListener).to.be.calledWith('mousemove', controls.mousemoveHandler);
-            expect(stubs.controlsElEventListener).to.be.calledWith('mouseenter', controls.mouseenterHandler);
-            expect(stubs.controlsElEventListener).to.be.calledWith('mouseleave', controls.mouseleaveHandler);
-            expect(stubs.controlsElEventListener).to.be.calledWith('focusin', controls.focusinHandler);
-            expect(stubs.controlsElEventListener).to.be.calledWith('focusout', controls.focusoutHandler);
+            expect(containerElEventListener).to.be.calledWith('mousemove', controls.mousemoveHandler);
+            expect(controlsElEventListener).to.be.calledWith('mouseenter', controls.mouseenterHandler);
+            expect(controlsElEventListener).to.be.calledWith('mouseleave', controls.mouseleaveHandler);
+            expect(controlsElEventListener).to.be.calledWith('focusin', controls.focusinHandler);
+            expect(controlsElEventListener).to.be.calledWith('focusout', controls.focusoutHandler);
         });
 
         it('should remove click listeners for any button references', () => {
@@ -75,35 +72,15 @@ describe('lib/Controls', () => {
         });
     });
 
-    describe('bindControlListeners()', () => {
-        it('should add the correct event listeners', () => {
-            stubs.addContainerElListener = sandbox.stub(controls.containerEl, 'addEventListener');
-            stubs.addControlsElListener = sandbox.stub(controls.controlsEl, 'addEventListener');
-
-            controls.bindControlListeners();
-            expect(stubs.addContainerElListener).to.be.calledWith('mousemove', controls.mousemoveHandler);
-            expect(stubs.addControlsElListener).to.be.calledWith('mouseenter', controls.mouseenterHandler);
-            expect(stubs.addControlsElListener).to.be.calledWith('mouseleave', controls.mouseleaveHandler);
-            expect(stubs.addControlsElListener).to.be.calledWith('focusin');
-            expect(stubs.addControlsElListener).to.be.calledWith('focusout');
-        });
-    });
-
     describe('isPreviewControlButton()', () => {
         it('should determine whether the element is a preview control button', () => {
             let element = null;
-            let parent = null;
             expect(controls.isPreviewControlButton(element)).to.be.false;
 
-            parent = document.createElement('div');
-            element = parent.appendChild(document.createElement('div'));
+            element = document.createElement('div');
             element.className = 'bp-controls-btn';
             expect(controls.isPreviewControlButton(element)).to.be.true;
 
-            parent.className = 'bp-controls-btn';
-            expect(controls.isPreviewControlButton(element)).to.be.true;
-
-            parent.className = '';
             element.className = '';
             expect(controls.isPreviewControlButton(element)).to.be.false;
         });