bat
3 years ago
1 changed files with 0 additions and 244 deletions
@ -1,244 +0,0 @@ |
|||
<style> |
|||
html { |
|||
box-sizing: border-box; |
|||
} |
|||
*, *:before, *:after { |
|||
box-sizing: inherit; |
|||
} |
|||
body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: stretch; |
|||
} |
|||
</style> |
|||
<script type="module"> |
|||
class FileGroup extends HTMLElement { |
|||
constructor() { |
|||
super() |
|||
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) |
|||
} |
|||
|
|||
connectedCallback() { |
|||
const style = document.createElement('style') |
|||
style.textContent = ` |
|||
:host { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: stretch; |
|||
} |
|||
div.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
div.files { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
overflow-y: auto; |
|||
} |
|||
` |
|||
this.shadowRoot.appendChild(style) |
|||
if (this.contentEl.childNodes.length === 0) { |
|||
this.addFile() |
|||
} |
|||
} |
|||
|
|||
addFile({name, data} = {}) { |
|||
const el = document.createElement('m-file-view') |
|||
if (name !== undefined) { |
|||
el.name = name |
|||
} |
|||
if (data !== undefined) { |
|||
el.data = data |
|||
} |
|||
this.contentEl.appendChild(el) |
|||
return el |
|||
} |
|||
} |
|||
|
|||
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> |
|||
`, |
|||
} |
|||
|
|||
text = { |
|||
delete: {en: 'Delete', es: 'Borrar'}, |
|||
} |
|||
|
|||
constructor() { |
|||
super() |
|||
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-text-edit') |
|||
this.contentEl.appendChild(this.editEl) |
|||
this.menuEl = document.createElement('button') |
|||
this.menuEl.innerHTML = this.icons.menu |
|||
this.headerEl.appendChild(this.menuEl) |
|||
} |
|||
|
|||
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 |
|||
} |
|||
} |
|||
|
|||
class TextEdit extends HTMLElement { |
|||
constructor() { |
|||
super() |
|||
this.attachShadow({mode: 'open'}) |
|||
const stackEl = document.createElement('div') |
|||
stackEl.classList.add('stack') |
|||
this.textEl = document.createElement('textarea') |
|||
this.textEl.classList.add('text') |
|||
this.textEl.rows = 1 |
|||
stackEl.appendChild(this.textEl) |
|||
this.shadowRoot.appendChild(stackEl) |
|||
this.textEl.addEventListener('input', () => { |
|||
stackEl.dataset.copy = this.textEl.value |
|||
}) |
|||
} |
|||
|
|||
connectedCallback() { |
|||
// https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ |
|||
const style = document.createElement('style') |
|||
style.textContent = ` |
|||
:host { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: stretch; |
|||
margin: 5px 0; |
|||
} |
|||
div.stack { |
|||
display: grid; |
|||
} |
|||
div.stack::after { |
|||
content: attr(data-copy) " "; |
|||
visibility: hidden; |
|||
overflow: hidden; |
|||
} |
|||
div.stack::after, div.stack > textarea { |
|||
white-space: pre-wrap; |
|||
border: 1px solid #888; |
|||
padding: 3px; |
|||
font: inherit; |
|||
font-family: monospace; |
|||
grid-area: 1 / 1 / 2 / 2; |
|||
min-height: 1em; |
|||
border-radius: 2px; |
|||
resize: none; |
|||
} |
|||
` |
|||
this.shadowRoot.appendChild(style) |
|||
} |
|||
|
|||
set value(value) { |
|||
this.textEl.value = value |
|||
} |
|||
|
|||
get value() { |
|||
return this.textEl.value |
|||
} |
|||
} |
|||
|
|||
customElements.define('m-file-group', FileGroup) |
|||
customElements.define('m-file-view', FileView) |
|||
customElements.define('m-text-edit', TextEdit) |
|||
|
|||
|
|||
const fileGroup = document.createElement('m-file-group') |
|||
fileGroup.addFile({ |
|||
name: 'file-group.js', |
|||
data: 'code here' |
|||
}) |
|||
fileGroup.addFile({ |
|||
name: 'file-view.js', |
|||
data: 'code here' |
|||
}) |
|||
|
|||
document.body.appendChild(fileGroup) |
|||
</script> |
|||
|
|||
<!-- |
|||
|
|||
Each file has a header with the filename, an edit icon, and a menu icon. When editing or creating a new one, the filename is a text field. When not editing, tapping on the filename expands and collapses it. |
|||
|
|||
Tapping on a line selects it and shows icons, tapping on another line selects down to that line. |
|||
|
|||
At the top is a dropdown for selecting the file and a button for. |
|||
|
|||
After all the files is a plus skeleton icon bar. |
|||
|
|||
--> |
|||
Loading…
Reference in new issue