Verified Commit 75d74959 authored by Chocobozzz's avatar Chocobozzz
Browse files

Autoclose settings on outside click

parent 6d8e1f28
Pipeline #410275 passed with stages
in 14 minutes and 44 seconds
......@@ -27,7 +27,7 @@ class SettingsButton extends Button {
addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
playerClickHandler: typeof SettingsButton.prototype.onPlayerClick
documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
private settingsButtonOptions: SettingsButtonOptions
......@@ -51,7 +51,7 @@ class SettingsButton extends Button {
// Event handlers
this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
this.playerClickHandler = this.onPlayerClick.bind(this)
this.documentClickHandler = this.onDocumentClick.bind(this)
this.userInactiveHandler = this.onUserInactive.bind(this)
this.buildMenu()
......@@ -61,9 +61,13 @@ class SettingsButton extends Button {
this.player().one('play', () => this.hideDialog())
}
onPlayerClick (event: MouseEvent) {
onDocumentClick (event: MouseEvent) {
const element = event.target as HTMLElement
if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) {
if (
element && element.classList &&
(element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings'))
) {
return
}
......@@ -91,6 +95,11 @@ class SettingsButton extends Button {
}
}
document.removeEventListener('click', this.documentClickHandler)
if (this.isInIframe()) {
window.removeEventListener('blur', this.documentClickHandler)
}
this.hideDialog()
if (this.settingsButtonOptions.entries.length === 0) {
......@@ -112,7 +121,11 @@ class SettingsButton extends Button {
}
bindEvents () {
this.player().on('click', this.playerClickHandler)
document.addEventListener('click', this.documentClickHandler)
if (this.isInIframe()) {
window.addEventListener('blur', this.documentClickHandler)
}
this.player().on('addsettingsitem', this.addSettingsItemHandler)
this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
this.player().on('userinactive', this.userInactiveHandler)
......@@ -248,6 +261,10 @@ class SettingsButton extends Button {
}
}
isInIframe () {
return window.self !== window.top
}
}
Component.registerComponent('SettingsButton', SettingsButton)
......
......@@ -146,4 +146,4 @@ a {
width: 50vw;
height: calc(50vw * 0.5625);
}
}
\ No newline at end of file
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment