Bulma Modal with Go Toggle
source link: https://siongui.github.io/2018/02/10/bulma-modal-with-go-toggle/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bulma Modal with Go Toggle
February 10, 2018Go toggle code for Bulma modal component (version 0.6.2), compiled to JavaScript via GopherJS.
The full code example, including JavaScript counterpart, of this post is on my GitHub.
HTML code for modal:
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a> <div id="modal-bis" class="modal"> <div class="modal-background"></div> <div class="modal-content"> <p class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png"> </p> </div> <button class="modal-close is-large" aria-label="close"></button> </div>
Go toggle code:
import ( . "github.com/siongui/godom" ) func main() { Document.AddEventListener("DOMContentLoaded", func(e Event) { // Modals rootEl := Document.Get("documentElement") modals := Document.QuerySelectorAll(".modal") modalButtons := Document.QuerySelectorAll(".modal-button") modalCloses := Document.QuerySelectorAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button") closeModals := func() { rootEl.Get("classList").Call("remove", "is-clipped") for _, modal := range modals { modal.ClassList().Remove("is-active") } } if len(modalButtons) > 0 { for _, modalButton := range modalButtons { modalButton.AddEventListener("click", func(e Event) { targetId := modalButton.Dataset().Get("target").String() target := Document.GetElementById(targetId) rootEl.Get("classList").Call("add", "is-clipped") target.ClassList().Add("is-active") }) } } if len(modalCloses) > 0 { for _, modalClose := range modalCloses { modalClose.AddEventListener("click", func(e Event) { closeModals() }) } } // Close modals if ESC pressed Document.AddEventListener("keydown", func(e Event) { if e.KeyCode() == 27 { closeModals() } }) }) }
The above code use godom package to make the code more readable.
The following JavaScript code is equivalent to above Go code:
'use strict'; document.addEventListener('DOMContentLoaded', function () { // Modals 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; var $target = document.getElementById(target); rootEl.classList.add('is-clipped'); $target.classList.add('is-active'); }); }); } if ($modalCloses.length > 0) { $modalCloses.forEach(function ($el) { $el.addEventListener('click', function () { closeModals(); }); }); } document.addEventListener('keydown', function (event) { var e = event || window.event; if (e.keyCode === 27) { closeModals(); } }); function closeModals() { rootEl.classList.remove('is-clipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); }); } // Functions function getAll(selector) { return Array.prototype.slice.call(document.querySelectorAll(selector), 0); } });
References:
[1]Modal | Bulma: a modern CSS framework based on Flexbox[2]https://bulma.io/lib/main.js?v=201802091742Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK