Bulma Dropdown with Go Toggle
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 |
[2] | https://bulma.io/lib/main.js?v=201801161752 |