diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 8fec11366a..5919ec51d8 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -55,6 +55,81 @@ {% endcapture %} +{% capture modal_js_html %} + +{% endcapture %} + +{% capture modal_js_trigger %} + +{% endcapture %} + +{% capture modal_js_trigger_bulma %} + +{% endcapture %} + +{% capture modal_js_code %} +document.addEventListener('DOMContentLoaded', () => { + // Functions to open and close a modal + function openModal($el) { + $el.classList.add('is-active'); + } + + function closeModal($el) { + $el.classList.remove('is-active'); + } + + function closeAllModals() { + (document.querySelectorAll('.modal') || []).forEach(($modal) => { + closeModal($modal); + }); + } + + // Add a click event on buttons to open a specific modal + (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => { + const modal = $trigger.dataset.target; + const $target = document.getElementById(modal); + console.log($target); + + $trigger.addEventListener('click', () => { + openModal($target); + }); + }); + + // Add a click event on various child elements to close the parent modal + (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => { + const $target = $close.closest('.modal'); + + $close.addEventListener('click', () => { + closeModal($target); + }); + }); + + // Add a keyboard event to close all modals + document.addEventListener('keydown', (event) => { + const e = event || window.event; + + if (e.keyCode === 27) { // Escape key + closeAllModals(); + } + }); +}); +{% endcapture %} +
@@ -91,10 +166,10 @@
- No JavaScript + JavaScript implementation example
- Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. + Bulma does not include any JavaScript. However, this documentation provides a JS implementation example that you are free to use.
@@ -122,6 +197,86 @@ {% highlight html %}{{ modal_card }}{% endhighlight %}
+{% include elements/anchor.html name="JavaScript implementation example" %} + +
+

+ The Bulma package does not come with any JavaScript. Here is however an implementation example, which sets the click handlers for custom elements, in vanilla JavaScript. +

+ +

+ There are 3 parts to this implementation: +

+ + +
+ +
+

1. Add the HTML for the modal

+ +

+ At the end of your page, before the closing </body> tag, at the following HTML snippet: +

+
+ +{% highlight html %}{{ modal_js_html }}{% endhighlight %} + +
+

+ The id attribute's value must be unique. +

+
+ +
+

2. Add the HTML for the trigger

+ +

+ Somewhere on your page, add the following HTML button: +

+
+ +
+ {{ modal_js_trigger }} +
+ +{% highlight html %}{{ modal_js_trigger }}{% endhighlight %} + +
+

+ You can style it however you want, as long as it has the js-modal-trigger CSS class and the appropriate data-target value. For example, you can add the button is-primary Bulma classes: +

+
+ +
+ {{ modal_js_trigger_bulma }} +
+ +
+

3. Add the JS for the trigger

+ +

+ In a script element (or in a seperate .js file), add the following JS code: +

+
+ +{% highlight javascript %}{{ modal_js_code }}{% endhighlight %} + +
+

+ As long as you can toggle the is-active modifier class on the modal element, you can choose how you want to implement it. +

+
+ {% include components/variables.html type='component' %} + +{{ modal_js_html }} + + diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index 6a8f8f3a0a..67cb0f3c76 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -89,7 +89,7 @@

- The Bulma package does not come with any JavaScript. Here is however an implementation example, which sets the click handler for Bulma delete all on the page, in vanilla JavaScript. + The Bulma package does not come with any JavaScript. Here is however an implementation example, which sets the click handler for Bulma delete elements, anywhere on the page, in vanilla JavaScript.

{% highlight html %}{{ notification_js_html }}{% endhighlight %}