gnu-social/js/jquery.joverlay.js

314 lines
7.2 KiB
JavaScript
Raw Normal View History

2009-07-01 18:46:32 +01:00
/* Copyright (c) 2009 Alvaro A. Lima Jr http://alvarojunior.com/jquery/joverlay.html
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* Version: 0.8 (OUT 19, 2009)
2009-07-01 18:46:32 +01:00
* Requires: jQuery 1.3+
*/
(function($) {
// Global vars
var isIE6 = $.browser.msie && $.browser.version == 6.0; // =(
var JOVERLAY_TIMER = null;
$.fn.jOverlay = function(options) {
// Element exist?
if ( $('#jOverlay').length ) {$.closeOverlay();}
// Clear Timer
if (JOVERLAY_TIMER !== null) {
clearTimeout( JOVERLAY_TIMER );
}
// Set Options
var options = $.extend({}, $.fn.jOverlay.options, options || {});
2009-07-01 18:46:32 +01:00
// success deprecated !!! Use onSuccess
var onSuccess = options.onSuccess || options.success;
2009-07-01 18:46:32 +01:00
var element = this.is('*') ? this : '#jOverlayContent';
2009-07-01 18:46:32 +01:00
var position = isIE6 ? 'absolute' : 'fixed';
2009-07-01 18:46:32 +01:00
var isImage = /([^\/\\]+)\.(png|gif|jpeg|jpg|bmp)$/i.test( options.url );
var imgLoading = options.imgLoading ? "<img id='jOverlayLoading' src='"+options.imgLoading+"' style='position:"+position+"; z-index:"+(options.zIndex + 9)+";'/>" : '';
// private function
function center(id) {
if (options.center) {
$.center(id);
} else if( isIE6 ) {
$.center('#jOverlayContent',{
'top' : $(window).scrollTop() + 'px',
'marginLeft' : '',
'marginTop' : '',
'left' : ''
});
}
}
2009-07-01 18:46:32 +01:00
$('body').prepend(imgLoading + "<div id='jOverlay' />"
+ "<div id='jOverlayContent' style='position:"+position+"; z-index:"+(options.zIndex + 5)+"; display:none;'/>"
);
// Cache options
$('#jOverlayContent').data('options', options);
2009-07-01 18:46:32 +01:00
// Loading Centered
$('#jOverlayLoading').load(function() {
2009-07-01 18:46:32 +01:00
center(this);
});
//IE 6 FIX
if ( isIE6 ) {
$('select').hide();
$('#jOverlayContent select').show();
}
// Overlay Style
$('#jOverlay').css({
'backgroundColor' : options.color,
'position' : position,
'top' : '0px',
'left' : '0px',
'filter' : 'alpha(opacity='+ (options.opacity * 100) +')', // IE =(
'opacity' : options.opacity, // Good Browser =D
'-khtml-opacity' : options.opacity,
'-moz-opacity' : options.opacity,
'zIndex' : options.zIndex,
'width' : !isIE6 ? '100%' : $(window).width() + 'px',
'height' : !isIE6 ? '100%' : $(document).height() + 'px'
2009-07-01 18:46:32 +01:00
}).show();
// INNER HTML
if ( $.trim(options.html) ) {
$(element).html(options.html);
}
2009-07-01 18:46:32 +01:00
// ELEMENT
if ( this.is('*') ) {
$('#jOverlayContent').data('jOverlayElementPrev', this.prev() );
2009-07-01 18:46:32 +01:00
$('#jOverlayContent').html(
this.show().data('display', options.autoHide ? 'none' : this.css('display') )
2009-07-01 18:46:32 +01:00
);
2009-07-01 18:46:32 +01:00
if ( !isImage ) {
center('#jOverlayContent');
$('#jOverlayContent').show();
2009-07-01 18:46:32 +01:00
// Execute callback
if ( !options.url && $.isFunction( onSuccess ) ) {
onSuccess( this );
2009-07-01 18:46:32 +01:00
}
}
}
// IMAGE
if ( isImage ) {
$('<img/>').load(function(){
var resize = $.resize(this.width, this.height);
$(this).css({
width : resize.width,
height : resize.height
});
$( element ).html(this);
center('#jOverlayContent');
center('#jOverlayLoading');
2009-07-01 18:46:32 +01:00
$('#jOverlayLoading').fadeOut(500);
$('#jOverlayContent').show();
// Execute callback
if ( $.isFunction( onSuccess ) ) {
onSuccess( $(element) );
2009-07-01 18:46:32 +01:00
}
}).error(function(){
alert('Image ('+options.url+') not found.');
$.closeOverlay();
}).attr({'src' : options.url, 'alt' : options.url});
}
// AJAX
if ( options.url && !isImage ) {
$.ajax({
type: options.method,
data: options.data,
url: options.url,
success: function(responseText) {
$('#jOverlayLoading').fadeOut(500);
$( element ).html(responseText).show();
center('#jOverlayContent');
// Execute callback
if ( $.isFunction( onSuccess ) ) {
onSuccess( responseText );
2009-07-01 18:46:32 +01:00
}
},
error : function() {
alert('URL ('+options.url+') not found.');
$.closeOverlay();
}
});
}
// :(
if ( isIE6 ) {
// Window scroll
$(window).scroll(function(){
center('#jOverlayContent');
});
// Window resize
$(window).resize(function(){
$('#jOverlay').css({
'width' : $(window).width() + 'px',
'height' : $(document).height() + 'px'
2009-07-01 18:46:32 +01:00
});
center('#jOverlayContent');
});
}
// Press ESC to close
if ( options.closeOnEsc ) {
$(document).keydown(function(event){
if ( event.keyCode == 27 ) {
$.closeOverlay();
}
});
} else {
$(document).unbind('keydown');
}
2009-07-01 18:46:32 +01:00
// Click to close
if ( options.bgClickToClose ) {
$('#jOverlay').click($.closeOverlay);
}
// Timeout (auto-close)
// time in millis to wait before auto-close
// set to 0 to disable
if ( options.timeout && Number(options.timeout) > 0 ) {
JOVERLAY_TIMER = window.setTimeout( $.closeOverlay, Number(options.timeout) );
2009-07-01 18:46:32 +01:00
}
// ADD CSS
$('#jOverlayContent').css(options.css || {});
2009-07-01 18:46:32 +01:00
};
// Resizing large images - orginal by Christian Montoya.
// Edited by - Cody Lindley (http://www.codylindley.com) (Thickbox 3.1)
$.resize = function(imageWidth, imageHeight) {
var x = $(window).width() - 150;
var y = $(window).height() - 150;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
2009-07-01 18:46:32 +01:00
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
2009-07-01 18:46:32 +01:00
imageWidth = x;
}
}
return {'width':imageWidth, 'height':imageHeight};
2009-07-01 18:46:32 +01:00
};
// Centered Element
$.center = function(element, css) {
2009-07-01 18:46:32 +01:00
var element = $(element);
var elemWidth = element.width();
element.css($.extend({},{
'width' : elemWidth + 'px',
'marginLeft' : '-' + (elemWidth / 2) + 'px',
'marginTop' : '-' + element.height() / 2 + 'px',
'height' : 'auto',
'top' : !isIE6 ? '50%' : $(window).scrollTop() + ($(window).height() / 2) + 'px',
'left' : '50%'
}, css || {}));
2009-07-01 18:46:32 +01:00
};
// Options default
$.fn.jOverlay.options = {
'method' : 'GET',
'data' : '',
'url' : '',
'color' : '#000',
'opacity' : '0.6',
'zIndex' : 9999,
'center' : true,
'imgLoading' : '',
'bgClickToClose' : true,
'success' : null, // Deprecated : use onSuccess
'onSuccess' : null,
'timeout' : 0,
'autoHide' : true,
'css' : {},
'html' : '',
'closeOnEsc' : true
};
// Set default options (GLOBAL)
// Overiding the default values.
$.fn.jOverlay.setDefaults = function(options) {
$.fn.jOverlay.options = $.extend({}, $.fn.jOverlay.options, options || {});
2009-07-01 18:46:32 +01:00
};
// Close
$.closeOverlay = function() {
var content = $('#jOverlayContent');
var options = content.data('options');
var elementPrev = content.data('jOverlayElementPrev');
// Fix IE6 (SELECT)
2009-07-01 18:46:32 +01:00
if (isIE6) { $("select").show(); }
// Restore position
if ( elementPrev ) {
var contentChildren = content.children();
elementPrev.after( contentChildren.css('display', contentChildren.data('display') ) );
// Clear cache
contentChildren.removeData('display');
content.removeData('jOverlayElementPrev');
2009-07-01 18:46:32 +01:00
}
// Clear options cache
content.removeData('options');
// Remove joverlay elements
2009-07-01 18:46:32 +01:00
$('#jOverlayLoading, #jOverlayContent, #jOverlay').remove();
};
})(jQuery);