├── .gitignore
├── .versions
├── package.js
├── lib
    ├── reactive-modal.html
    ├── ev.js
    └── reactive-modal.js
├── LICENSE
├── versions.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .build*
2 | 


--------------------------------------------------------------------------------
/.versions:
--------------------------------------------------------------------------------
 1 | base64@1.0.2
 2 | blaze@2.0.4
 3 | blaze-tools@1.0.2
 4 | deps@1.0.6
 5 | ejson@1.0.5
 6 | geojson-utils@1.0.2
 7 | html-tools@1.0.3
 8 | htmljs@1.0.3
 9 | id-map@1.0.2
10 | jquery@1.11.3
11 | json@1.0.2
12 | meteor@1.1.4
13 | minifiers@1.1.3
14 | minimongo@1.0.6
15 | observe-sequence@1.0.4
16 | ordered-dict@1.0.2
17 | pahans:reactive-modal@1.0.2
18 | random@1.0.2
19 | reactive-var@1.0.4
20 | spacebars-compiler@1.0.4
21 | templating@1.0.11
22 | tracker@1.0.5
23 | underscore@1.0.2
24 | 


--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   summary: "Reactive bootstrap modals for meteor",
 3 |   version: "1.0.2",
 4 |   git: "https://github.com/pahans/reactive-modal.git",
 5 |   name: "pahans:reactive-modal"
 6 | });
 7 | 
 8 | Package.on_use(function (api) {
 9 |   if(api.versionsFrom){
10 |     api.versionsFrom('METEOR@0.9.0');
11 |   }
12 |   api.use(['underscore', 'jquery','templating', 'reactive-var@1.0.1'], 'client');
13 |   api.add_files(['lib/reactive-modal.html', 'lib/reactive-modal.js', 'lib/ev.js'], "client");
14 |   api.export('ReactiveModal', ['client']);
15 | });
16 | 


--------------------------------------------------------------------------------
/lib/reactive-modal.html:
--------------------------------------------------------------------------------
 1 | <template name="_reactiveModal">
 2 |   <div class="modal fade" id="{{key}}" tabindex="-1" role="dialog" aria-labelledby="{{key}}Label" aria-hidden="true">
 3 |     <div class="modal-dialog {{modalDialogClass}}">
 4 |       <div class="modal-content">
 5 |         <div class="modal-header">
 6 |           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 7 |           <h4 class="modal-title" id="{{key}}Label">{{title}}</h4>
 8 |         </div>
 9 |         <div class="modal-body {{modalBodyClass}}">
