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.
82 lines
2.2 KiB
82 lines
2.2 KiB
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
|
|
connect() {
|
|
this.element.style.position = 'relative'
|
|
this.boundClosePopupOnClickOutside = this.closePopupOnClickOutside.bind(this)
|
|
}
|
|
|
|
|
|
toggle(event) {
|
|
|
|
const margin = 12
|
|
const btn = event.currentTarget
|
|
const popup_menu = btn.nextElementSibling
|
|
|
|
popup_menu.classList.toggle('open')
|
|
btn.classList.toggle('open')
|
|
|
|
if (popup_menu.classList.contains('open')) {
|
|
|
|
const bound_rect = popup_menu.getBoundingClientRect()
|
|
|
|
// Open to the right
|
|
if (btn.classList.contains('open--right')) {
|
|
|
|
popup_menu.style.left = btn.offsetWidth + margin + 'px'
|
|
popup_menu.style.top = "0px"
|
|
|
|
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
|
|
|
|
// Overflow buttom
|
|
if (bound_rect.bottom > viewportHeight) {
|
|
popup_menu.style.bottom = "0px"
|
|
popup_menu.style.top = "auto"
|
|
}
|
|
|
|
} else {
|
|
|
|
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
|
|
|
|
// Overflow right
|
|
if (bound_rect.right > viewportWidth) {
|
|
popup_menu.style.left = '-' + (bound_rect.width - btn.offsetWidth) + 'px'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
document.addEventListener('mousedown', this.boundClosePopupOnClickOutside)
|
|
} else {
|
|
popup_menu.removeAttribute('style')
|
|
}
|
|
|
|
event.preventDefault()
|
|
}
|
|
|
|
close_open(e) {
|
|
document.querySelectorAll('.popup-menu.open, .has-popup-menu.open').forEach((node) => {
|
|
node.classList.remove('open')
|
|
node.removeAttribute('style')
|
|
})
|
|
document.removeEventListener('mousedown', this.boundClosePopupOnClickOutside)
|
|
}
|
|
|
|
|
|
closePopupOnClickOutside(e) {
|
|
const popup_menu = e.target.closest('.popup-menu, .has-popup-menu');
|
|
if (popup_menu == null) {
|
|
document.querySelectorAll('.popup-menu.open, .has-popup-menu.open').forEach((node) => {
|
|
node.classList.remove('open')
|
|
node.removeAttribute('style')
|
|
})
|
|
document.removeEventListener('mousedown', this.boundClosePopupOnClickOutside)
|
|
}
|
|
}
|
|
|
|
}
|
|
|