src/bootstrap/js/bootstrap-modal.js

   1 /* =========================================================
   2  * bootstrap-modal.js v2.2.2
   3  * http://twitter.github.com/bootstrap/javascript.html#modals
   4  * =========================================================
   5  * Copyright 2012 Twitter, Inc.
   6  *
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  * http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ========================================================= */
  19
  20
  21 !function ($) {
  22
  23   "use strict"; // jshint ;_;
  24
  25
  26  /* MODAL CLASS DEFINITION
  27   * ====================== */
  28
  29   var Modal = function (element, options) {
  30     this.options = options
  31     this.$element = $(element)
  32       .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
  33     this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
  34   }
  35
  36   Modal.prototype = {
  37
  38       constructor: Modal
  39
  40     , toggle: function () {
  41         return this[!this.isShown ? 'show' : 'hide']()
  42       }
  43
  44     , show: function () {
  45         var that = this
  46           , e = $.Event('show')
  47
  48         this.$element.trigger(e)
  49
  50         if (this.isShown || e.isDefaultPrevented()) return
  51
  52         this.isShown = true
  53
  54         this.escape()
  55
  56         this.backdrop(function () {
  57           var transition = $.support.transition && that.$element.hasClass('fade')
  58
  59           if (!that.$element.parent().length) {
  60             that.$element.appendTo(document.body) //don't move modals dom position
  61           }
  62
  63           that.$element
  64             .show()
  65
  66           if (transition) {
  67             that.$element[0].offsetWidth // force reflow
  68           }
  69
  70           that.$element
  71             .addClass('in')
  72             .attr('aria-hidden', false)
  73
  74           that.enforceFocus()
  75
  76           transition ?
  77             that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) :
  78             that.$element.focus().trigger('shown')
  79
  80         })
  81       }
  82
  83     , hide: function (e) {
  84         e && e.preventDefault()
  85
  86         var that = this
  87
  88         e = $.Event('hide')
  89
  90         this.$element.trigger(e)
  91
  92         if (!this.isShown || e.isDefaultPrevented()) return
  93
  94         this.isShown = false
  95
  96         this.escape()
  97
  98         $(document).off('focusin.modal')
  99
 100         this.$element
 101           .removeClass('in')
 102           .attr('aria-hidden', true)
 103
 104         $.support.transition && this.$element.hasClass('fade') ?
 105           this.hideWithTransition() :
 106           this.hideModal()
 107       }
 108
 109     , enforceFocus: function () {
 110         var that = this
 111         $(document).on('focusin.modal', function (e) {
 112           if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
 113             that.$element.focus()
 114           }
 115         })
 116       }
 117
 118     , escape: function () {
 119         var that = this
 120         if (this.isShown && this.options.keyboard) {
 121           this.$element.on('keyup.dismiss.modal', function ( e ) {
 122             e.which == 27 && that.hide()
 123           })
 124         } else if (!this.isShown) {
 125           this.$element.off('keyup.dismiss.modal')
 126         }
 127       }
 128
 129     , hideWithTransition: function () {
 130         var that = this
 131           , timeout = setTimeout(function () {
 132               that.$element.off($.support.transition.end)
 133               that.hideModal()
 134             }, 500)
 135
 136         this.$element.one($.support.transition.end, function () {
 137           clearTimeout(timeout)
 138           that.hideModal()
 139         })
 140       }
 141
 142     , hideModal: function (that) {
 143         this.$element
 144           .hide()
 145           .trigger('hidden')
 146
 147         this.backdrop()
 148       }
 149
 150     , removeBackdrop: function () {
 151         this.$backdrop.remove()
 152         this.$backdrop = null
 153       }
 154
 155     , backdrop: function (callback) {
 156         var that = this
 157           , animate = this.$element.hasClass('fade') ? 'fade' : ''
 158
 159         if (this.isShown && this.options.backdrop) {
 160           var doAnimate = $.support.transition && animate
 161
 162           this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
 163             .appendTo(document.body)
 164
 165           this.$backdrop.click(
 166             this.options.backdrop == 'static' ?
 167               $.proxy(this.$element[0].focus, this.$element[0])
 168             : $.proxy(this.hide, this)
 169           )
 170
 171           if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
 172
 173           this.$backdrop.addClass('in')
 174
 175           doAnimate ?
 176             this.$backdrop.one($.support.transition.end, callback) :
 177             callback()
 178
 179         } else if (!this.isShown && this.$backdrop) {
 180           this.$backdrop.removeClass('in')
 181
 182           $.support.transition && this.$element.hasClass('fade')?
 183             this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
 184             this.removeBackdrop()
 185
 186         } else if (callback) {
 187           callback()
 188         }
 189       }
 190   }
 191
 192
 193  /* MODAL PLUGIN DEFINITION
 194   * ======================= */
 195
 196   var old = $.fn.modal
 197
 198   $.fn.modal = function (option) {
 199     return this.each(function () {
 200       var $this = $(this)
 201         , data = $this.data('modal')
 202         , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
 203       if (!data) $this.data('modal', (data = new Modal(this, options)))
 204       if (typeof option == 'string') data[option]()
 205       else if (options.show) data.show()
 206     })
 207   }
 208
 209   $.fn.modal.defaults = {
 210       backdrop: true
 211     , keyboard: true
 212     , show: true
 213   }
 214
 215   $.fn.modal.Constructor = Modal
 216
 217
 218  /* MODAL NO CONFLICT
 219   * ================= */
 220
 221   $.fn.modal.noConflict = function () {
 222     $.fn.modal = old
 223     return this
 224   }
 225
 226
 227  /* MODAL DATA-API
 228   * ============== */
 229
 230   $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
 231     var $this = $(this)
 232       , href = $this.attr('href')
 233       , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
 234       , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
 235
 236     e.preventDefault()
 237
 238     $target
 239       .modal(option)
 240       .one('hide', function () {
 241         $this.focus()
 242       })
 243   })
 244
 245 }(window.jQuery);