Javascript

Meteor modal

§
by
Jesper bisgaard

I recently had to create a modal pop up in Meteor js, which proved to be quite easy so I thought I might share the solution here.

For handling modals I used the exellent library anti:modals which handles opening and closing the modals on a page. Now you just have to hook up the content for the modal and you are ready to rock!

Once you have added the library to your meteor site you can go ahead and add your modals.

First you setup the modal template, I am using Bulma for markup and styling in this example.

I have created a template file editExample.html

<template name="editExample">
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Edit example</p>
        <button id="close-edit-modal" class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <form class="edit-example">
          <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label" for="name">New example</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control is-expanded">
                  <input class="input is-small" type="name" name="name" placeholder="New example" value="{{example}}" />
                </p>
              </div>
            </div>
          </div>
          <div class="field is-horizontal">
            <div class="field-label">
              <!-- Left empty for spacing -->
            </div>
            <div class="field-body">
              <div class="field">
                <div class="control">
                  <input class="button is-primary is-small" type="submit" value="Save"/>
                </div>
              </div>
            </div>
          </div>
        </form>
      </section>
    </div>
  </div>
</template>

In this file we setup the html markup for our modal popup.

Now the next think we have got to do is create the functionality for this template. So we will create an editExample.js file.

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

// Import the template.
import './editExample.html';

// Store the example being passed to the modal.
Template.editExample.onCreated(function () {
  this.example = this.data.example;
});

// Setup event handling.
Template.editExample.events({
  // Clicking the close button.
  'click #close-edit-modal'() {
    // Close all active modal windows.
    AntiModals.dismissAll();
  },
  // Submitting the form in the modal window.
  'submit .edit-example'(event) {
    // Prevent default browser form submit.
    event.preventDefault();

    // Get value from form element.
    const target = event.target;
    const name = target.name.value;

    // Insert a expense into the collection.
    Meteor.call('example.update', this.example._id, name);

    // Clear form.
    target.name.value = '';

    // Close all active modal windows.
    AntiModals.dismissAll();
  },
});

Now we are ready to start using our modal popup.

In order to display your modal popup, we need to add a few things to a page or component.

First we need to import the new modal component.

import '../modal/editExample';

Next we add a button which will trigger an event. So in the html template where we want to use our modal we add:

<a class="button edit-example">Edit example</a>

And as the last piece of the puzzel we add the action which invokes the modal:

'click .edit-example'(e) {
  e.preventDefault();
  AntiModals.overlay('editExample', {'data': {'example': this}});
}

And thats it. A very simple library for displaying modal popups in meteor.

Handlebars js

§
by
Jesper bisgaard

I have recently begun using handlebars js for my various jquery mobile apps. This has been a great experience and here i will try to explain why and how i have used it. I will also include extensions and plugins which i have used to handle the development.

The challenge has been entering dynamic content into lists or as changes based on user actions, and often the html for the dynamic content would be entered as strings in the javascript. But a solution for this is using a templating system like handlebars. It allows you to define templates in <script/> tags which can then be referenced in your code when you need dynamic content.

For my projects I prefere not to have my templates in <script/> tags so I found several solutions which allowed me to make separate template files. For my projects I used sync_async_loading_handlebars which is a very simple script but it handles the task really well. Using jquery mobile i found that I got the best performance if I preloaded the templates using the T.prefetch function. This loads the template data into a cache object from where it can easily be referenced later on.

Using sync_async_loading_handlebars i then entered dynamic content by creating a data object and calling T.render, as follows:

var themeData = { 
  title: 'test', 
  src: 'data', 
  class: 'some class' 
}; 
T.render('testTemplateItem', function(t) { $('.target').append(t(themeData)); }); 

My template would then look something like this.

<div class="{{class}}">
  {{#if src}}
  <div class="image-container"><img src="{{src}}" /></div>
  {{/if}}
  <h2>{{title}}</h2>
</div>

I also found a library of handlebars extensions which are very handy. The people behind swag have composed a library of extensions which contain most of the theming functionality you could possibly want and then some.

 

 

Hopscotch tour js

§
by
Jesper bisgaard

I had to include some help text for a mobile app i am developing and maintaining and for this we decided to use a tour script because it would allow us to keep the screen clear of static description text and at the same time give a smooth intoduction to the elements which needed explanations.

I tested out several scripts like joyride and pageguide, but found that the one which worked best with jquery mobile was hopscotch js. It allows lots of configuration and you configure the tours in json, which keeps the html of the app clean.

Subscribe to Javascript