From 62ad620846b1b7305cc7268ecb9a8b10b3258b5a Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Sun, 2 Apr 2023 19:04:09 +0000
Subject: [PATCH 1/2] Remove dev file

---
 index.html | 244 -----------------------------------------------------
 1 file changed, 244 deletions(-)
 delete mode 100644 index.html

diff --git a/index.html b/index.html
deleted file mode 100644
index 8201026..0000000
--- a/index.html
+++ /dev/null
@@ -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.
-
--->
\ No newline at end of file

From 748642949c338216e5c16f2349dec5ccd01bf8b1 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Fri, 7 Apr 2023 06:20:07 +0000
Subject: [PATCH 2/2] Add components

---
 file-group.js |  88 ++++++++++++++++++++++++++++++++++++
 file-view.js  | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++
 text-edit.js  |  58 ++++++++++++++++++++++++
 3 files changed, 266 insertions(+)
 create mode 100644 file-group.js
 create mode 100644 file-view.js
 create mode 100644 text-edit.js

diff --git a/file-group.js b/file-group.js
new file mode 100644
index 0000000..a1132a3
--- /dev/null
+++ b/file-group.js
@@ -0,0 +1,88 @@
+export class FileGroup extends HTMLElement {
+  textEn = {
+    addFile: 'Add File',
+  }
+
+  textEs = {
+    addFile: 'Añadir archivo',
+  }
+
+  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)
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.addFile, () => {
+      this.addFile()
+      const btn = bGroup.primary
+      if (btn.scrollIntoViewIfNeeded) {
+        btn.scrollIntoViewIfNeeded()
+      } else {
+        btn.scrollIntoView()
+      }
+    })
+    this.shadowRoot.appendChild(bGroup)
+  }
+
+  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-editor-file-view')
+    if (name !== undefined) {
+      el.name = name
+    }
+    if (data !== undefined) {
+      el.data = data
+    }
+    this.contentEl.appendChild(el)
+    return el
+  }
+
+  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)
+  }
+
+  get files() {
+    return [...this.contentEl.children]
+  }
+}
\ No newline at end of file
diff --git a/file-view.js b/file-view.js
new file mode 100644
index 0000000..1522f0a
--- /dev/null
+++ b/file-view.js
@@ -0,0 +1,120 @@
+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('Borrar', () => {
+      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)
+  }
+}
\ No newline at end of file
diff --git a/text-edit.js b/text-edit.js
new file mode 100644
index 0000000..f32db0b
--- /dev/null
+++ b/text-edit.js
@@ -0,0 +1,58 @@
+export class TextEdit extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.stackEl = document.createElement('div')
+    this.stackEl.classList.add('stack')
+    this.textEl = document.createElement('textarea')
+    this.textEl.classList.add('text')
+    this.textEl.rows = 1
+    this.stackEl.appendChild(this.textEl)
+    this.shadowRoot.appendChild(this.stackEl)
+    this.textEl.addEventListener('input', () => {
+      this.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
+    this.stackEl.dataset.copy = this.textEl.value
+  }
+
+  get value() {
+    return this.textEl.value
+  }
+}
\ No newline at end of file