Meteor modal helper

meteor-modal.html

<template name="_RiseModal">                                                                                                                                                                 
  <div class="modal fade" id="{{ modalId }}">                                                                                                                                                
    <div class="modal-dialog">                                                                                                                                                               
      <div class="modal-content">                                                                                                                                                            
        <div class="modal-header">                                                                                                                                                           
          {{ #if canClose }}                                                                                                                                                                 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                                                     
          {{ /if }}                                                                                                                                                                          
          <h4 class="modal-title">{{ title }}</h4>                                                                                                                                           
        </div>                                                                                                                                                                               
        <div class="modal-body">                                                                                                                                                             
          {{ > UI.contentBlock }}                                                                                                                                                            
        </div>                                                                                                                                                                               
        <div class="modal-footer">                                                                                                                                                           
          <button type="button" class="validate-btn btn btn-primary">{{ validateButton }}</button>                                                                                           
          {{ #if canClose }}                                                                                                                                                                 
            <button type="button" class="cancel-btn btn btn-default" data-dismiss="modal">{{ cancelButton }}</button>                                                                        
          {{ else }}                                                                                                                                                                         
            <button type="button" class="cancel-btn btn btn-default">{{ cancelButton }}</button>                                                                                             
          {{ /if }}                                                                                                                                                                          
        </div>                                                                                                                                                                               
      </div><!-- /.modal-content -->                                                                                                                                                         
    </div><!-- /.modal-dialog -->                                                                                                                                                            
    </div><!-- /.modal -->                                                                                                                                                                   
</template>             

meteor-modal.js

Rise.Modal = {
  _defaultOnValidate = function(event, id) {                                                                                                                                                  
    var form = $('#' + id).find('form');                                                                                                                                                     
    if (form.length > 0) {                                                                                                                                                   
      form.submit();                                                                                                                                                                         
      return true;                                                                                                                                                                           
    } else {                                                                                                                                                                                 
      return true;                                                                                                                                                                           
    }                                                                                                                                                                                        
  },                                                                                                                                                                                         
  _defaultOnCancel: function(event, id) {                                                                                                                                                    
    return true;                                                                                                                                                                             
  }                                                                                                                                                                                          
};                                                                                                                                                                                           
                                         
                                                                                                                                                                                 
Template.registerHelper('modal', function() {                                                                                                                                                
  return Template._RiseModal;                                                                                                                                                                
});                                                                                                                                                                                          
                                                                                                                                                                                             
Template._RiseModal.rendered = function() {                                                                                                                                                  
  var id = this.data.id || "rise-modal";                                                                                                                                                     
  $('#' + id).modal();                                                                                                                                                                       
}                                                                                                                                                                                            
                                                                                                                                                                                             
Template._RiseModal.events({                                                                                                                                                                 
  'click .validate-btn': function(event) {                                                                                                                                                   
    event.preventDefault();                                                                                                                                                                  
    var id = this.id || "rise-modal";                                                                                                                                                        
    var onValidateFunc = this.onValidate || Rise.Modal._defaultOnValidate;                                                                                                       
    var doClose = onValidateFunc(event, id);                                                                                                                                                 
    if (doClose) {                                                                                                                                                                           
      $('#' + id).modal('hide');                                                                                                                                                             
    }                                                                                                                                                                                        
  },                                                                                                                                                                                         
  'click .cancel-btn': function(event) {                                                                                                                                                     
    event.preventDefault();                                                                                                                                                                  
    var id = this.id || "rise-modal";                                                                                                                                                        
    var onCancelFunc = this.onCancel || Rise.Modal._defaultOnCancel;                                                                                                           
    var doClose = onCancelFunc(event, id);                                                                                                                                                   
    if (doClose) {                                                                                                                                                                           
      $('#' + id).modal('hide');                                                                                                                                                             
    }                                                                                                                                                                                        
  }                                                                                                                                                                                          
});                                                                                                                                                                                          
                                                                                                                                                                                             
Template._RiseModal.helpers({                                                                                                                                                                
  title: function() {                                                                                                                                                                        
    return this.title;                                                                                                                                                                       
  },                                                                                                                                                                                         
                                                                                                                                                                                             
  modalId: function() {                                                                                                                                                                      
    return this.id || "rise-modal"                                                                                                                                                           
  },                                                                                                                                                                                         
  canClose: function() {                                                                                                                                                                     
    var closable = true;                                                                                                                                                                     
    if (!_.isUndefined(this.canClose)) {                                                                                                                                                     
      closable = this.canClose;                                                                                                                                                              
    }                                                                                                                                                                                        
    return closable;                                                                                                                                                                         
  },                                                                                                                                                                                         
  validateButton: function() {                                                                                                                                                               
    var validateButton = "Save";                                                                                                                                                     
    if (!_.isUndefined(this.validateButton)) {                                                                                                                                               
      validateButton = this.validateButton;                                                                                                                                                  
    }                                                                                                                                                                                        
    return validateButton;                                                                                                                                                                   
  },                                                                                                                                                                                         
  cancelButton: function() {                                                                                                                                                                 
    var cancelButton = "Cancel";                                                                                                                                                       
    if (!_.isUndefined(this.cancelButton)) {                                                                                                                                                 
      cancelButton = this.cancelButton;                                                                                                                                                      
    }                                                                                                                                                                                        
    return cancelButton;                                                                                                                                                                     
  }                                                                                                                                                                                          
});                                                                                                                                                                                 

meteor-modal.md

Meteor {{#modal}} helper

Example use

  <template name="someTemplate">                                                                                                                                                            
    {{ #modal title="Post a new replay" id="new-replay-modal" canClose=false validateButton="Save" cancelButton="Cancel" onValidate=doSomething}}                                           
      <p>Some sweet html</p>                                                                                                                                                                    
      {{ > AnotherTemplate }}                                                                                                                                                               
    {{ /modal }}                                                                                                                                                                            
  </template>                                                                                                                                                                               

Options

• title, the title of the modal as a String.
• id, a custom id for the modal as a String. (default: 'rise-modal')
• canClose, a Boolean indicating wether or not to display the close cross.
• validateButton, the text for the validateButton as a String. (default: 'Save')
• cancelButton, the text for the cancelButton as a String. (default: 'Cancel')
• onValidate, a callback Function, called when the validate button is clicked.
  • If not specified, onValidate will search for a form in the modal and submit it.
• onCancel, a callback Function, called when the cancel button is clicked.
• If not specified, onCancel will simply close the modal.

Callbacks definition

If you pass an onValidate or onCancel callback you can return a function from your template helpers (or from anywhere,
just pass in the function).
The provided arguments are the click event and the modalId; Returning true from the callback will close the modal, if false or nothing is returned, the modal will stay shown.

  Template.someTemplate.helpers({                                                                                                                                                           
    doSomething: function() {                                                                                                                                                               
     return function(event, modalId) {                                                                                                                                                     
        // do something, submit a form, validate stuff                                                                                                                                      
        return true;                                                                                                                      
      }                                                                                                                                                                                     
    }                                                                                                                                                                                       
  });