Merge pull request #203 from maximehuran/nested

Manage layouts by nested elements

README.md

@@ -161,7 +161,18 @@ monsieurbiz_sylius_richeditor:
 
 ## Available elements
 
-The plugin already contains some simple elements.
+### Row Element (Layout)
+
+It contains another rich editor field, each element will be displayed one below the other (as rows…).
+
+### Column Element (Layout)
+
+It contains another rich editor field, each element will be displayed side by side (as columns…).
+
+By using this element in the `Row` element, you will be able to build some layout like the screenshot below.  
+You can distinguish the `Row` element and the `Column` element by their dotted borders.
+
+![The Columns and Rows elements](screenshots/columns_and_rows.jpg)
 
 ### HTML Element
 

assets/js/app.js

@@ -63,6 +63,8 @@ global.MonsieurBizRichEditorConfig = class {
     actionsHtml,
     elementHtml,
     elementCardHtml,
+    panelsHtml,
+    panelsEditHtml,
     deletionConfirmation,
     createElementFormUrl,
     editElementFormUrl,
@@ -79,6 +81,8 @@ global.MonsieurBizRichEditorConfig = class {
     this.actionsHtml = actionsHtml;
     this.elementHtml = elementHtml;
     this.elementCardHtml = elementCardHtml;
+    this.panelsHtml = panelsHtml;
+    this.panelsEditHtml = panelsEditHtml;
     this.deletionConfirmation = deletionConfirmation;
     this.createElementFormUrl = createElementFormUrl;
     this.editElementFormUrl = editElementFormUrl;
@@ -87,6 +91,7 @@ global.MonsieurBizRichEditorConfig = class {
     this.defaultUIElementDataField = defaultUIElementDataField;
     this.errorMessage = errorMessage;
     this.unallowedUiElementMessage = unallowedUiElementMessage;
+    this.uid = Math.random().toString(36).substring(2, 11);
   }
 
   findUiElementByCode(code) {
@@ -165,12 +170,14 @@ global.MonsieurBizRichEditorManager = class {
   /**
    *
    */
-  constructor(config) {
+  constructor(config, tags) {
+    config.input.setAttribute('data-rich-editor-uid', config.uid);
+
     this.config = config;
 
     let inputValue = this.input.value.trim();
 
-    this.tags = this.input.dataset.tags.length === 0 ? [] : this.input.dataset.tags.split(',');
+    this.tags = tags;
     this.tagsAreExclusive = false;
     for (let tag of this.tags) {
       if (!tag.startsWith('-')) {
@@ -246,16 +253,26 @@ global.MonsieurBizRichEditorManager = class {
   }
 
   initUiPanelsInterface() {
-    this.selectionPanel = new Dialog('.js-uie-panels', {
-      labelledby: 'uie-heading',
+    let panelsWrapper = document.createElement('div');
+    panelsWrapper.innerHTML = Mustache.render(this.config.panelsHtml, { uid: this.config.uid });
+    document.body.appendChild(panelsWrapper.firstElementChild);
+
+    let panelsEditWrapper = document.createElement('div');
+    panelsEditWrapper.innerHTML = Mustache.render(this.config.panelsEditHtml, {
+      uid: this.config.uid,
+    });
+    document.body.appendChild(panelsEditWrapper.firstElementChild);
+
+    this.selectionPanel = new Dialog('.js-uie-panels-' + this.config.uid, {
+      labelledby: 'uie-heading-' + this.config.uid,
       enableAutoFocus: false,
-      closingSelector: '.js-uie-panels-close',
+      closingSelector: '.js-uie-panels-close-' + this.config.uid,
     });
-    this.newPanel = new Dialog('.js-uie-panels-new', {
-      helperSelector: '.js-uie-panels-selector',
+    this.newPanel = new Dialog('.js-uie-panels-new-' + this.config.uid, {
+      helperSelector: '.js-uie-panels-selector-' + this.config.uid,
       enableAutoFocus: false,
     });
-    this.editPanel = new Dialog('.js-uie-panels-edit', {
+    this.editPanel = new Dialog('.js-uie-panels-edit-' + this.config.uid, {
       enableAutoFocus: false,
     });
   }
@@ -423,7 +440,7 @@ global.MonsieurBizRichEditorManager = class {
     this.newPanel.dialog.innerHTML = formHtml;
     let form = this.newPanel.dialog;
     this.wysiwyg.load(form);
-    this.dispatchInitFormEvent(form);
+    this.dispatchInitFormEvent(form, this);
 
     // Form submit
     let formElement = form.querySelector('form');
@@ -490,7 +507,7 @@ global.MonsieurBizRichEditorManager = class {
     let form = this.editPanel.dialog;
 
     this.wysiwyg.load(form);
-    this.dispatchInitFormEvent(form);
+    this.dispatchInitFormEvent(form, this);
 
     // Form submit
     let formElement = form.querySelector('form');
@@ -677,9 +694,9 @@ global.MonsieurBizRichEditorManager = class {
     }
   }
 
-  dispatchInitFormEvent(form) {
+  dispatchInitFormEvent(form, manager) {
     document.dispatchEvent(new CustomEvent('monsieurBizRichEditorInitForm', {
-      'detail': {'form': form}
+      'detail': {'form': form, 'manager': manager}
     }));
   }
 };

composer.json

@@ -80,7 +80,8 @@
             "symfony/thanks": true,
             "phpstan/extension-installer": true,
             "ergebnis/composer-normalize": true,
-            "symfony/flex": true
+            "symfony/flex": true,
+            "php-http/discovery": true
         }
     }
 }

src/Form/Type/UiElement/ColumnType.php

@@ -0,0 +1,38 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE.txt
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\RichEditorType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+class ColumnType extends AbstractType
+{
+    /**
+     * @inheritdoc
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('content', RichEditorType::class, [
+                'required' => true,
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.field.content',
+                'constraints' => [
+                    new Assert\NotBlank([]),
+                ],
+            ])
+        ;
+    }
+}

src/Form/Type/UiElement/RowType.php

@@ -0,0 +1,38 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE.txt
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\RichEditorType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+class RowType extends AbstractType
+{
+    /**
+     * @inheritdoc
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('content', RichEditorType::class, [
+                'required' => true,
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.field.content',
+                'constraints' => [
+                    new Assert\NotBlank([]),
+                ],
+            ])
+        ;
+    }
+}

src/Resources/config/richeditor.yaml

@@ -142,3 +142,25 @@ monsieurbiz_sylius_richeditor:
             templates:
                 admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image_collection.html.twig'
                 front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig'
+        monsieurbiz.column:
+            alias: column
+            title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.title'
+            description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.description'
+            icon: columns
+            tags: [ default, layout ]
+            classes:
+                form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ColumnType
+            templates:
+                admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/column.html.twig'
+                front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/column.html.twig'
+        monsieurbiz.row:
+            alias: row
+            title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.title'
+            description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.description'
+            icon: columns
+            tags: [ default, layout ]
+            classes:
+                form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\RowType
+            templates:
+                admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/row.html.twig'
+                front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/row.html.twig'

src/Resources/translations/messages.en.yml

@@ -1,5 +1,15 @@
 monsieurbiz_richeditor_plugin:
   ui_element:
+    monsieurbiz.column:
+      title: 'Column Layout Element'
+      description: 'A layout to display elements as a column'
+      field:
+        content: 'Content'
+    monsieurbiz.row:
+      title: 'Row Layout Element'
+      description: 'A layout to display elements as a row'
+      field:
+        content: 'Content'
     monsieurbiz.html:
       title: 'HTML Element'
       description: 'An element with raw data'

src/Resources/translations/messages.fr.yml

@@ -1,5 +1,15 @@
 monsieurbiz_richeditor_plugin:
   ui_element:
+    monsieurbiz.column:
+      title: 'Lame Colonne'
+      description: 'Une lame contenant d''autres lames affichées en colonne'
+      field:
+        content: 'Contenu'
+    monsieurbiz.row:
+      title: 'Lame Ligne'
+      description: 'Une lame contenant d''autres lames affichées côte à côte'
+      field:
+        content: 'Contenu'
     monsieurbiz.html:
       title: 'Lame HTML'
       description: 'Une lame contenant un contenu en brut'

src/Resources/translations/messages.hr.yml

@@ -1,5 +1,15 @@
 monsieurbiz_richeditor_plugin:
   ui_element:
+    monsieurbiz.column:
+      title: 'Kolona'
+      description: 'Element koji sadrži druge elemente unutra'
+      field:
+        content: 'Sadržaj'
+    monsieurbiz.row:
+      title: 'Red'
+      description: 'Element koji sadrži druge elemente unutra'
+      field:
+        content: 'Sadržaj'
     monsieurbiz.html:
       title: 'Neobrađeni HTML'
       description: 'Element koji sadrži neobrađeni HTML.'

src/Resources/translations/messages.nl.yml

@@ -1,5 +1,15 @@
 monsieurbiz_richeditor_plugin:
   ui_element:
+    monsieurbiz.column:
+      title: 'Kolom'
+      description: 'Een element met een lijst met elementen erin'
+      field:
+        content: 'Inhoud'
+    monsieurbiz.row:
+      title: 'Rij'
+      description: 'Een element met een lijst met elementen erin'
+      field:
+        content: 'Inhoud'
     monsieurbiz.html:
       title: 'HTML'
       description: 'Een element met HTML-code'

src/Resources/views/Admin/UiElement/column.html.twig

@@ -0,0 +1,16 @@
+{#
+    UI Element template
+    type: columns
+    element fields :
+        content
+#}
+{% if element.content|default('') is not empty %}
+<div class="ui grid equal width">
+    {% set content = monsieurbiz_richeditor_get_elements(element.content) %}
+    {% for row in content %}
+        <div class="column" style="border: 2px dashed rgba(34,36,38,0.38); padding: 10px; margin: 10px; position: relative;">
+           {{ row | monsieurbiz_richeditor_render_element }}
+        </div>
+    {% endfor %}
+</div>
+{% endif %}

src/Resources/views/Admin/UiElement/row.html.twig

@@ -0,0 +1,16 @@
+{#
+    UI Element template
+    type: row
+    element fields :
+        content
+#}
+{% if element.content|default('') is not empty %}
+    <div class="ui grid equal width">
+    {% set content = monsieurbiz_richeditor_get_elements(element.content) %}
+    {% for column in content %}
+        <div class="row" style="border: 2px dashed rgba(34, 36, 38, 0.1); padding: 10px; margin: 10px;">
+           {{ column | monsieurbiz_richeditor_render_element }}
+        </div>
+    {% endfor %}
+</div>
+{% endif %}