web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-25 02:42:10 +02:00
Code Releases Activity

fix: prevent dupe events on enabled ClickableComponents (#4316)

Browse Source 
Prevent ClickableComponents re-adding event listeners each time enabled() is called.

* Keeps track of enabled state (this.enabled_)
* enable() doesn't do anything if the component is enabled, so the event handlers are not re-added

Fixes #4312
This commit is contained in:
mister-ben 2017-05-11 22:32:20 +01:00 committed by Gary Katsevman
parent f773c473f9
commit 03bab83dde
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/js/clickable-component.js
View File

@ -141,28 +141,30 @@ class ClickableComponent extends Component {
* Enable this `Component`s element.
*/
enable() {
this.removeClass('vjs-disabled');
this.el_.setAttribute('aria-disabled', 'false');
if (typeof this.tabIndex_ !== 'undefined') {
this.el_.setAttribute('tabIndex', this.tabIndex_);
if (!this.enabled_) {
this.enabled_ = true;
this.removeClass('vjs-disabled');
this.el_.setAttribute('aria-disabled', 'false');
if (typeof this.tabIndex_ !== 'undefined') {
this.el_.setAttribute('tabIndex', this.tabIndex_);
}
this.on(['tap', 'click'], this.handleClick);
this.on('focus', this.handleFocus);
this.on('blur', this.handleBlur);
}
this.on('tap', this.handleClick);
this.on('click', this.handleClick);
this.on('focus', this.handleFocus);
this.on('blur', this.handleBlur);
}
/**
* Disable this `Component`s element.
*/
disable() {
this.enabled_ = false;
this.addClass('vjs-disabled');
this.el_.setAttribute('aria-disabled', 'true');
if (typeof this.tabIndex_ !== 'undefined') {
this.el_.removeAttribute('tabIndex');
}
this.off('tap', this.handleClick);
this.off('click', this.handleClick);
this.off(['tap', 'click'], this.handleClick);
this.off('focus', this.handleFocus);
this.off('blur', this.handleBlur);
}

22
test/unit/clickable-component.test.js
View File

@ -71,3 +71,25 @@ QUnit.test('handleClick should not be triggered when disabled', function() {
testClickableComponent.dispose();
player.dispose();
});
QUnit.test('handleClick should not be triggered more than once when enabled', function() {
let clicks = 0;
class TestClickableComponent extends ClickableComponent {
handleClick() {
clicks++;
}
}
const player = TestHelpers.makePlayer({});
const testClickableComponent = new TestClickableComponent(player);
const el = testClickableComponent.el();
testClickableComponent.enable();
// Click should still be handled just once
Events.trigger(el, 'click');
QUnit.equal(clicks, 1, 'no additional click handler when already enabled ClickableComponent has been enabled again');
testClickableComponent.dispose();
player.dispose();
});