UNPKG

6.68 kBJavaScriptView Raw
1/* =========================================================
2 * bootstrap-modal.js v1.4.0
3 * http://twitter.github.com/bootstrap/javascript.html#modal
4 * =========================================================
5 * Copyright 2011 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"
24
25 /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
26 * ======================================================= */
27
28 var transitionEnd
29
30 $(document).ready(function () {
31
32 $.support.transition = (function () {
33 var thisBody = document.body || document.documentElement
34 , thisStyle = thisBody.style
35 , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
36 return support
37 })()
38
39 // set CSS transition event type
40 if ( $.support.transition ) {
41 transitionEnd = "TransitionEnd"
42 if ( $.browser.webkit ) {
43 transitionEnd = "webkitTransitionEnd"
44 } else if ( $.browser.mozilla ) {
45 transitionEnd = "transitionend"
46 } else if ( $.browser.opera ) {
47 transitionEnd = "oTransitionEnd"
48 }
49 }
50
51 })
52
53
54 /* MODAL PUBLIC CLASS DEFINITION
55 * ============================= */
56
57 var Modal = function ( content, options ) {
58 this.settings = $.extend({}, $.fn.modal.defaults, options)
59 this.$element = $(content)
60 .delegate('.close', 'click.modal', $.proxy(this.hide, this))
61
62 if ( this.settings.show ) {
63 this.show()
64 }
65
66 return this
67 }
68
69 Modal.prototype = {
70
71 toggle: function () {
72 return this[!this.isShown ? 'show' : 'hide']()
73 }
74
75 , show: function () {
76 var that = this
77 this.isShown = true
78 this.$element.trigger('show')
79
80 escape.call(this)
81 backdrop.call(this, function () {
82 var transition = $.support.transition && that.$element.hasClass('fade')
83
84 that.$element
85 .appendTo(document.body)
86 .show()
87
88 if (transition) {
89 that.$element[0].offsetWidth // force reflow
90 }
91
92 that.$element.addClass('in')
93
94 transition ?
95 that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
96 that.$element.trigger('shown')
97
98 })
99
100 return this
101 }
102
103 , hide: function (e) {
104 e && e.preventDefault()
105
106 if ( !this.isShown ) {
107 return this
108 }
109
110 var that = this
111 this.isShown = false
112
113 escape.call(this)
114
115 this.$element
116 .trigger('hide')
117 .removeClass('in')
118
119 $.support.transition && this.$element.hasClass('fade') ?
120 hideWithTransition.call(this) :
121 hideModal.call(this)
122
123 return this
124 }
125
126 }
127
128
129 /* MODAL PRIVATE METHODS
130 * ===================== */
131
132 function hideWithTransition() {
133 // firefox drops transitionEnd events :{o
134 var that = this
135 , timeout = setTimeout(function () {
136 that.$element.unbind(transitionEnd)
137 hideModal.call(that)
138 }, 500)
139
140 this.$element.one(transitionEnd, function () {
141 clearTimeout(timeout)
142 hideModal.call(that)
143 })
144 }
145
146 function hideModal (that) {
147 this.$element
148 .hide()
149 .trigger('hidden')
150
151 backdrop.call(this)
152 }
153
154 function backdrop ( callback ) {
155 var that = this
156 , animate = this.$element.hasClass('fade') ? 'fade' : ''
157 if ( this.isShown && this.settings.backdrop ) {
158 var doAnimate = $.support.transition && animate
159
160 this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
161 .appendTo(document.body)
162
163 if ( this.settings.backdrop != 'static' ) {
164 this.$backdrop.click($.proxy(this.hide, this))
165 }
166
167 if ( doAnimate ) {
168 this.$backdrop[0].offsetWidth // force reflow
169 }
170
171 this.$backdrop.addClass('in')
172
173 doAnimate ?
174 this.$backdrop.one(transitionEnd, callback) :
175 callback()
176
177 } else if ( !this.isShown && this.$backdrop ) {
178 this.$backdrop.removeClass('in')
179
180 $.support.transition && this.$element.hasClass('fade')?
181 this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :
182 removeBackdrop.call(this)
183
184 } else if ( callback ) {
185 callback()
186 }
187 }
188
189 function removeBackdrop() {
190 this.$backdrop.remove()
191 this.$backdrop = null
192 }
193
194 function escape() {
195 var that = this
196 if ( this.isShown && this.settings.keyboard ) {
197 $(document).bind('keyup.modal', function ( e ) {
198 if ( e.which == 27 ) {
199 that.hide()
200 }
201 })
202 } else if ( !this.isShown ) {
203 $(document).unbind('keyup.modal')
204 }
205 }
206
207
208 /* MODAL PLUGIN DEFINITION
209 * ======================= */
210
211 $.fn.modal = function ( options ) {
212 var modal = this.data('modal')
213
214 if (!modal) {
215
216 if (typeof options == 'string') {
217 options = {
218 show: /show|toggle/.test(options)
219 }
220 }
221
222 return this.each(function () {
223 $(this).data('modal', new Modal(this, options))
224 })
225 }
226
227 if ( options === true ) {
228 return modal
229 }
230
231 if ( typeof options == 'string' ) {
232 modal[options]()
233 } else if ( modal ) {
234 modal.toggle()
235 }
236
237 return this
238 }
239
240 $.fn.modal.Modal = Modal
241
242 $.fn.modal.defaults = {
243 backdrop: false
244 , keyboard: false
245 , show: false
246 }
247
248
249 /* MODAL DATA- IMPLEMENTATION
250 * ========================== */
251
252 $(document).ready(function () {
253 $('body').delegate('[data-controls-modal]', 'click', function (e) {
254 e.preventDefault()
255 var $this = $(this).data('show', true)
256 $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
257 })
258 })
259
260}( window.jQuery || window.ender );