@silexlabs/silex 3.0.0-alpha.21

package/src/ts/client/grapesjs/internal-links.ts

@@ -0,0 +1,210 @@
+import {html, render} from 'lit-html'
+import {map} from 'lit-html/directives/map.js'
+import grapesjs from 'grapesjs/dist/grapes.min.js'
+
+import { Page } from '../../types'
+import { getPageLink } from '../../page'
+
+// constants
+const pluginName = 'internal-links'
+const options: grapesjs.SelectOption = [
+  { id: '', name: '-' },
+  { id: 'url', name: 'URL' },
+  { id: 'email', name: 'Email' },
+  { id: 'page', name: 'Page' },
+]
+
+// plugin code
+export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  // update links when a page link changes
+  function onAll(cbk) {
+    editor.Pages.getAll()
+      .forEach(page => {
+        page.getMainComponent()
+          .onAll(cbk)
+      })
+  }
+  editor.on('page', ({ event, page }) => {
+    if(!page) return // fixes UT
+    switch (event) {
+    case 'change:name':
+      // update all links to this page
+      onAll(component => {
+        if(component.getAttributes().href === getPageLink(page.previous('name'))) {
+          component.setAttributes({
+            href: getPageLink(page.get('name')),
+          })
+        }
+      })
+      break
+    case 'remove':
+      // mark all links as issues
+      const issues = []
+      onAll(component => {
+        console.log(component.getAttributes().href, getPageLink(page.previous('name')), page.previous('name'))
+        if(component.getAttributes().href === getPageLink(page.previous('name'))) {
+          issues.push(component)
+        }
+      })
+      opts?.onError(issues)
+      break
+    }
+  })
+  // utility functions to render the UI
+  function getUi(type, href) {
+    switch (type) {
+    case 'email':
+      const mailTo = href.replace('mailto:', '').split('?')
+      const email = mailTo[0]
+      const params = (mailTo[1] || '').split('&').reduce((acc, item) => {
+        const items = item.split('=')
+        acc[items[0]] = items[1]
+        return acc
+      }, {})
+      return html`<div class="href-next__email-inputs">
+            <label for="href-next__email" class="gjs-one-bg silex-label">Email address</label>
+            <input class="href-next__email" placeholder="Insert email" type="email" value=${email || ''}/>
+            <label for="href-next__email-subject" class="gjs-one-bg silex-label">Subject</label>
+            <input class="href-next__email-subject" placeholder="Insert subject" value=${ params.subject || '' }/>
+          </div>`
+    case 'page':
+      return html`<div class="href-next__page-inputs">
+            <label for="href-next__page" class="gjs-one-bg silex-label">Page name</label>
+            <select id="href-next__page" class="href-next__page">
+              ${
+  map<grapesjs.Page>(editor.Pages.getAll(), page => html`<option
+                  ?selected=${getPageLink(page.getName()) === href}
+                  value=${getPageLink(page.getName())}>
+                    ${page.getName() || 'Main'}
+                </option>`)
+}
+            </select>
+          </div>`
+    case 'url':
+      return html`<div class="href-next__url-inputs">
+          <label for="href-next__url" class="gjs-one-bg silex-label">URL</label>
+          <input class="href-next__url" placeholder="Insert URL" type="url" value=${ href }/>
+        </div>`
+    default:
+      return ''
+    }
+  }
+  function getDefaultHref(type) {
+    switch(type) {
+    case 'email': return 'mailto:'
+    case 'page': return getPageLink()
+    case 'url': return 'https://'
+    }
+  }
+  function doRender(el: HTMLElement, href = '') {
+    const type = getType(href)
+    const ui = getUi(type, href)
+
+    render(html`
+      <label for="href-next__type" class="gjs-one-bg silex-label">Type</label>
+      <select id="href-next__type" class="href-next__type" @change=${event => doRender(el, getDefaultHref(event.target.value))}>
+        ${map<grapesjs.SelectOption>(options, opt => html`
+          <option value="${opt.id}" ?selected=${type === opt.id}>${opt.name}</option>
+        `)}
+      </select>
+      ${ ui }
+    `, el)
+  }
+  function getType(href: string) {
+    if (href.indexOf('mailto:') === 0) {
+      return 'email'
+    } else if(href.indexOf('./') === 0){
+      return 'page'
+    } else if(href){
+      return 'url'
+    }
+    return ''
+  }
+  function doRenderCurrent(el) {
+    doRender(el, editor.getSelected()?.getAttributes().href || '')
+  }
+
+  // Add the new trait to all component types
+  editor.DomComponents.getTypes().map(type => {
+    editor.DomComponents.addType(type.id, {
+      model: {
+        defaults: {
+          traits: [
+            // Keep the type original traits
+            ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits
+            // Filter original href trait
+              .filter(trait => trait.name ? trait.name !== 'href' : trait !== 'href'),
+            // Add the new trait
+            {
+              label: 'Link',
+              type: 'href-next',
+              name: 'href',
+            },
+          ]
+        }
+      }
+    })
+  })
+
+  editor.TraitManager.addType('href-next', {
+    createInput({ trait }) {
+      // Create a new element container and add some content
+      const el = document.createElement('div')
+      // update the UI when a page is added/renamed/removed
+      editor.on('page', () => doRenderCurrent(el))
+      doRenderCurrent(el)
+      // this will be the element passed to onEvent and onUpdate
+      return el
+    },
+    // Update the component based on UI changes
+    // `elInput` is the result HTMLElement you get from `createInput`
+    onEvent({ elInput, component, event }) {
+      const inputType = elInput.querySelector('.href-next__type')
+      let href = ''
+      // Compute the new HREF value
+      switch (inputType.value) {
+      case 'page':
+        const valPage = elInput.querySelector('.href-next__page')?.value
+        href = valPage || getDefaultHref('page')
+        break
+      case 'url':
+        const valUrl = elInput.querySelector('.href-next__url')?.value
+        href = valUrl || getDefaultHref('url')
+        break
+      case 'email':
+        const valEmail = elInput.querySelector('.href-next__email')?.value
+        const valSubj = elInput.querySelector('.href-next__email-subject')?.value
+        href = valEmail ? `mailto:${valEmail}${valSubj ? `?subject=${valSubj}` : ''}` :  getDefaultHref('email')
+        break
+      default:
+        href = ''
+      }
+
+      // Store the new HREF value
+      component.addAttributes({ href })
+
+      // Handle the tag name
+      if(href === '') {
+        // Not a link
+        if(component.get('tagName').toUpperCase() === 'A'){
+          // Retrieve the original stored value
+          const original = component.get('originalTagName') ?? 'DIV'
+          // Case of the inline A tags inserted by the text bar
+          const value = original.toUpperCase() === 'A' ? 'SPAN' : original
+          component.set('tagName', value)
+        }
+      } else {
+        // Link
+        if(component.get('tagName').toUpperCase() !== 'A') {
+          component.set('originalTagName', component.get('tagName'))
+          component.set('tagName', 'A')
+        }
+      }
+    },
+    // Update UI on the component change
+    onUpdate({ elInput, component }) {
+      const href = component.getAttributes().href || ''
+      doRender(elInput, href)
+    },
+  })
+})

