import {html, render} from 'lit-html'
import {live} from 'lit-html/directives/live.js'
import * as grapesjs from 'grapesjs/dist/grapes.min.js'
import { WebsiteSettings } from '../../types'
const pluginName = 'settings-dialog'
const el = document.createElement('div')
let modal
// Get version from webpack (see plugin in webpack.config.js)
declare const VERSION: string
export const cmdOpenSettings = 'open-settings'
let version = 'v3'
export const settingsDialog = grapesjs.plugins.add(pluginName, (editor, opts) => {
// Display Silex version from package.json
try {
version = VERSION
} catch (error) {
// Cannot get version from webpack (see plugin in webpack.config.js)
}
console.log('Silex version:', version)
editor.Commands.add(cmdOpenSettings, {
run: (_, sender, {page}) => {
modal = editor.Modal.open({
title: page ? 'Page settings' : 'Site Settings',
content: '',
attributes: { class: 'settings-dialog' },
})
.onceClose(() => {
editor.stopCommand(cmdOpenSettings) // apparently this is needed to be able to run the command several times
})
displaySettings(editor, opts, page)
modal.setContent(el)
const form = el.querySelector('form')
form.onsubmit = event => {
event.preventDefault()
saveSettings(editor, opts, page)
editor.stopCommand(cmdOpenSettings)
}
form.querySelector('input')?.focus()
return modal
},
stop: () => {
modal.close()
},
})
// add settings to the website
editor.on('storage:start:store', (data) => {
data.settings = editor.getModel().get('settings')
data.name = editor.getModel().get('name')
})
editor.on('storage:end:load', (data) => {
const model = editor.getModel()
model.set('settings', data.settings || {})
model.set('name', data.name)
updateDom(editor)
})
editor.on('page', (e) => {
editor.Canvas.getFrameEl().addEventListener('load', () => {
updateDom(editor)
})
})
})
// Is the model a site or a page?
function isSite(model) { return !!model.getHtml }
function displaySettings(editor, config, model = editor.getModel()) {
const settings = model.get('settings') || {} as WebsiteSettings
model.set('settings', settings)
render(html`
The page settings will override site settings, more info about settings here.
`, el)
}
function saveSettings(editor, config, model = editor.getModel()) {
const form = el.querySelector('form')
const formData = new FormData(form)
const data = Array.from(formData as any)
.reduce((aggregate, [key, value]) => {
aggregate[key] = value
return aggregate
}, {}) as {[key: string]: any}
// take the name out to the main model (by design in grapesjs pages)
const { name, ...settings } = data
model.set({
settings,
name,
})
// save if auto save is on
editor.getModel().set('changesCount', editor.getDirtyCount() + 1)
// update the DOM
updateDom(editor)
}
function getHeadContainer(doc, className) {
const container = doc.head.querySelector(`.${className}`)
if(container) {
return container
}
const newContainer = doc.createElement('div')
newContainer.classList.add(className)
doc.head.appendChild(newContainer)
return newContainer
}
function updateDom(editor) {
const doc = editor.Canvas.getDocument()
if(doc) {
// Site head
getHeadContainer(doc, 'site-head')
.innerHTML = editor.getModel().get('settings').head || ''
// Pages head
getHeadContainer(doc, 'page-head')
.innerHTML = editor.Pages.getSelected().get('settings')?.head || ''
} else {
// No document??
}
}