collapse/expand

app.js

@@ -73,7 +73,8 @@ class EditorApp extends HTMLElement {
 
   save(e) {
     const files = this.el.files.map(
-      ({name, data}) => ({name, data})
+      ({name, data, collapsed}) =>
+      ({name, data, collapsed})
     )
     const data = JSON.stringify({
       type: 'm-file-group',

file-group.js

@@ -57,7 +57,7 @@ export class FileGroup extends HTMLElement {
     }
   }
 
-  addFile({name, data} = {}) {
+  addFile({name, data, collapsed} = {}) {
     const el = document.createElement('m-editor-file-view')
     if (name !== undefined) {
       el.name = name
@@ -65,6 +65,9 @@ export class FileGroup extends HTMLElement {
     if (data !== undefined) {
       el.data = data
     }
+    if (collapsed !== undefined) {
+      el.collapsed = collapsed
+    }
     this.contentEl.appendChild(el)
     return el
   }

file-view.js

@@ -5,6 +5,16 @@ export class FileView extends HTMLElement {
         <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>
     `,
+    down: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+      </svg>
+    `,
+    up: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+        <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+      </svg>
+    `,
   }
 
   textEn = {
@@ -30,6 +40,14 @@ export class FileView extends HTMLElement {
     this.headerEl.appendChild(this.nameEl)
     this.editEl = document.createElement('m-editor-text-edit')
     this.contentEl.appendChild(this.editEl)
+    this.collapseBtn = document.createElement(
+      'button'
+    )
+    this.collapseBtn.innerHTML = this.icons.up
+    this.collapseBtn.addEventListener('click', () => {
+      this.collapsed = !this.collapsed
+    })
+    this.headerEl.appendChild(this.collapseBtn)
     this.menuBtn = document.createElement('button')
     this.menuBtn.innerHTML = this.icons.menu
     this.menuBtn.addEventListener('click', () => {
@@ -80,6 +98,10 @@ export class FileView extends HTMLElement {
         display: flex;
         flex-direction: column;
         align-items: stretch;
+        min-height: 5px;
+      }
+      div.content.collapsed > * {
+        display: none;
       }
       svg {
         height: 20px;
@@ -105,6 +127,25 @@ export class FileView extends HTMLElement {
     return this.editEl.value
   }
 
+  set collapsed(value) {
+    const cl = this.contentEl.classList
+    if (value) {
+      cl.add('collapsed')
+    } else {
+      cl.remove('collapsed')
+    }
+    this.collapseBtn.innerHTML = (
+      value ?
+      this.icons.down : this.icons.up
+    )
+  }
+
+  get collapsed() {
+    return this.contentEl.classList.contains(
+      'collapsed'
+    )
+  }
+
   get language() {
     return this._language
   }