diff --git a/app.js b/app.js index ba73498..c1ad4d6 100644 --- a/app.js +++ b/app.js @@ -10,6 +10,7 @@ import { Dropdown } from "/menu/dropdown.js" customElements.define('m-layout', Layout) customElements.define('m-page', Page) +customElements.define('m-page-actions', PageActions) customElements.define( 'm-file-group-page', FileGroupPage ) @@ -41,7 +42,6 @@ class Setup { const layout = document.createElement( 'm-layout' ) - layout.pageActions = new PageActions() layout.csp = undefined layout.header.menu.handleLinks = true document.body.appendChild(layout) @@ -62,11 +62,9 @@ class Setup { } load() { - const layout = document.createElement('m-layout') - layout.pageActions = new PageActions() if (this.registration.active) { document.body.appendChild( - layout + document.createElement('m-layout') ) } } diff --git a/components/layout.js b/components/layout.js index fd755e7..e64ce1d 100644 --- a/components/layout.js +++ b/components/layout.js @@ -6,6 +6,17 @@ export class Layout extends HTMLElement { this.attachShadow({mode: 'open'}) this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'" this.header = document.createElement('m-header') + this.dialogWrap = document.createElement('div') + this.header.dialogWrap = this.dialogWrap + this.pageActions = document.createElement( + 'm-page-actions' + ) + this.header.pageActions = this.pageActions + this.shadowRoot.append( + this.header, + this.dialogWrap, + this.pageActions, + ) } connectedCallback() { @@ -29,7 +40,6 @@ export class Layout extends HTMLElement { } ` this.shadowRoot.appendChild(style) - this.header.pageActions = this.pageActions this.header.editing = this.editing this.header.addEventListener('click-edit', () => { this.editing = !this.editing @@ -37,11 +47,6 @@ export class Layout extends HTMLElement { this.header.addEventListener('create-page', () => { this.editing = true }) - this.shadowRoot.appendChild(this.header) - this.dialogWrap = document.createElement('div') - this.header.dialogWrap = this.dialogWrap - this.pageActions.dialogWrap = this.dialogWrap - this.shadowRoot.appendChild(this.dialogWrap) this.load() addEventListener('hashchange', () => { this.load() diff --git a/components/page-actions.js b/components/page-actions.js index 8041836..8f694f8 100644 --- a/components/page-actions.js +++ b/components/page-actions.js @@ -1,9 +1,10 @@ -export class PageActions { +export class PageActions extends HTMLElement { textEn = { download: 'Download', rename: 'Move/Rename', duplicate: 'Duplicate', delete_: 'Delete', + settings: 'Settings', confirmDelete: f => ( `Are you sure you want to delete ${f}?` ), @@ -16,6 +17,7 @@ export class PageActions { rename: 'Mover/Renombrar', duplicate: 'Duplicar', delete_: 'Borrar', + settings: 'Configuración', confirmDelete: f => ( `¿Desea borrar ${f}?` ), @@ -24,7 +26,11 @@ export class PageActions { } constructor() { + super() + this.attachShadow({mode: 'open'}) this.language = navigator.language + this.dialogWrap = document.createElement('div') + this.shadowRoot.append(this.dialogWrap) this.menuActions = [ { text: this.text.download, @@ -42,8 +48,21 @@ export class PageActions { text: this.text.delete_, click: this.delete_.bind(this), }, + //{ + // text: this.text.settings, + // click: this.settings.bind(this), + //}, ] } + connectedCallback() { + const style = document.createElement('style') + style.textContent = ` + m-dialog::part(footer) { + padding-top: 15px; + } + ` + this.shadowRoot.appendChild(style) + } download() { const text = localStorage.getItem(this.path) @@ -76,19 +95,19 @@ export class PageActions { 'm-forms-button-group' ) bGroup.addPrimary(this.text.rename, () => { - const newPath = input.value - const v = localStorage.getItem(newPath) - if (v !== null || newPath === this.path) { - if (!errorEl) { - errorEl = document.createElement('p') - errorEl.style.color = 'red' - const errText = this.text.alreadyExists - errorEl.innerText = errText - dialog.bodyEl.appendChild(errorEl) + const newPath = input.value + const v = localStorage.getItem(newPath) + if (v !== null || newPath === this.path) { + if (!errorEl) { + errorEl = document.createElement('p') + errorEl.style.color = 'red' + const errText = this.text.alreadyExists + errorEl.innerText = errText + dialog.bodyEl.appendChild(errorEl) + } + return } - return - } - localStorage.setItem( + localStorage.setItem( newPath, localStorage.getItem(this.path) ) @@ -170,6 +189,47 @@ export class PageActions { dialog.open() } + settings() { + const dialog = document.createElement( + 'm-dialog' + ) + this.dialogWrap.replaceChildren(dialog) + const input = document.createElement('input') + input.value = this.path + input.style.minWidth = '300px' + dialog.bodyEl.appendChild(input) + let errorEl + const bGroup = document.createElement( + 'm-forms-button-group' + ) + bGroup.addPrimary(this.text.rename, () => { + const newPath = input.value + const v = localStorage.getItem(newPath) + if (v !== null || newPath === this.path) { + if (!errorEl) { + errorEl = document.createElement('p') + errorEl.style.color = 'red' + const errText = this.text.alreadyExists + errorEl.innerText = errText + dialog.bodyEl.appendChild(errorEl) + } + return + } + localStorage.setItem( + newPath, + localStorage.getItem(this.path) + ) + localStorage.removeItem(this.path) + dialog.close() + location.hash = newPath + }) + bGroup.addCancel(this.text.cancel, () => { + dialog.close() + }) + dialog.footerEl.appendChild(bGroup) + dialog.open() + } + get language() { return this._language } diff --git a/sw.js b/sw.js index 7297909..7121d69 100644 --- a/sw.js +++ b/sw.js @@ -18,7 +18,7 @@ async function initCache() { '/loader/builder.js', '/loader/editor-build.js', '/menu/dropdown.js', - ]) //1 + ]) //2 } self.addEventListener("install", event => { @@ -54,4 +54,4 @@ self.addEventListener('fetch', event => { self.addEventListener('activate', event => { event.waitUntil(clients.claim()) -}) +}) \ No newline at end of file