Compare commits
No commits in common. 'main' and 'integrate-editor' have entirely different histories.
main
...
integrate-
@ -1,377 +0,0 @@
|
||||
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}?`
|
||||
),
|
||||
cancel: 'Cancel',
|
||||
alreadyExists: 'There is already a page with that name.',
|
||||
save: 'Guardar',
|
||||
close: 'Close',
|
||||
}
|
||||
|
||||
textEs = {
|
||||
download: 'Descargar',
|
||||
rename: 'Mover/Renombrar',
|
||||
duplicate: 'Duplicar',
|
||||
delete_: 'Borrar',
|
||||
settings: 'Configuración',
|
||||
confirmDelete: f => (
|
||||
`¿Desea borrar ${f}?`
|
||||
),
|
||||
cancel: 'Cancelar',
|
||||
alreadyExists: 'Ya existe una página con ese nombre.',
|
||||
save: 'Guardar',
|
||||
close: 'Cerrar',
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({mode: 'open'})
|
||||
this.language = navigator.language
|
||||
this.dialogWrap = document.createElement('div')
|
||||
this.shadowRoot.append(this.dialogWrap)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
m-dialog::part(footer) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
`
|
||||
this.shadowRoot.appendChild(style)
|
||||
}
|
||||
|
||||
get menuActions() {
|
||||
const baseActions = [
|
||||
{
|
||||
text: this.text.download,
|
||||
click: this.download.bind(this),
|
||||
},
|
||||
{
|
||||
text: this.text.rename,
|
||||
click: this.rename.bind(this),
|
||||
},
|
||||
{
|
||||
text: this.text.duplicate,
|
||||
click: this.duplicate.bind(this),
|
||||
},
|
||||
{
|
||||
text: this.text.delete_,
|
||||
click: this.delete_.bind(this),
|
||||
},
|
||||
]
|
||||
if (this.page.isGroup) {
|
||||
return [
|
||||
...baseActions,
|
||||
{
|
||||
text: this.text.settings,
|
||||
click: this.settings.bind(this),
|
||||
},
|
||||
]
|
||||
} else {
|
||||
return baseActions
|
||||
}
|
||||
}
|
||||
|
||||
download() {
|
||||
const text = this.storage.getItem(this.path)
|
||||
const sp = this.path.split('/')
|
||||
const filename = sp[sp.length - 1]
|
||||
const el = document.createElement('a')
|
||||
el.setAttribute(
|
||||
'href',
|
||||
'data:text/plain;charset=utf-8,' +
|
||||
encodeURIComponent(text)
|
||||
)
|
||||
el.setAttribute('download', filename)
|
||||
el.style.display = 'none'
|
||||
this.shadowRoot.appendChild(el)
|
||||
el.click()
|
||||
this.shadowRoot.removeChild(el)
|
||||
}
|
||||
|
||||
rename() {
|
||||
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 = this.storage.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
|
||||
}
|
||||
const sKeyOld = 'settings/page:' + this.path
|
||||
const sKeyNew = 'settings/page:' + newPath
|
||||
const settingsJson = this.storage.getItem(sKeyOld)
|
||||
if (settingsJson ?? true === true) {
|
||||
this.storage.setItem(sKeyNew, settingsJson)
|
||||
this.storage.removeItem(sKeyOld)
|
||||
let settingsData
|
||||
try {
|
||||
settingsData = JSON.parse(settingsJson)
|
||||
} catch (err) {
|
||||
settingsData = {}
|
||||
}
|
||||
if (settingsData?.connections) {
|
||||
for (const dir of ['outbound', 'inbound']) {
|
||||
const otherDir = (
|
||||
dir === 'outbound' ? 'inbound' : 'outbound'
|
||||
)
|
||||
this.applyInverseRename(
|
||||
settingsData, dir, otherDir, this.path, newPath
|
||||
)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.storage.removeItem(sKeyNew)
|
||||
}
|
||||
this.storage.setItem(
|
||||
newPath,
|
||||
this.storage.getItem(this.path)
|
||||
)
|
||||
this.storage.removeItem(this.path)
|
||||
dialog.close()
|
||||
location.hash = newPath
|
||||
})
|
||||
bGroup.addCancel(this.text.cancel, () => {
|
||||
dialog.close()
|
||||
})
|
||||
dialog.footerEl.appendChild(bGroup)
|
||||
dialog.open()
|
||||
}
|
||||
|
||||
duplicate() {
|
||||
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'
|
||||
)
|
||||
const btnText = this.text.duplicate
|
||||
bGroup.addPrimary(btnText, () => {
|
||||
const newPath = input.value
|
||||
const v = this.storage.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
|
||||
}
|
||||
this.storage.setItem(
|
||||
newPath,
|
||||
this.storage.getItem(this.path)
|
||||
)
|
||||
this.storage.setItem(
|
||||
'settings/page:' + newPath,
|
||||
this.storage.getItem(this.path) ?? '{}'
|
||||
)
|
||||
dialog.close()
|
||||
location.hash = newPath
|
||||
})
|
||||
bGroup.addCancel(this.text.cancel, () => {
|
||||
dialog.close()
|
||||
})
|
||||
dialog.footerEl.appendChild(bGroup)
|
||||
dialog.open()
|
||||
}
|
||||
|
||||
delete_() {
|
||||
const dialog = document.createElement(
|
||||
'm-dialog'
|
||||
)
|
||||
this.dialogWrap.replaceChildren(dialog)
|
||||
const p = document.createElement('p')
|
||||
p.innerText = this.text.confirmDelete(
|
||||
JSON.stringify(this.path)
|
||||
)
|
||||
dialog.bodyEl.appendChild(p)
|
||||
|
||||
const bGroup = document.createElement(
|
||||
'm-forms-button-group'
|
||||
)
|
||||
bGroup.addPrimary(this.text.delete_, () => {
|
||||
this.storage.removeItem(this.path)
|
||||
this.storage.removeItem(
|
||||
'settings/page:' + this.path
|
||||
)
|
||||
location.hash = '/'
|
||||
dialog.close()
|
||||
})
|
||||
bGroup.addCancel(this.text.cancel, () => {
|
||||
dialog.close()
|
||||
})
|
||||
dialog.footerEl.appendChild(bGroup)
|
||||
dialog.open()
|
||||
}
|
||||
|
||||
settings() {
|
||||
const dialog = document.createElement(
|
||||
'm-dialog'
|
||||
)
|
||||
this.dialogWrap.replaceChildren(dialog)
|
||||
const settingsEl = document.createElement(
|
||||
'm-settings-page-settings'
|
||||
)
|
||||
settingsEl.cspProfiles = this.cspProfiles
|
||||
settingsEl.path = this.path
|
||||
settingsEl.checkExists = path => (
|
||||
this.storage.getItem(path) !== null
|
||||
)
|
||||
settingsEl.data = this.page.settings
|
||||
const h = document.createElement('h2')
|
||||
h.innerText = this.text.settings
|
||||
dialog.headerEl.append(h)
|
||||
dialog.bodyEl.append(settingsEl)
|
||||
const bGroup = document.createElement(
|
||||
'm-forms-button-group'
|
||||
)
|
||||
bGroup.addPrimary(this.text.save, () => {
|
||||
const settingsData = settingsEl.data
|
||||
this.page.settings = settingsData
|
||||
for (const dir of ['outbound', 'inbound']) {
|
||||
const otherDir = (
|
||||
dir === 'outbound' ? 'inbound' : 'outbound'
|
||||
)
|
||||
this.applyInverseSettings(
|
||||
settingsData, dir, otherDir
|
||||
)
|
||||
}
|
||||
this.applyTemplateSettings()
|
||||
dialog.close()
|
||||
this.dispatchEvent(new CustomEvent(
|
||||
'settings-change', {bubbles: true, composed: true}
|
||||
))
|
||||
})
|
||||
bGroup.addCancel(this.text.cancel, () => {
|
||||
dialog.close()
|
||||
})
|
||||
dialog.footerEl.appendChild(bGroup)
|
||||
dialog.open()
|
||||
}
|
||||
|
||||
applyInverseSettings(settingsData, dir, otherDir) {
|
||||
const selfEntries = Object.entries(
|
||||
settingsData.connections[dir]
|
||||
)
|
||||
for (const [path, access] of selfEntries) {
|
||||
const key = 'settings/page:' + path
|
||||
let val = this.storage.getItem(key)
|
||||
try {
|
||||
if (val !== null) {
|
||||
val = JSON.parse(val)
|
||||
}
|
||||
} catch (err) {
|
||||
// ignore
|
||||
}
|
||||
const data = val ?? {}
|
||||
data.connections = data.connections ?? {}
|
||||
data.connections[otherDir] = (
|
||||
data.connections[otherDir] ?? {}
|
||||
)
|
||||
data.connections[otherDir][this.path] = access
|
||||
this.storage.setItem(
|
||||
key, JSON.stringify(data)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
applyInverseRename(
|
||||
settingsData, dir, otherDir, oldPath, newPath
|
||||
) {
|
||||
const selfEntries = Object.entries(
|
||||
settingsData.connections[dir] ?? {}
|
||||
)
|
||||
for (const [path, access] of selfEntries) {
|
||||
const key = 'settings/page:' + path
|
||||
let val = this.storage.getItem(key)
|
||||
try {
|
||||
if (val !== null) {
|
||||
val = JSON.parse(val)
|
||||
}
|
||||
} catch (err) {
|
||||
// ignore
|
||||
}
|
||||
const data = val ?? {}
|
||||
data.connections = data.connections ?? {}
|
||||
data.connections[otherDir] = (
|
||||
data.connections[otherDir] ?? {}
|
||||
)
|
||||
const accessValue = data.connections[otherDir][oldPath]
|
||||
data.connections[otherDir][newPath] = accessValue
|
||||
data.connections[otherDir][oldPath] = undefined
|
||||
this.storage.setItem(
|
||||
key, JSON.stringify(data)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
applyTemplateSettings() {
|
||||
const templates = {}
|
||||
for (const key of this.storage.keys()) {
|
||||
try {
|
||||
if (key.startsWith('settings/page:')) {
|
||||
const data = JSON.parse(
|
||||
this.storage.getItem(key)
|
||||
)
|
||||
if (data.template) {
|
||||
const name = key.slice(
|
||||
'settings/page:'.length
|
||||
)
|
||||
templates[name] = {name}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
this.storage.setItem(
|
||||
'settings:templates',
|
||||
JSON.stringify({templates}),
|
||||
)
|
||||
}
|
||||
|
||||
get language() {
|
||||
return this._language
|
||||
}
|
||||
|
||||
set language(language) {
|
||||
this._language = language
|
||||
this.text = this.langEs ? this.textEs : this.textEn
|
||||
}
|
||||
|
||||
get langEs() {
|
||||
return /^es\b/.test(this.language)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue