@silexlabs/silex 3.0.1-alpha.0 → 3.0.2

package/src/ts/client/grapesjs/eleventy.ts

@@ -1,21 +1,44 @@
-import grapesjs from 'grapesjs/dist/grapes.min.js'
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @deprecated
+ * Replaced by the plugin 11ty.ts
+ * This plugin is deprecated. Use the publication renderer plugin instead.
+ */
+console.warn('This plugin is deprecated. Use the publication renderer plugin instead.')
+throw 'This plugin is deprecated. Use the publication renderer plugin instead.'
 
 import { getPageSlug } from '../../page'
-import { Page } from '../../types'
+import { ClientEvent } from '../events'
+import { Page } from 'grapesjs'
 
 const pluginName = 'eleventy'
 
-export const eleventyPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
-  editor.on(opts.eventStart || 'publish:start', data => {
+export const eleventyPlugin = (editor, opts) => {
+  editor.on(opts.eventStart || ClientEvent.PUBLISH_DATA, data => {
     data.pages.forEach((page: Page, idx) => {
       const file = data.files[idx]
       file.css = `---
-permalink: /css/${getPageSlug(page.name)}.css
+permalink: /css/${getPageSlug(page.get('name'))}.css
 ---
 ${file.css}
 `
       file.cssPath += '.liquid'
     })
   })
-})
-
+}

package/src/ts/client/grapesjs/footer.ts

@@ -0,0 +1,42 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * @fileoverview
+ * The footer is the part of the UI which contain the bread crumbs
+ * Styles are in: src/scss/footer.scss
+ */
+let _onFooter = []
+let footer
+export default function (editor, options) {
+  const panel = editor.Panels.addPanel({
+    id: 'footer',
+    visible: true,
+    buttons: [],
+  })
+  setTimeout(() => {
+    footer = panel.view?.el
+    _onFooter.forEach(cbk => cbk(footer))
+    _onFooter = []
+  })
+}
+
+export function onFooter(fn) {
+  if(footer) fn(footer)
+  else _onFooter.push(fn)
+}

package/src/ts/client/grapesjs/img.ts

@@ -0,0 +1,147 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Editor } from 'grapesjs'
+
+/**
+ * @fileoverview This plugin adds CSS properties object-fit and object-position to the image component.
+ */
+
+export default (editor: Editor, opts) => {
+  opts = {
+    // Default options
+    labelSrc: 'Image URL',
+    placeholderSrc: 'https://example.com/image.jpg',
+    // These default values will never be used,
+    // as there is default values in config
+    replacedElements: ['img'],
+    // Override with provided config
+    ...opts,
+  }
+  // Add src trait in the properties
+  editor.TraitManager.addType('src', {
+    events: {
+      'change': 'onChange',
+    },
+    templateInput() {
+      return `
+        <div class="gjs-field gjs-field-trad">
+          <label class="gjs-label">${opts.labelSrc}</label>
+          <input type="text" class="gjs-field" placeholder="${opts.placeholderSrc}" />
+        </div>
+      `
+    },
+    getInputEl() {
+      if (!this.inputEl) {
+        this.inputEl = this.templateInput()
+      }
+      return this.inputEl
+    },
+    onValueChange() {
+      this.setValue(this.getInputEl().value)
+    },
+    setValue(value) {
+      this.getInputEl().value = value
+    },
+    getValue() {
+      return this.getInputEl().value
+    },
+  })
+
+  // Add the trait to the image component
+  editor.DomComponents.addType('image', {
+    model: {
+      defaults: {
+        ...editor.DomComponents.getType('image').model.prototype.defaults,
+        traits: [
+          ...editor.DomComponents.getType('image').model.prototype.defaults.traits
+          // Remove href and tagName trait becase images have to keep the img tag, not become links
+          // Remove tag-name trait which is added by the semantic plugin
+          // Also remove src trait in case it exists already
+            .filter((trait) => !['href', 'tag-name', 'src'].includes(trait.name)),
+          'src',
+        ],
+      },
+    },
+  })
+
+  // Wait for the editor to be ready
+  editor.on('load', () => {
+    // Add a sector to the style manager
+    const sector = editor.StyleManager.addSector('object', {
+      name: 'Object',
+      open: false,
+      properties: [{
+        label: 'object-fit',
+        property: 'object-fit',
+        type: 'select',
+        default: '',
+        /* @ts-ignore */
+        options: [
+          { id: '', label: '' },
+          { id: 'fill', label: 'fill' },
+          { id: 'contain', label: 'contain' },
+          { id: 'cover', label: 'cover' },
+          { id: 'none', label: 'none' },
+          { id: 'scale-down', label: 'scale-down' },
+          { id: 'initial', label: 'initial' },
+          { id: 'inherit', label: 'inherit' },
+          { id: 'auto', label: 'auto' },
+        ],
+      }, {
+        label: 'object-position',
+        property: 'object-position',
+        type: 'select',
+        default: '',
+        /* @ts-ignore */
+        options: [
+          { id: '', label: '' },
+          { id: 'left top', label: 'left top' },
+          { id: 'left center', label: 'left center' },
+          { id: 'left bottom', label: 'left bottom' },
+          { id: 'right top', label: 'right top' },
+          { id: 'right center', label: 'right center' },
+          { id: 'right bottom', label: 'right bottom' },
+          { id: 'center top', label: 'center top' },
+          { id: 'center center', label: 'center center' },
+          { id: 'center bottom', label: 'center bottom' },
+          { id: 'initial', label: 'initial' },
+          { id: 'inherit', label: 'inherit' },
+          { id: 'unset', label: 'unset' },
+        ],
+      }],
+    }, {
+      at: 1,
+    })
+    let showSector = false
+    // It shows up when the selection is an image
+    editor.on('component:selected', (model) => {
+      if (model && opts.replacedElements.includes(model.get('tagName')?.toLowerCase())) {
+        // Not necessary, grapesjs does it automatically
+        // sector.set('visible', true);
+        showSector = true
+      } else {
+        showSector = false
+        sector.set('visible', false)
+      }
+    })
+    // Watch automatic changes and revert them if needed
+    sector.on('change:visible', (model, open) => {
+      if(sector.get('visible') !== showSector) sector.set('visible', showSector)
+    })
+  })
+}