package/src/ts/client/grapesjs/new-page-dialog.ts

@@ -0,0 +1,73 @@
+import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import {html, render} from 'lit-html'
+import {live} from 'lit-html/directives/live.js'
+
+
+const name = 'new-page-dialog'
+const el = document.createElement('div')
+let modal
+
+export const cmdOpenNewPageDialog = 'new-page-dialog'
+
+export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
+  editor.Commands.add(cmdOpenNewPageDialog, {
+    run: (_, sender, {page}) => {
+      modal = editor.Modal.open({
+        title: 'New Page',
+        content: '',
+        attributes: { class: 'new-page-dialog' },
+      })
+        .onceClose(() => {
+          editor.stopCommand(cmdOpenNewPageDialog) // apparently this is needed to be able to run the command several times
+        })
+      displayDialog(editor, opts, page)
+      modal.setContent(el)
+      const form = el.querySelector('form')
+      form.onsubmit = event => {
+        event.preventDefault()
+        saveDialog(editor, opts, page)
+        editor.stopCommand(cmdOpenNewPageDialog)
+      }
+      form.querySelector('input')?.focus()
+      return modal
+    },
+    stop: () => {
+      modal.close()
+      // el.innerHTML = ''
+    },
+  })
+})
+
+function onImport(editor, page) {
+  editor.Pages.select(page)
+  editor.runCommand('gjs-open-import-webpage')
+}
+
+function displayDialog(editor, config, page) {
+  render(html`
+    <form class="silex-form">
+      <label class="silex-form__element">
+        <h3>Name</h3>
+        <input type="text" name="name" .value=${live(page.getName() || '')}/>
+      </label>
+      <footer>
+        <input class="silex-button" type="button" @click=${e => onImport(editor, page)} value="Import from website">
+        <input class="silex-button" type="button" @click=${e => editor.stopCommand(cmdOpenNewPageDialog)} value="Cancel">
+        <input class="silex-button" type="submit" value="Ok">
+      </footer>
+    </form>
+  `, el)
+}
+
+function saveDialog(editor, config, page) {
+  const form = el.querySelector('form')
+  const formData = new FormData(form)
+  const data = Array.from(formData)
+    .reduce((aggregate, [key, value]) => {
+      aggregate[key] = value
+      return aggregate
+    }, {})
+  page.set(data)
+  // save if auto save is on
+  editor.getModel().set('changesCount', editor.getDirtyCount() + 1)
+}

