mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-21 23:50:59 +00:00
Wrap focus
This commit is contained in:
parent
41505c00cb
commit
a643ca9fe5
1 changed files with 13 additions and 11 deletions
|
@ -29,17 +29,19 @@ Hooks.Menu = {
|
|||
mounted(){
|
||||
this.menuItemsContainer = document.querySelector(`[aria-labelledby="${this.el.id}"]`)
|
||||
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.menuItemsContainer.addEventListener("phx:show", () => {
|
||||
if(this.enabled){ this.activate(0) }
|
||||
this.el.addEventListener("click", e => {
|
||||
if(!e.currentTarget.isSameNode(this.el)){ return }
|
||||
|
||||
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())
|
||||
},
|
||||
|
@ -64,12 +66,12 @@ Hooks.Menu = {
|
|||
e.preventDefault()
|
||||
let menuItems = this.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"){
|
||||
e.preventDefault()
|
||||
let menuItems = this.menuItems()
|
||||
this.deactivate(menuItems)
|
||||
this.activate(menuItems.indexOf(this.activeItem) - 1, 0)
|
||||
this.activate(menuItems.indexOf(this.activeItem) - 1, menuItems.length - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue