Merge pull request #128 from toofff/feature/add-enabled-attribute-in-…

…the-config-ui-elements

Feat: add enabled attribute for the configuration of UiElements

README.md

@@ -131,6 +131,22 @@ monsieurbiz_sylius_richeditor:
             tags: ['product']
 ```
 
+### Deactivate an available element
+
+Here is what really happens when deactivating an Ui Element:
+- it's not displayed anymore in frontend
+- it's still editable in backend for old contents but you can't add a new one
+- if the element has an alias, the alias is treated the same way
+
+Define the overload of a proposed UiElement in your configuration folder, let's say in `config/packages/monsieurbiz_sylius_richeditor_plugin.yaml` as example.
+
+```yaml
+monsieurbiz_sylius_richeditor:
+    ui_elements:
+        monsieurbiz.youtube:
+            enabled: false
+```
+
 ## Available elements
 
 The plugin already contains some simple elements.

assets/js/app.js

@@ -275,7 +275,8 @@ global.MonsieurBizRichEditorManager = class {
     elementWrapper.innerHTML = Mustache.render(this.config.elementHtml, {
       'title': element.title,
       'icon': element.icon,
-      'preview': element.previewHtml
+      'preview': element.previewHtml,
+      'disabled': !element.enabled
     });
     let uiElement = elementWrapper.firstElementChild;
     uiElement.element = element;
@@ -340,7 +341,10 @@ global.MonsieurBizRichEditorManager = class {
     let cardsContainer = this.selectionPanel.dialog.querySelector('.js-uie-cards-container');
     cardsContainer.innerHTML = '';
     for (let elementCode in this.config.uielements) {
-      if (this.config.uielements[elementCode].ignored) { // duplicates using aliases
+      if (
+        this.config.uielements[elementCode].ignored // duplicates using aliases
+        || !this.config.uielements[elementCode].enabled // avoid disabled elements to show up!
+      ) {
         continue;
       }
       if (this.tags.length > 0) {

src/DependencyInjection/Configuration.php

@@ -59,6 +59,7 @@ private function addUiElements(ArrayNodeDefinition $rootNode): void
                             ->scalarNode('description')->isRequired()->cannotBeEmpty()->end()
                             ->scalarNode('alias')->end()
                             ->scalarNode('icon')->isRequired()->cannotBeEmpty()->end()
+                            ->booleanNode('enabled')->defaultTrue()->end()
                             ->arrayNode('classes')
                                 ->addDefaultsIfNotSet()
                                 ->children()

src/Resources/translations/messages.en.yml

@@ -119,3 +119,5 @@ monsieurbiz_richeditor_plugin:
     cannot_parse_json: 'Cannot parse the current content'
     cannot_find_type: 'Cannot find type for some UI Elements'
     cannot_upload_image: 'Cannot upload the image. The file may be too large or have incorrect format.'
+  ui:
+    disabled: 'Disabled'

src/Resources/translations/messages.fr.yml

@@ -119,3 +119,5 @@ monsieurbiz_richeditor_plugin:
     cannot_parse_json: 'Impossible d''analyser le contenu actuel.'
     cannot_find_type: 'Impossible de trouver le type pour certains éléments'
     cannot_upload_file: 'Impossible de charger le fichier. Il est possible qu''il soit trop lourd ou son format incorrect.'
+  ui:
+    disabled: 'Désactivé'

src/Resources/views/Admin/app.html.twig

@@ -20,6 +20,7 @@
             <h3 class="header uie-m-0">
                 <i class="{{icon}} icon"></i>
                 {{title}}
+                {{#disabled}}<span class="ui label">{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.ui.disabled'|trans }}{% verbatim %}</span>{{/disabled}}
             </h3>
             <div class="ui small basic icon buttons sm:uie-mt-xs">
                 <button class="ui button js-uie-delete" type="button">

src/Twig/RichEditorExtension.php

@@ -176,6 +176,11 @@ public function renderElement(array $context, array $element): string
         }
 
         $uiElement = $this->uiElementRegistry->getUiElement($element['code']);
+
+        if (!$uiElement->isEnabled()) {
+            return '';
+        }
+
         $template = $uiElement->getFrontRenderTemplate();
 
         $context = array_merge($context, [

src/UiElement/Metadata.php

@@ -77,6 +77,14 @@ public function getCamelCasedCode(): string
         }, $this->getCode());
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function isEnabled(): bool
+    {
+        return $this->parameters['enabled'];
+    }
+
     /**
      * {@inheritdoc}
      */

src/UiElement/MetadataInterface.php

@@ -38,6 +38,11 @@ public function getAlias(): ?string;
      */
     public function getCamelCasedCode(): string;
 
+    /**
+     * @return bool
+     */
+    public function isEnabled(): bool;
+
     /**
      * @param string $name
      *

src/UiElement/UiElementInterface.php

@@ -53,6 +53,11 @@ public function getDescription(): string;
      */
     public function getIcon(): string;
 
+    /**
+     * @return bool
+     */
+    public function isEnabled(): bool;
+
     /**
      * @throws InvalidArgumentException
      */

src/UiElement/UiElementTrait.php

@@ -64,6 +64,14 @@ public function getAlias(): ?string
         return $this->metadata->getAlias();
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function isEnabled(): bool
+    {
+        return $this->metadata->isEnabled();
+    }
+
     /**
      * {@inheritdoc}
      */
@@ -137,6 +145,7 @@ public function jsonSerialize()
             'title' => $this->translator->trans($this->getTitle()),
             'ignored' => $this->ignored,
             'tags' => $this->metadata->getTags(),
+            'enabled' => $this->isEnabled(),
         ];
     }
 }

tests/Application/config/packages/monsieurbiz_sylius_rich_editor_plugin_custom.yaml

@@ -10,3 +10,5 @@ monsieurbiz_sylius_richeditor:
             templates:
                 admin_render: '/Admin/UiElement/google_maps.html.twig'
                 front_render: '/Shop/UiElement/google_maps.html.twig'
+#        monsieurbiz.html:
+#            enabled: false