package/src/ts/client/grapesjs/openImport.ts

@@ -0,0 +1,59 @@
+// from https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/commands/openImport.js
+export default function openImport(editor, config) {
+  const pfx = editor.getConfig('stylePrefix')
+  const modal = editor.Modal
+  const codeViewer = editor.CodeManager.getViewer('CodeMirror').clone()
+  const container = document.createElement('div')
+  const importLabel = config.modalImportLabel
+  const importCnt = config.modalImportContent
+  let viewerEditor = codeViewer.editor
+
+  // Init import button
+  const btnImp = document.createElement('button')
+  btnImp.type = 'button'
+  btnImp.innerHTML = config.modalImportButton
+  btnImp.className = `${pfx}btn-prim ${pfx}btn-import`
+  btnImp.onclick = e => {
+    editor.setComponents(viewerEditor.getValue().trim())
+    modal.close()
+  }
+
+  // Init code viewer
+  codeViewer.set({ ...{
+    codeName: 'htmlmixed',
+    theme: 'hopscotch',
+    readOnly: 0
+  }, ...config.importViewerOptions})
+
+  return {
+    run(_) {
+      if (!viewerEditor) {
+        const txtarea = document.createElement('textarea')
+
+        if (importLabel) {
+          const labelEl = document.createElement('div')
+          labelEl.className = `${pfx}import-label`
+          labelEl.innerHTML = importLabel
+          container.appendChild(labelEl)
+        }
+
+        container.appendChild(txtarea)
+        container.appendChild(btnImp)
+        codeViewer.init(txtarea)
+        viewerEditor = codeViewer.editor
+      }
+
+      modal.setTitle(config.modalImportTitle)
+      modal.setContent(container)
+      const cnt = typeof importCnt === 'function' ? importCnt(editor) : importCnt
+      codeViewer.setContent(cnt || '')
+      modal.open().getModel()
+        .once('change:open', () => editor.stopCommand(this.id))
+      viewerEditor.refresh()
+    },
+
+    stop() {
+      modal.close()
+    }
+  }
+}

package/src/ts/client/grapesjs/page-panel.ts

@@ -0,0 +1,101 @@
+import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import {html, render} from 'lit-html'
+
+const pluginName = 'page-panel'
+let open
+
+export const cmdTogglePages = 'pages:open-panel'
+export const cmdAddPage = 'pages:add'
+
+function selectPage(editor, page) {
+  editor.Pages.select(page)
+}
+function addPage(editor, config) {
+  const pages = editor.Pages.getAll()
+  let idx = 1
+  const newPageName = config.newPageName || 'New page'
+  let pageName = newPageName
+  while(pages.find(p => p.getName() === pageName)) {
+    pageName = `${newPageName} ${idx++}`
+  }
+  const page = editor.Pages.add({ name: pageName })
+  editor.runCommand(config.cmdOpenNewPageDialog, {page})
+}
+
+function removePage(editor, page) {
+  if(editor.Pages.getAll().length === 1) {
+    console.error('can not delete the only page')
+  } else {
+    const isMain = page.get('type') === 'main'
+    const isSelected = editor.Pages.getSelected() === page
+    editor.Pages.remove(page.id)
+    const firstPage = editor.Pages.getAll()[0]
+    if(isMain) firstPage.set('type', 'main')
+    if(isSelected) selectPage(editor, firstPage)
+  }
+}
+
+function settingsPage(editor, config, page) {
+  editor.runCommand(config.cmdOpenSettings, {page})
+}
+
+function renderPages(editor, config) {
+  const pages = editor.Pages.getAll()
+  const selected = editor.Pages.getSelected()
+  const getPageFromEvent = (e) => {
+    const el = e.target.hasAttribute('data-page-id') ? e.target : e.target.parentNode
+    e.stopPropagation()
+    return editor.Pages.get(el.getAttribute('data-page-id'))
+  }
+  return html`<section class="pages">
+    <main class="pages__main ${pages.length === 1 ? 'pages__single-page' : ''}">
+      <div class="pages__list">
+        ${ pages.map(page => {
+    const name = page.getName() || page.attributes.type
+    // keep the same structure as the layers panel
+    return html`
+           <div class="pages__page ${selected === page ? 'pages__page-selected' : ''}" data-page-id=${page.id} @click=${e => selectPage(editor, getPageFromEvent(e))}>
+             <div class="pages__page-name">
+               ${ name }
+             </div>
+             <i class="pages__icon pages__remove-btn fa fa-trash" @click=${e => removePage(editor, getPageFromEvent(e))}></i>
+             <i class="pages__icon fa fa-cog" @click=${e => settingsPage(editor, config, getPageFromEvent(e))}></i>
+           </div>
+          </div>
+          `
+  })}
+      </div>
+      ${pages.length ? '' : html`<div class="flex-row">
+        No page yet.
+      </div>
+    `}
+    </main></section>`
+}
+
+export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  // create wrapper
+  const el = document.createElement('div')
+  el.classList.add('pages__wrapper')
+  // update
+  const doRender = () => render(renderPages(editor, opts), el)
+  editor.on('page', () => {
+    doRender()
+  })
+  editor.on('load', () => {
+    open = false
+    document.querySelector(opts.appendTo)
+      .appendChild(el)
+    doRender()
+    // click anywhere close it
+    // const close = (event) => {
+    //   if(open) {
+    //     editor.stopCommand(cmdTogglePages)
+    //     //event.preventDefault()
+    //   }
+    // }
+    // document.addEventListener('mousedown', close)
+    // add command to add pages
+    editor.Commands.add(cmdAddPage, () => addPage(editor, opts))
+  })
+})
+

