1 /* ===========================================================
2 * bootstrap-modalmanager.js v2.1
3 * ===========================================================
4 * Copyright 2012 Jordan Schroter.
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
17 * ========================================================== */
21 "use strict"; // jshint ;_;
23 /* MODAL MANAGER CLASS DEFINITION
24 * ====================== */
26 var ModalManager = function (element, options) {
27 this.init(element, options);
30 ModalManager.prototype = {
32 constructor: ModalManager,
34 init: function (element, options) {
35 this.$element = $(element);
36 this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
38 this.backdropCount = 0;
40 if (this.options.resize) {
44 $(window).on('resize.modal', function(){
45 resizeTimeout && clearTimeout(resizeTimeout);
46 resizeTimeout = setTimeout(function(){
47 for (var i = 0; i < that.stack.length; i++){
48 that.stack[i].isShown && that.stack[i].layout();
55 createModal: function (element, options) {
56 $(element).modal($.extend({ manager: this }, options));
59 appendModal: function (modal) {
60 this.stack.push(modal);
64 modal.$element.on('show.modalmanager', targetIsSelf(function (e) {
66 var showModal = function(){
69 var transition = $.support.transition && modal.$element.hasClass('fade');
72 .toggleClass('modal-open', that.hasOpenModal())
73 .toggleClass('page-overflow', $(window).height() < that.$element.height());
75 modal.$parent = modal.$element.parent();
77 modal.$container = that.createContainer(modal);
79 modal.$element.appendTo(modal.$container);
81 that.backdrop(modal, function () {
83 modal.$element.show();
86 //modal.$element[0].style.display = 'run-in';
87 modal.$element[0].offsetWidth;
88 //modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
95 .attr('aria-hidden', false);
97 var complete = function () {
99 modal.$element.trigger('shown');
103 modal.$element.one($.support.transition.end, complete) :
108 modal.options.replace ?
109 that.replace(showModal) :
113 modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) {
115 that.backdrop(modal);
117 if (modal.$backdrop){
118 $.support.transition && modal.$element.hasClass('fade') ?
119 modal.$backdrop.one($.support.transition.end, function () { that.destroyModal(modal) }) :
120 that.destroyModal(modal);
122 that.destroyModal(modal);
127 modal.$element.on('destroy.modalmanager', targetIsSelf(function (e) {
128 that.removeModal(modal);
133 destroyModal: function (modal) {
137 var hasOpenModal = this.hasOpenModal();
139 this.$element.toggleClass('modal-open', hasOpenModal);
142 this.$element.removeClass('page-overflow');
145 this.removeContainer(modal);
150 hasOpenModal: function () {
151 for (var i = 0; i < this.stack.length; i++){
152 if (this.stack[i].isShown) return true;
158 setFocus: function () {
161 for (var i = 0; i < this.stack.length; i++){
162 if (this.stack[i].isShown) topModal = this.stack[i];
165 if (!topModal) return;
171 removeModal: function (modal) {
172 modal.$element.off('.modalmanager');
173 if (modal.$backdrop) this.removeBackdrop.call(modal);
174 this.stack.splice(this.getIndexOfModal(modal), 1);
177 getModalAt: function (index) {
178 return this.stack[index];
181 getIndexOfModal: function (modal) {
182 for (var i = 0; i < this.stack.length; i++){
183 if (modal === this.stack[i]) return i;
187 replace: function (callback) {
190 for (var i = 0; i < this.stack.length; i++){
191 if (this.stack[i].isShown) topModal = this.stack[i];
195 this.$backdropHandle = topModal.$backdrop;
196 topModal.$backdrop = null;
198 callback && topModal.$element.one('hidden',
199 targetIsSelf( $.proxy(callback, this) ));
202 } else if (callback) {
207 removeBackdrop: function (modal) {
208 modal.$backdrop.remove();
209 modal.$backdrop = null;
212 createBackdrop: function (animate) {
215 if (!this.$backdropHandle) {
216 $backdrop = $('<div class="modal-backdrop ' + animate + '" />')
217 .appendTo(this.$element);
219 $backdrop = this.$backdropHandle;
220 $backdrop.off('.modalmanager');
221 this.$backdropHandle = null;
222 this.isLoading && this.removeSpinner();
228 removeContainer: function (modal) {
229 modal.$container.remove();
230 modal.$container = null;
233 createContainer: function (modal) {
236 $container = $('<div class="modal-scrollable">')
237 .css('z-index', getzIndex( 'modal',
238 modal ? this.getIndexOfModal(modal) : this.stack.length ))
239 .appendTo(this.$element);
241 if (modal && modal.options.backdrop != 'static') {
242 $container.on('click.modal', targetIsSelf(function (e) {
246 $container.on('click.modal', targetIsSelf(function (e) {
255 backdrop: function (modal, callback) {
256 var animate = modal.$element.hasClass('fade') ? 'fade' : '',
257 showBackdrop = modal.options.backdrop &&
258 this.backdropCount < this.options.backdropLimit;
260 if (modal.isShown && showBackdrop) {
261 var doAnimate = $.support.transition && animate && !this.$backdropHandle;
263 modal.$backdrop = this.createBackdrop(animate);
265 modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getIndexOfModal(modal) ));
267 if (doAnimate) modal.$backdrop[0].offsetWidth; // force reflow
269 modal.$backdrop.addClass('in');
271 this.backdropCount += 1;
274 modal.$backdrop.one($.support.transition.end, callback) :
277 } else if (!modal.isShown && modal.$backdrop) {
278 modal.$backdrop.removeClass('in');
280 this.backdropCount -= 1;
284 $.support.transition && modal.$element.hasClass('fade')?
285 modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) :
286 that.removeBackdrop(modal);
288 } else if (callback) {
293 removeSpinner: function(){
294 this.$spinner && this.$spinner.remove();
295 this.$spinner = null;
296 this.isLoading = false;
299 removeLoading: function () {
300 this.$backdropHandle && this.$backdropHandle.remove();
301 this.$backdropHandle = null;
302 this.removeSpinner();
305 loading: function (callback) {
306 callback = callback || function () { };
309 .toggleClass('modal-open', !this.isLoading || this.hasOpenModal())
310 .toggleClass('page-overflow', $(window).height() < this.$element.height());
312 if (!this.isLoading) {
314 this.$backdropHandle = this.createBackdrop('fade');
316 this.$backdropHandle[0].offsetWidth; // force reflow
319 .css('z-index', getzIndex('backdrop', this.stack.length))
322 var $spinner = $(this.options.spinner)
323 .css('z-index', getzIndex('modal', this.stack.length))
324 .appendTo(this.$element)
327 this.$spinner = $(this.createContainer())
329 .on('click.modalmanager', $.proxy(this.loading, this));
331 this.isLoading = true;
333 $.support.transition ?
334 this.$backdropHandle.one($.support.transition.end, callback) :
337 } else if (this.isLoading && this.$backdropHandle) {
338 this.$backdropHandle.removeClass('in');
341 $.support.transition ?
342 this.$backdropHandle.one($.support.transition.end, function () { that.removeLoading() }) :
343 that.removeLoading();
345 } else if (callback) {
346 callback(this.isLoading);
352 * ======================= */
354 // computes and caches the zindexes
355 var getzIndex = (function () {
359 return function (type, pos) {
361 if (typeof zIndexFactor === 'undefined'){
362 var $baseModal = $('<div class="modal hide" />').appendTo('body'),
363 $baseBackdrop = $('<div class="modal-backdrop hide" />').appendTo('body');
365 baseIndex['modal'] = +$baseModal.css('z-index');
366 baseIndex['backdrop'] = +$baseBackdrop.css('z-index');
367 zIndexFactor = baseIndex['modal'] - baseIndex['backdrop'];
370 $baseBackdrop.remove();
371 $baseBackdrop = $baseModal = null;
374 return baseIndex[type] + (zIndexFactor * pos);
379 // make sure the event target is the modal itself in order to prevent
380 // other components such as tabsfrom triggering the modal manager.
381 // if Boostsrap namespaced events, this would not be needed.
382 function targetIsSelf(callback){
383 return function (e) {
384 if (this === e.target){
385 return callback.apply(this, arguments);
391 /* MODAL MANAGER PLUGIN DEFINITION
392 * ======================= */
394 $.fn.modalmanager = function (option, args) {
395 return this.each(function () {
397 data = $this.data('modalmanager');
399 if (!data) $this.data('modalmanager', (data = new ModalManager(this, option)));
400 if (typeof option === 'string') data[option].apply(data, [].concat(args))
404 $.fn.modalmanager.defaults = {
407 spinner: '<div class="loading-spinner fade" style="width: 200px; margin-left: -100px;"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>'
410 $.fn.modalmanager.Constructor = ModalManager