toggle view and edit

components/layout.js

@@ -3,8 +3,8 @@ export class Layout extends HTMLElement {
     super()
     this.attachShadow({mode: 'open'})
     this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
-    this.editing = false
     this.header = document.createElement('m-header')
+    this.editing = false
   }
 
   connectedCallback() {
@@ -24,7 +24,6 @@ export class Layout extends HTMLElement {
     this.header.editing = this.editing
     this.header.addEventListener('click-edit', () => {
       this.editing = !this.editing
-      this.header.editing = this.editing
     })
     this.shadowRoot.appendChild(this.header)
     this.load()
@@ -39,6 +38,7 @@ export class Layout extends HTMLElement {
     this.page = document.createElement('m-page')
     this.page.csp = this.csp
     this.page.path = path
+    this.editing = this.editing
     if (prevPage !== undefined) {
       prevPage.remove()
     }
@@ -49,4 +49,16 @@ export class Layout extends HTMLElement {
   get path() {
     return '/hello'
   }
+
+  set editing(value) {
+    this._editing = value
+    this.header.editing = this.editing
+    if (this.page) {
+      this.page.editing = this.editing
+    }
+  }
+
+  get editing() {
+    return this._editing
+  }
 }

components/page.js

@@ -36,6 +36,7 @@ export class Page extends HTMLElement {
     super()
     const shadow = this.attachShadow({mode: 'open'})
     this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
+    //this.editing = false
     this.textArea = document.createElement('textarea')
     this.textArea.addEventListener('input', e => {
       this.body = e.target.value
@@ -72,9 +73,16 @@ export class Page extends HTMLElement {
         width: 100%;
         height: 90vh;
       }
+      :host(.editing) iframe {
+        display: none;
+      }
+      :host(.viewing) textarea {
+        display: none;
+      }
     `
     this.shadowRoot.append(style)
     this.initFrame()
+    this.editing = this.editing
   }
 
   initFrame() {
@@ -120,4 +128,22 @@ this.frame.contentWindow.postMessage(msg, '*')
       return ''
     }
   }
+
+  set editing(value) {
+    this._editing = value
+    if (this.shadowRoot.host) {
+      const classes = this.shadowRoot.host.classList
+      if (this.editing) {
+        classes.add('editing')
+        classes.remove('viewing')
+      } else {
+        classes.add('viewing')
+        classes.remove('editing')
+      }
+    }
+  }
+
+  get editing() {
+    return this._editing
+  }
 }