Clean up Modal::class (#57)

yiisoft · Jan 4, 2022 · 1896029 · 1896029
1 parent d5255e0
commit 1896029
Show file tree

Hide file tree

Showing 3 changed files with 546 additions and 228 deletions.
diff --git a/docs/modal.md b/docs/modal.md
@@ -25,48 +25,105 @@ use Yiisoft\Yii\Bulma\Asset\BulmaJsAsset;
  * @var \Yiisoft\View\WebView $this
  */
 
-$assetManager->registerMany([
-    BulmaAsset::class,
-    BulmaJsAsset::class,
-]);
+$assetManager->register(BulmaAsset::class);
 
 $this->setCssFiles($assetManager->getCssFiles());
 $this->setJsFiles($assetManager->getJsFiles());
 
-echo Modal::widget()
-    ->closeButtonSize(Modal::SIZE_LARGE)
-    ->begin();
-echo Html::tag('div', 'Say hello...', ['class' => 'box']);
-echo Modal::end();
+// Note: Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself.
+// Example of a toggle:
+$modalJS = <<<JS
+    var rootEl = document.documentElement;
+    var $modals = getAll('.modal');
+    var $modalButtons = getAll('.modal-button');
+    var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
+
+    if ($modalButtons.length > 0) {
+        $modalButtons.forEach(function ($el) {
+        $el.addEventListener('click', function () {
+            var target = $el.dataset.target;
+                openModal(target);
+            });
+        });
+    }
+
+    if ($modalCloses.length > 0) {
+        $modalCloses.forEach(function ($el) {
+            $el.addEventListener('click', function () {
+                closeModals();
+            });
+        });
+    }
+
+    function openModal(target) {
+        var $target = document.getElementById('modal');
+        rootEl.classList.add('is-clipped');
+        $target.classList.add('is-active');
+    }
+
+    function closeModals() {
+        rootEl.classList.remove('is-clipped');
+        $modals.forEach(function ($el) {
+            $el.classList.remove('is-active');
+        });
+    }
+
+    function getAll(selector) {
+        var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+
+        return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
+    }
+
+    document.addEventListener('keydown', function (event) {
+        var e = event || window.event;
+
+        if (e.keyCode === 27) {
+            closeModals();
+            closeDropdowns();
+        }
+    });
+JS;
+
+$this->registerJs($modalJS);
+?>
+
+<?= Modal::widget()->id('modal')->begin() .
+        Div::tag()->class('box')->content('Say hello...')->render() . PHP_EOL .
+    Modal::end() ?>
 ```
 
-HTML produced is like the following:
+The code above generates the following HTML:
+
 ```html
-<button type="button" class="button" data-target="#w1-modal" aria-haspopup="true">Toggle button</button>
-<div id="w1-modal" class="modal">
+<button class="button modal-button" data-target="#modal" aria-haspopup="true">Toggle button</button>
+<div id="modal" class="modal">
     <div class="modal-background"></div>
+    <button class="modal-close" aria-label="close"></button>
     <div class="modal-content">
-        <div class="box">
-            Say hello...
-        </div>
+        <div class="box">Say hello...</div>
     </div>
-    <button type="button" class="modal-close is-large" aria-label="close"></button>
 </div>
 ```
 
-## Reference
+## Setters
+
+All setters are immutable and return a new instance of the `Yiisoft\Yii\Bulma\Modal` class with the specified value.
 
 Method | Description | Default
 -------|-------------|---------
-`id(string $value)` | Widget ID. | `''`
+`attributes(array $value)` | The HTML attributes. | `[]`
 `autoIdPrefix(string $value)` | Prefix to the automatically generated widget ID. | `w`
-`options(array $value)` | HTML attributes for the widget container tag. | [`class` => `modal`]
-`contentOptions(array $value)`| HTML attributes for the widget content tag. | `[]`
-`closeButtonOptions(array $value)` | HTML attributes for the widget button tag. | [`class` => `modal-close`, `aria-label` => `close`]
-`closeButtonSize(string $value)` | Size close button. | `is-small`, `is-medium`, `is-large`
+`backgroundClass(string $value)` | Class for the modal background. | `modal-background`
+`buttonClass(string $value)` | Class for the modal button. | `button modal-button`
+`closeButtonAttributes(array $value)` | HTML attributes for the close button tag. | [`class` => `modal-close`, `aria-label` => `close`]
+`closeButtonSize(string $value)` | Close button size. Options available are: (`Modal::SIZE_SMALL`, `Modal::SIZE_MEDIUM`, `Modal::SIZE_LARGE`). | Default size is normal.
+`contentAttributes(array $value)`| HTML attributes for the content tag. | `[]`
+`contentClass(string $value)` | Class for the modal content. | `modal-content`
+`id(string $value)` | Widget ID. | `''`
+`modalClass(string $value)` | Class for the modal. | `modal`
+`toggleButtonAttributes(array $value)` |  HTML attributes for the toogle button tag. | [`class` => `button`, `aria-haspopup` => `true`]
+`toggleButtonColor(string $value)` | Toggle button color. Options available are: (`Modal::COLOR_PRIMARY`, `Modal::COLOR_LINK`, `Modal::COLOR_INFO`, `Modal::COLOR_SUCCESS`, `Modal::COLOR_WARNING`, `Modal::COLOR_DANGER`, `Modal::COLOR_DARK`). | Default setting empty whitout color.
 `toggleButtonLabel(string $value)` | Toggle button label, | `Toggle button`
-`toggleButtonSize(string $value)` | Size toggle button. | `is-small`, `is-medium`, `is-large`
-`toggleButtonColor(string $value)` | Toggle button color. | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`
-`toggleButtonOptions(array $value)` |  HTML attributes for the widget toogle button tag. | [`class` => `button`, `aria-haspopup` => `true`]
-`withoutCloseButton()` | Disable close button. | `false`
-`withoutToggleButton()` | Disable toggle button. | `false`
+`toggleButtonSize(string $value)` | Size toggle button. Options available are: (`Modal::SIZE_SMALL`, `Modal::SIZE_MEDIUM`, `Modal::SIZE_LARGE`). | Default setting empty normal.
+`withoutCloseButton(bool $value)` | Whether the close button is disabled. | `false`
+`withoutToggleButton(bool $value)` | Whether the toggle button is disabled. | `false`