Get file group page component showing dummy text

3 years ago · 67664496ef
2 changed files with 194 additions and 1 deletions
--- a/components/file-group-page.json
+++ b/components/file-group-page.json
@ -0,0 +1,178 @@
+const frameHtml = `<!doctype html>
+<html>
+  <head>
+    <title>Frame</title>
+    <style>
+html, body, iframe {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+iframe {
+  border: none;
+  display: block;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+    </style>
+  </head>
+  <body>
+    ${'<'}script type="module">
+  let frame = undefined
+addEventListener('message', event => {
+  let isNew = false
+  const d = event.data
+  if (Array.isArray(d) && d[0] === 'srcdoc') {
+    isNew = frame === undefined
+    if (isNew) {
+      frame = document.createElement('iframe')
+      frame.sandbox = "allow-scripts allow-top-navigation"
+    }
+    frame.srcdoc = d[1]
+  } else if (frame !== undefined) {
+    frame.postMessage(event.data)
+  }
+  if (isNew) {
+    document.body.appendChild(frame)
+  }
+})
+    ${'</'}script>
+  </body>
+</html>`
+
+export class FileGroupPage extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        grid-template-areas: "main";
+        flex-direction: column;
+        align-items: stretch;
+      }
+      iframe {
+        border: none;
+        margin: 0;
+        padding: 0;
+        grid-area: main;
+        width: 100%;
+      }
+      :host(.editing) iframe.view {
+        display: none;
+      }
+      :host(.viewing) iframe.edit {
+        display: none;
+      }
+    `
+    this.shadowRoot.append(style)
+    this.initEditFrame()
+    this.initViewFrame()
+    this.editing = this.editing
+  }
+
+  initEditFrame() {
+    const frame = document.createElement('iframe')
+    if (this.csp !== undefined) {
+      frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
+      const url = new URL(
+        '/-/frame', location.href
+      )
+      url.searchParams.set('csp', this.csp)
+      url.searchParams.set('html', frameHtml)
+      frame.src = url.href
+    } else {
+      frame.sandbox = "allow-scripts allow-top-navigation"
+      frame.srcdoc = frameHtml
+    }
+    frame.addEventListener('load', () => {
+      this.displayEdit()
+    })
+    this.editFrame = frame
+    this.shadowRoot.append(frame)
+  }
+
+  initViewFrame() {
+    const frame = document.createElement('iframe')
+    if (this.csp !== undefined) {
+      frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
+      const url = new URL(
+        '/-/frame', location.href
+      )
+      url.searchParams.set('csp', this.csp)
+      url.searchParams.set('html', frameHtml)
+      frame.src = url.href
+    } else {
+      frame.sandbox = "allow-scripts allow-top-navigation"
+      frame.srcdoc = frameHtml
+    }
+    frame.addEventListener('load', () => {
+      this.displayView()
+    })
+    this.viewFrame = frame
+    this.shadowRoot.append(frame)
+  }
+
+  displayView() {
+    let doc = 'view here'
+    const msg = ['srcdoc', doc]
+    this.viewFrame.contentWindow.postMessage(
+      msg, '*'
+    )
+  }
+
+  displayEdit() {
+    let doc = 'edit here'
+    const msg = ['srcdoc', doc]
+    this.viewFrame.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 ''
+    }
+  }
+
+  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
+  }
+}
--- a/components/layout.js
+++ b/components/layout.js
@ -44,7 +44,22 @@ export class Layout extends HTMLElement {
  load() {
    const path = this.path
    const prevPage = this.page
-    this.page = document.createElement('m-page')
+    let isGroup = false
+    const body = localStorage.getItem(path) || ''
+    if (body.match(/^\s*{/)) {
+      try {
+        const bodyData = JSON.parse(body)
+        isGroup = (
+          Array.isArray(bodyData?.files) &&
+          bodyData.type === 'm-file-group'
+        )
+      } catch (err) {
+        // do nothing, is not file group
+      }
+    }
+    this.page = document.createElement(
+      isGroup ? 'm-file-group-page' : 'm-page'
+    )
    this.page.csp = this.csp
    this.page.path = path
    this.editing = this.editing