bootstrap-modalmanager.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. /* ===========================================================
  2. * bootstrap-modalmanager.js v2.2.4
  3. * ===========================================================
  4. * Copyright 2012 Jordan Schroter.
  5. *
  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
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  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. * ========================================================== */
  18. !function ($) {
  19. "use strict"; // jshint ;_;
  20. /* MODAL MANAGER CLASS DEFINITION
  21. * ====================== */
  22. var ModalManager = function (element, options) {
  23. this.init(element, options);
  24. };
  25. ModalManager.prototype = {
  26. constructor: ModalManager,
  27. init: function (element, options) {
  28. this.$element = $(element);
  29. this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
  30. this.stack = [];
  31. this.backdropCount = 0;
  32. if (this.options.resize) {
  33. var resizeTimeout,
  34. that = this;
  35. $(window).on('resize.modal', function(){
  36. resizeTimeout && clearTimeout(resizeTimeout);
  37. resizeTimeout = setTimeout(function(){
  38. for (var i = 0; i < that.stack.length; i++){
  39. that.stack[i].isShown && that.stack[i].layout();
  40. }
  41. }, 10);
  42. });
  43. }
  44. },
  45. createModal: function (element, options) {
  46. $(element).modal($.extend({ manager: this }, options));
  47. },
  48. appendModal: function (modal) {
  49. this.stack.push(modal);
  50. var that = this;
  51. modal.$element.on('show.modalmanager', targetIsSelf(function (e) {
  52. var showModal = function(){
  53. modal.isShown = true;
  54. var transition = $.support.transition && modal.$element.hasClass('fade');
  55. that.$element
  56. .toggleClass('modal-open', that.hasOpenModal())
  57. .toggleClass('page-overflow', $(window).height() < that.$element.height());
  58. modal.$parent = modal.$element.parent();
  59. modal.$container = that.createContainer(modal);
  60. modal.$element.appendTo(modal.$container);
  61. that.backdrop(modal, function () {
  62. modal.$element.show();
  63. if (transition) {
  64. //modal.$element[0].style.display = 'run-in';
  65. modal.$element[0].offsetWidth;
  66. //modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
  67. }
  68. modal.layout();
  69. modal.$element
  70. .addClass('in')
  71. .attr('aria-hidden', false);
  72. var complete = function () {
  73. that.setFocus();
  74. modal.$element.trigger('shown');
  75. };
  76. transition ?
  77. modal.$element.one($.support.transition.end, complete) :
  78. complete();
  79. });
  80. };
  81. modal.options.replace ?
  82. that.replace(showModal) :
  83. showModal();
  84. }));
  85. modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) {
  86. that.backdrop(modal);
  87. // handle the case when a modal may have been removed from the dom before this callback executes
  88. if (!modal.$element.parent().length) {
  89. that.destroyModal(modal);
  90. } else if (modal.$backdrop){
  91. var transition = $.support.transition && modal.$element.hasClass('fade');
  92. // trigger a relayout due to firebox's buggy transition end event
  93. if (transition) { modal.$element[0].offsetWidth; }
  94. $.support.transition && modal.$element.hasClass('fade') ?
  95. modal.$backdrop.one($.support.transition.end, function () { modal.destroy(); }) :
  96. modal.destroy();
  97. } else {
  98. modal.destroy();
  99. }
  100. }));
  101. modal.$element.on('destroyed.modalmanager', targetIsSelf(function (e) {
  102. that.destroyModal(modal);
  103. }));
  104. },
  105. getOpenModals: function () {
  106. var openModals = [];
  107. for (var i = 0; i < this.stack.length; i++){
  108. if (this.stack[i].isShown) openModals.push(this.stack[i]);
  109. }
  110. return openModals;
  111. },
  112. hasOpenModal: function () {
  113. return this.getOpenModals().length > 0;
  114. },
  115. setFocus: function () {
  116. var topModal;
  117. for (var i = 0; i < this.stack.length; i++){
  118. if (this.stack[i].isShown) topModal = this.stack[i];
  119. }
  120. if (!topModal) return;
  121. topModal.focus();
  122. },
  123. destroyModal: function (modal) {
  124. modal.$element.off('.modalmanager');
  125. if (modal.$backdrop) this.removeBackdrop(modal);
  126. this.stack.splice(this.getIndexOfModal(modal), 1);
  127. var hasOpenModal = this.hasOpenModal();
  128. this.$element.toggleClass('modal-open', hasOpenModal);
  129. if (!hasOpenModal){
  130. this.$element.removeClass('page-overflow');
  131. }
  132. this.removeContainer(modal);
  133. this.setFocus();
  134. },
  135. getModalAt: function (index) {
  136. return this.stack[index];
  137. },
  138. getIndexOfModal: function (modal) {
  139. for (var i = 0; i < this.stack.length; i++){
  140. if (modal === this.stack[i]) return i;
  141. }
  142. },
  143. replace: function (callback) {
  144. var topModal;
  145. for (var i = 0; i < this.stack.length; i++){
  146. if (this.stack[i].isShown) topModal = this.stack[i];
  147. }
  148. if (topModal) {
  149. this.$backdropHandle = topModal.$backdrop;
  150. topModal.$backdrop = null;
  151. callback && topModal.$element.one('hidden',
  152. targetIsSelf( $.proxy(callback, this) ));
  153. topModal.hide();
  154. } else if (callback) {
  155. callback();
  156. }
  157. },
  158. removeBackdrop: function (modal) {
  159. modal.$backdrop.remove();
  160. modal.$backdrop = null;
  161. },
  162. createBackdrop: function (animate, tmpl) {
  163. var $backdrop;
  164. if (!this.$backdropHandle) {
  165. $backdrop = $(tmpl)
  166. .addClass(animate)
  167. .appendTo(this.$element);
  168. } else {
  169. $backdrop = this.$backdropHandle;
  170. $backdrop.off('.modalmanager');
  171. this.$backdropHandle = null;
  172. this.isLoading && this.removeSpinner();
  173. }
  174. return $backdrop;
  175. },
  176. removeContainer: function (modal) {
  177. modal.$container.remove();
  178. modal.$container = null;
  179. },
  180. createContainer: function (modal) {
  181. var $container;
  182. $container = $('<div class="modal-scrollable">')
  183. .css('z-index', getzIndex('modal', this.getOpenModals().length))
  184. .appendTo(this.$element);
  185. if (modal && modal.options.backdrop != 'static') {
  186. $container.on('click.modal', targetIsSelf(function (e) {
  187. modal.hide();
  188. }));
  189. } else if (modal) {
  190. $container.on('click.modal', targetIsSelf(function (e) {
  191. modal.attention();
  192. }));
  193. }
  194. return $container;
  195. },
  196. backdrop: function (modal, callback) {
  197. var animate = modal.$element.hasClass('fade') ? 'fade' : '',
  198. showBackdrop = modal.options.backdrop &&
  199. this.backdropCount < this.options.backdropLimit;
  200. if (modal.isShown && showBackdrop) {
  201. var doAnimate = $.support.transition && animate && !this.$backdropHandle;
  202. modal.$backdrop = this.createBackdrop(animate, modal.options.backdropTemplate);
  203. modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getOpenModals().length ));
  204. if (doAnimate) modal.$backdrop[0].offsetWidth; // force reflow
  205. modal.$backdrop.addClass('in');
  206. this.backdropCount += 1;
  207. doAnimate ?
  208. modal.$backdrop.one($.support.transition.end, callback) :
  209. callback();
  210. } else if (!modal.isShown && modal.$backdrop) {
  211. modal.$backdrop.removeClass('in');
  212. this.backdropCount -= 1;
  213. var that = this;
  214. $.support.transition && modal.$element.hasClass('fade')?
  215. modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) :
  216. that.removeBackdrop(modal);
  217. } else if (callback) {
  218. callback();
  219. }
  220. },
  221. removeSpinner: function(){
  222. this.$spinner && this.$spinner.remove();
  223. this.$spinner = null;
  224. this.isLoading = false;
  225. },
  226. removeLoading: function () {
  227. this.$backdropHandle && this.$backdropHandle.remove();
  228. this.$backdropHandle = null;
  229. this.removeSpinner();
  230. },
  231. loading: function (callback) {
  232. callback = callback || function () { };
  233. this.$element
  234. .toggleClass('modal-open', !this.isLoading || this.hasOpenModal())
  235. .toggleClass('page-overflow', $(window).height() < this.$element.height());
  236. if (!this.isLoading) {
  237. this.$backdropHandle = this.createBackdrop('fade', this.options.backdropTemplate);
  238. this.$backdropHandle[0].offsetWidth; // force reflow
  239. var openModals = this.getOpenModals();
  240. this.$backdropHandle
  241. .css('z-index', getzIndex('backdrop', openModals.length + 1))
  242. .addClass('in');
  243. var $spinner = $(this.options.spinner)
  244. .css('z-index', getzIndex('modal', openModals.length + 1))
  245. .appendTo(this.$element)
  246. .addClass('in');
  247. this.$spinner = $(this.createContainer())
  248. .append($spinner)
  249. .on('click.modalmanager', $.proxy(this.loading, this));
  250. this.isLoading = true;
  251. $.support.transition ?
  252. this.$backdropHandle.one($.support.transition.end, callback) :
  253. callback();
  254. } else if (this.isLoading && this.$backdropHandle) {
  255. this.$backdropHandle.removeClass('in');
  256. var that = this;
  257. $.support.transition ?
  258. this.$backdropHandle.one($.support.transition.end, function () { that.removeLoading() }) :
  259. that.removeLoading();
  260. } else if (callback) {
  261. callback(this.isLoading);
  262. }
  263. }
  264. };
  265. /* PRIVATE METHODS
  266. * ======================= */
  267. // computes and caches the zindexes
  268. var getzIndex = (function () {
  269. var zIndexFactor,
  270. baseIndex = {};
  271. return function (type, pos) {
  272. if (typeof zIndexFactor === 'undefined'){
  273. var $baseModal = $('<div class="modal hide" />').appendTo('body'),
  274. $baseBackdrop = $('<div class="modal-backdrop hide" />').appendTo('body');
  275. baseIndex['modal'] = +$baseModal.css('z-index');
  276. baseIndex['backdrop'] = +$baseBackdrop.css('z-index');
  277. zIndexFactor = baseIndex['modal'] - baseIndex['backdrop'];
  278. $baseModal.remove();
  279. $baseBackdrop.remove();
  280. $baseBackdrop = $baseModal = null;
  281. }
  282. return baseIndex[type] + (zIndexFactor * pos);
  283. }
  284. }());
  285. // make sure the event target is the modal itself in order to prevent
  286. // other components such as tabsfrom triggering the modal manager.
  287. // if Boostsrap namespaced events, this would not be needed.
  288. function targetIsSelf(callback){
  289. return function (e) {
  290. if (this === e.target){
  291. return callback.apply(this, arguments);
  292. }
  293. }
  294. }
  295. /* MODAL MANAGER PLUGIN DEFINITION
  296. * ======================= */
  297. $.fn.modalmanager = function (option, args) {
  298. return this.each(function () {
  299. var $this = $(this),
  300. data = $this.data('modalmanager');
  301. if (!data) $this.data('modalmanager', (data = new ModalManager(this, option)));
  302. if (typeof option === 'string') data[option].apply(data, [].concat(args))
  303. })
  304. };
  305. $.fn.modalmanager.defaults = {
  306. backdropLimit: 999,
  307. resize: true,
  308. spinner: '<div class="loading-spinner fade" style="width:32px;margin-left:-16px; "><img src="data:image/gif;base64,R0lGODlhIAAgALMAAP///7Ozs/v7+9bW1uHh4fLy8rq6uoGBgTQ0NAEBARsbG8TExJeXl/39/VRUVAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAAACwAAAAAIAAgAAAE5xDISSlLrOrNp0pKNRCdFhxVolJLEJQUoSgOpSYT4RowNSsvyW1icA16k8MMMRkCBjskBTFDAZyuAEkqCfxIQ2hgQRFvAQEEIjNxVDW6XNE4YagRjuBCwe60smQUDnd4Rz1ZAQZnFAGDd0hihh12CEE9kjAEVlycXIg7BAsMB6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YEvpJivxNaGmLHT0VnOgGYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHQjYKhKP1oZmADdEAAAh+QQFBQAAACwAAAAAGAAXAAAEchDISasKNeuJFKoHs4mUYlJIkmjIV54Soypsa0wmLSnqoTEtBw52mG0AjhYpBxioEqRNy8V0qFzNw+GGwlJki4lBqx1IBgjMkRIghwjrzcDti2/Gh7D9qN774wQGAYOEfwCChIV/gYmDho+QkZKTR3p7EQAh+QQFBQAAACwBAAAAHQAOAAAEchDISWdANesNHHJZwE2DUSEo5SjKKB2HOKGYFLD1CB/DnEoIlkti2PlyuKGEATMBaAACSyGbEDYD4zN1YIEmh0SCQQgYehNmTNNaKsQJXmBuuEYPi9ECAU/UFnNzeUp9VBQEBoFOLmFxWHNoQw6RWEocEQAh+QQFBQAAACwHAAAAGQARAAAEaRDICdZZNOvNDsvfBhBDdpwZgohBgE3nQaki0AYEjEqOGmqDlkEnAzBUjhrA0CoBYhLVSkm4SaAAWkahCFAWTU0A4RxzFWJnzXFWJJWb9pTihRu5dvghl+/7NQmBggo/fYKHCX8AiAmEEQAh+QQFBQAAACwOAAAAEgAYAAAEZXCwAaq9ODAMDOUAI17McYDhWA3mCYpb1RooXBktmsbt944BU6zCQCBQiwPB4jAihiCK86irTB20qvWp7Xq/FYV4TNWNz4oqWoEIgL0HX/eQSLi69boCikTkE2VVDAp5d1p0CW4RACH5BAUFAAAALA4AAAASAB4AAASAkBgCqr3YBIMXvkEIMsxXhcFFpiZqBaTXisBClibgAnd+ijYGq2I4HAamwXBgNHJ8BEbzgPNNjz7LwpnFDLvgLGJMdnw/5DRCrHaE3xbKm6FQwOt1xDnpwCvcJgcJMgEIeCYOCQlrF4YmBIoJVV2CCXZvCooHbwGRcAiKcmFUJhEAIfkEBQUAAAAsDwABABEAHwAABHsQyAkGoRivELInnOFlBjeM1BCiFBdcbMUtKQdTN0CUJru5NJQrYMh5VIFTTKJcOj2HqJQRhEqvqGuU+uw6AwgEwxkOO55lxIihoDjKY8pBoThPxmpAYi+hKzoeewkTdHkZghMIdCOIhIuHfBMOjxiNLR4KCW1ODAlxSxEAIfkEBQUAAAAsCAAOABgAEgAABGwQyEkrCDgbYvvMoOF5ILaNaIoGKroch9hacD3MFMHUBzMHiBtgwJMBFolDB4GoGGBCACKRcAAUWAmzOWJQExysQsJgWj0KqvKalTiYPhp1LBFTtp10Is6mT5gdVFx1bRN8FTsVCAqDOB9+KhEAIfkEBQUAAAAsAgASAB0ADgAABHgQyEmrBePS4bQdQZBdR5IcHmWEgUFQgWKaKbWwwSIhc4LonsXhBSCsQoOSScGQDJiWwOHQnAxWBIYJNXEoFCiEWDI9jCzESey7GwMM5doEwW4jJoypQQ743u1WcTV0CgFzbhJ5XClfHYd/EwZnHoYVDgiOfHKQNREAIfkEBQUAAAAsAAAPABkAEQAABGeQqUQruDjrW3vaYCZ5X2ie6EkcKaooTAsi7ytnTq046BBsNcTvItz4AotMwKZBIC6H6CVAJaCcT0CUBTgaTg5nTCu9GKiDEMPJg5YBBOpwlnVzLwtqyKnZagZWahoMB2M3GgsHSRsRACH5BAUFAAAALAEACAARABgAAARcMKR0gL34npkUyyCAcAmyhBijkGi2UW02VHFt33iu7yiDIDaD4/erEYGDlu/nuBAOJ9Dvc2EcDgFAYIuaXS3bbOh6MIC5IAP5Eh5fk2exC4tpgwZyiyFgvhEMBBEAIfkEBQUAAAAsAAACAA4AHQAABHMQyAnYoViSlFDGXBJ808Ep5KRwV8qEg+pRCOeoioKMwJK0Ekcu54h9AoghKgXIMZgAApQZcCCu2Ax2O6NUud2pmJcyHA4L0uDM/ljYDCnGfGakJQE5YH0wUBYBAUYfBIFkHwaBgxkDgX5lgXpHAXcpBIsRADs="></div></div>',
  309. backdropTemplate: '<div class="modal-backdrop" />'
  310. };
  311. $.fn.modalmanager.Constructor = ModalManager
  312. // ModalManager handles the modal-open class so we need
  313. // to remove conflicting bootstrap 3 event handlers
  314. $(function () {
  315. $(document).off('show.bs.modal').off('hidden.bs.modal');
  316. });
  317. }(jQuery);