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.
120 lines
2.8 KiB
JavaScript
120 lines
2.8 KiB
JavaScript
export class FileView extends HTMLElement {
|
|
icons = {
|
|
menu: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
|
|
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
|
</svg>
|
|
`,
|
|
}
|
|
|
|
textEn = {
|
|
delete: 'Delete',
|
|
}
|
|
|
|
textEs = {
|
|
delete: 'Borrar',
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.language = navigator.language
|
|
this.attachShadow({mode: 'open'})
|
|
this.headerEl = document.createElement('div')
|
|
this.headerEl.classList.add('header')
|
|
this.contentEl = document.createElement('div')
|
|
this.contentEl.classList.add('content')
|
|
this.shadowRoot.appendChild(this.headerEl)
|
|
this.shadowRoot.appendChild(this.contentEl)
|
|
this.nameEl = document.createElement('input')
|
|
this.nameEl.classList.add('name')
|
|
this.headerEl.appendChild(this.nameEl)
|
|
this.editEl = document.createElement('m-editor-text-edit')
|
|
this.contentEl.appendChild(this.editEl)
|
|
this.menuBtn = document.createElement('button')
|
|
this.menuBtn.innerHTML = this.icons.menu
|
|
this.menuBtn.addEventListener('click', () => {
|
|
this.menu.open(this.menuBtn)
|
|
})
|
|
this.headerEl.appendChild(this.menuBtn)
|
|
this.menu = document.createElement(
|
|
'm-menu-dropdown'
|
|
)
|
|
this.menu.add(this.text.delete, () => {
|
|
this.remove()
|
|
})
|
|
this.shadowRoot.appendChild(this.menu)
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
background-color: #111;
|
|
color: #ddd;
|
|
padding: 3px 0;
|
|
}
|
|
div.header > * {
|
|
background: inherit;
|
|
color: inherit;
|
|
border: none;
|
|
}
|
|
.name {
|
|
flex-grow: 1;
|
|
padding: 0 5px;
|
|
font: inherit;
|
|
font-family: monospace;
|
|
outline: none;
|
|
}
|
|
div.header button svg {
|
|
margin-bottom: -3px;
|
|
}
|
|
div.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
`
|
|
this.shadowRoot.appendChild(style)
|
|
}
|
|
|
|
set name(name) {
|
|
this.nameEl.value = name
|
|
}
|
|
|
|
get name() {
|
|
return this.nameEl.value
|
|
}
|
|
|
|
set data(data) {
|
|
this.editEl.value = data
|
|
}
|
|
|
|
get data() {
|
|
return this.editEl.value
|
|
}
|
|
|
|
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)
|
|
}
|
|
} |