Add modals to all form elements

cosmocode · Feb 14, 2024 · 6e98940 · 6e98940
1 parent ce8acfc
commit 6e98940
Show file tree

Hide file tree

Showing 25 changed files with 68 additions and 52 deletions.
diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml
@@ -100,7 +100,7 @@ form:
               - 'Choice #2'
               - 'Choice #3'
             modal: |
-              ###This is a modal.
+              ###This is a modal. {.title .is-1}
               
               With paragraphs.
               
@@ -109,6 +109,7 @@ form:
               And images.
               
               Any markdown goes.
+            tooltip: 'Optional input\nAllowed characters: a-Z, 0-9'
           dropdown1:
             type: dropdown
             label: 'Dropdown'

diff --git a/doc/formelements.md b/doc/formelements.md
@@ -8,6 +8,7 @@ Options:
 * `label` _(optional)_ - the label of the form element (excluded: [hidden](#hidden), [markdown](#markdown))
 * `labelsmall` _(optional)_ - if set to true, the label will be rendered in regular font instead of default bold
 * `tooltip` _(optional)_ - Shows a hint for the element. Ignored in structure elements like spacers and HR. Also see [Tooltip styling](meta.md#Tooltips)
+* `modal` _(optional)_ - Content of a simple Bulma modal in markdown syntax. Refer to the bundled EXAMPLE configuration. Images are interpreted as files located directly in your form directory. The option is ignored in structure elements like spacers and HR.  
 * `column` _(optional)_ - [bulma column sizes](https://bulma.io/documentation/columns/sizes/) defining the width of the form element (excluded: [hidden](#hidden)). You can use [offset](https://bulma.io/documentation/columns/sizes/#offset) to position the columns, for example `is-half is-offset-one-quarter` to center a half-width column.
 ```yaml
 <id>:

diff --git a/public/css/app.css b/public/css/app.css
@@ -253,3 +253,11 @@ div .field.with-tooltip .control {
         margin-left: 0.5rem;
     }
 }
+
+/**
+ * Modal
+ */
+
+div.modal-content div.box * {
+    font-weight: initial;
+}
diff --git a/public/info.php b/public/info.php
@@ -0,0 +1,3 @@
+<?php
+
+phpinfo();
diff --git a/public/js/app.js b/public/js/app.js
@@ -292,7 +292,6 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    console.log('HERE');
     // Add a click event on buttons to open a specific modal
     (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
         const modal = $trigger.dataset.target;
@@ -307,7 +306,8 @@ document.addEventListener('DOMContentLoaded', () => {
     (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
         const $target = $close.closest('.modal');
 
-        $close.addEventListener('click', () => {
+        $close.addEventListener('click', (evt) => {
+            evt.preventDefault();
             closeModal($target);
         });
     });
@@ -318,4 +318,4 @@ document.addEventListener('DOMContentLoaded', () => {
             closeAllModals();
         }
     });
-});
+});
diff --git a/src/FormGenerator/FormElements/AbstractDynamicFormElement.php b/src/FormGenerator/FormElements/AbstractDynamicFormElement.php
@@ -163,16 +163,13 @@ public function getPlaceholderValue()
     public function getViewVariables()
     {
         return array_merge(
-            $this->getConfig(),
+            parent::getViewVariables(),
             [
-                'id' => $this->getFormElementId(),
                 'id_string' => $this->getFormElementIdStringified(),
                 'value' => $this->getValue(),
                 'errors' => $this->getErrors(),
                 'is_required' => $this->isRequired(),
                 'is_readonly' => $this->isReadonly(),
-                'tooltip' => $this->parseTooltip(),
-                'modal' => $this->parseModal(),
                 'placeholder' => $this->getPlaceholderValue()
             ]
         );

diff --git a/src/FormGenerator/FormElements/AbstractFormElement.php b/src/FormGenerator/FormElements/AbstractFormElement.php
@@ -170,5 +170,15 @@ protected function parseModal()
      *
      * @return array
      */
-    abstract public function getViewVariables();
+    public function getViewVariables()
+    {
+        return array_merge(
+            $this->config,
+            [
+                'id' => $this->getFormElementId(),
+                'tooltip' => $this->parseTooltip(),
+                'modal' => $this->parseModal(),
+                ]
+        );
+    }
 }
diff --git a/src/FormGenerator/FormElements/AbstractStaticFormElement.php b/src/FormGenerator/FormElements/AbstractStaticFormElement.php
@@ -7,17 +7,4 @@
  */
 abstract class AbstractStaticFormElement extends AbstractFormElement
 {
-    /**
-     * @inheritdoc
-     * @return array
-     */
-    public function getViewVariables()
-    {
-        return array_merge(
-            $this->getConfig(),
-            [
-                'id' => $this->getFormElementId()
-            ]
-        );
-    }
 }
diff --git a/src/FormGenerator/FormElements/MarkDownFormElement.php b/src/FormGenerator/FormElements/MarkDownFormElement.php
@@ -29,11 +29,9 @@ public function getViewVariables()
         $markdown = MarkdownExtra::defaultTransform($this->getMarkdown());
 
         return array_merge(
-            $this->getConfig(),
+            parent::getViewVariables(),
             [
-                'id' => $this->getFormElementId(),
                 'markdown' => $markdown,
-                'tooltip' => $this->parseTooltip(),
             ]
         );
     }

diff --git a/src/FormGenerator/FormElements/UploadFormElement.php b/src/FormGenerator/FormElements/UploadFormElement.php
@@ -14,11 +14,6 @@ class UploadFormElement extends AbstractDynamicFormElement
      */
     protected $previousValue;
 
-    public function getValue()
-    {
-        return $this->value;
-    }
-
     /**
      * Update previous value on every upload.
      * Also used when restoring persisted values.
@@ -145,15 +140,11 @@ public function getMaxSize()
     public function getViewVariables()
     {
         return array_merge(
-            $this->getConfig(),
+            parent::getViewVariables(),
             [
-                'id' => $this->getFormElementId(),
                 'is_uploaded' => $this->hasValue(),
-                'errors' => $this->getErrors(),
                 'allowed_extensions' => $this->getAllowedExtensionsAsArray(),
-                'value' => $this->getValue(),
                 'previous_value' => json_encode($this->getPreviousValue()),
-                'is_required' => $this->isRequired(),
                 'max_size' => $this->getMaxSize(),
                 'max_size_human' => FileHelper::getMaxSizeHuman($this->getMaxSize()),
             ]

diff --git a/view/_macros.twig b/view/_macros.twig
@@ -34,7 +34,7 @@
 
 {%- macro renderModal(modal, id) -%}
     {%- if modal is not empty -%}
-        <button type="button" class="button is-small js-modal-trigger" data-target="modal-{{ id }}" style="{{ tooltip_style }}">?</button>
+        <button type="button" class="button is-small tooltip-button js-modal-trigger" data-target="modal-{{ id }}" style="{{ tooltip_style }}">?</button>
         <div id="modal-{{ id }}" class="modal">
             <div class="modal-background"></div>
             <div class="modal-content">

diff --git a/view/checklist.twig b/view/checklist.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     <div class="field">
         <div class="label-with-tooltip">
@@ -7,6 +7,7 @@
                     {{ label }} {{ is_required ? '*' }}
                 {%- endif -%}
                 {{ renderTooltip(tooltip) }}
+                {{ renderModal(modal, id) }}
             </div>
         </div>
         <div class="control">

diff --git a/view/date.twig b/view/date.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     {% if clone is not empty %}
         {% for val in value %}
@@ -10,6 +10,7 @@
                         {%- endif  -%}
                     </label>
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id ~ loop.index) }}
                 </div>
                 <div class="control is-cloneable">
                     <input
@@ -41,6 +42,7 @@
                     {%- endif  -%}
                 </label>
                 {{ renderTooltip(tooltip) }}
+                {{ renderModal(modal, id) }}
             </div>
             <div class="control">
                 <input

diff --git a/view/datetime.twig b/view/datetime.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     {% if clone is not empty %}
         {% for val in value %}
@@ -10,6 +10,7 @@
                         {%- endif  -%}
                     </label>
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id ~ loop.index) }}
                 </div>
                 <div class="control is-cloneable">
                     <input
@@ -41,6 +42,7 @@
                     {%- endif  -%}
                 </label>
                 {{ renderTooltip(tooltip) }}
+                {{ renderModal(modal, id) }}
             </div>
             <div class="control">
                 <input

diff --git a/view/download.twig b/view/download.twig
@@ -1,9 +1,10 @@
-{% from '_macros' import fileUrl, renderTooltip %}
+{% from '_macros' import fileUrl, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     <div class="field">
         <div class="control">
             <a href="{{ fileUrl(href)  }}" target="_blank">{{ label }}</a>
             {{ renderTooltip(tooltip) }}
+            {{ renderModal(modal, id) }}
         </div>
     </div>
 </div>
diff --git a/view/dropdown.twig b/view/dropdown.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     <div class="field">
         <div class="label-with-tooltip">
@@ -8,6 +8,7 @@
                 {%- endif  -%}
             </label>
             {{ renderTooltip(tooltip) }}
+            {{ renderModal(modal, id) }}
         </div>
         <div class="control">
             <div class="select {{ multiselect is defined and multiselect ? 'is-multiple' }} {{ errors is not empty ? 'is-danger' }}">

diff --git a/view/email.twig b/view/email.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     {% if clone is not empty %}
         {% for val in value %}
@@ -10,6 +10,7 @@
                         {%- endif  -%}
                     </label>
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id ~ loop.index) }}
                 </div>
                 <div class="control is-cloneable">
                     <input
@@ -40,6 +41,7 @@
                     {%- endif  -%}
                 </label>
                 {{ renderTooltip(tooltip) }}
+                {{ renderModal(modal, id) }}
             </div>
             <div class="control">
                 <input

diff --git a/view/image.twig b/view/image.twig
@@ -1,8 +1,9 @@
-{% from '_macros' import fileUrl , renderError, renderTooltip %}
+{% from '_macros' import fileUrl , renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     <div class="field">
         <div class="label {{ labelsmall is not empty ? 'label-smaller' }}">{{ label }}</div>
         {{ renderTooltip(tooltip) }}
+        {{ renderModal(modal, id) }}
         <div class="control">
             <img src="{{ fileUrl(src) }}" style="{{ width is defined ? 'width:'~width~'px;' }} {{ height is defined ? 'height:'~height~'px;' }}" alt="{{ alt is defined ? alt : label }}">
         </div>

diff --git a/view/markdown.twig b/view/markdown.twig
@@ -1,9 +1,10 @@
-{% from '_macros' import renderTooltip %}
+{% from '_macros' import renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     <div class="field with-tooltip">
         <div class="control">
             {{ markdown | raw }}
             {{ renderTooltip(tooltip) }}
+            {{ renderModal(modal, id) }}
         </div>
     </div>
-</div>
+</div>
diff --git a/view/numberinput.twig b/view/numberinput.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     {% if clone is not empty %}
         {% for val in value %}
@@ -10,6 +10,7 @@
                         {%- endif  -%}
                     </label>
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id ~ loop.index) }}
                 </div>
                 <div class="control is-cloneable">
                     <input
@@ -40,6 +41,7 @@
                     {%- endif  -%}
                 </label>
                 {{ renderTooltip(tooltip) }}
+                {{ renderModal(modal, id) }}
             </div>
             <div class="control">
                 <input

diff --git a/view/signature.twig b/view/signature.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
 
     {% if value %}
@@ -19,6 +19,7 @@
             <div class="control">
                 <div class="label {{ labelsmall is not empty ? 'label-smaller' }}">{{ label }} {{ is_required ? '*' }}
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id) }}
                 </div>
                 <input type="hidden" id="{{ id }}" name="{{ id }}" value="{{ value }}" class="form-input"/>
                 <canvas></canvas>

diff --git a/view/textarea.twig b/view/textarea.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     <div class="field">
         <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}">
@@ -7,6 +7,7 @@
             {%- endif  -%}
         </label>
         {{ renderTooltip(tooltip) }}
+        {{ renderModal(modal, id) }}
         <div class="control">
                 <textarea
                     id="{{ id }}"

diff --git a/view/textinput.twig b/view/textinput.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
 
     {% if clone is not empty %}
@@ -9,6 +9,7 @@
                         {{ label }} {{ is_required ? '*' }}
                     {%- endif  -%}
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id ~ loop.index) }}
                 </label>
                 <div class="control is-cloneable">
                     <input
@@ -39,6 +40,7 @@
                         {%- endif  -%}
                     </label>
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id) }}
                 </div>
                 <div class="control">
                     <input

diff --git a/view/time.twig b/view/time.twig
@@ -1,4 +1,4 @@
-{% from '_macros' import renderError, renderTooltip %}
+{% from '_macros' import renderError, renderTooltip, renderModal %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
     {% if clone is not empty %}
         {% for val in value %}
@@ -10,6 +10,7 @@
                         {%- endif  -%}
                     </label>
                     {{ renderTooltip(tooltip) }}
+                    {{ renderModal(modal, id ~ loop.index) }}
                 </div>
                 <div class="control is-cloneable">
                     <input
@@ -41,6 +42,7 @@
                     {%- endif  -%}
                 </label>
                 {{ renderTooltip(tooltip) }}
+                {{ renderModal(modal, id) }}
             </div>
             <div class="control">
                 <input