meteor-click-out

This contains helpers functions for dismissing a lightbox or dropdown upon clicking on the body or some other HTML element outside of a clickable zone.

Installation

meteor add fongandrew:click-out

Usage

The basic idea is to register a bunch of reactive variables with ClickOut.registerVar and then unset them / set them to undefined when ClickOut.cull function is called.

Sample usage:

1Template.myTemplate.onCreated(function() {
2  this.myVar = new ReactiveVar(false);
3});
4
5Template.myTemplate.helpers({
6  myVar: function() {
7    var myVar = Template.instance().myVar.get();
8
9    // Does something with myVar that results in helper or dropdown being
10    // shown. You might also considering using myVar in a Tracker.autorun
11    // attached to this template's onRendered
12    // 
13    // ....
14  }
15});
16
17Template.myTemplate.events({
18  'click .body-element': function() {
19    // This event is what triggers unsetting of registered reactive vars
20    ClickOut.cull(e);
21  },
22
23  'click .trigger': function(e, template) {
24    template.myVar.set(true);
25    
26    // When registering a reactive variable, you need to provide a unique
27    // key to link variables and click events 
28    ClickOut.registerVar('my-key', template.myVar);
29
30    // If you don't register this click event, this click will unset the
31    // var before you even set it.
32    ClickOut.registerClick('my-key', e);
33  },
34
35  'click .inside-dropdown': function(e) {
36    // By registering click, clicks on .inside-dropdown but also on 
37    // .body-element won't trigger culling of reactive vars
38    ClickOut.registerClick('my-key', e);
39  }
40});