diff options
author | Jeremy Thomas <bbxdesign@gmail.com> | 2022-01-04 20:00:55 +0300 |
---|---|---|
committer | Jeremy Thomas <bbxdesign@gmail.com> | 2022-01-04 20:00:55 +0300 |
commit | 5aa114d445a8e550716931e545577eb260fb430d (patch) | |
tree | 27c7945dcbdc4721b36d06b5e142a06f0597cdf2 | |
parent | 6e47cdb9ed863588ea3a5ba910f47d1aff624123 (diff) |
Fix #683
-rw-r--r-- | docs/documentation/components/modal.html | 165 | ||||
-rw-r--r-- | docs/documentation/elements/notification.html | 2 |
2 files changed, 164 insertions, 3 deletions
diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 8fec1136..5919ec51 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -55,6 +55,81 @@ meta: </div> {% endcapture %} +{% capture modal_js_html %} +<div id="modal-js-example" class="modal"> + <div class="modal-background"></div> + + <div class="modal-content"> + <div class="box"> + <p>Modal JS example</p> + <!-- Your content --> + </div> + </div> + + <button class="modal-close is-large" aria-label="close"></button> +</div> +{% endcapture %} + +{% capture modal_js_trigger %} +<button class="js-modal-trigger" data-target="modal-js-example"> + Open JS example modal +</button> +{% endcapture %} + +{% capture modal_js_trigger_bulma %} +<button class="js-modal-trigger button is-primary" data-target="modal-js-example"> + Open JS example modal +</button> +{% 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 %} + <!-- --> <div class="content"> @@ -91,10 +166,10 @@ meta: <div class="message is-info"> <div class="message-header"> - No JavaScript + JavaScript implementation example </div> <div class="message-body"> - Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself. + Bulma does not include any JavaScript. However, this documentation provides a <a href="#javascript-implementation-pexample">JS implementation example</a> that you are free to use. </div> </div> @@ -122,6 +197,86 @@ meta: {% highlight html %}{{ modal_card }}{% endhighlight %} </div> +{% include elements/anchor.html name="JavaScript implementation example" %} + +<div class="content"> + <p> + The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handlers for custom elements, in vanilla JavaScript. + </p> + + <p> + There are 3 parts to this implementation: + </p> + + <ul> + <li> + add the HTML for the <strong>modal</strong> (this modal is hidden by default) + </li> + <li> + add the HTML for a button to <strong>trigger</strong> the modal (you can style this button however you want) + </li> + <li> + add the JS code to add the <code>click</code> event on the <strong>trigger</strong> to open the <strong>modal</strong> + </li> + </ul> +</div> + +<div class="content"> + <h4>1. Add the HTML for the modal</h4> + + <p> + At the end of your page, before the closing <code></body></code> tag, at the following HTML snippet: + </p> +</div> + +{% highlight html %}{{ modal_js_html }}{% endhighlight %} + +<div class="content"> + <p> + The <code>id</code> attribute's value must be <strong>unique</strong>. + </p> +</div> + +<div class="content"> + <h4>2. Add the HTML for the trigger</h4> + + <p> + Somewhere on your page, add the following HTML button: + </p> +</div> + +<div class="block"> + {{ modal_js_trigger }} +</div> + +{% highlight html %}{{ modal_js_trigger }}{% endhighlight %} + +<div class="content"> + <p> + You can style it however you want, as long as it has the <code>js-modal-trigger</code> CSS class and the appropriate <code>data-target</code> value. For example, you can add the <code>button is-primary</code> Bulma classes: + </p> +</div> + +<div class="block"> + {{ modal_js_trigger_bulma }} +</div> + +<div class="content"> + <h4>3. Add the JS for the trigger</h4> + + <p> + In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code: + </p> +</div> + +{% highlight javascript %}{{ modal_js_code }}{% endhighlight %} + +<div class="content"> + <p> + As long as you can toggle the <code>is-active</code> modifier class on the <code>modal</code> element, you can choose how you want to implement it. + </p> +</div> + {% include components/variables.html type='component' %} <div id="modal" class="modal"> @@ -224,3 +379,9 @@ meta: </footer> </div> </div> + +{{ modal_js_html }} + +<script type="text/javascript"> + {{ modal_js_code }} +</script> diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index 6a8f8f3a..67cb0f3c 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -89,7 +89,7 @@ document.addEventListener('DOMContentLoaded', () => { <div class="content"> <p> - The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> all on the page, in vanilla JavaScript. + The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> elements, anywhere on the page, in vanilla JavaScript. </p> {% highlight html %}{{ notification_js_html }}{% endhighlight %} |