]> git.mxchange.org Git - quix0rs-gnu-social.git/blob - js/jquery.joverlay.js
Merge branch '1.0.x' of gitorious.org:statusnet/mainline into 1.0.x
[quix0rs-gnu-social.git] / js / jquery.joverlay.js
1 /* Copyright (c) 2009 Alvaro A. Lima Jr http://alvarojunior.com/jquery/joverlay.html
2  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
3  * Version: 0.8 (OUT 19, 2009)
4  * Requires: jQuery 1.3+
5  */
6
7 (function($) {
8
9         // Global vars
10         var isIE6 = $.browser.msie && $.browser.version == 6.0; // =(
11         var JOVERLAY_TIMER = null;
12
13         $.fn.jOverlay = function(options) {
14
15                 // Element exist?
16                 if ( $('#jOverlay').length ) {$.closeOverlay();}
17
18                 // Clear Timer
19                 if (JOVERLAY_TIMER !== null) {
20                         clearTimeout( JOVERLAY_TIMER );
21                 }
22
23                 // Set Options
24                 var options = $.extend({}, $.fn.jOverlay.options, options || {});
25
26                 // success deprecated !!! Use onSuccess
27                 var onSuccess =  options.onSuccess || options.success;
28
29                 var element = this.is('*') ? this : '#jOverlayContent';
30
31                 var position = isIE6 ? 'absolute' : 'fixed';
32
33                 var isImage = /([^\/\\]+)\.(png|gif|jpeg|jpg|bmp)$/i.test( options.url );
34
35                 var imgLoading = options.imgLoading ? "<img id='jOverlayLoading' src='"+options.imgLoading+"' style='position:"+position+"; z-index:"+(options.zIndex + 9)+";'/>" : '';
36
37                 // private function
38                 function center(id) {
39                         if (options.center) {
40                                 $.center(id);
41                         } else if( isIE6 ) {
42                                 $.center('#jOverlayContent',{
43                                         'top' : $(window).scrollTop() + 'px',
44                                         'marginLeft' : '',
45                                         'marginTop' : '',
46                                         'left' : ''
47                                 });
48                         }
49                 }
50
51                 $('body').prepend(imgLoading + "<div id='jOverlay' />"
52                         + "<div id='jOverlayContent' style='position:"+position+"; z-index:"+(options.zIndex + 5)+"; display:none;'/>"
53                 );
54
55                 // Cache options
56                 $('#jOverlayContent').data('options', options);
57
58                 // Loading Centered
59                 $('#jOverlayLoading').load(function() {
60                         center(this);
61                 });
62
63                 //IE 6 FIX
64                 if ( isIE6 ) {
65                         $('select').hide();
66                         $('#jOverlayContent select').show();
67                 }
68
69                 // Overlay Style
70                 $('#jOverlay').css({
71                         'backgroundColor' : options.color,
72                         'position' : position,
73                         'top' : '0px',
74                         'left' : '0px',
75                         'filter' : 'alpha(opacity='+ (options.opacity * 100) +')', // IE =(
76                         'opacity' : options.opacity, // Good Browser =D
77                         '-khtml-opacity' : options.opacity,
78                         '-moz-opacity' : options.opacity,
79                         'zIndex' : options.zIndex,
80                         'width' : !isIE6 ? '100%' : $(window).width() + 'px',
81                         'height' : !isIE6 ? '100%' : $(document).height() + 'px'
82                 }).show();
83
84                 // INNER HTML
85                 if ( $.trim(options.html) ) {
86                         $(element).html(options.html);
87                 }
88
89                 // ELEMENT
90                 if ( this.is('*') ) {
91
92                         $('#jOverlayContent').data('jOverlayElementPrev', this.prev() );
93
94                         $('#jOverlayContent').html(
95                                 this.show().data('display', options.autoHide ? 'none' : this.css('display') )
96                         );
97
98                         if ( !isImage ) {
99
100                                 center('#jOverlayContent');
101
102                                 $('#jOverlayContent').show();
103
104                                 // Execute callback
105                                 if ( !options.url && $.isFunction( onSuccess ) ) {
106                                         onSuccess( this );
107                                 }
108
109                         }
110
111                 }
112
113                 // IMAGE
114                 if ( isImage ) {
115
116                         $('<img/>').load(function(){
117                                 var resize = $.resize(this.width, this.height);
118
119                                 $(this).css({
120                                         width : resize.width,
121                                         height : resize.height
122                                 });
123
124                                 $( element ).html(this);
125
126                                 center('#jOverlayContent');
127                                 center('#jOverlayLoading');
128
129                                 $('#jOverlayLoading').fadeOut(500);
130                                 $('#jOverlayContent').show();
131
132                                 // Execute callback
133                                 if ( $.isFunction( onSuccess ) ) {
134                                         onSuccess( $(element) );
135                                 }
136
137                         }).error(function(){
138                                 alert('Image ('+options.url+') not found.');
139                                 $.closeOverlay();
140                         }).attr({'src' : options.url, 'alt' : options.url});
141
142                 }
143
144                 // AJAX
145                 if ( options.url && !isImage ) {
146
147                         $.ajax({
148                                 type: options.method,
149                                 data: options.data,
150                                 url: options.url,
151                                 success: function(responseText) {
152
153                                         $('#jOverlayLoading').fadeOut(500);
154
155                                         $( element ).html(responseText).show();
156
157                                         center('#jOverlayContent');
158
159                                         // Execute callback
160                                         if ( $.isFunction( onSuccess ) ) {
161                                                 onSuccess( responseText );
162                                         }
163
164                                 },
165                                 error : function() {
166                                         alert('URL ('+options.url+') not found.');
167                                         $.closeOverlay();
168                                 }
169                         });
170
171                 }
172
173                 // :(
174                 if ( isIE6 ) {
175
176                         // Window scroll
177                         $(window).scroll(function(){
178                                 center('#jOverlayContent');
179                         });
180
181                         // Window resize
182                         $(window).resize(function(){
183
184                                 $('#jOverlay').css({
185                                         'width' : $(window).width() + 'px',
186                                         'height' : $(document).height() + 'px'
187                                 });
188
189                                 center('#jOverlayContent');
190
191                         });
192
193                 }
194
195                 // Press ESC to close
196                 if ( options.closeOnEsc ) {
197                         $(document).keydown(function(event){
198                                 if ( event.keyCode == 27 ) {
199                                         $.closeOverlay();
200                                 }
201                         });
202                 } else {
203                         $(document).unbind('keydown');
204                 }
205
206                 // Click to close
207                 if ( options.bgClickToClose ) {
208                         $('#jOverlay').click($.closeOverlay);
209                 }
210
211                 // Timeout (auto-close)
212                 // time in millis to wait before auto-close
213                 // set to 0 to disable
214                 if ( options.timeout && Number(options.timeout) > 0 ) {
215                         JOVERLAY_TIMER = window.setTimeout( $.closeOverlay, Number(options.timeout) );
216                 }
217
218                 // ADD CSS
219                 $('#jOverlayContent').css(options.css || {});
220
221         };
222
223         // Resizing large images - orginal by Christian Montoya.
224         // Edited by - Cody Lindley (http://www.codylindley.com) (Thickbox 3.1)
225         $.resize = function(imageWidth, imageHeight) {
226                 var x = $(window).width() - 150;
227                 var y = $(window).height() - 150;
228                 if (imageWidth > x) {
229                         imageHeight = imageHeight * (x / imageWidth);
230                         imageWidth = x;
231                         if (imageHeight > y) {
232                                 imageWidth = imageWidth * (y / imageHeight);
233                                 imageHeight = y;
234                         }
235                 } else if (imageHeight > y) {
236                         imageWidth = imageWidth * (y / imageHeight);
237                         imageHeight = y;
238                         if (imageWidth > x) {
239                                 imageHeight = imageHeight * (x / imageWidth);
240                                 imageWidth = x;
241                         }
242                 }
243                 return {'width':imageWidth, 'height':imageHeight};
244         };
245
246         // Centered Element
247         $.center = function(element, css) {
248                 var element = $(element);
249                 var elemWidth = element.width();
250
251                 element.css($.extend({},{
252                         'width' : elemWidth + 'px',
253                         'marginLeft' : '-' + (elemWidth / 2) + 'px',
254                         'marginTop' : '-' + element.height() / 2 + 'px',
255                         'height' : 'auto',
256                 'top' : !isIE6 ? '50%' : $(window).scrollTop() + ($(window).height() / 2) + 'px',
257                 'left' : '50%'
258                 }, css || {}));
259         };
260
261         // Options default
262         $.fn.jOverlay.options = {
263                 'method' : 'GET',
264                 'data' : '',
265                 'url' : '',
266                 'color' : '#000',
267                 'opacity' : '0.6',
268                 'zIndex' : 9999,
269                 'center' : true,
270                 'imgLoading' : '',
271                 'bgClickToClose' : true,
272                 'success' : null, // Deprecated : use onSuccess
273                 'onSuccess' : null,
274                 'timeout' : 0,
275                 'autoHide' : true,
276                 'css' : {},
277                 'html' : '',
278                 'closeOnEsc' : true
279         };
280
281         // Set default options (GLOBAL)
282         // Overiding the default values.
283         $.fn.jOverlay.setDefaults = function(options) {
284                 $.fn.jOverlay.options = $.extend({}, $.fn.jOverlay.options, options || {});
285         };
286
287         // Close
288         $.closeOverlay = function() {
289
290                 var content = $('#jOverlayContent');
291                 var options = content.data('options');
292                 var elementPrev = content.data('jOverlayElementPrev');
293
294                 // Fix IE6 (SELECT)
295                 if (isIE6) { $("select").show(); }
296
297                 // Restore position
298                 if ( elementPrev ) {
299                         var contentChildren = content.children();
300                         elementPrev.after( contentChildren.css('display', contentChildren.data('display') ) );
301                         // Clear cache
302                         contentChildren.removeData('display');
303                         content.removeData('jOverlayElementPrev');
304                 }
305
306                 // Clear options cache
307                 content.removeData('options');
308
309                 // Remove joverlay elements
310                 $('#jOverlayLoading, #jOverlayContent, #jOverlay').remove();
311
312         };
313
314 })(jQuery);