You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.4 KiB
JavaScript
70 lines
1.4 KiB
JavaScript
export class PageMenu extends HTMLElement {
|
|
icons = {}
|
|
|
|
textEn = {
|
|
download: 'Download',
|
|
rename: 'Rename',
|
|
delete: 'Delete',
|
|
}
|
|
|
|
textEs = {
|
|
download: 'Descargar',
|
|
rename: 'Renombrar',
|
|
delete: 'Borrar',
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({mode: 'open'})
|
|
this.language = navigator.language
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
background: #222;
|
|
color: #ddd;
|
|
padding: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
min-width: 180px;
|
|
}
|
|
button {
|
|
background: #222;
|
|
font-size: 120%;
|
|
border: none;
|
|
color: inherit;
|
|
padding: 4px 10px;
|
|
text-align: left;
|
|
}
|
|
`
|
|
this.shadowRoot.append(style)
|
|
}
|
|
|
|
add(name, handler) {
|
|
const btn = document.createElement('button')
|
|
btn.innerText = this.text[name]
|
|
this.shadowRoot.appendChild(btn)
|
|
btn.addEventListener('click', () => {
|
|
this.dispatchEvent(new CustomEvent(
|
|
'close-menu', {bubbles: true}
|
|
))
|
|
handler()
|
|
})
|
|
}
|
|
|
|
get language() {
|
|
return this._language
|
|
}
|
|
|
|
set language(language) {
|
|
this._language = language
|
|
this.text = this.langEs ? this.textEs : this.textEn
|
|
}
|
|
|
|
get langEs() {
|
|
return /^es\b/.test(this.language)
|
|
}
|
|
} |