From 21957edd01fc40cbe50ebb092dcebcd9cc559404 Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Tue, 13 Jun 2017 17:18:42 -0700 Subject: [PATCH] Revert "Chore: Refactoring Controls for mobile" (#171) * Revert "Fix: Catch loss of WebGL context in Box3D and reload preview" This reverts commit 0de993e4f9123fca98562e265bd709bf2c5e1e1f. * Revert "Fix: Fix removeEventListener in MediaBaseViewer (#169)" This reverts commit 5760a1290042da9766e31d703660217b31e9b198. * Revert "Chore: Refactoring Controls for mobile (#159)" This reverts commit 98ad9cc7ba447401c451fcdeee1bacb5690aabaa. --- src/lib/Controls.js | 46 +++---- src/lib/Controls.scss | 4 +- src/lib/MobileControls.js | 70 ----------- src/lib/__tests__/Controls-test.js | 39 ++---- src/lib/__tests__/MobileControls-test.html | 1 - src/lib/__tests__/MobileControls-test.js | 134 --------------------- 6 files changed, 27 insertions(+), 267 deletions(-) delete mode 100644 src/lib/MobileControls.js delete mode 100644 src/lib/__tests__/MobileControls-test.html delete mode 100644 src/lib/__tests__/MobileControls-test.js diff --git a/src/lib/Controls.js b/src/lib/Controls.js index ca042b32a..d3daf7a20 100644 --- a/src/lib/Controls.js +++ b/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,10 +85,10 @@ 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 @@ -110,9 +96,9 @@ class Controls { * @private * @return {void} */ - mouseenterHandler() { + mouseenterHandler = () => { this.blockHiding = true; - } + }; /** * Mouse leave handler @@ -120,9 +106,9 @@ class Controls { * @private * @return {void} */ - mouseleaveHandler() { + mouseleaveHandler = () => { this.blockHiding = false; - } + }; /** * Handles all focusin events for the module. @@ -130,12 +116,12 @@ class Controls { * @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. @@ -143,12 +129,12 @@ class Controls { * @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 diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index 97849cdfb..5183def26 100644 --- a/src/lib/Controls.scss +++ b/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; } diff --git a/src/lib/MobileControls.js b/src/lib/MobileControls.js deleted file mode 100644 index 0c1cbe4e0..000000000 --- a/src/lib/MobileControls.js +++ /dev/null @@ -1,70 +0,0 @@ -import Controls from './Controls'; - -const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls'; - -class MobileControls extends Controls { - /** - * [destructor] - * @return {void} - */ - destroy() { - this.containerEl.removeEventListener('touchstart', this.mousemoveHandler); - this.containerEl.removeEventListener('touchmove', this.mousemoveHandler); - this.controlsEl.removeEventListener('touchmove', this.mousemoveHandler); - this.controlsEl.addEventListener('focusin', this.focusinHandler); - this.controlsEl.addEventListener('focusout', this.focusoutHandler); - this.controlsEl.removeEventListener('click', this.clickHandler); - - super.destroy(); - } - - /** Bind event listeners for mobile controls. - * @return {void} - */ - bindControlListeners() { - this.containerEl.addEventListener('touchstart', this.mousemoveHandler); - this.containerEl.addEventListener('touchmove', this.mousemoveHandler); - this.controlsEl.addEventListener('focusin', this.focusinHandler); - this.controlsEl.addEventListener('focusout', this.focusoutHandler); - this.controlsEl.addEventListener('click', this.clickHandler); - } - - /** - * Handles all focusin events for the module. - * - * @param {Event} event - A DOM-normalized event object. - * @return {void} - */ - 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); - this.blockHiding = true; - } - } - - /** - * Handles all focusout events for the module. - * - * @param {Event} event - A DOM-normalized event object. - * @return {void} - */ - 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); - this.blockHiding = false; - } - } - - /** Prevent zooming on the control bar. - * @param {Event} event - A DOM-normalized event object. - * @return {void} - */ - clickHandler(event) { - event.preventDefault(); - event.stopPropagation(); - } -} - -export default MobileControls; diff --git a/src/lib/__tests__/Controls-test.js b/src/lib/__tests__/Controls-test.js index 0a462b1b3..c2ef01ae0 100644 --- a/src/lib/__tests__/Controls-test.js +++ b/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; }); diff --git a/src/lib/__tests__/MobileControls-test.html b/src/lib/__tests__/MobileControls-test.html deleted file mode 100644 index 9a594a074..000000000 --- a/src/lib/__tests__/MobileControls-test.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/src/lib/__tests__/MobileControls-test.js b/src/lib/__tests__/MobileControls-test.js deleted file mode 100644 index 51b4f6f66..000000000 --- a/src/lib/__tests__/MobileControls-test.js +++ /dev/null @@ -1,134 +0,0 @@ -/* eslint-disable no-unused-expressions */ -import MobileControls from '../MobileControls'; - -let mobileControls; -let stubs; - -const sandbox = sinon.sandbox.create(); - -const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls'; - -describe('lib/Controls', () => { - before(() => { - fixture.setBase('src/lib'); - }); - - beforeEach(() => { - fixture.load('__tests__/MobileControls-test.html'); - mobileControls = new MobileControls(document.getElementById('test-controls-container')); - stubs = {}; - }); - - afterEach(() => { - fixture.cleanup(); - sandbox.verifyAndRestore(); - - if (mobileControls && typeof mobileControls.destroy === 'function') { - mobileControls.destroy(); - } - - mobileControls = null; - stubs = null; - }); - - describe('destroy()', () => { - it('should remove the correct event listeners', () => { - stubs.removeContainerElListener = sandbox.stub(mobileControls.containerEl, 'removeEventListener'); - stubs.removeControlsElListener = sandbox.stub(mobileControls.controlsEl, 'removeEventListener'); - - mobileControls.destroy(); - expect(stubs.removeContainerElListener).to.be.calledWith('touchstart', mobileControls.mousemoveHandler); - expect(stubs.removeContainerElListener).to.be.calledWith('touchmove', mobileControls.mousemoveHandler); - expect(stubs.removeControlsElListener).to.be.calledWith('click', mobileControls.clickHandler); - }); - }); - - describe('bindControlListeners()', () => { - it('should add the correct event listeners', () => { - stubs.addContainerElListener = sandbox.stub(mobileControls.containerEl, 'addEventListener'); - stubs.addControlsElListener = sandbox.stub(mobileControls.controlsEl, 'addEventListener'); - - mobileControls.bindControlListeners(); - expect(stubs.addContainerElListener).to.be.calledWith('touchstart', mobileControls.mousemoveHandler); - expect(stubs.addContainerElListener).to.be.calledWith('touchmove', mobileControls.mousemoveHandler); - expect(stubs.addControlsElListener).to.be.calledWith('click', mobileControls.clickHandler); - }); - }); - - describe('focusinHandler()', () => { - beforeEach(() => { - stubs.isControl = sandbox.stub(mobileControls, 'isPreviewControlButton').returns(true); - }); - - it('should add the controls class and block hiding if the element is a preview control button', () => { - mobileControls.focusinHandler('event'); - expect(stubs.isControl).to.be.called; - expect(mobileControls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.true; - expect(mobileControls.blockHiding).to.be.true; - }); - - it('should not add the controls class if the element is not a preview control button', () => { - stubs.isControl.returns(false); - - mobileControls.focusinHandler('event'); - expect(stubs.isControl).to.be.called; - expect(mobileControls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.false; - }); - }); - - describe('focusoutHandler()', () => { - beforeEach(() => { - mobileControls.containerEl.className = SHOW_PREVIEW_CONTROLS_CLASS; - stubs.isControlButton = sandbox.stub(mobileControls, 'isPreviewControlButton'); - }); - it('should remove the controls class and unblock hiding if the element is a preview control button and the related target is not', () => { - stubs.isControlButton.onCall(0).returns(true); - stubs.isControlButton.onCall(1).returns(false); - - mobileControls.focusoutHandler('event'); - expect(stubs.isControlButton).to.be.called; - expect(mobileControls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.false; - expect(mobileControls.blockHiding).to.be.false; - }); - - it('should not remove the controls class if the element is not a preview control button and the related target is not', () => { - stubs.isControlButton.onCall(0).returns(false); - stubs.isControlButton.onCall(1).returns(false); - - mobileControls.focusoutHandler('event'); - expect(stubs.isControlButton).to.be.called; - expect(mobileControls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.true; - }); - - it('should not remove the controls class if the element is a preview control button and the related target is', () => { - stubs.isControlButton.onCall(0).returns(true); - stubs.isControlButton.onCall(1).returns(true); - - mobileControls.focusoutHandler('event'); - expect(stubs.isControlButton).to.be.called; - expect(mobileControls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.true; - }); - - it('should not remove the controls class if the element is a preview control button and the related target is', () => { - stubs.isControlButton.onCall(0).returns(false); - stubs.isControlButton.onCall(1).returns(true); - - mobileControls.focusoutHandler('event'); - expect(stubs.isControlButton).to.be.called; - expect(mobileControls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.true; - }); - }); - - describe('clickHandler()', () => { - it('should prevent default and stop propagation', () => { - const event = { - preventDefault: sandbox.stub(), - stopPropagation: sandbox.stub() - }; - - mobileControls.clickHandler(event); - expect(event.preventDefault).to.be.called; - expect(event.stopPropagation).to.be.called; - }); - }); -});