prevent search/cart link navigation when JS modal is active
Some checks failed
deploy / deploy (push) Has been cancelled
Some checks failed
deploy / deploy (push) Has been cancelled
Without JS the header icons are plain <a> links to /search and /cart. With LiveView connected, the hooks now preventDefault on those links so only the modal/drawer opens. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d0ea9d59f5
commit
a61adf4939
@ -73,6 +73,13 @@ const CartDrawer = {
|
||||
this.scrollY = 0
|
||||
this.isOpen = this.el.classList.contains('open')
|
||||
|
||||
// Prevent the cart link from navigating when the drawer is available
|
||||
this._cartTrigger = document.querySelector('a[aria-label="Cart"]')
|
||||
if (this._cartTrigger) {
|
||||
this._preventNav = (e) => e.preventDefault()
|
||||
this._cartTrigger.addEventListener("click", this._preventNav)
|
||||
}
|
||||
|
||||
if (this.isOpen) {
|
||||
this.lockScroll()
|
||||
document.addEventListener('keydown', this.boundKeydown)
|
||||
@ -187,6 +194,9 @@ const CartDrawer = {
|
||||
destroyed() {
|
||||
document.removeEventListener('keydown', this.boundKeydown)
|
||||
document.removeEventListener('touchmove', this.boundTouchmove)
|
||||
if (this._cartTrigger && this._preventNav) {
|
||||
this._cartTrigger.removeEventListener("click", this._preventNav)
|
||||
}
|
||||
document.body.style.position = ''
|
||||
document.body.style.top = ''
|
||||
document.body.style.left = ''
|
||||
@ -355,6 +365,13 @@ const SearchModal = {
|
||||
}
|
||||
document.addEventListener("keydown", this._globalKeydown)
|
||||
|
||||
// Prevent the search trigger link from navigating when the modal is available
|
||||
this._searchTrigger = document.querySelector('a[aria-label="Search"]')
|
||||
if (this._searchTrigger) {
|
||||
this._preventNav = (e) => e.preventDefault()
|
||||
this._searchTrigger.addEventListener("click", this._preventNav)
|
||||
}
|
||||
|
||||
this.el.addEventListener("open-search", () => this.open())
|
||||
this.el.addEventListener("close-search", () => this.close())
|
||||
|
||||
@ -384,6 +401,9 @@ const SearchModal = {
|
||||
|
||||
destroyed() {
|
||||
document.removeEventListener("keydown", this._globalKeydown)
|
||||
if (this._searchTrigger && this._preventNav) {
|
||||
this._searchTrigger.removeEventListener("click", this._preventNav)
|
||||
}
|
||||
},
|
||||
|
||||
updated() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user