bootstrap-lightbox.js - warvox - VoIP based wardialing tool, forked from rapid7/warvox.
(HTM) git clone git://jay.scot/warvox
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
---
bootstrap-lightbox.js (8635B)
---
1 /*!=========================================================
2 * bootstrap-lightbox v0.4.1 - 11/20/2012
3 * http://jbutz.github.com/bootstrap-lightbox/
4 * HEAVILY based off bootstrap-modal.js
5 * ==========================================================
6 * Copyright (c) 2012 Jason Butz (http://jasonbutz.info)
7 *
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
11 *
12 * http://www.apache.org/licenses/LICENSE-2.0
13 *
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ========================================================= */
20
21
22 !function ($) {
23 // browser:true, jquery:true, node:true, laxbreak:true
24 "use strict"; // jshint ;_;
25
26
27 /* LIGHTBOX CLASS DEFINITION
28 * ========================= */
29
30 var Lightbox = function (element, options)
31 {
32 this.options = options;
33 this.$element = $(element)
34 .delegate('[data-dismiss="lightbox"]', 'click.dismiss.lightbox', $.proxy(this.hide, this));
35
36 this.options.remote && this.$element.find('.lightbox-body').load(this.options.remote);
37
38 this.cloneSize();
39 }
40
41 Lightbox.prototype = {
42 constructor: Lightbox,
43
44 toggle: function ()
45 {
46 return this[!this.isShown ? 'show' : 'hide']();
47 },
48
49 show: function ()
50 {
51 var that = this;
52 var e = $.Event('show')
53
54 this.$element.trigger(e);
55
56 if (this.isShown || e.isDefaultPrevented()) return;
57
58
59 this.isShown = true;
60
61 this.escape();
62
63 this.backdrop(function ()
64 {
65 var transition = $.support.transition && that.$element.hasClass('fade');
66
67 if (!that.$element.parent().length)
68 {
69 that.$element.appendTo(document.body); //don't move modals dom position
70 }
71
72 that.$element
73 .show();
74
75 if (transition)
76 {
77 that.$element[0].offsetWidth; // force reflow
78 }
79
80 that.$element
81 .addClass('in')
82 .attr('aria-hidden', false);
83
84 that.enforceFocus();
85
86 transition ?
87 that.$element.one($.support.transition.end, function () { that.centerImage(); that.$element.focus().trigger('shown'); }) :
88 (function(){ that.centerImage(); that.$element.focus().trigger('shown'); })()
89
90 });
91 },
92 hide: function (e)
93 {
94 e && e.preventDefault();
95
96 var that = this;
97
98 e = $.Event('hide');
99
100 this.$element.trigger(e);
101
102 if (!this.isShown || e.isDefaultPrevented()) return;
103
104 this.isShown = false;
105
106 this.escape();
107
108 $(document).off('focusin.lightbox');
109
110 this.$element
111 .removeClass('in')
112 .attr('aria-hidden', true);
113
114 $.support.transition && this.$element.hasClass('fade') ?
115 this.hideWithTransition() :
116 this.hideLightbox();
117 },
118 enforceFocus: function ()
119 {
120 var that = this;
121 $(document).on('focusin.lightbox', function (e)
122 {
123 if (that.$element[0] !== e.target && !that.$element.has(e.target).length)
124 {
125 that.$element.focus();
126 }
127 });
128 },
129 escape: function ()
130 {
131 var that = this;
132 if (this.isShown && this.options.keyboard)
133 {
134 this.$element.on('keyup.dismiss.lightbox', function ( e )
135 {
136 e.which == 27 && that.hide();
137 });
138 }
139 else if (!this.isShown)
140 {
141 this.$element.off('keyup.dismiss.lightbox');
142 }
143 },
144 hideWithTransition: function ()
145 {
146 var that = this;
147 var timeout = setTimeout(function ()
148 {
149 that.$element.off($.support.transition.end);
150 that.hideLightbox();
151 }, 500);
152
153 this.$element.one($.support.transition.end, function ()
154 {
155 clearTimeout(timeout);
156 that.hideLightbox();
157 });
158 },
159 hideLightbox: function (that)
160 {
161 this.$element
162 .hide()
163 .trigger('hidden');
164
165 this.backdrop();
166 },
167 removeBackdrop: function ()
168 {
169 this.$backdrop.remove();
170 this.$backdrop = null;
171 },
172 backdrop: function (callback)
173 {
174 var that = this;
175 var animate = this.$element.hasClass('fade') ? 'fade' : '';
176
177 if (this.isShown && this.options.backdrop)
178 {
179 var doAnimate = $.support.transition && animate;
180
181 this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
182 .appendTo(document.body);
183
184 this.$backdrop.click(
185 this.options.backdrop == 'static' ?
186 $.proxy(this.$element[0].focus, this.$element[0]) :
187 $.proxy(this.hide, this)
188 );
189
190 if (doAnimate) this.$backdrop[0].offsetWidth; // force reflow
191
192 this.$backdrop.addClass('in');
193
194 doAnimate ?
195 this.$backdrop.one($.support.transition.end, callback) :
196 callback();
197
198 }
199 else if (!this.isShown && this.$backdrop)
200 {
201 this.$backdrop.removeClass('in');
202
203 $.support.transition && this.$element.hasClass('fade')?
204 this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
205 this.removeBackdrop();
206
207 }
208 else if (callback)
209 {
210 callback();
211 }
212 },
213 centerImage: function()
214 {
215 var that = this;
216 var resizedOffs = 0;
217 var $img;
218
219 that.h = that.$element.height();
220 that.w = that.$element.width();
221
222 if(that.options.resizeToFit)
223 {
224
225 resizedOffs = 10;
226 $img = that.$element.find('.lightbox-content').find('img:first');
227 // Save original filesize
228 if(!$img.data('osizew')) $img.data('osizew', $img.width());
229 if(!$img.data('osizeh')) $img.data('osizeh', $img.height());
230
231 var osizew = $img.data('osizew');
232 var osizeh = $img.data('osizeh');
233
234 // Resize for window dimension < than image
235 // Reset previous
236 $img.css('max-width', 'none');
237 $img.css('max-height', 'none');
238
239
240 var sOffs = 40; // STYLE ?
241 if(that.$element.find('.lightbox-header').length > 0) sOffs += 10;
242 $img.css('max-width', $(window).width() - sOffs);
243 $img.css('max-height', $(window).height() - sOffs);
244
245 that.w = $img.width();
246 that.h = $img.height();
247 }
248
249 that.$element.css({
250 "position": "fixed",
251 "left": ( $(window).width() / 2 ) - ( that.w / 2 ),
252 "top": ( $(window).height() / 2 ) - ( that.h / 2 ) - resizedOffs
253 });
254 that.enforceFocus();
255 },
256 cloneSize: function() // The cloneSize function is only run once, but it helps keep image jumping down
257 {
258 var that = this;
259 // Clone the element and append it to the body
260 // this allows us to get an idea for the size of the lightbox
261 that.$clone = that.$element.filter(':first').clone()
262 .css(
263 {
264 'position': 'absolute',
265 'top' : -2000,
266 'display' : 'block',
267 'visibility': 'visible',
268 'opacity': 100
269 })
270 .removeClass('fade')
271 .appendTo('body');
272
273 that.h = that.$clone.height();
274 that.w = that.$clone.width();
275 that.$clone.remove();
276
277 // try and center the element based on the
278 // height and width retrieved from the clone
279 that.$element.css({
280 "position": "fixed",
281 "left": ( $(window).width() / 2 ) - ( that.w / 2 ),
282 "top": ( $(window).height() / 2 ) - ( that.h / 2 )
283 });
284 }
285 }
286
287
288 /* LIGHTBOX PLUGIN DEFINITION
289 * ======================= */
290
291 $.fn.lightbox = function (option)
292 {
293 return this.each(function ()
294 {
295 var $this = $(this);
296 var data = $this.data('lightbox');
297 var options = $.extend({}, $.fn.lightbox.defaults, $this.data(), typeof option == 'object' && option);
298 if (!data) $this.data('lightbox', (data = new Lightbox(this, options)));
299
300 if (typeof option == 'string')
301 data[option]()
302 else if (options.show)
303 data.show()
304 });
305 };
306
307 $.fn.lightbox.defaults = {
308 backdrop: true,
309 keyboard: true,
310 show: true,
311 resizeToFit: true
312 };
313
314 $.fn.lightbox.Constructor = Lightbox;
315
316
317 /* LIGHTBOX DATA-API
318 * ================== */
319
320 $(document).on('click.lightbox.data-api', '[data-toggle="lightbox"]', function (e)
321 {
322 var $this = $(this);
323 var href = $this.attr('href');
324 var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
325 var option = $target.data('lightbox') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data());
326 var img = $this.attr('data-image') || false;
327 var $imgElem;
328
329 e.preventDefault();
330
331 if(img)
332 {
333 $target.data('original-content', $target.find('.lightbox-content').html());
334 $target.find('.lightbox-content').html('<img border="0" src="'+img+'" />');
335 }
336
337 $target
338 .lightbox(option)
339 .one('hide', function ()
340 {
341 $this.focus()
342 })
343 .one('hidden',function ()
344 {
345 if( img )
346 {
347 $target.find('.lightbox-content').html( $target.data('original-content') );
348 img = undefined;
349 }
350 });
351 })
352
353