10 |           <!-- strange: {{> template}} works fine, but with the data context, template is searched inside the data context (the second variable) -->
11 |           {{> ../template doc}}
12 |         </div>
13 |         <div class="modal-footer {{modalFooterClass}}">
14 |           {{#each arrayify buttons}}
15 |             <button type="button" id={{button.id}} class="btn {{button.class}} {{name}} reactive-modal-btn" {{disabled}} data-dismiss="{{dismiss}}">{{button.label}}</button>
16 |           {{/each}}
17 |         </div>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Pahan Sarathchandra
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/versions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "dependencies": [
 3 |     [
 4 |       "blaze",
 5 |       "2.0.0"
 6 |     ],
 7 |     [
 8 |       "ejson",
 9 |       "1.0.1"
10 |     ],
11 |     [
12 |       "geojson-utils",
13 |       "1.0.0"
14 |     ],
15 |     [
16 |       "htmljs",
17 |       "1.0.0"
18 |     ],
19 |     [
20 |       "id-map",
21 |       "1.0.0"
22 |     ],
23 |     [
24 |       "jquery",
25 |       "1.0.0"
26 |     ],
27 |     [
28 |       "json",
29 |       "1.0.0"
30 |     ],
31 |     [
32 |       "meteor",
33 |       "1.0.3"
34 |     ],
35 |     [
36 |       "minimongo",
37 |       "1.0.2"
38 |     ],
39 |     [
40 |       "observe-sequence",
41 |       "1.0.2"
42 |     ],
43 |     [
44 |       "ordered-dict",
45 |       "1.0.0"
46 |     ],
47 |     [
48 |       "random",
49 |       "1.0.0"
50 |     ],
51 |     [
52 |       "reactive-var",
53 |       "1.0.1"
54 |     ],
55 |     [
56 |       "templating",
57 |       "1.0.5"
58 |     ],
59 |     [
60 |       "tracker",
61 |       "1.0.2"
62 |     ],
63 |     [
64 |       "underscore",
65 |       "1.0.0"
66 |     ]
67 |   ],
68 |   "pluginDependencies": [],
69 |   "toolVersion": "meteor-tool@1.0.28",
70 |   "format": "1.0"
71 | }


--------------------------------------------------------------------------------
/lib/ev.js:
--------------------------------------------------------------------------------
 1 | EV = function() {
 2 |   this._evHandlers = {};
 3 | }
 4 | 
 5 | EV.prototype.emit = function emit(event) {
 6 |   var args = Array.prototype.slice.call(arguments, 1);
 7 |   var emitted = false;
 8 | 
 9 |   if(this._evHandlers[event]) {
10 |     var events = _.clone(this._evHandlers[event]);
11 |     for(var lc=0; lc<events.length; lc++) {
12 |       var handler = events[lc];
13 |       handler.apply(this, args);
14 |       emitted = true;
15 |     }
16 |   }
17 | 
18 |   if(event == 'error' && !emitted) {
19 |     throw args[0];
20 |   }
21 |   return this;
22 | };
23 | 
24 | EV.prototype.on = function on(event, callback) {
25 |   if(!this._evHandlers[event]) {
26 |     this._evHandlers[event] = [];
27 |   }
28 |   this._evHandlers[event].push(callback);
29 |   return this;
30 | };
31 | 
32 | EV.prototype.once = function once(event, callback) {
33 |   this.on(event, function onetimeCallback() {
34 |     callback.apply(this, arguments);
35 |     this.removeListener(event, onetimeCallback);
36 |   });
37 |   return this;
38 | };
39 | 
40 | EV.prototype.removeListener = function removeListener(event, callback) {
41 |   if(this._evHandlers[event]) {
42 |     var index = this._evHandlers[event].indexOf(callback);
43 |     var removed = this._evHandlers[event].splice(index, 1);
44 |   }
45 |   return this;
46 | };
47 | 
48 | EV.prototype.removeAllListeners = function removeAllListeners(event) {
49 |   this._evHandlers[event] = undefined;
50 |   return this;
51 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | meteor-reactive-modal
 2 | =====================
 3 | 
 4 | Not actively maintained
 5 | =======================
 6 | 
 7 | How to Use
 8 | =========
 9 | ### install it from atmosphere
10 | 
11 | #### For Meteor 0.9 or Later
12 | ```js
13 | meteor add pahans:reactive-modal
14 | ```
15 | #### For older versions than 0.9
16 | 
17 | ```js 
18 | mrt add reactive-modal
19 | ```
20 | ### make sure you have bootstrap-3 or less-bootstrap-3 installed or bootstrap-3 from a other resource.
21 | ```js
22 | mrt add bootstrap-3
23 | ```
24 | ###Init your bootstrap modal 
25 | a meteor template is the body of your modal
26 | 
27 | ```html
28 | <template name="appShareDialog">
29 | <p>OK to go ahead and share {{app}}?</p>
30 | </template>
31 | ```
32 | 
33 | ```js
34 | Meteor.startup(function(){
35 |   var shareDialogInfo = {
36 |     template: Template.appShareDialog,
37 |     title: "Share the app",
38 |     modalDialogClass: "share-modal-dialog", //optional
39 |     modalBodyClass: "share-modal-body", //optional
40 |     modalFooterClass: "share-modal-footer",//optional
41 |     removeOnHide: true, //optional. If this is true, modal will be removed from DOM upon hiding
42 |     buttons: {
43 |       "cancel": {
44 |         class: 'btn-danger',
45 |         label: 'Cancel'
46 |       },
47 |       "ok": {
48 |         closeModalOnClick: false, // if this is false, dialog doesnt close automatically on click
49 |         class: 'btn-info',
50 |         label: 'Ok'
51 |       }
52 | 
53 |     },
54 |     doc: {  // Provide data context for Template.appShareDialog
55 |       app: "My Application"
56 |     }
57 |   }
58 | 
59 |   var rd = ReactiveModal.initDialog(shareDialogInfo);
60 | 
61 | });
62 | ```
63 | 
64 | ###button event handling
65 | ```js
66 | rd.buttons.ok.on('click', function(button){
67 |   // what needs to be done after click ok.
68 | });
69 | ```
70 | 
71 | ###Displaying Modal
72 | you can use show/hide methods to show/hide modal
73 | ```js
74 | rd.show();
75 | ```
76 | 
77 | ```js
78 | rd.hide();
79 | ```
80 | ### capture modal html element
81 | ```javascript
82 |   //modalTarget contains the html
83 |   $(rd.modalTarget).find('[name=inputFooBar]').val()
84 | ```
85 | 
86 | ### Modal template data context
87 | 
88 | Provide a `doc` property on the info options object to provide a data context for your dialog template
89 | 
90 | ### License
91 | MIT
92 | 
93 | 
94 | 
95 | 
96 | 
97 | 
98 | 


--------------------------------------------------------------------------------
/lib/reactive-modal.js:
--------------------------------------------------------------------------------
 1 | var _modals = {};
 2 | ReactiveModal = function(){
 3 |   // EV.call(this);
 4 |   this.buttons = {};
 5 | };
 6 | // _.extend(ReactiveModal.prototype, EV.prototype);
 7 | Template._reactiveModal.helpers({
 8 |   class: function(){
 9 |     var att;
10 |     if(this.class){
11 |       att = 'btn ' + this.class;
12 |     }
13 |     return att;
14 |   },
15 |   disabled: function(){
16 |     if (this.button.disabled.get()) {
17 |       return "disabled"
18 |     } else {
19 |       return null;
20 |     }
21 |   },
22 |   dismiss: function(){
23 |     if(this.button.closeModalOnClick){
24 |       return "modal";
25 |     }
26 |   },
27 |   arrayify: function(obj){
28 |     result = [];
29 |     for (var key in obj) result.push({name:key,button:obj[key]});
30 |     return result;
31 |   }
32 | });
33 | 
34 | Template._reactiveModal.events({
35 |   'click .modal-footer .reactive-modal-btn.btn': function(e){
36 |     this.button.emit('click', this.button);
37 |   }
38 | });
39 | 
40 | ReactiveModal.initDialog = function (info){
41 |   var key = "rm-"+Meteor.uuid();
42 |   if(!info || !info.template){
43 |     console.error("you must define a template for " , key);
44 |   } else {
45 |     info.key = key;
46 |     _modals[key] = info;
47 | 
48 |     for(var button in info.buttons){
49 |       var newButton = _.clone(info.buttons[button]);
50 |       _.extend(newButton, new EV());
51 |       info.buttons[button] = newButton;
52 |       newButton.closeModalOnClick = (info.buttons[button].closeModalOnClick === undefined || info.buttons[button].closeModalOnClick === true) ? true : false;
53 |       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);
54 |       newButton.disable =  function () {newButton.disabled.set(true);},
55 |       newButton.enable = function () {newButton.disabled.set(false);}
56 |     };
57 |   
58 |     Blaze.renderWithData(Template._reactiveModal, info, document.body);
59 |   }
60 | 
61 |   var modalTarget = $('#' + key);
62 |   info.show = function(){
63 |     modalTarget.modal('show');
64 |   }
65 |   info.hide = function(){
66 |     modalTarget.modal('hide');
67 |   }
68 | 
69 |   if (info.removeOnHide) {
70 |     modalTarget.on('hidden.bs.modal', function() {
71 |       $(this).remove();
72 |     });
73 |   }
74 | 
75 |   info.modalTarget = modalTarget;
76 |   return info;
77 | };
78 | 


--------------------------------------------------------------------------------