Bulma Dropdown with Go Toggle
source link: http://siongui.github.io/2018/02/01/bulma-dropdown-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 Dropdown with Go Toggle
February 01, 2018
Go toggle code for Bulma dropdown component, compiled to JavaScript via GopherJS.
The full code example, including JavaScript counterpart, of this post is on my GitHub.
HTML code for Dropdown:
<div class="dropdown is-active"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> <span>Dropdown button</span> <span class="icon is-small"> <i class="fas fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> Dropdown item </a> <a class="dropdown-item"> Other dropdown item </a> <a href="#" class="dropdown-item is-active"> Active dropdown item </a> <a href="#" class="dropdown-item"> Other dropdown item </a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item"> With a divider </a> </div> </div> </div>
Go toggle code:
import ( . "github.com/siongui/godom" ) func main() { Document.AddEventListener("DOMContentLoaded", func(e Event) { // Dropdowns dds := Document.QuerySelectorAll(".dropdown:not(.is-hoverable)") closeDropdowns := func() { for _, dd := range dds { dd.ClassList().Remove("is-active") } } if len(dds) > 0 { for _, dd := range dds { dd.AddEventListener("click", func(e Event) { e.StopPropagation() dd.ClassList().Toggle("is-active") }) } Document.AddEventListener("click", func(e Event) { closeDropdowns() }) } // Close dropdowns if ESC pressed Document.AddEventListener("keydown", func(e Event) { if e.KeyCode() == 27 { closeDropdowns() } }) }) }
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 () { // Dropdowns var $dropdowns = getAll('.dropdown:not(.is-hoverable)'); if ($dropdowns.length > 0) { $dropdowns.forEach(function ($el) { $el.addEventListener('click', function (event) { event.stopPropagation(); $el.classList.toggle('is-active'); }); }); document.addEventListener('click', function (event) { closeDropdowns(); }); } function closeDropdowns() { $dropdowns.forEach(function ($el) { $el.classList.remove('is-active'); }); } // Close dropdowns if ESC pressed document.addEventListener('keydown', function (event) { var e = event || window.event; if (e.keyCode === 27) { closeDropdowns(); } }); // Functions function getAll(selector) { return Array.prototype.slice.call(document.querySelectorAll(selector), 0); } });
References:
[1]Dropdown | Bulma: a modern CSS framework based on Flexbox
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK