First commit
This commit is contained in:
commit
c6e2478c40
13918 changed files with 2303184 additions and 0 deletions
|
|
@ -0,0 +1,239 @@
|
|||
/**
|
||||
* Bootstrap Modal wrapper for use with Backbone.
|
||||
*
|
||||
* Takes care of instantiation, manages multiple modals,
|
||||
* adds several options and removes the element from the DOM when closed
|
||||
*
|
||||
* @author Charles Davison <charlie@powmedia.co.uk>
|
||||
*
|
||||
* Events:
|
||||
* shown: Fired when the modal has finished animating in
|
||||
* hidden: Fired when the modal has finished animating out
|
||||
* cancel: The user dismissed the modal
|
||||
* ok: The user clicked OK
|
||||
*/
|
||||
(function($, _, Backbone) {
|
||||
|
||||
//Set custom template settings
|
||||
var _interpolateBackup = _.templateSettings;
|
||||
_.templateSettings = {
|
||||
interpolate: /\{\{(.+?)\}\}/g,
|
||||
evaluate: /<%([\s\S]+?)%>/g
|
||||
}
|
||||
|
||||
var template = _.template('\
|
||||
<% if (title) { %>\
|
||||
<div class="modal-header">\
|
||||
<% if (allowCancel) { %>\
|
||||
<a class="close">×</a>\
|
||||
<% } %>\
|
||||
<h3>{{title}}</h3>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<div class="modal-body">{{content}}</div>\
|
||||
<div class="modal-footer">\
|
||||
<% if (allowCancel) { %>\
|
||||
<% if (cancelText) { %>\
|
||||
<a href="#" class="btn cancel">{{cancelText}}</a>\
|
||||
<% } %>\
|
||||
<% } %>\
|
||||
<a href="#" class="btn ok btn-primary">{{okText}}</a>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
//Reset to users' template settings
|
||||
_.templateSettings = _interpolateBackup;
|
||||
|
||||
|
||||
var Modal = Backbone.View.extend({
|
||||
|
||||
className: 'modal',
|
||||
|
||||
events: {
|
||||
'click .close': function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.trigger('cancel');
|
||||
},
|
||||
'click .cancel': function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.trigger('cancel');
|
||||
},
|
||||
'click .ok': function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.trigger('ok');
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates an instance of a Bootstrap Modal
|
||||
*
|
||||
* @see http://twitter.github.com/bootstrap/javascript.html#modals
|
||||
*
|
||||
* @param {Object} options
|
||||
* @param {String|View} [options.content] Modal content. Default: none
|
||||
* @param {String} [options.title] Title. Default: none
|
||||
* @param {String} [options.okText] Text for the OK button. Default: 'OK'
|
||||
* @param {String} [options.cancelText] Text for the cancel button. Default: 'Cancel'. If passed a falsey value, the button will be removed
|
||||
* @param {Boolean} [options.allowCancel Whether the modal can be closed, other than by pressing OK. Default: true
|
||||
* @param {Boolean} [options.escape] Whether the 'esc' key can dismiss the modal. Default: true, but false if options.cancellable is true
|
||||
* @param {Boolean} [options.animate] Whether to animate in/out. Default: false
|
||||
* @param {Function} [options.template] Compiled underscore template to override the default one
|
||||
*/
|
||||
initialize: function(options) {
|
||||
this.options = _.extend({
|
||||
title: null,
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel',
|
||||
allowCancel: true,
|
||||
escape: true,
|
||||
animate: false,
|
||||
template: template
|
||||
}, options);
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates the DOM element
|
||||
*
|
||||
* @api private
|
||||
*/
|
||||
render: function() {
|
||||
var $el = this.$el,
|
||||
options = this.options,
|
||||
content = options.content;
|
||||
|
||||
//Create the modal container
|
||||
$el.html(options.template(options));
|
||||
|
||||
var $content = this.$content = $el.find('.modal-body')
|
||||
|
||||
//Insert the main content if it's a view
|
||||
if (content.$el) {
|
||||
$el.find('.modal-body').html(content.render().$el);
|
||||
}
|
||||
|
||||
if (options.animate) $el.addClass('fade');
|
||||
|
||||
this.isRendered = true;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders and shows the modal
|
||||
*
|
||||
* @param {Function} [cb] Optional callback that runs only when OK is pressed.
|
||||
*/
|
||||
open: function(cb) {
|
||||
if (!this.isRendered) this.render();
|
||||
|
||||
var self = this,
|
||||
$el = this.$el;
|
||||
|
||||
//Create it
|
||||
$el.modal({
|
||||
keyboard: this.options.allowCancel,
|
||||
backdrop: this.options.allowCancel ? true : 'static'
|
||||
});
|
||||
|
||||
//Focus OK button
|
||||
$el.one('shown', function() {
|
||||
$el.find('.btn.ok').focus();
|
||||
|
||||
self.trigger('shown');
|
||||
});
|
||||
|
||||
//Adjust the modal and backdrop z-index; for dealing with multiple modals
|
||||
var numModals = Modal.count,
|
||||
$backdrop = $('.modal-backdrop:eq('+numModals+')'),
|
||||
backdropIndex = $backdrop.css('z-index'),
|
||||
elIndex = $backdrop.css('z-index');
|
||||
|
||||
$backdrop.css('z-index', backdropIndex + numModals);
|
||||
this.$el.css('z-index', elIndex + numModals);
|
||||
|
||||
if (this.options.allowCancel) {
|
||||
$backdrop.one('click', function() {
|
||||
self.trigger('cancel');
|
||||
});
|
||||
|
||||
$(document).one('keyup.dismiss.modal', function (e) {
|
||||
e.which == 27 && self.trigger('cancel');
|
||||
});
|
||||
}
|
||||
|
||||
this.on('cancel', function() {
|
||||
self.close();
|
||||
});
|
||||
|
||||
Modal.count++;
|
||||
|
||||
//Run callback on OK if provided
|
||||
if (cb) {
|
||||
self.on('ok', cb);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Closes the modal
|
||||
*/
|
||||
close: function() {
|
||||
var self = this,
|
||||
$el = this.$el;
|
||||
|
||||
//Check if the modal should stay open
|
||||
if (this._preventClose) {
|
||||
this._preventClose = false;
|
||||
return;
|
||||
}
|
||||
|
||||
$el.modal('hide');
|
||||
|
||||
$el.one('hidden', function() {
|
||||
self.remove();
|
||||
|
||||
self.trigger('hidden');
|
||||
});
|
||||
|
||||
Modal.count--;
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop the modal from closing.
|
||||
* Can be called from within a 'close' or 'ok' event listener.
|
||||
*/
|
||||
preventClose: function() {
|
||||
this._preventClose = true;
|
||||
}
|
||||
}, {
|
||||
//STATICS
|
||||
|
||||
//The number of modals on display
|
||||
count: 0
|
||||
});
|
||||
|
||||
|
||||
//EXPORTS
|
||||
//CommonJS
|
||||
if (typeof require == 'function' && typeof module !== 'undefined' && exports) {
|
||||
module.exports = Modal;
|
||||
}
|
||||
|
||||
//AMD / RequireJS
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
return define(function() {
|
||||
Backbone.BootstrapModal = Modal;
|
||||
})
|
||||
}
|
||||
|
||||
//Regular; add to Backbone.Bootstrap.Modal
|
||||
else {
|
||||
Backbone.BootstrapModal = Modal;
|
||||
}
|
||||
|
||||
})(jQuery, _, Backbone);
|
||||
|
|
@ -0,0 +1 @@
|
|||
(function(e,t,n){var r=t.templateSettings;t.templateSettings={interpolate:/\{\{(.+?)\}\}/g,evaluate:/<%([\s\S]+?)%>/g};var i=t.template(' <% if (title) { %> <div class="modal-header"> <% if (allowCancel) { %> <a class="close">×</a> <% } %> <h3>{{title}}</h3> </div> <% } %> <div class="modal-body">{{content}}</div> <div class="modal-footer"> <% if (allowCancel) { %> <% if (cancelText) { %> <a href="#" class="btn cancel">{{cancelText}}</a> <% } %> <% } %> <a href="#" class="btn ok btn-primary">{{okText}}</a> </div> ');t.templateSettings=r;var s=n.View.extend({className:"modal",events:{"click .close":function(e){e.preventDefault(),this.trigger("cancel")},"click .cancel":function(e){e.preventDefault(),this.trigger("cancel")},"click .ok":function(e){e.preventDefault(),this.trigger("ok"),this.close()}},initialize:function(e){this.options=t.extend({title:null,okText:"OK",cancelText:"Cancel",allowCancel:!0,escape:!0,animate:!1,template:i},e)},render:function(){var e=this.$el,t=this.options,n=t.content;e.html(t.template(t));var r=this.$content=e.find(".modal-body");return n.$el&&e.find(".modal-body").html(n.render().$el),t.animate&&e.addClass("fade"),this.isRendered=!0,this},open:function(t){this.isRendered||this.render();var n=this,r=this.$el;r.modal({keyboard:this.options.allowCancel,backdrop:this.options.allowCancel?!0:"static"}),r.one("shown",function(){r.find(".btn.ok").focus(),n.trigger("shown")});var i=s.count,o=e(".modal-backdrop:eq("+i+")"),u=o.css("z-index"),a=o.css("z-index");return o.css("z-index",u+i),this.$el.css("z-index",a+i),this.options.allowCancel&&(o.one("click",function(){n.trigger("cancel")}),e(document).one("keyup.dismiss.modal",function(e){e.which==27&&n.trigger("cancel")})),this.on("cancel",function(){n.close()}),s.count++,t&&n.on("ok",t),this},close:function(){var e=this,t=this.$el;if(this._preventClose){this._preventClose=!1;return}t.modal("hide"),t.one("hidden",function(){e.remove(),e.trigger("hidden")}),s.count--},preventClose:function(){this._preventClose=!0}},{count:0});typeof require=="function"&&typeof module!="undefined"&&exports&&(module.exports=s);if(typeof define=="function"&&define.amd)return define(function(){n.BootstrapModal=s});n.BootstrapModal=s})(jQuery,_,Backbone)
|
||||
Loading…
Add table
Add a link
Reference in a new issue