Skip to content

Commit

Permalink
Revert "Chore: Refactoring Controls for mobile" (#171)
Browse files Browse the repository at this point in the history
* Revert "Fix: Catch loss of WebGL context in Box3D and reload preview"

This reverts commit 0de993e.

* Revert "Fix: Fix removeEventListener in MediaBaseViewer (#169)"

This reverts commit 5760a12.

* Revert "Chore: Refactoring Controls for mobile (#159)"

This reverts commit 98ad9cc.
  • Loading branch information
Jeremy Press authored Jun 14, 2017

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 0de993e commit 21957ed
Showing 6 changed files with 27 additions and 267 deletions.
46 changes: 16 additions & 30 deletions src/lib/Controls.js
Original file line number Diff line number Diff line change
@@ -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
4 changes: 3 additions & 1 deletion src/lib/Controls.scss
Original file line number Diff line number Diff line change
@@ -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;
}

70 changes: 0 additions & 70 deletions src/lib/MobileControls.js

This file was deleted.

39 changes: 8 additions & 31 deletions src/lib/__tests__/Controls-test.js
Original file line number Diff line number Diff line change
@@ -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;
});
1 change: 0 additions & 1 deletion src/lib/__tests__/MobileControls-test.html

This file was deleted.

Loading

0 comments on commit 21957ed

Please sign in to comment.