You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.5 KiB
66 lines
1.5 KiB
4 years ago
|
class Sidebar {
|
||
|
|
constructor() {
|
||
|
|
this._sidebar = document.querySelector("#sidebar")
|
||
|
|
this._sidebarButton = document.querySelector("#panel-button")
|
||
|
|
this._closeButton = document.querySelector("#close-panel-button")
|
||
|
|
this._visible = false
|
||
|
|
this._init()
|
||
|
|
}
|
||
|
|
|
||
|
|
showSidebar() {
|
||
|
|
this._sidebar.classList.remove("hide")
|
||
|
|
wait(100).then(() => {this._closeButton.focus()})
|
||
|
|
this._visible = true
|
||
|
|
}
|
||
|
|
|
||
|
|
hideSidebar() {
|
||
|
|
this._sidebar.classList.add("hide")
|
||
|
|
this._sidebarButton.focus()
|
||
|
|
this._visible = false
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleSidebar() {
|
||
|
|
if (this._visible) {
|
||
|
|
this.hideSidebar()
|
||
|
|
} else {
|
||
|
|
this.showSidebar()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_setKeydown() {
|
||
|
|
this._sidebar.addEventListener("keydown", (ev) => {
|
||
|
|
if (ev.keyCode == 27) {
|
||
|
|
this.hideSidebar()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
_setSidebar() {
|
||
|
|
document.querySelector("#screen").addEventListener("click", (ev) => {
|
||
|
|
if (ev.target == this._sidebarButton || ev.target.parentElement == this._sidebarButton) {
|
||
|
|
this.toggleSidebar()
|
||
|
|
} else
|
||
|
|
if (ev.target != this._sidebar && ev.target.closest(".panel") == null) {
|
||
|
|
this._sidebar.classList.add("hide")
|
||
|
|
this._visible = false
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ev.target == this._closeButton || ev.target.parentElement == this._closeButton) {
|
||
|
|
this.hideSidebar()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
document.querySelector("#screen").addEventListener("focusin", (ev) => {
|
||
|
|
if (!this._sidebar.contains(document.activeElement)) {
|
||
|
|
this._sidebar.classList.add("hide")
|
||
|
|
this._visible = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
_init() {
|
||
|
|
this._setSidebar()
|
||
|
|
this._setKeydown()
|
||
|
|
}
|
||
|
|
}
|