Ivana's Coding Bits

Hyperscript and Flask - Bulma dropdown

Hyperscript and Flask - Bulma dropdown

Ivana Claudio's photo
Ivana Claudio
·

3 min read

Since I got a better grasp of what HTMX is all about, I decided to see what hyperscript, a companion of HTMX, can do for my project.

The starting point

On one of my pages, I had a list of links that I've organized as a string of buttons, which was fine while I only had 2 or 3 of them. However, as the number of buttons grew, the whole thing started looking pretty clunky. A dropdown seemed like a neater way to organize these links, but unlike the buttons I had before, a dropdown would require some JavaScript.

The original code looked like this:

{% for s in seasons %}
  <a href="{{ url_for('stats', username=user.username, season=s) }}" 
    class="button {{ 'is-light' if s==season }}">
    Season {{s}}
  </a>
{% endfor %}

As you can see it was nothing fancy. Just a list of button links with the current one set to lighter shade to indicate that it is the one selected.

Making a dropdown

To replace it with a dropdown, I took the sample dropdown code from Bulma's website and replaced the "dropdown-item" links with my code like this:

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" >
      <span>Seasons</span>
      <span class="icon is-small">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      {% for s in seasons %}
        <a href="{{ url_for('stats', username=user.username, season=s) }}" 
            class="dropdown-item {{ 'is-active' if s==season }}">
          Season {{s}}
        </a>
      {% endfor %}
    </div>
  </div>
</div>

I had to change the class of my links from "button" to "dropdown-item" and for the selected one from "is-light" to "is-active". Now my links were all generated into a neat little dropdown list and took so much less space. The only problem was that the list was always expanded and visible. I needed some JavaScript to make it expand and collapse as needed. This is where I got to play with hyperscript for the first time.

Adding hyperscript

To install hyperscript on a web page, all that's needed is adding this line:

<script src="https://unpkg.com/hyperscript.org@0.9.3"></script>

I added it to the <head> tag.

Now for the actual usage, I didn't have to look further than the front page of the hyperscript's website to figure out how to write what I needed for my dropdown to work.

I replaced the first line of the dropdown with this code:

<div class="dropdown" 
_="on mouseenter toggle .is-active on me until mouseleave">

All the JS I needed was contained in that one little almost English sentence. When the mouse enters the dropdown, it becomes active and the whole list can be seen under the trigger button. Once the mouse leaves, the dropdown becomes inactive again. It was so simple and easy that I couldn't help but smile as I tested the implementation.

So there you go. I think hyperscript will become a new favorite tool in my bag of tricks. I recommend you try it too and see how much it can simplify bringing your HTML to life.

Photo by Matt Brown on Unsplash

PythonPython 3