minor formatting cleanup

README.md

@@ -11,14 +11,14 @@ meteor add pahans:reactive-modal
 ```
 #### For older versions than 0.9
 
-```js 
+```js
 mrt add reactive-modal
 ```
 ### make sure you have bootstrap-3 or less-bootstrap-3 installed or bootstrap-3 from a other resource.
 ```js
 mrt add bootstrap-3
 ```
-###Init your bootstrap modal 
+###Init your bootstrap modal
 a meteor template is the body of your modal
 
 ```html
@@ -32,7 +32,8 @@ Meteor.startup(function(){
   var shareDialogInfo = {
     template: Template.appShareDialog,
     title: "Share the app",
-    modalDialogClass: "share-modal-dialog", //optional
+    modalContainerClass: "share-modal", //optional
+    modalDialogClass: "share-modal-dialog modal-lg", //optional
     modalBodyClass: "share-modal-body", //optional
     modalFooterClass: "share-modal-footer",//optional
     removeOnHide: true, //optional. If this is true, modal will be removed from DOM upon hiding

lib/reactive-modal.html

@@ -1,18 +1,18 @@
 <template name="_reactiveModal">
-  <div class="modal fade" id="{{key}}" tabindex="-1" role="dialog" aria-labelledby="{{key}}Label" aria-hidden="true">
+  <div class="modal fade {{modalContainerClass}}" id="{{key}}" tabindex="-1" role="dialog" aria-labelledby="{{key}}Label" aria-hidden="true">
     <div class="modal-dialog {{modalDialogClass}}">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title" id="{{key}}Label">{{title}}</h4>
+          <h4 class="modal-title" id="{{key}}Label">{{{title}}}</h4>
         </div>
         <div class="modal-body {{modalBodyClass}}">
-          <!-- strange: {{> template}} works fine, but with the data context, template is searched inside the data context (the second variable) -->
+          {{!-- strange: {{> template}} works fine, but with the data context, template is searched inside the data context (the second variable) --}}
           {{> ../template doc}}
         </div>
         <div class="modal-footer {{modalFooterClass}}">
           {{#each arrayify buttons}}
-            <button type="button" id={{button.id}} class="btn {{button.class}} {{name}} reactive-modal-btn" {{disabled}} data-dismiss="{{dismiss}}">{{button.label}}</button>
+            <button type="button" id={{button.id}} class="btn {{button.class}} {{name}} reactive-modal-btn" {{disabled}} data-dismiss="{{dismiss}}">{{{button.label}}}</button>
           {{/each}}
         </div>
       </div>

lib/reactive-modal.js

@@ -1,71 +1,91 @@
 var _modals = {};
-ReactiveModal = function(){
+ReactiveModal = function() {
   // EV.call(this);
   this.buttons = {};
 };
 // _.extend(ReactiveModal.prototype, EV.prototype);
 Template._reactiveModal.helpers({
-  class: function(){
+  class: function() {
     var att;
-    if(this.class){
+    if (this.class) {
       att = 'btn ' + this.class;
     }
     return att;
   },
-  disabled: function(){
+  disabled: function() {
     if (this.button.disabled.get()) {
-      return "disabled"
+      return 'disabled'
     } else {
       return null;
     }
   },
-  dismiss: function(){
-    if(this.button.closeModalOnClick){
-      return "modal";
+  dismiss: function() {
+    if (this.button.closeModalOnClick) {
+      return 'modal';
     }
   },
-  arrayify: function(obj){
+  arrayify: function(obj) {
     result = [];
     for (var key in obj) result.push({name:key,button:obj[key]});
     return result;
   }
 });
 
 Template._reactiveModal.events({
-  'click .modal-footer .reactive-modal-btn.btn': function(e){
+  'click .modal-footer .reactive-modal-btn.btn': function(e) {
     this.button.emit('click', this.button);
   }
 });
 
-ReactiveModal.initDialog = function (info){
-  var key = "rm-"+Meteor.uuid();
-  if(!info || !info.template){
-    console.error("you must define a template for " , key);
+ReactiveModal.initDialog = function (info) {
+  var key = 'rm-'+Meteor.uuid();
+  if (!info || !info.template) {
+    console.error('you must define a template for ' , key);
+    return;
   } else {
     info.key = key;
     _modals[key] = info;
 
-    for(var button in info.buttons){
+    for (var button in info.buttons) {
       var newButton = _.clone(info.buttons[button]);
       _.extend(newButton, new EV());
       info.buttons[button] = newButton;
       newButton.closeModalOnClick = (info.buttons[button].closeModalOnClick === undefined || info.buttons[button].closeModalOnClick === true) ? true : false;
       newButton.disabled = new ReactiveVar((info.buttons[button].disabled === undefined || info.buttons[button].disabled === false || (info.buttons[button].disabled instanceof ReactiveVar && info.buttons[button].disabled.curValue===false)) ? false : true);
-      newButton.disable =  function () {newButton.disabled.set(true);},
-      newButton.enable = function () {newButton.disabled.set(false);}
-    };
-
+      newButton.disable =  function () {
+        newButton.disabled.set(true);
+      },
+      newButton.enable = function () {
+        newButton.disabled.set(false);
+      };
+    }
+    if (typeof info.template === 'string') {
+      info.template = Template[info.template];
+    }
+
     Blaze.renderWithData(Template._reactiveModal, info, document.body);
   }
 
   var modalTarget = $('#' + key);
-  info.show = function(){
+  info.show = function() {
     modalTarget.modal('show');
-  }
-  info.hide = function(){
+  };
+  info.hide = function() {
     modalTarget.modal('hide');
-  }
+  };
 
+  if (info.onShow) {
+    modalTarget.on('show.bs.modal', info.onShow);
+  }
+  if (info.onShown) {
+    modalTarget.on('shown.bs.modal', info.onShown);
+  }
+  if (info.onHide) {
+    modalTarget.on('hide.bs.modal', info.onHide);
+  }
+  if (info.onHidden) {
+    modalTarget.on('hidden.bs.modal', info.onHidden);
+  }
   if (info.removeOnHide) {
     modalTarget.on('hidden.bs.modal', function() {
       $(this).remove();
@@ -75,3 +95,8 @@ ReactiveModal.initDialog = function (info){
   info.modalTarget = modalTarget;
   return info;
 };
+
+
+ReactiveModal.hideAll = function () {
+  $('.modal').modal('hide');
+};

package.js

@@ -1,6 +1,6 @@
 Package.describe({
   summary: "Reactive bootstrap modals for meteor",
-  version: "1.0.2",
+  version: "1.0.4",
   git: "https://github.com/pahans/reactive-modal.git",
   name: "pahans:reactive-modal"
 });