use property to store page body

3 years ago · 598ee5079b
1 changed files with 22 additions and 12 deletions
--- a/components/page.js
+++ b/components/page.js
@ -17,7 +17,7 @@ const frameHtml = `<!doctype html>
  </head>
  <body>
    <iframe srcdoc="" sandbox="allow-scripts"></iframe>
-    <script type="module">
+    ${'<'}script type="module">
 const frame = document.getElementsByTagName('iframe')[0]
 addEventListener('message', event => {
  const d = event.data
@ -27,7 +27,7 @@ addEventListener('message', event => {
    frame.postMessage(event.data)
  }
 })
-    </script>
+    ${'</'}script>
  </body>
 </html>`

@ -37,10 +37,7 @@ export class Page extends HTMLElement {
    const shadow = this.attachShadow({mode: 'open'})
    this.textArea = document.createElement('textarea')
    this.textArea.addEventListener('input', e => {
-      localStorage.setItem(
-        this.path,
-        e.target.value
-      )
+      this.body = e.target.value
    })
    const div = document.createElement('div')
    div.classList.add('twrap')
@ -49,9 +46,7 @@ export class Page extends HTMLElement {
  }

  connectedCallback() {
-    this.textArea.value = localStorage.getItem(
-      this.path
-    ) ?? ''
+    this.textArea.value = this.body
    const style = document.createElement('style')
    style.textContent = `
      :host {
@ -78,9 +73,7 @@ export class Page extends HTMLElement {
      }
    `
    this.shadowRoot.append(style)
-    if (this.path.startsWith('/sandbox/')) {
-      this.initFrame()
-    }
+    this.initFrame()
  }

  initFrame() {
@ -107,4 +100,21 @@ export class Page extends HTMLElement {
 this.frame.contentWindow.postMessage(msg)
    })
  }
+
+  set body(value) {
+    try {
+      localStorage.setItem(this.path, value)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  get body() {
+    try {
+      return localStorage.getItem(this.path)
+    } catch (err) {
+      console.error(err)
+      return ''
+    }
+  }
 }