bootstrap-modal.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. /* ===========================================================
  2. * bootstrap-modal.js v2.1
  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 CLASS DEFINITION
  21. * ====================== */
  22. var Modal = function (element, options) {
  23. this.init(element, options);
  24. };
  25. Modal.prototype = {
  26. constructor: Modal,
  27. init: function (element, options) {
  28. this.options = options;
  29. this.$element = $(element)
  30. .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this));
  31. this.options.remote && this.$element.find('.modal-body').load(this.options.remote);
  32. var manager = typeof this.options.manager === 'function' ?
  33. this.options.manager.call(this) : this.options.manager;
  34. manager = manager.appendModal ?
  35. manager : $(manager).modalmanager().data('modalmanager');
  36. manager.appendModal(this);
  37. },
  38. toggle: function () {
  39. return this[!this.isShown ? 'show' : 'hide']();
  40. },
  41. show: function () {
  42. var e = $.Event('show');
  43. if (this.isShown) return;
  44. this.$element.trigger(e);
  45. if (e.isDefaultPrevented()) return;
  46. this.escape();
  47. this.tab();
  48. this.options.loading && this.loading();
  49. },
  50. hide: function (e) {
  51. e && e.preventDefault();
  52. e = $.Event('hide');
  53. this.$element.trigger(e);
  54. if (!this.isShown || e.isDefaultPrevented()) return (this.isShown = false);
  55. this.isShown = false;
  56. this.escape();
  57. this.tab();
  58. this.isLoading && this.loading();
  59. $(document).off('focusin.modal');
  60. this.$element
  61. .removeClass('in')
  62. .removeClass('animated')
  63. .removeClass(this.options.attentionAnimation)
  64. .removeClass('modal-overflow')
  65. .attr('aria-hidden', true);
  66. $.support.transition && this.$element.hasClass('fade') ?
  67. this.hideWithTransition() :
  68. this.hideModal();
  69. },
  70. layout: function () {
  71. var prop = this.options.height ? 'height' : 'max-height',
  72. value = this.options.height || this.options.maxHeight;
  73. if (this.options.width){
  74. this.$element.css('width', this.options.width);
  75. var that = this;
  76. this.$element.css('margin-left', function () {
  77. if (/%/ig.test(that.options.width)){
  78. return -(parseInt(that.options.width) / 2) + '%';
  79. } else {
  80. return -($(this).width() / 2) + 'px';
  81. }
  82. });
  83. } else {
  84. this.$element.css('width', '');
  85. this.$element.css('margin-left', '');
  86. }
  87. this.$element.find('.modal-body')
  88. .css('overflow', '')
  89. .css(prop, '');
  90. if (value){
  91. this.$element.find('.modal-body')
  92. .css('overflow', 'auto')
  93. .css(prop, value);
  94. }
  95. var modalOverflow = $(window).height() - 10 < this.$element.height();
  96. if (modalOverflow || this.options.modalOverflow) {
  97. this.$element
  98. .css('margin-top', 0)
  99. .addClass('modal-overflow');
  100. } else {
  101. this.$element
  102. .css('margin-top', 0 - this.$element.height() / 2)
  103. .removeClass('modal-overflow');
  104. }
  105. },
  106. tab: function () {
  107. var that = this;
  108. if (this.isShown && this.options.consumeTab) {
  109. this.$element.on('keydown.tabindex.modal', '[data-tabindex]', function (e) {
  110. if (e.keyCode && e.keyCode == 9){
  111. var $next = $(this),
  112. $rollover = $(this);
  113. that.$element.find('[data-tabindex]:enabled:not([readonly])').each(function (e) {
  114. if (!e.shiftKey){
  115. $next = $next.data('tabindex') < $(this).data('tabindex') ?
  116. $next = $(this) :
  117. $rollover = $(this);
  118. } else {
  119. $next = $next.data('tabindex') > $(this).data('tabindex') ?
  120. $next = $(this) :
  121. $rollover = $(this);
  122. }
  123. });
  124. $next[0] !== $(this)[0] ?
  125. $next.focus() : $rollover.focus();
  126. e.preventDefault();
  127. }
  128. });
  129. } else if (!this.isShown) {
  130. this.$element.off('keydown.tabindex.modal');
  131. }
  132. },
  133. escape: function () {
  134. var that = this;
  135. if (this.isShown && this.options.keyboard) {
  136. if (!this.$element.attr('tabindex')) this.$element.attr('tabindex', -1);
  137. this.$element.on('keyup.dismiss.modal', function (e) {
  138. e.which == 27 && that.hide();
  139. });
  140. } else if (!this.isShown) {
  141. this.$element.off('keyup.dismiss.modal')
  142. }
  143. },
  144. hideWithTransition: function () {
  145. var that = this
  146. , timeout = setTimeout(function () {
  147. that.$element.off($.support.transition.end);
  148. that.hideModal();
  149. }, 500);
  150. this.$element.one($.support.transition.end, function () {
  151. clearTimeout(timeout);
  152. that.hideModal();
  153. });
  154. },
  155. hideModal: function () {
  156. var prop = this.options.height ? 'height' : 'max-height';
  157. var value = this.options.height || this.options.maxHeight;
  158. if (value){
  159. this.$element.find('.modal-body')
  160. .css('overflow', '')
  161. .css(prop, '');
  162. }
  163. this.$element
  164. .hide()
  165. .trigger('hidden');
  166. },
  167. removeLoading: function () {
  168. this.$loading.remove();
  169. this.$loading = null;
  170. this.isLoading = false;
  171. },
  172. loading: function (callback) {
  173. callback = callback || function () {};
  174. var animate = this.$element.hasClass('fade') ? 'fade' : '';
  175. if (!this.isLoading) {
  176. var doAnimate = $.support.transition && animate;
  177. this.$loading = $('<div class="loading-mask ' + animate + '">')
  178. .append(this.options.spinner)
  179. .appendTo(this.$element);
  180. if (doAnimate) this.$loading[0].offsetWidth; // force reflow
  181. this.$loading.addClass('in');
  182. this.isLoading = true;
  183. doAnimate ?
  184. this.$loading.one($.support.transition.end, callback) :
  185. callback();
  186. } else if (this.isLoading && this.$loading) {
  187. this.$loading.removeClass('in');
  188. var that = this;
  189. $.support.transition && this.$element.hasClass('fade')?
  190. this.$loading.one($.support.transition.end, function () { that.removeLoading() }) :
  191. that.removeLoading();
  192. } else if (callback) {
  193. callback(this.isLoading);
  194. }
  195. },
  196. focus: function () {
  197. var $focusElem = this.$element.find(this.options.focusOn);
  198. $focusElem = $focusElem.length ? $focusElem : this.$element;
  199. $focusElem.focus();
  200. },
  201. attention: function (){
  202. // NOTE: transitionEnd with keyframes causes odd behaviour
  203. if (this.options.attentionAnimation){
  204. this.$element
  205. .removeClass('animated')
  206. .removeClass(this.options.attentionAnimation);
  207. var that = this;
  208. setTimeout(function () {
  209. that.$element
  210. .addClass('animated')
  211. .addClass(that.options.attentionAnimation);
  212. }, 0);
  213. }
  214. this.focus();
  215. },
  216. destroy: function () {
  217. var e = $.Event('destroy');
  218. this.$element.trigger(e);
  219. if (e.isDefaultPrevented()) return;
  220. this.teardown();
  221. },
  222. teardown: function () {
  223. if (!this.$parent.length){
  224. this.$element.remove();
  225. this.$element = null;
  226. return;
  227. }
  228. if (this.$parent !== this.$element.parent()){
  229. this.$element.appendTo(this.$parent);
  230. }
  231. this.$element.off('.modal');
  232. this.$element.removeData('modal');
  233. this.$element
  234. .removeClass('in')
  235. .attr('aria-hidden', true);
  236. }
  237. };
  238. /* MODAL PLUGIN DEFINITION
  239. * ======================= */
  240. $.fn.modal = function (option, args) {
  241. return this.each(function () {
  242. var $this = $(this),
  243. data = $this.data('modal'),
  244. options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option);
  245. if (!data) $this.data('modal', (data = new Modal(this, options)));
  246. if (typeof option == 'string') data[option].apply(data, [].concat(args));
  247. else if (options.show) data.show()
  248. })
  249. };
  250. $.fn.modal.defaults = {
  251. keyboard: true,
  252. backdrop: true,
  253. loading: false,
  254. show: true,
  255. width: null,
  256. height: null,
  257. maxHeight: null,
  258. modalOverflow: false,
  259. consumeTab: true,
  260. focusOn: null,
  261. replace: false,
  262. resize: false,
  263. attentionAnimation: 'shake',
  264. manager: 'body',
  265. 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>'
  266. };
  267. $.fn.modal.Constructor = Modal;
  268. /* MODAL DATA-API
  269. * ============== */
  270. $(function () {
  271. $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
  272. var $this = $(this),
  273. href = $this.attr('href'),
  274. $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7
  275. option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data());
  276. e.preventDefault();
  277. $target
  278. .modal(option)
  279. .one('hide', function () {
  280. $this.focus();
  281. })
  282. });
  283. });
  284. }(window.jQuery);