package/src/ts/client/grapesjs/project-bar.ts

@@ -0,0 +1,92 @@
+import {html, render} from 'lit-html'
+
+const panelId = 'project-bar-panel'
+const containerPanelId = 'project-bar-container'
+
+export const projectBarPlugin = (editor, opts) => {
+  // create the panels container for all panels in grapesjs
+  const containerPanel = editor.Panels.addPanel({
+    id: containerPanelId,
+    visible  : false,
+  })
+  // create the project bar panel in grapesjs
+  const projectBarPanel = editor.Panels.addPanel({
+    id: panelId,
+    buttons: opts.panels,
+    visible  : true,
+  })
+  const panelsEl = opts.panels.map(panel => {
+    const el = document.createElement('div')
+
+    // create container for panel
+    if(panel.attributes.containerClassName) {
+      el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
+
+      // add header
+      if(panel.attributes.title) {
+        render(html`
+          <header class="project-bar__panel-header">
+            <h3 class="project-bar__panel-header-title">${ panel.attributes.title }</h3>
+            ${ panel.buttons?.map(button => {
+    return html`
+                <div
+                  class="project-bar__panel-header-button ${ button.className }"
+                  @click=${e => editor.runCommand(button.command)}
+                ><span>${ button.text }</span></div>
+              `
+  }) }
+          </header>
+        `, el)
+      }
+
+      // temporarily attach it to the body
+      // this lets the block manager and other plugins attach to their container
+      document.body.appendChild(el)
+
+      // on load attach the panels to the main container
+      // this is when the main containerPanel has an element
+      editor.on('load', () => {
+        const containerPanelEl = containerPanel.view.el
+        containerPanelEl.appendChild(el)
+      })
+    }
+
+    // commands for show / hide panels
+    editor.Commands.add(panel.command, {
+      run() {
+        if(panel.link) {
+          window.open(panel.link)
+        }
+        if(panel.attributes.containerClassName) {
+          containerPanel.set('visible', true)
+          el.classList.remove('gjs-hidden')
+          editor.Canvas.getFrameEl().classList.add('silex-squeeze-left')
+        }
+      },
+      stop() {
+        if(panel.attributes.containerClassName) {
+          containerPanel.set('visible', false)
+          el.classList.add('gjs-hidden')
+          editor.Canvas.getFrameEl().classList.remove('silex-squeeze-left')
+        }
+      },
+    })
+  })
+  function updateSqueez() {
+    const containerPanelEl = containerPanel.view.el
+    const iframe = editor.Canvas.getFrameEl()
+    iframe.classList.remove('enable-squeeze')
+    setTimeout(() => {
+      const left = iframe.getClientRects()[0]?.left
+      const right = containerPanelEl.getClientRects()[0]?.right
+      if(left < right || !right) iframe.classList.add('enable-squeeze')
+      else iframe.classList.remove('enable-squeeze')
+    }, 400) // More than the transition duration
+    // make sure the squeez corresponds to the state (reset when change page)
+    if(containerPanel.get('visible')) iframe.classList.add('silex-squeeze-left')
+    else iframe.classList.remove('silex-squeeze-left')
+  }
+  editor.on('load device:select page', () => {
+    updateSqueez()
+  })
+}