15

Bulma Dropdown with Go Toggle

 3 years ago
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.
neoserver,ios ssh client

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

[2]https://bulma.io/lib/main.js?v=201801161752


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK