integrate editor

3 years ago · c9a021057b
5 changed files with 133 additions and 31 deletions
--- a/components/file-group-page.js
+++ b/components/file-group-page.js
@ -23,8 +23,14 @@ html {
  </head>
  <body>
    ${'<'}script type="module">
-  let frame = undefined
+let frame = undefined
 addEventListener('message', event => {
+  const isChild = (
+    frame !== undefined && event.source == frame.contentWindow
+  )
+  if (isChild) {
+    parent.postMessage(event.data, '*')
+  } else {
    let isNew = false
    const d = event.data
    if (Array.isArray(d) && d[0] === 'srcdoc') {
@ -34,12 +40,13 @@ addEventListener('message', event => {
        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)
      }
+    } else if (frame !== undefined) {
+      frame.contentWindow.postMessage(event.data, '*')
+    }
+  }
 })
    ${'</'}script>
  </body>
@ -81,10 +88,16 @@ export class FileGroupPage extends HTMLElement {
    this.initEditFrame()
    this.initViewFrame()
    this.editing = this.editing
+    addEventListener('message', this.handleMessage)
+  }
+
+  disconnectedCallback() {
+    removeEventListener('message', this.handleMessage)
  }

  initEditFrame() {
    const frame = document.createElement('iframe')
+    frame.classList.add('edit')
    if (this.csp !== undefined) {
      frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
      const url = new URL(
@ -100,12 +113,16 @@ export class FileGroupPage extends HTMLElement {
    frame.addEventListener('load', () => {
      this.displayEdit()
    })
+    frame.addEventListener('message', message => {
+      this.handleEditMessage(message)
+    })
    this.editFrame = frame
    this.shadowRoot.append(frame)
  }

  initViewFrame() {
    const frame = document.createElement('iframe')
+    frame.classList.add('view')
    if (this.csp !== undefined) {
      frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
      const url = new URL(
@ -125,22 +142,50 @@ export class FileGroupPage extends HTMLElement {
    this.shadowRoot.append(frame)
  }

-  displayView() {
-    let doc = 'view here'
+  displayView(doc) {
    const msg = ['srcdoc', doc]
    this.viewFrame.contentWindow.postMessage(
      msg, '*'
    )
  }

-  displayEdit() {
-    let doc = 'edit here'
+  async displayEdit() {
+    const doc = await this.editorBuild.build()
    const msg = ['srcdoc', doc]
-    this.viewFrame.contentWindow.postMessage(
+    this.editFrame.contentWindow.postMessage(
      msg, '*'
    )
  }

+  handleMessage = event => {
+    const editWin = this.editFrame?.contentWindow
+    const viewWin = this.viewFrame?.contentWindow
+    if (editWin && event.source == editWin) {
+      this.handleEditMessage(event)
+    } else if (viewWin && event.source == viewWin) {
+      this.handleViewMessage(event)
+    }
+  }
+
+  async handleViewMessage(event) {
+  }
+
+  async handleEditMessage(event) {
+    if (Array.isArray(event.data)) {
+      if (event.data[0] === 'ready') {
+        this.editFrame.contentWindow.postMessage(
+          ['doc', this.body], '*'
+        )
+      } else if (event.data[0] === 'html') {
+        const html = event.data[1]
+        this.displayView(html)
+      } else if (event.data[0] === 'save') {
+        const doc = event.data[1]
+        this.body = doc
+      }
+    }
+  }
+
  set body(value) {
    try {
      localStorage.setItem(this.path, value)
@ -168,6 +213,11 @@ export class FileGroupPage extends HTMLElement {
      } else {
        classes.add('viewing')
        classes.remove('editing')
+        if (this.editFrame) {
+          this.editFrame.contentWindow.postMessage(
+            ['request-html'], '*'
+          )
+        }
      }
    }
  }
--- a/components/header.js
+++ b/components/header.js
@ -28,6 +28,9 @@ export class Header extends HTMLElement {
    cancel: 'Cancel',
    alreadyExists: 'There is already a page with that name.',
    createPage: 'Create Page',
+    htmlCss: 'HTML/CSS',
+    singleFile: 'Single File',
+    newPage: 'New Page',
  }

  textEs = {
@ -40,6 +43,9 @@ export class Header extends HTMLElement {
    cancel: 'Cancelar',
    alreadyExists: 'Ya existe una página con ese nombre.',
    createPage: 'Crear Página',
+    htmlCss: 'HTML/CSS',
+    singleFile: 'Archivo único',
+    newPage: 'Nueva Página',
  }

  constructor() {
@ -310,6 +316,22 @@ export class Header extends HTMLElement {
    input.value = '/'
    input.style.minWidth = '300px'
    dialog.bodyEl.appendChild(input)
+    const select = document.createElement('select')
+    const options = ['htmlCss', 'singleFile']
+    select.append(...options.map(value => {
+      const el = document.createElement('option')
+      el.value = value
+      el.innerText = this.text[value]
+      return el
+    }))
+    select.value = 'htmlCss'
+    input.addEventListener('input', e => {
+      const ext = e.target.value.match(/\.\w+$/)
+      select.value = ext ? 'singleFile' : 'htmlCss'
+    })
+    select.style.marginTop = '10px'
+    select.style.marginBottom = '10px'
+    dialog.bodyEl.appendChild(select)
    let errorEl
    const bGroup = document.createElement(
      'm-forms-button-group'
@ -328,7 +350,24 @@ export class Header extends HTMLElement {
        }
        return
      }
-      localStorage.setItem(newPath, '')
+      const value = (
+        select.value === 'singleFile' ?
+        '' :
+        JSON.stringify({
+          type: 'm-file-group',
+          files: [
+            {
+              "name": "index.html",
+              "data": `<h1>${this.text.newPage}</h1>`,
+            },
+            {
+              "name": "style.css",
+              "data": 'h1 { color: dodgerblue; }',
+            },
+          ],
+        })
+      )
+      localStorage.setItem(newPath, value)
      location.hash = newPath
      dialog.close()
      this.dispatchEvent(new CustomEvent(
--- a/components/layout.js
+++ b/components/layout.js
@ -1,3 +1,5 @@
+import { EditorBuild } from "/loader/editor-build.js"
+
 export class Layout extends HTMLElement {
  constructor() {
    super()
@ -19,7 +21,7 @@ export class Layout extends HTMLElement {
        overflow-y: hidden;
        position: relative;
      }
-      m-page {
+      m-page, m-file-group-page {
        flex-grow: 1;
      }
    `
@ -61,6 +63,9 @@ export class Layout extends HTMLElement {
      isGroup ? 'm-file-group-page' : 'm-page'
    )
    this.page.csp = this.csp
+    if (isGroup) {
+      this.page.editorBuild = this.editorBuild
+    }
    this.page.path = path
    this.editing = this.editing
    if (prevPage !== undefined) {
@ -99,4 +104,11 @@ export class Layout extends HTMLElement {
      return false
    }
  }
+
+  get editorBuild() {
+    if (this._editorBuild === undefined) {
+      this._editorBuild = new EditorBuild()
+    }
+    return this._editorBuild
+  }
 }
--- a/components/page.js
+++ b/components/page.js
@ -35,7 +35,7 @@ addEventListener('message', event => {
    }
    frame.srcdoc = d[1]
  } else if (frame !== undefined) {
-    frame.postMessage(event.data)
+    frame.contentWindow.postMessage(event.data, '*')
  }
  if (isNew) {
    document.body.appendChild(frame)
--- a/sw.js
+++ b/sw.js
@ -1,21 +1,22 @@
 async function initCache() {
  const cache = await caches.open('v1')
  await cache.addAll([
-    '/',
-    '/index.html',
    '/app.js',
-    '/components/page.js',
-    '/components/layout.js',
+    '/components/file-group-page.js',
    '/components/header.js',
+    '/components/layout.js',
    '/components/nav-menu.js',
+    '/components/page.js',
    '/dialog/dialog.js',
+    '/editor/app.js',
+    '/editor/file-group.js',
+    '/editor/file-view.js',
+    '/editor/text-edit.js',
    '/forms/button-group.js',
-    '/menu/dropdown.js',
+    '/index.html',
    '/loader/builder.js',
    '/loader/editor-build.js',
-    '/editor/file-group.js',
-    '/editor/file-page.js',
-    '/editor/text-edit.js',
+    '/menu/dropdown.js',
  ])
 }