Meteor

Meteor dropdown

ยง
by
Jesper bisgaard

In a recent project I had to add a dropdown in meteor and found that there where a few tricks to going about it, so I thought I would share it here for anyone who might need it. Setting up the dropdown was fairly easy but making the functionality work had a few twists that I want to share with you guys. In my case I wanted to build a dropdown which displayed a form which allowed the user to update some content.

Again I am going to use Bulma which has become my prototyping framework of choise as of late. Its super easy to work with and has a lot of great predefined templates. So a big shoutout to the people behind Bulma.

First lets setup our dropdown with the form inside.

Bulma has an excellent dropdown template which we will use for this.

<template name="dropdown">
  <div class="dropdown">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
        <span>Content</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-menu2" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          Here we will add our form.
        </div>
      </div>
    </div>
  </div>
</template>

Now we have the dropdown setup, so lets add the form. This is just a simple form for signing up for a news letter and again we are using bulmas form templates.

<template name="dropdown">
  <div class="dropdown">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
        <span>Content</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-menu2" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          <div class="field is-grouped">
            <label class="label">Subscribe to newsletter</label>
            <div class="control has-icons-left has-icons-right">
              <input class="input" type="email" placeholder="Enter your email">
              <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
              </span>
              <span class="icon is-small is-right">
                <i class="fa fa-check"></i>
              </span>
            </div>
            <p class="control">
              <a class="button is-info">Submit</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Now that we have this setup we need to add some functionality to the meteor application for it to work. The first thing we need to do is switch the is-active class on the dropdown wrapper. I did this by adding a state to the meteor element containing the dropdown. If you are not familiar with how this is done in meteor you can read about state management here. First we add the ReactiveVar library which we can use to store temporary data for the client side.

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Then we need to setup the new ReactiveVar state object. We will do this in the onCreate hook which is invoked when the element is created on the page.

Template.dropdown.onCreated(function bodyOnCreated() {
  this.active = new ReactiveVar();
});

Now that we have the ReactiveVar setup we can create the event which will set the value when a user clicks the dropdown.

We do this by adding a new event to the blaze template and let it activate on the click of the button.

Template.dropdown.events({
  'click button'(event, instance) {
    // toggle the active variable.
    instance.active.set(!instance.active.get());
  },
});

Now that the ReactiveVar is being toggled between true and false, we can add the last bit, where we use the active state and add the is-active class if the user has clicked the dropdown button.

First we add a helper function to the blaze template.

Template.dropdown.helpers({
  isActive() {
    return Template.instance().active.get();
  },
});

We can then use this helper function to determine if the is-active class should be applied to the dropdown template.

<div class="dropdown {{#if isActive}}is-active{{/if}}">
    ...
  </div>

On the dropdown wrapper we add a new if statement which checks if the helper function returns true and if so we add the is-active class.

There we have the it, we have now created a dropdown using meteor and bulma.

You can see the code at my github repo.

Subscribe to Meteor