diff --git a/app.js b/app.js new file mode 100644 index 0000000..611dfae --- /dev/null +++ b/app.js @@ -0,0 +1,99 @@ +import { FileGroup } from "/editor/file-group.js" +import { FileView } from "/editor/file-view.js" +import { TextEdit } from "/editor/text-edit.js" +import { ButtonGroup } from "/forms/button-group.js" +import { Dropdown } from "/menu/dropdown.js" + +customElements.define( + 'm-editor-file-group', FileGroup +) +customElements.define( + 'm-editor-file-view', FileView +) +customElements.define( + 'm-editor-text-edit', TextEdit +) +customElements.define( + 'm-forms-button-group', ButtonGroup +) +customElements.define( + 'm-menu-dropdown', Dropdown +) + +class EditorApp extends HTMLElement { + constructor() { + super() + this.attachShadow({mode: 'open'}) + this.loaded = false + this.el = document.createElement( + 'm-editor-file-group' + ) + addEventListener('message', event => { + const message = event.data + console.info('editor got message', message) + if (Array.isArray(message)) { + if (message[0] === 'doc' && !this.loaded) { + this.load(message[1]) + this.loaded = true + this.shadowRoot.appendChild(this.el) + } + } + }) + parent.postMessage(['ready'], '*') + // TODO: observe input and save when doc changes + } + + connectedCallback() { + const style = document.createElement('style') + style.textContent = ` + :host { + display: flex; + flex-direction: column; + align-items: stretch; + margin: 8px; + } + ` + this.shadowRoot.append(style) + } + + load(doc) { + const files = JSON.parse(doc).files + for (const file of files) { + this.el.addFile(file) + } + this.display() + } + + save() { + const files = this.el.files.map( + ({name, data}) => ({name, data}) + ) + const data = JSON.stringify({ + type: 'm-file-group', + files, + }) + parent.postMessage(['save', data], '*') + } + + display() { + // TODO: build html + const html = '

HTML here

' + parent.postMessage(['html', html], '*') + } +} + +customElements.define( + 'm-editor-app', EditorApp +) + +class Setup { + async run() { + document.body.appendChild( + document.createElement( + 'm-editor-app' + ) + ) + } +} + +new Setup().run() \ No newline at end of file