Added missing files
parent
f7334ef65f
commit
7e82214d75
|
@ -0,0 +1,214 @@
|
||||||
|
/*!
|
||||||
|
* Bootstrap Modal
|
||||||
|
*
|
||||||
|
* Copyright Jordan Schroter
|
||||||
|
* Licensed under the Apache License v2.0
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
.modal-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* add a scroll bar to stop page from jerking around */
|
||||||
|
.modal-open.page-overflow .page-container,
|
||||||
|
.modal-open.page-overflow .page-container .navbar-fixed-top,
|
||||||
|
.modal-open.page-overflow .page-container .navbar-fixed-bottom,
|
||||||
|
.modal-open.page-overflow .modal-scrollable {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 979px) {
|
||||||
|
.modal-open.page-overflow .page-container .navbar-fixed-top,
|
||||||
|
.modal-open.page-overflow .page-container .navbar-fixed-bottom {
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.modal-scrollable {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
outline: none;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 0;
|
||||||
|
top: 50%;
|
||||||
|
overflow: visible; /* allow content to popup out (i.e tooltips) */
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.fade {
|
||||||
|
top: -100%;
|
||||||
|
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
|
||||||
|
-moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
|
||||||
|
-o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
|
||||||
|
transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.fade.in {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.modal-absolute {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 950;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .loading-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop.modal-absolute{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 940;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop,
|
||||||
|
.modal-backdrop.fade.in{
|
||||||
|
opacity: 0.7;
|
||||||
|
filter: alpha(opacity=70);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.container {
|
||||||
|
width: 940px;
|
||||||
|
margin-left: -470px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Overflow */
|
||||||
|
|
||||||
|
.modal-overflow.modal {
|
||||||
|
top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overflow.modal.fade {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overflow.modal.fade.in {
|
||||||
|
top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overflow .modal-body {
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.modal.container {
|
||||||
|
width: 1170px;
|
||||||
|
margin-left: -585px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 979px) {
|
||||||
|
.modal,
|
||||||
|
.modal.container,
|
||||||
|
.modal.modal-overflow {
|
||||||
|
top: 1%;
|
||||||
|
right: 1%;
|
||||||
|
left: 1%;
|
||||||
|
bottom: auto;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.fade.in,
|
||||||
|
.modal.container.fade.in,
|
||||||
|
.modal.modal-overflow.fade.in {
|
||||||
|
top: 1%;
|
||||||
|
bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body,
|
||||||
|
.modal-overflow .modal-body {
|
||||||
|
position: static;
|
||||||
|
margin: 0;
|
||||||
|
height: auto !important;
|
||||||
|
max-height: none !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer,
|
||||||
|
.modal-overflow .modal-footer {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -12px 0 0 -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Animate.css - http://daneden.me/animate
|
||||||
|
Licensed under the ☺ license (http://licence.visualidiot.com/)
|
||||||
|
|
||||||
|
Copyright (c) 2012 Dan Eden*/
|
||||||
|
|
||||||
|
.animated {
|
||||||
|
-webkit-animation-duration: 1s;
|
||||||
|
-moz-animation-duration: 1s;
|
||||||
|
-o-animation-duration: 1s;
|
||||||
|
animation-duration: 1s;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
-moz-animation-fill-mode: both;
|
||||||
|
-o-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes shake {
|
||||||
|
0%, 100% {-webkit-transform: translateX(0);}
|
||||||
|
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
|
||||||
|
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes shake {
|
||||||
|
0%, 100% {-moz-transform: translateX(0);}
|
||||||
|
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
|
||||||
|
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes shake {
|
||||||
|
0%, 100% {-o-transform: translateX(0);}
|
||||||
|
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
|
||||||
|
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% {transform: translateX(0);}
|
||||||
|
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
|
||||||
|
20%, 40%, 60%, 80% {transform: translateX(10px);}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shake {
|
||||||
|
-webkit-animation-name: shake;
|
||||||
|
-moz-animation-name: shake;
|
||||||
|
-o-animation-name: shake;
|
||||||
|
animation-name: shake;
|
||||||
|
}
|
|
@ -0,0 +1,374 @@
|
||||||
|
/* ===========================================================
|
||||||
|
* bootstrap-modal.js v2.1
|
||||||
|
* ===========================================================
|
||||||
|
* Copyright 2012 Jordan Schroter
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
* ========================================================== */
|
||||||
|
|
||||||
|
|
||||||
|
!function ($) {
|
||||||
|
|
||||||
|
"use strict"; // jshint ;_;
|
||||||
|
|
||||||
|
/* MODAL CLASS DEFINITION
|
||||||
|
* ====================== */
|
||||||
|
|
||||||
|
var Modal = function (element, options) {
|
||||||
|
this.init(element, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
Modal.prototype = {
|
||||||
|
|
||||||
|
constructor: Modal,
|
||||||
|
|
||||||
|
init: function (element, options) {
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
|
this.$element = $(element)
|
||||||
|
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this));
|
||||||
|
|
||||||
|
this.options.remote && this.$element.find('.modal-body').load(this.options.remote);
|
||||||
|
|
||||||
|
var manager = typeof this.options.manager === 'function' ?
|
||||||
|
this.options.manager.call(this) : this.options.manager;
|
||||||
|
|
||||||
|
manager = manager.appendModal ?
|
||||||
|
manager : $(manager).modalmanager().data('modalmanager');
|
||||||
|
|
||||||
|
manager.appendModal(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle: function () {
|
||||||
|
return this[!this.isShown ? 'show' : 'hide']();
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function () {
|
||||||
|
var e = $.Event('show');
|
||||||
|
|
||||||
|
if (this.isShown) return;
|
||||||
|
|
||||||
|
this.$element.trigger(e);
|
||||||
|
|
||||||
|
if (e.isDefaultPrevented()) return;
|
||||||
|
|
||||||
|
this.escape();
|
||||||
|
|
||||||
|
this.tab();
|
||||||
|
|
||||||
|
this.options.loading && this.loading();
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function (e) {
|
||||||
|
e && e.preventDefault();
|
||||||
|
|
||||||
|
e = $.Event('hide');
|
||||||
|
|
||||||
|
this.$element.trigger(e);
|
||||||
|
|
||||||
|
if (!this.isShown || e.isDefaultPrevented()) return (this.isShown = false);
|
||||||
|
|
||||||
|
this.isShown = false;
|
||||||
|
|
||||||
|
this.escape();
|
||||||
|
|
||||||
|
this.tab();
|
||||||
|
|
||||||
|
this.isLoading && this.loading();
|
||||||
|
|
||||||
|
$(document).off('focusin.modal');
|
||||||
|
|
||||||
|
this.$element
|
||||||
|
.removeClass('in')
|
||||||
|
.removeClass('animated')
|
||||||
|
.removeClass(this.options.attentionAnimation)
|
||||||
|
.removeClass('modal-overflow')
|
||||||
|
.attr('aria-hidden', true);
|
||||||
|
|
||||||
|
$.support.transition && this.$element.hasClass('fade') ?
|
||||||
|
this.hideWithTransition() :
|
||||||
|
this.hideModal();
|
||||||
|
},
|
||||||
|
|
||||||
|
layout: function () {
|
||||||
|
var prop = this.options.height ? 'height' : 'max-height',
|
||||||
|
value = this.options.height || this.options.maxHeight;
|
||||||
|
|
||||||
|
if (this.options.width){
|
||||||
|
this.$element.css('width', this.options.width);
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
this.$element.css('margin-left', function () {
|
||||||
|
if (/%/ig.test(that.options.width)){
|
||||||
|
return -(parseInt(that.options.width) / 2) + '%';
|
||||||
|
} else {
|
||||||
|
return -($(this).width() / 2) + 'px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$element.css('width', '');
|
||||||
|
this.$element.css('margin-left', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$element.find('.modal-body')
|
||||||
|
.css('overflow', '')
|
||||||
|
.css(prop, '');
|
||||||
|
|
||||||
|
var modalOverflow = $(window).height() - 10 < this.$element.height();
|
||||||
|
|
||||||
|
if (value){
|
||||||
|
this.$element.find('.modal-body')
|
||||||
|
.css('overflow', 'auto')
|
||||||
|
.css(prop, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalOverflow || this.options.modalOverflow) {
|
||||||
|
this.$element
|
||||||
|
.css('margin-top', 0)
|
||||||
|
.addClass('modal-overflow');
|
||||||
|
} else {
|
||||||
|
this.$element
|
||||||
|
.css('margin-top', 0 - this.$element.height() / 2)
|
||||||
|
.removeClass('modal-overflow');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tab: function () {
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
if (this.isShown && this.options.consumeTab) {
|
||||||
|
this.$element.on('keydown.tabindex.modal', '[data-tabindex]', function (e) {
|
||||||
|
if (e.keyCode && e.keyCode == 9){
|
||||||
|
var $next = $(this),
|
||||||
|
$rollover = $(this);
|
||||||
|
|
||||||
|
that.$element.find('[data-tabindex]:enabled:not([readonly])').each(function (e) {
|
||||||
|
if (!e.shiftKey){
|
||||||
|
$next = $next.data('tabindex') < $(this).data('tabindex') ?
|
||||||
|
$next = $(this) :
|
||||||
|
$rollover = $(this);
|
||||||
|
} else {
|
||||||
|
$next = $next.data('tabindex') > $(this).data('tabindex') ?
|
||||||
|
$next = $(this) :
|
||||||
|
$rollover = $(this);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$next[0] !== $(this)[0] ?
|
||||||
|
$next.focus() : $rollover.focus();
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (!this.isShown) {
|
||||||
|
this.$element.off('keydown.tabindex.modal');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
escape: function () {
|
||||||
|
var that = this;
|
||||||
|
if (this.isShown && this.options.keyboard) {
|
||||||
|
if (!this.$element.attr('tabindex')) this.$element.attr('tabindex', -1);
|
||||||
|
|
||||||
|
this.$element.on('keyup.dismiss.modal', function (e) {
|
||||||
|
e.which == 27 && that.hide();
|
||||||
|
});
|
||||||
|
} else if (!this.isShown) {
|
||||||
|
this.$element.off('keyup.dismiss.modal')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hideWithTransition: function () {
|
||||||
|
var that = this
|
||||||
|
, timeout = setTimeout(function () {
|
||||||
|
that.$element.off($.support.transition.end);
|
||||||
|
that.hideModal();
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
this.$element.one($.support.transition.end, function () {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
that.hideModal();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
hideModal: function () {
|
||||||
|
this.$element
|
||||||
|
.hide()
|
||||||
|
.trigger('hidden');
|
||||||
|
|
||||||
|
var prop = this.options.height ? 'height' : 'max-height';
|
||||||
|
var value = this.options.height || this.options.maxHeight;
|
||||||
|
|
||||||
|
if (value){
|
||||||
|
this.$element.find('.modal-body')
|
||||||
|
.css('overflow', '')
|
||||||
|
.css(prop, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
removeLoading: function () {
|
||||||
|
this.$loading.remove();
|
||||||
|
this.$loading = null;
|
||||||
|
this.isLoading = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
loading: function (callback) {
|
||||||
|
callback = callback || function () {};
|
||||||
|
|
||||||
|
var animate = this.$element.hasClass('fade') ? 'fade' : '';
|
||||||
|
|
||||||
|
if (!this.isLoading) {
|
||||||
|
var doAnimate = $.support.transition && animate;
|
||||||
|
|
||||||
|
this.$loading = $('<div class="loading-mask ' + animate + '">')
|
||||||
|
.append(this.options.spinner)
|
||||||
|
.appendTo(this.$element);
|
||||||
|
|
||||||
|
if (doAnimate) this.$loading[0].offsetWidth; // force reflow
|
||||||
|
|
||||||
|
this.$loading.addClass('in');
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
doAnimate ?
|
||||||
|
this.$loading.one($.support.transition.end, callback) :
|
||||||
|
callback();
|
||||||
|
|
||||||
|
} else if (this.isLoading && this.$loading) {
|
||||||
|
this.$loading.removeClass('in');
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
$.support.transition && this.$element.hasClass('fade')?
|
||||||
|
this.$loading.one($.support.transition.end, function () { that.removeLoading() }) :
|
||||||
|
that.removeLoading();
|
||||||
|
|
||||||
|
} else if (callback) {
|
||||||
|
callback(this.isLoading);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
focus: function () {
|
||||||
|
var $focusElem = this.$element.find(this.options.focusOn);
|
||||||
|
|
||||||
|
$focusElem = $focusElem.length ? $focusElem : this.$element;
|
||||||
|
|
||||||
|
$focusElem.focus();
|
||||||
|
},
|
||||||
|
|
||||||
|
attention: function (){
|
||||||
|
// NOTE: transitionEnd with keyframes causes odd behaviour
|
||||||
|
|
||||||
|
if (this.options.attentionAnimation){
|
||||||
|
this.$element
|
||||||
|
.removeClass('animated')
|
||||||
|
.removeClass(this.options.attentionAnimation);
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
that.$element
|
||||||
|
.addClass('animated')
|
||||||
|
.addClass(that.options.attentionAnimation);
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.focus();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
destroy: function () {
|
||||||
|
var e = $.Event('destroy');
|
||||||
|
this.$element.trigger(e);
|
||||||
|
if (e.isDefaultPrevented()) return;
|
||||||
|
|
||||||
|
this.teardown();
|
||||||
|
},
|
||||||
|
|
||||||
|
teardown: function () {
|
||||||
|
if (!this.$parent.length){
|
||||||
|
this.$element.remove();
|
||||||
|
this.$element = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$parent !== this.$element.parent()){
|
||||||
|
this.$element.appendTo(this.$parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$element.off('.modal');
|
||||||
|
this.$element.removeData('modal');
|
||||||
|
this.$element
|
||||||
|
.removeClass('in')
|
||||||
|
.attr('aria-hidden', true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL PLUGIN DEFINITION
|
||||||
|
* ======================= */
|
||||||
|
|
||||||
|
$.fn.modal = function (option, args) {
|
||||||
|
return this.each(function () {
|
||||||
|
var $this = $(this),
|
||||||
|
data = $this.data('modal'),
|
||||||
|
options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option);
|
||||||
|
|
||||||
|
if (!data) $this.data('modal', (data = new Modal(this, options)));
|
||||||
|
if (typeof option == 'string') data[option].apply(data, [].concat(args));
|
||||||
|
else if (options.show) data.show()
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.modal.defaults = {
|
||||||
|
keyboard: true,
|
||||||
|
backdrop: true,
|
||||||
|
loading: false,
|
||||||
|
show: true,
|
||||||
|
width: null,
|
||||||
|
height: null,
|
||||||
|
maxHeight: null,
|
||||||
|
modalOverflow: false,
|
||||||
|
consumeTab: true,
|
||||||
|
focusOn: null,
|
||||||
|
replace: false,
|
||||||
|
resize: false,
|
||||||
|
attentionAnimation: 'shake',
|
||||||
|
manager: 'body',
|
||||||
|
spinner: '<div class="loading-spinner" style="width: 200px; margin-left: -100px;"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>'
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.modal.Constructor = Modal;
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL DATA-API
|
||||||
|
* ============== */
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
$(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
|
||||||
|
var $this = $(this),
|
||||||
|
href = $this.attr('href'),
|
||||||
|
$target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7
|
||||||
|
option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data());
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
$target
|
||||||
|
.modal(option)
|
||||||
|
.one('hide', function () {
|
||||||
|
$this.focus();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}(window.jQuery);
|
|
@ -0,0 +1,412 @@
|
||||||
|
/* ===========================================================
|
||||||
|
* bootstrap-modalmanager.js v2.1
|
||||||
|
* ===========================================================
|
||||||
|
* Copyright 2012 Jordan Schroter.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
* ========================================================== */
|
||||||
|
|
||||||
|
!function ($) {
|
||||||
|
|
||||||
|
"use strict"; // jshint ;_;
|
||||||
|
|
||||||
|
/* MODAL MANAGER CLASS DEFINITION
|
||||||
|
* ====================== */
|
||||||
|
|
||||||
|
var ModalManager = function (element, options) {
|
||||||
|
this.init(element, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalManager.prototype = {
|
||||||
|
|
||||||
|
constructor: ModalManager,
|
||||||
|
|
||||||
|
init: function (element, options) {
|
||||||
|
this.$element = $(element);
|
||||||
|
this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
|
||||||
|
this.stack = [];
|
||||||
|
this.backdropCount = 0;
|
||||||
|
|
||||||
|
if (this.options.resize) {
|
||||||
|
var resizeTimeout,
|
||||||
|
that = this;
|
||||||
|
|
||||||
|
$(window).on('resize.modal', function(){
|
||||||
|
resizeTimeout && clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(function(){
|
||||||
|
for (var i = 0; i < that.stack.length; i++){
|
||||||
|
that.stack[i].isShown && that.stack[i].layout();
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createModal: function (element, options) {
|
||||||
|
$(element).modal($.extend({ manager: this }, options));
|
||||||
|
},
|
||||||
|
|
||||||
|
appendModal: function (modal) {
|
||||||
|
this.stack.push(modal);
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
modal.$element.on('show.modalmanager', targetIsSelf(function (e) {
|
||||||
|
|
||||||
|
var showModal = function(){
|
||||||
|
modal.isShown = true;
|
||||||
|
|
||||||
|
var transition = $.support.transition && modal.$element.hasClass('fade');
|
||||||
|
|
||||||
|
that.$element
|
||||||
|
.toggleClass('modal-open', that.hasOpenModal())
|
||||||
|
.toggleClass('page-overflow', $(window).height() < that.$element.height());
|
||||||
|
|
||||||
|
modal.$parent = modal.$element.parent();
|
||||||
|
|
||||||
|
modal.$container = that.createContainer(modal);
|
||||||
|
|
||||||
|
modal.$element.appendTo(modal.$container);
|
||||||
|
|
||||||
|
that.backdrop(modal, function () {
|
||||||
|
|
||||||
|
modal.$element.show();
|
||||||
|
|
||||||
|
if (transition) {
|
||||||
|
//modal.$element[0].style.display = 'run-in';
|
||||||
|
modal.$element[0].offsetWidth;
|
||||||
|
//modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
|
||||||
|
}
|
||||||
|
|
||||||
|
modal.layout();
|
||||||
|
|
||||||
|
modal.$element
|
||||||
|
.addClass('in')
|
||||||
|
.attr('aria-hidden', false);
|
||||||
|
|
||||||
|
var complete = function () {
|
||||||
|
that.setFocus();
|
||||||
|
modal.$element.trigger('shown');
|
||||||
|
};
|
||||||
|
|
||||||
|
transition ?
|
||||||
|
modal.$element.one($.support.transition.end, complete) :
|
||||||
|
complete();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
modal.options.replace ?
|
||||||
|
that.replace(showModal) :
|
||||||
|
showModal();
|
||||||
|
}));
|
||||||
|
|
||||||
|
modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) {
|
||||||
|
|
||||||
|
that.backdrop(modal);
|
||||||
|
|
||||||
|
if (modal.$backdrop){
|
||||||
|
$.support.transition && modal.$element.hasClass('fade') ?
|
||||||
|
modal.$backdrop.one($.support.transition.end, function () { that.destroyModal(modal) }) :
|
||||||
|
that.destroyModal(modal);
|
||||||
|
} else {
|
||||||
|
that.destroyModal(modal);
|
||||||
|
}
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
||||||
|
modal.$element.on('destroy.modalmanager', targetIsSelf(function (e) {
|
||||||
|
that.removeModal(modal);
|
||||||
|
}));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
destroyModal: function (modal) {
|
||||||
|
|
||||||
|
modal.destroy();
|
||||||
|
|
||||||
|
var hasOpenModal = this.hasOpenModal();
|
||||||
|
|
||||||
|
this.$element.toggleClass('modal-open', hasOpenModal);
|
||||||
|
|
||||||
|
if (!hasOpenModal){
|
||||||
|
this.$element.removeClass('page-overflow');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.removeContainer(modal);
|
||||||
|
|
||||||
|
this.setFocus();
|
||||||
|
},
|
||||||
|
|
||||||
|
hasOpenModal: function () {
|
||||||
|
for (var i = 0; i < this.stack.length; i++){
|
||||||
|
if (this.stack[i].isShown) return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
setFocus: function () {
|
||||||
|
var topModal;
|
||||||
|
|
||||||
|
for (var i = 0; i < this.stack.length; i++){
|
||||||
|
if (this.stack[i].isShown) topModal = this.stack[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!topModal) return;
|
||||||
|
|
||||||
|
topModal.focus();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
removeModal: function (modal) {
|
||||||
|
modal.$element.off('.modalmanager');
|
||||||
|
if (modal.$backdrop) this.removeBackdrop.call(modal);
|
||||||
|
this.stack.splice(this.getIndexOfModal(modal), 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
getModalAt: function (index) {
|
||||||
|
return this.stack[index];
|
||||||
|
},
|
||||||
|
|
||||||
|
getIndexOfModal: function (modal) {
|
||||||
|
for (var i = 0; i < this.stack.length; i++){
|
||||||
|
if (modal === this.stack[i]) return i;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
replace: function (callback) {
|
||||||
|
var topModal;
|
||||||
|
|
||||||
|
for (var i = 0; i < this.stack.length; i++){
|
||||||
|
if (this.stack[i].isShown) topModal = this.stack[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topModal) {
|
||||||
|
this.$backdropHandle = topModal.$backdrop;
|
||||||
|
topModal.$backdrop = null;
|
||||||
|
|
||||||
|
callback && topModal.$element.one('hidden',
|
||||||
|
targetIsSelf( $.proxy(callback, this) ));
|
||||||
|
|
||||||
|
topModal.hide();
|
||||||
|
} else if (callback) {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeBackdrop: function (modal) {
|
||||||
|
modal.$backdrop.remove();
|
||||||
|
modal.$backdrop = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
createBackdrop: function (animate) {
|
||||||
|
var $backdrop;
|
||||||
|
|
||||||
|
if (!this.$backdropHandle) {
|
||||||
|
$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
||||||
|
.appendTo(this.$element);
|
||||||
|
} else {
|
||||||
|
$backdrop = this.$backdropHandle;
|
||||||
|
$backdrop.off('.modalmanager');
|
||||||
|
this.$backdropHandle = null;
|
||||||
|
this.isLoading && this.removeSpinner();
|
||||||
|
}
|
||||||
|
|
||||||
|
return $backdrop
|
||||||
|
},
|
||||||
|
|
||||||
|
removeContainer: function (modal) {
|
||||||
|
modal.$container.remove();
|
||||||
|
modal.$container = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
createContainer: function (modal) {
|
||||||
|
var $container;
|
||||||
|
|
||||||
|
$container = $('<div class="modal-scrollable">')
|
||||||
|
.css('z-index', getzIndex( 'modal',
|
||||||
|
modal ? this.getIndexOfModal(modal) : this.stack.length ))
|
||||||
|
.appendTo(this.$element);
|
||||||
|
|
||||||
|
if (modal && modal.options.backdrop != 'static') {
|
||||||
|
$container.on('click.modal', targetIsSelf(function (e) {
|
||||||
|
modal.hide();
|
||||||
|
}));
|
||||||
|
} else if (modal) {
|
||||||
|
$container.on('click.modal', targetIsSelf(function (e) {
|
||||||
|
modal.attention();
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
return $container;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
backdrop: function (modal, callback) {
|
||||||
|
var animate = modal.$element.hasClass('fade') ? 'fade' : '',
|
||||||
|
showBackdrop = modal.options.backdrop &&
|
||||||
|
this.backdropCount < this.options.backdropLimit;
|
||||||
|
|
||||||
|
if (modal.isShown && showBackdrop) {
|
||||||
|
var doAnimate = $.support.transition && animate && !this.$backdropHandle;
|
||||||
|
|
||||||
|
modal.$backdrop = this.createBackdrop(animate);
|
||||||
|
|
||||||
|
modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getIndexOfModal(modal) ));
|
||||||
|
|
||||||
|
if (doAnimate) modal.$backdrop[0].offsetWidth; // force reflow
|
||||||
|
|
||||||
|
modal.$backdrop.addClass('in');
|
||||||
|
|
||||||
|
this.backdropCount += 1;
|
||||||
|
|
||||||
|
doAnimate ?
|
||||||
|
modal.$backdrop.one($.support.transition.end, callback) :
|
||||||
|
callback();
|
||||||
|
|
||||||
|
} else if (!modal.isShown && modal.$backdrop) {
|
||||||
|
modal.$backdrop.removeClass('in');
|
||||||
|
|
||||||
|
this.backdropCount -= 1;
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
$.support.transition && modal.$element.hasClass('fade')?
|
||||||
|
modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) :
|
||||||
|
that.removeBackdrop(modal);
|
||||||
|
|
||||||
|
} else if (callback) {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeSpinner: function(){
|
||||||
|
this.$spinner && this.$spinner.remove();
|
||||||
|
this.$spinner = null;
|
||||||
|
this.isLoading = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeLoading: function () {
|
||||||
|
this.$backdropHandle && this.$backdropHandle.remove();
|
||||||
|
this.$backdropHandle = null;
|
||||||
|
this.removeSpinner();
|
||||||
|
},
|
||||||
|
|
||||||
|
loading: function (callback) {
|
||||||
|
callback = callback || function () { };
|
||||||
|
|
||||||
|
this.$element
|
||||||
|
.toggleClass('modal-open', !this.isLoading || this.hasOpenModal())
|
||||||
|
.toggleClass('page-overflow', $(window).height() < this.$element.height());
|
||||||
|
|
||||||
|
if (!this.isLoading) {
|
||||||
|
|
||||||
|
this.$backdropHandle = this.createBackdrop('fade');
|
||||||
|
|
||||||
|
this.$backdropHandle[0].offsetWidth; // force reflow
|
||||||
|
|
||||||
|
this.$backdropHandle
|
||||||
|
.css('z-index', getzIndex('backdrop', this.stack.length))
|
||||||
|
.addClass('in');
|
||||||
|
|
||||||
|
var $spinner = $(this.options.spinner)
|
||||||
|
.css('z-index', getzIndex('modal', this.stack.length))
|
||||||
|
.appendTo(this.$element)
|
||||||
|
.addClass('in');
|
||||||
|
|
||||||
|
this.$spinner = $(this.createContainer())
|
||||||
|
.append($spinner)
|
||||||
|
.on('click.modalmanager', $.proxy(this.loading, this));
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
$.support.transition ?
|
||||||
|
this.$backdropHandle.one($.support.transition.end, callback) :
|
||||||
|
callback();
|
||||||
|
|
||||||
|
} else if (this.isLoading && this.$backdropHandle) {
|
||||||
|
this.$backdropHandle.removeClass('in');
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
$.support.transition ?
|
||||||
|
this.$backdropHandle.one($.support.transition.end, function () { that.removeLoading() }) :
|
||||||
|
that.removeLoading();
|
||||||
|
|
||||||
|
} else if (callback) {
|
||||||
|
callback(this.isLoading);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* PRIVATE METHODS
|
||||||
|
* ======================= */
|
||||||
|
|
||||||
|
// computes and caches the zindexes
|
||||||
|
var getzIndex = (function () {
|
||||||
|
var zIndexFactor,
|
||||||
|
baseIndex = {};
|
||||||
|
|
||||||
|
return function (type, pos) {
|
||||||
|
|
||||||
|
if (typeof zIndexFactor === 'undefined'){
|
||||||
|
var $baseModal = $('<div class="modal hide" />').appendTo('body'),
|
||||||
|
$baseBackdrop = $('<div class="modal-backdrop hide" />').appendTo('body');
|
||||||
|
|
||||||
|
baseIndex['modal'] = +$baseModal.css('z-index');
|
||||||
|
baseIndex['backdrop'] = +$baseBackdrop.css('z-index');
|
||||||
|
zIndexFactor = baseIndex['modal'] - baseIndex['backdrop'];
|
||||||
|
|
||||||
|
$baseModal.remove();
|
||||||
|
$baseBackdrop.remove();
|
||||||
|
$baseBackdrop = $baseModal = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return baseIndex[type] + (zIndexFactor * pos);
|
||||||
|
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
|
||||||
|
// make sure the event target is the modal itself in order to prevent
|
||||||
|
// other components such as tabsfrom triggering the modal manager.
|
||||||
|
// if Boostsrap namespaced events, this would not be needed.
|
||||||
|
function targetIsSelf(callback){
|
||||||
|
return function (e) {
|
||||||
|
if (this === e.target){
|
||||||
|
return callback.apply(this, arguments);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL MANAGER PLUGIN DEFINITION
|
||||||
|
* ======================= */
|
||||||
|
|
||||||
|
$.fn.modalmanager = function (option, args) {
|
||||||
|
return this.each(function () {
|
||||||
|
var $this = $(this),
|
||||||
|
data = $this.data('modalmanager');
|
||||||
|
|
||||||
|
if (!data) $this.data('modalmanager', (data = new ModalManager(this, option)));
|
||||||
|
if (typeof option === 'string') data[option].apply(data, [].concat(args))
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.modalmanager.defaults = {
|
||||||
|
backdropLimit: 999,
|
||||||
|
resize: true,
|
||||||
|
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>'
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.modalmanager.Constructor = ModalManager
|
||||||
|
|
||||||
|
}(jQuery);
|
Loading…
Reference in New Issue