mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-11-21 23:50:59 +00:00
Code Issues Projects Releases Wiki Activity

Wrap focus

Browse source
This commit is contained in:
Chris McCord 2021-11-18 16:01:29 -05:00
parent 41505c00cb
commit a643ca9fe5
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/js/app.js
View file

@ -29,17 +29,19 @@ Hooks.Menu = {
mounted(){ mounted(){
this.menuItemsContainer = document.querySelector(`[aria-labelledby="${this.el.id}"]`) this.menuItemsContainer = document.querySelector(`[aria-labelledby="${this.el.id}"]`)
this.reset() this.reset()
this.el.addEventListener("click", e => {
// disable if button clicked and click was not a keyboard event
if(e.currentTarget.isSameNode(this.el) && e.detail !== 0){
this.reset()
this.enabled = false
}
})
this.handleKeyDown = (e) => this.onKeyDown(e) this.handleKeyDown = (e) => this.onKeyDown(e)
this.menuItemsContainer.addEventListener("phx:show", () => { this.el.addEventListener("click", e => {
if(this.enabled){ this.activate(0) } if(!e.currentTarget.isSameNode(this.el)){ return }
window.addEventListener("keydown", this.handleKeyDown) window.addEventListener("keydown", this.handleKeyDown)
// disable if button clicked and click was not a keyboard event
if(e.detail !== 0){
this.enabled = false
} else {
if(this.enabled){
window.requestAnimationFrame(() => this.activate(0))
}
}
}) })
this.menuItemsContainer.addEventListener("phx:hide", () => this.reset()) this.menuItemsContainer.addEventListener("phx:hide", () => this.reset())
}, },
@ -64,12 +66,12 @@ Hooks.Menu = {
e.preventDefault() e.preventDefault()
let menuItems = this.menuItems() let menuItems = this.menuItems()
this.deactivate(menuItems) this.deactivate(menuItems)
this.activate(menuItems.indexOf(this.activeItem) + 1, menuItems.length - 1) this.activate(menuItems.indexOf(this.activeItem) + 1, 0)
} else if(e.key === "ArrowUp"){ } else if(e.key === "ArrowUp"){
e.preventDefault() e.preventDefault()
let menuItems = this.menuItems() let menuItems = this.menuItems()
this.deactivate(menuItems) this.deactivate(menuItems)
this.activate(menuItems.indexOf(this.activeItem) - 1, 0) this.activate(menuItems.indexOf(this.activeItem) - 1, menuItems.length - 1)
} }
} }
} }