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