macchiato
/
pages
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

integrate editor

Browse Source
integrate-editor
Benjamin Atkin 3 years ago
parent c6b97474a3
commit c9a021057b
5 changed files with 133 additions and 31 deletions
Show Stats Download Patch File Download Diff File

88
components/file-group-page.js
Unescape Escape View File

@ -23,22 +23,29 @@ html {
</head> </head>
<body> <body>
${'<'}script type="module"> ${'<'}script type="module">
let frame = undefined let frame = undefined
addEventListener('message', event => { addEventListener('message', event => {
let isNew = false const isChild = (
const d = event.data frame !== undefined && event.source == frame.contentWindow
if (Array.isArray(d) && d[0] === 'srcdoc') { )
isNew = frame === undefined if (isChild) {
if (isNew) { parent.postMessage(event.data, '*')
frame = document.createElement('iframe') } else {
frame.sandbox = "allow-scripts allow-top-navigation" 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]
if (isNew) {
document.body.appendChild(frame)
}
} else if (frame !== undefined) {
frame.contentWindow.postMessage(event.data, '*')
} }
frame.srcdoc = d[1]
} else if (frame !== undefined) {
frame.postMessage(event.data)
}
if (isNew) {
document.body.appendChild(frame)
} }
}) })
${'</'}script> ${'</'}script>
@ -81,10 +88,16 @@ export class FileGroupPage extends HTMLElement {
this.initEditFrame() this.initEditFrame()
this.initViewFrame() this.initViewFrame()
this.editing = this.editing this.editing = this.editing
addEventListener('message', this.handleMessage)
}
disconnectedCallback() {
removeEventListener('message', this.handleMessage)
} }
initEditFrame() { initEditFrame() {
const frame = document.createElement('iframe') const frame = document.createElement('iframe')
frame.classList.add('edit')
if (this.csp !== undefined) { if (this.csp !== undefined) {
frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation" frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
const url = new URL( const url = new URL(
@ -100,12 +113,16 @@ export class FileGroupPage extends HTMLElement {
frame.addEventListener('load', () => { frame.addEventListener('load', () => {
this.displayEdit() this.displayEdit()
}) })
frame.addEventListener('message', message => {
this.handleEditMessage(message)
})
this.editFrame = frame this.editFrame = frame
this.shadowRoot.append(frame) this.shadowRoot.append(frame)
} }
initViewFrame() { initViewFrame() {
const frame = document.createElement('iframe') const frame = document.createElement('iframe')
frame.classList.add('view')
if (this.csp !== undefined) { if (this.csp !== undefined) {
frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation" frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
const url = new URL( const url = new URL(
@ -125,22 +142,50 @@ export class FileGroupPage extends HTMLElement {
this.shadowRoot.append(frame) this.shadowRoot.append(frame)
} }
displayView() { displayView(doc) {
let doc = 'view here'
const msg = ['srcdoc', doc] const msg = ['srcdoc', doc]
this.viewFrame.contentWindow.postMessage( this.viewFrame.contentWindow.postMessage(
msg, '*' msg, '*'
) )
} }
displayEdit() { async displayEdit() {
let doc = 'edit here' const doc = await this.editorBuild.build()
const msg = ['srcdoc', doc] const msg = ['srcdoc', doc]
this.viewFrame.contentWindow.postMessage( this.editFrame.contentWindow.postMessage(
msg, '*' 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) { set body(value) {
try { try {
localStorage.setItem(this.path, value) localStorage.setItem(this.path, value)
@ -168,6 +213,11 @@ export class FileGroupPage extends HTMLElement {
} else { } else {
classes.add('viewing') classes.add('viewing')
classes.remove('editing') classes.remove('editing')
if (this.editFrame) {
this.editFrame.contentWindow.postMessage(
['request-html'], '*'
)
}
} }
} }
} }

41
components/header.js
Unescape Escape View File

@ -28,6 +28,9 @@ export class Header extends HTMLElement {
cancel: 'Cancel', cancel: 'Cancel',
alreadyExists: 'There is already a page with that name.', alreadyExists: 'There is already a page with that name.',
createPage: 'Create Page', createPage: 'Create Page',
htmlCss: 'HTML/CSS',
singleFile: 'Single File',
newPage: 'New Page',
} }
textEs = { textEs = {
@ -40,6 +43,9 @@ export class Header extends HTMLElement {
cancel: 'Cancelar', cancel: 'Cancelar',
alreadyExists: 'Ya existe una página con ese nombre.', alreadyExists: 'Ya existe una página con ese nombre.',
createPage: 'Crear Página', createPage: 'Crear Página',
htmlCss: 'HTML/CSS',
singleFile: 'Archivo único',
newPage: 'Nueva Página',
} }
constructor() { constructor() {
@ -310,6 +316,22 @@ export class Header extends HTMLElement {
input.value = '/' input.value = '/'
input.style.minWidth = '300px' input.style.minWidth = '300px'
dialog.bodyEl.appendChild(input) 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 let errorEl
const bGroup = document.createElement( const bGroup = document.createElement(
'm-forms-button-group' 'm-forms-button-group'
@ -328,7 +350,24 @@ export class Header extends HTMLElement {
} }
return 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 location.hash = newPath
dialog.close() dialog.close()
this.dispatchEvent(new CustomEvent( this.dispatchEvent(new CustomEvent(

14
components/layout.js
Unescape Escape View File

@ -1,3 +1,5 @@
import { EditorBuild } from "/loader/editor-build.js"
export class Layout extends HTMLElement { export class Layout extends HTMLElement {
constructor() { constructor() {
super() super()
@ -19,7 +21,7 @@ export class Layout extends HTMLElement {
overflow-y: hidden; overflow-y: hidden;
position: relative; position: relative;
} }
m-page { m-page, m-file-group-page {
flex-grow: 1; flex-grow: 1;
} }
` `
@ -61,6 +63,9 @@ export class Layout extends HTMLElement {
isGroup ? 'm-file-group-page' : 'm-page' isGroup ? 'm-file-group-page' : 'm-page'
) )
this.page.csp = this.csp this.page.csp = this.csp
if (isGroup) {
this.page.editorBuild = this.editorBuild
}
this.page.path = path this.page.path = path
this.editing = this.editing this.editing = this.editing
if (prevPage !== undefined) { if (prevPage !== undefined) {
@ -99,4 +104,11 @@ export class Layout extends HTMLElement {
return false return false
} }
} }
get editorBuild() {
if (this._editorBuild === undefined) {
this._editorBuild = new EditorBuild()
}
return this._editorBuild
}
} }

2
components/page.js
Unescape Escape View File

@ -35,7 +35,7 @@ addEventListener('message', event => {
} }
frame.srcdoc = d[1] frame.srcdoc = d[1]
} else if (frame !== undefined) { } else if (frame !== undefined) {
frame.postMessage(event.data) frame.contentWindow.postMessage(event.data, '*')
} }
if (isNew) { if (isNew) {
document.body.appendChild(frame) document.body.appendChild(frame)

19
sw.js
Unescape Escape View File

@ -1,21 +1,22 @@
async function initCache() { async function initCache() {
const cache = await caches.open('v1') const cache = await caches.open('v1')
await cache.addAll([ await cache.addAll([
'/',
'/index.html',
'/app.js', '/app.js',
'/components/page.js', '/components/file-group-page.js',
'/components/layout.js',
'/components/header.js', '/components/header.js',
'/components/layout.js',
'/components/nav-menu.js', '/components/nav-menu.js',
'/components/page.js',
'/dialog/dialog.js', '/dialog/dialog.js',
'/editor/app.js',
'/editor/file-group.js',
'/editor/file-view.js',
'/editor/text-edit.js',
'/forms/button-group.js', '/forms/button-group.js',
'/menu/dropdown.js', '/index.html',
'/loader/builder.js', '/loader/builder.js',
'/loader/editor-build.js', '/loader/editor-build.js',
'/editor/file-group.js', '/menu/dropdown.js',
'/editor/file-page.js',
'/editor/text-edit.js',
]) ])
} }
@ -52,4 +53,4 @@ self.addEventListener('fetch', event => {
self.addEventListener('activate', event => { self.addEventListener('activate', event => {
event.waitUntil(clients.claim()) event.waitUntil(clients.claim())
}) })

Write Preview
Loading…
Cancel
Save