diff --git a/data/EXAMPLE/config.yaml b/data/EXAMPLE/config.yaml index f2bb527..98f809b 100644 --- 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 index 761bac5..3f7dd21 100644 --- 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 : diff --git a/public/css/app.css b/public/css/app.css index 41600ee..c999828 100644 --- 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 new file mode 100644 index 0000000..83f1549 --- /dev/null +++ b/public/info.php @@ -0,0 +1,3 @@ + { }); } - 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(); } }); -}); \ No newline at end of file +}); diff --git a/src/FormGenerator/FormElements/AbstractDynamicFormElement.php b/src/FormGenerator/FormElements/AbstractDynamicFormElement.php index 9dbcda5..3965d09 100644 --- 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 index 805a700..6aa008c 100644 --- 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 index 4a03b77..c62ea6a 100644 --- 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 index b15c819..669f910 100644 --- 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 index 509fa51..03f99d0 100644 --- 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 index 67a16d2..104cdf6 100644 --- a/view/_macros.twig +++ b/view/_macros.twig @@ -34,7 +34,7 @@ {%- macro renderModal(modal, id) -%} {%- if modal is not empty -%} - +