|
|
|
@ -55,7 +55,7 @@ export class Dropdown extends HTMLElement {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
button {
|
|
|
|
background: #222;
|
|
|
|
background: #222;
|
|
|
|
font-size: 120%;
|
|
|
|
font-size: 16px;
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
color: inherit;
|
|
|
|
color: inherit;
|
|
|
|
padding: 8px 10px;
|
|
|
|
padding: 8px 10px;
|
|
|
|
@ -73,7 +73,7 @@ export class Dropdown extends HTMLElement {
|
|
|
|
)
|
|
|
|
)
|
|
|
|
style.setProperty(
|
|
|
|
style.setProperty(
|
|
|
|
'--anchor-bottom',
|
|
|
|
'--anchor-bottom',
|
|
|
|
`${window.scrollY + rect.bottom}px`
|
|
|
|
`${window.scrollY + rect.bottom - 3}px`
|
|
|
|
)
|
|
|
|
)
|
|
|
|
style.setProperty(
|
|
|
|
style.setProperty(
|
|
|
|
'--window-height', `${window.height}px`
|
|
|
|
'--window-height', `${window.height}px`
|
|
|
|
@ -82,7 +82,6 @@ export class Dropdown extends HTMLElement {
|
|
|
|
'--window-width', `${window.width}px`
|
|
|
|
'--window-width', `${window.width}px`
|
|
|
|
)
|
|
|
|
)
|
|
|
|
this.dialogEl.showModal()
|
|
|
|
this.dialogEl.showModal()
|
|
|
|
this.dialogEl.classList.add('opened')
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
close() {
|
|
|
|
close() {
|
|
|
|
@ -94,9 +93,7 @@ export class Dropdown extends HTMLElement {
|
|
|
|
btn.innerText = text
|
|
|
|
btn.innerText = text
|
|
|
|
this.dialogEl.appendChild(btn)
|
|
|
|
this.dialogEl.appendChild(btn)
|
|
|
|
btn.addEventListener('click', () => {
|
|
|
|
btn.addEventListener('click', () => {
|
|
|
|
this.dispatchEvent(new CustomEvent(
|
|
|
|
this.close()
|
|
|
|
'close-menu', {bubbles: true}
|
|
|
|
|
|
|
|
))
|
|
|
|
|
|
|
|
if (handler !== undefined) {
|
|
|
|
if (handler !== undefined) {
|
|
|
|
handler()
|
|
|
|
handler()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|