modals

modal-template.html

<template name="modal">
  <div class="modal-backdrop fade {{isVisibleClass}}"></div>
  <div class="modal fade {{isVisibleClass}}">  
    {{> UI.dynamic template=dynamicTemp data=dynamicData}}  
  </div><!-- /.modal -->
</template>


<template name="testModal">
<div class="modal-dialog">
  <div class="modal-content">

    <div class="modal-header">
      <div class="pull-right">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">
            <i class="icon icon-x"></i>
          </span>
          <span class="sr-only">Close</span>
        </button>
      </div>
      <h3 class="modal-title">Modal {{name}}</h3>
    </div>

    <div class="modal-body">

      <p class='lead'>This modal is a test.</p>

      <div class="form-group">
        <label class="control-label" for="comments">Special Instructions (Optional)</label>
        <textarea name="comments" rows="3" class="form-control"></textarea>
      </div>
    </div>

    <div class="modal-footer">
      <a class="btn btn-cancel" data-dismiss="modal">Cancel</a>
      <button id='add-item-to-cart' class="btn btn-default">Continue</button>
    </div>
        
  </div>  
</div>
</template>

modal-template.js

modal = new Modal();

Template.modal.created = function() {
  modal.modalTemp = this;
}

Template.modal.rendered = function() {
  modal.inserted = true;
}

Template.modal.destroyed = function() {
  modal.inserted = false;
}

Template.modal.helpers({
  dynamicTemp: function() {
    return modal.template();
  },
  dynamicData: function() {
    return modal.data();
  },
  isVisibleClass: function() {
    if (!!modal.template()) {

      if (modal.hiding()) {
        return 'show in animated fadeOutUp';
      }
      return 'show in animated fadeInDown';
    } else {
      return 'hidden';
    }
  }
});

Template.modal.events({
  'click [data-dismiss=modal]': function() {
    modal.close();
  }
});

Modal.js

Modal = function() {
  if (! (this instanceof Modal)) {
    return new Modal(options);
  }

  this.modalTemp = null;
  this.clearTimeout = null;
  this.inserted = false;
  this.fixScrollPosition = true;
  this._lastScrollTop = 0;

  this._inView = false;

  this._onClose = [];

  this._template = new ReactiveVar(null);
  this._data = new ReactiveVar({});

  this._open = new ReactiveVar(false);
  this._hiding = new ReactiveVar(false);
}

Modal.prototype.template = function(template) {
  if ( template !== undefined ) {
    return this._template.set(template);
  } else {
    return this._template.get();
  }
}

Modal.prototype.data = function(data) {
  if ( data !== undefined && typeof data === 'object' ) {
    return this._data.set(data);
  } else {
    return this._data.get();
  }
}

Modal.prototype.open = function(open) {
  if ( open !== undefined && typeof open === 'boolean' ) {
    return this._open.set(open);
  } else {
    return this._open.get();
  }
}

Modal.prototype.hiding = function(hide) {
  if ( hide !== undefined && typeof hide === 'boolean' ) {
    return this._hiding.set(hide);
  } else {
    return this._hiding.get();
  }
}

Modal.prototype.onClose = function(onCloseFunc) {
  if ( onCloseFunc && typeof onCloseFunc === 'function' ) {
    this._onClose.push(onCloseFunc);
  } else {
    return this._onClose;
  }
}

Modal.prototype.show = function(template, data) {
  if ( !this.inserted || this.removed ) {
    return false;
  }

  if ( this._inView ) {
    this.close();
  }

  if ( this.clearTimeout ) {
    Meteor.clearTimeout(this.clearTimeout);
    this.clearTimeout = null;
  }

  this.template(template);
  this.data(data);
  this.open(true);
}

Modal.prototype.close = function() {
  this.hideModal();

  this.onClose().forEach(function(func) {
    Tracker.afterFlush(func);
  });
  this._onClose = [];

  this.clearTimeout = Meteor.setTimeout(function() {
    this.template(null);
    this.data(null);
    this.open(false);
    this.hiding(false);
  }.bind(this), 500);
}

Modal.prototype.hideModal = function() {
  this.hiding(true);
}