app/javascript/alchemy_admin/components/dialog_link.js
export const DEFAULTS = {
header_height: 36,
size: "400x300",
padding: true,
title: "",
modal: true,
overflow: "visible",
ready: () => {},
closed: () => {}
}
export class DialogLink extends HTMLAnchorElement {
constructor() {
super()
this.addEventListener("click", this)
}
handleEvent(evt) {
if (!this.disabled) {
this.openDialog()
}
evt.preventDefault()
}
openDialog() {
this.dialog = new Alchemy.Dialog(
this.getAttribute("href"),
this.dialogOptions
)
this.dialog.open()
}
get dialogOptions() {
const options = this.dataset.dialogOptions
? JSON.parse(this.dataset.dialogOptions)
: {}
return {
...DEFAULTS,
...options
}
}
get disabled() {
return this.classList.contains("disabled")
}
}
customElements.define("alchemy-dialog-link", DialogLink, { extends: "a" })