mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
f20e83eeaf
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@112783 467b73ca-7a2a-4603-9d3b-597d59a354a9
456 lines
11 KiB
JavaScript
Executable File
456 lines
11 KiB
JavaScript
Executable File
/****
|
|
Last Modified: 25/08/06 20:52:59
|
|
|
|
CAUTION: Modified Version to suit Silverstripe CMS (silverstripe.com).
|
|
Original at http://orangoo.com/labs/uploads/GreyBox_v3_46.zip
|
|
|
|
GreyBox - Smart pop-up window
|
|
Copyright Amir Salihefendic 2006
|
|
AUTHOR
|
|
4mir Salihefendic (http://amix.dk) - amix@amix.dk
|
|
VERSION
|
|
3.46
|
|
LICENSE
|
|
GPL (read more in GPL.txt)
|
|
SITE
|
|
http://orangoo.com/labs/GreyBox/
|
|
****/
|
|
var GB_CURRENT = null;
|
|
var GB_ONLY_ONE = null;
|
|
// modified 2006-01-06 by Silverstripe Ltd.
|
|
try {
|
|
var theBaseHref = document.getElementsByTagName("base")[0].href;
|
|
var GB_IMG_DIR = theBaseHref + "sapphire/thirdparty/greybox/";
|
|
} catch(err) {
|
|
var GB_IMG_DIR = "sapphire/thirdparty/greybox/";
|
|
}
|
|
|
|
function GreyBox() {
|
|
//Use mutator functions (since the internal stuff may change in the future)
|
|
this.type = "page";
|
|
this.overlay_click_close = true;
|
|
|
|
if(GB_IMG_DIR)
|
|
this.img_dir = GB_IMG_DIR;
|
|
else
|
|
this.img_dir = "greybox/";
|
|
|
|
this.overlay_color = "dark";
|
|
|
|
this.center_window = false;
|
|
|
|
this.g_window = null;
|
|
this.g_container = null;
|
|
this.iframe = null;
|
|
this.overlay = null;
|
|
this.timeout = null;
|
|
|
|
this.defaultSize();
|
|
this.showCloseImage(true);
|
|
|
|
this.url = "";
|
|
this.caption = "";
|
|
|
|
this.callback_fn = [];
|
|
this.reload_on_close = false;
|
|
}
|
|
|
|
////
|
|
// Configuration functions (the functions you can call)
|
|
//
|
|
/**
|
|
Set the width and height of the GreyBox window.
|
|
Images and notifications are auto-set.
|
|
**/
|
|
GreyBox.prototype.setDimension = function(width, height) {
|
|
this.height = height;
|
|
this.width = width;
|
|
}
|
|
|
|
GreyBox.prototype.setFullScreen = function(bool) {
|
|
this.full_screen = bool;
|
|
}
|
|
|
|
/**
|
|
Type can be: page, image
|
|
**/
|
|
GreyBox.prototype.setType = function(type) {
|
|
this.type = type;
|
|
}
|
|
|
|
/**
|
|
If bool is true the window will be centered vertically also
|
|
**/
|
|
GreyBox.prototype.setCenterWindow = function(bool) {
|
|
this.center_window = bool;
|
|
}
|
|
|
|
/**
|
|
Set the path where images can be found.
|
|
Can be relative: greybox/
|
|
Or absolute: http://yoursite.com/greybox/
|
|
**/
|
|
GreyBox.prototype.setImageDir = function(dir) {
|
|
this.img_dir = dir;
|
|
}
|
|
|
|
GreyBox.prototype.showCloseImage = function(bool) {
|
|
this.show_close_img = bool;
|
|
}
|
|
|
|
/**
|
|
If bool is true the grey overlay click will close greybox.
|
|
**/
|
|
GreyBox.prototype.setOverlayCloseClick = function(bool) {
|
|
this.overlay_click_close = bool;
|
|
}
|
|
|
|
/**
|
|
Overlay can either be "light" or "dark".
|
|
**/
|
|
GreyBox.prototype.setOverlayColor = function(color) {
|
|
this.overlay_color = color;
|
|
}
|
|
|
|
/**
|
|
Set a function that will be called when GreyBox closes
|
|
**/
|
|
GreyBox.prototype.setCallback = function(fn) {
|
|
if(fn)
|
|
this.callback_fn.push(fn);
|
|
}
|
|
|
|
|
|
////
|
|
// Show hide functions
|
|
//
|
|
/**
|
|
Show the GreyBox with a caption and an url
|
|
**/
|
|
GreyBox.prototype.show = function(caption, url) {
|
|
GB_CURRENT = this;
|
|
|
|
this.url = url;
|
|
this.caption = caption;
|
|
|
|
//Be sure that the old loader and dummy_holder are removed
|
|
AJS.map(AJS.$bytc("div", "GB_dummy"), function(elm) { AJS.removeElement(elm) });
|
|
AJS.map(AJS.$bytc("div", "GB_loader"), function(elm) { AJS.removeElement(elm) });
|
|
|
|
//If ie, hide select, in others hide flash
|
|
if(AJS.isIe())
|
|
AJS.map(AJS.$bytc("select"), function(elm) {elm.style.visibility = "hidden"});
|
|
AJS.map(AJS.$bytc("object"), function(elm) {elm.style.visibility = "hidden"});
|
|
|
|
this.initOverlayIfNeeded();
|
|
|
|
this.setOverlayDimension();
|
|
AJS.showElement(this.overlay);
|
|
this.setFullScreenOption();
|
|
|
|
this.initIfNeeded();
|
|
|
|
AJS.hideElement(this.g_window);
|
|
|
|
AJS.ACN(this.g_container, this.iframe);
|
|
|
|
if(caption == "")
|
|
caption = " ";
|
|
this.div_caption.innerHTML = caption;
|
|
|
|
AJS.showElement(this.g_window)
|
|
|
|
this.setVerticalPosition();
|
|
this.setWidthNHeight();
|
|
this.setTopNLeft();
|
|
|
|
GB_CURRENT.startLoading();
|
|
|
|
return false;
|
|
}
|
|
|
|
GreyBox.prototype.hide = function() {
|
|
AJS.hideElement(this.g_window, this.overlay);
|
|
|
|
try{ AJS.removeElement(this.iframe); }
|
|
catch(e) {}
|
|
|
|
this.iframe = null;
|
|
|
|
if(this.type == "image") {
|
|
this.width = 200;
|
|
this.height = 200;
|
|
}
|
|
|
|
if(AJS.isIe())
|
|
AJS.map(AJS.$bytc("select"), function(elm) {elm.style.visibility = "visible"});
|
|
AJS.map(AJS.$bytc("object"), function(elm) {elm.style.visibility = "visible"});
|
|
|
|
var c_bs = GB_CURRENT.callback_fn;
|
|
if(c_bs != []) {
|
|
AJS.map(c_bs, function(fn) {
|
|
fn();
|
|
});
|
|
}
|
|
|
|
GB_CURRENT = null;
|
|
|
|
if(this.reload_on_close)
|
|
window.location.reload();
|
|
}
|
|
|
|
/**
|
|
If you only use one instance of GreyBox
|
|
**/
|
|
GB_initOneIfNeeded = function() {
|
|
if(!GB_ONLY_ONE) {
|
|
GB_ONLY_ONE = new GreyBox();
|
|
}
|
|
}
|
|
|
|
GB_show = function(caption, url, /* optional */ height, width, callback_fn) {
|
|
GB_initOneIfNeeded();
|
|
GB_ONLY_ONE.defaultSize();
|
|
GB_ONLY_ONE.setFullScreen(false);
|
|
GB_ONLY_ONE.setType("page");
|
|
GB_ONLY_ONE.setCallback(callback_fn);
|
|
GB_ONLY_ONE.setDimension(width, height);
|
|
GB_ONLY_ONE.show(caption, url);
|
|
return false;
|
|
}
|
|
|
|
GB_showFullScreen = function(caption, url, /* optional */ callback_fn) {
|
|
GB_initOneIfNeeded();
|
|
GB_ONLY_ONE.defaultSize();
|
|
GB_ONLY_ONE.setType("page");
|
|
|
|
GB_ONLY_ONE.setCallback(callback_fn);
|
|
GB_ONLY_ONE.setFullScreen(true);
|
|
GB_ONLY_ONE.show(caption, url);
|
|
return false;
|
|
}
|
|
|
|
GB_showImage = function(caption, url) {
|
|
GB_initOneIfNeeded();
|
|
GB_ONLY_ONE.defaultSize();
|
|
GB_ONLY_ONE.setFullScreen(false);
|
|
GB_ONLY_ONE.setType("image");
|
|
|
|
GB_ONLY_ONE.show(caption, url);
|
|
return false;
|
|
}
|
|
|
|
GB_hide = function() {
|
|
GB_CURRENT.hide();
|
|
}
|
|
|
|
/**
|
|
Preload all the images used by GreyBox. Static function
|
|
**/
|
|
GreyBox.preloadGreyBoxImages = function(img_dir) {
|
|
var pics = [];
|
|
|
|
if(!img_dir)
|
|
img_dir = GB_IMG_DIR;
|
|
|
|
var fn = function(path) {
|
|
var pic = new Image();
|
|
pic.src = GB_IMG_DIR + path;
|
|
pics.push(pic);
|
|
};
|
|
AJS.map(['indicator.gif', 'blank.gif', 'close.gif', 'header_bg.gif', 'overlay_light.png', 'overlay_dark.png'], AJS.$b(fn, this));
|
|
}
|
|
|
|
|
|
////
|
|
// Internal functions
|
|
//
|
|
GreyBox.prototype.getOverlayImage = function() {
|
|
return "overlay_" + this.overlay_color + ".png";
|
|
};
|
|
|
|
/**
|
|
Init functions
|
|
**/
|
|
GreyBox.prototype.initOverlayIfNeeded = function() {
|
|
//Create the overlay
|
|
this.overlay = AJS.DIV({'id': 'GB_overlay'});
|
|
if(AJS.isIe()) {
|
|
this.overlay.style.backgroundColor = "#000000";
|
|
this.overlay.style.backgroundColor = "transparent";
|
|
this.overlay.style.backgroundImage = "url("+ this.img_dir +"blank.gif)";
|
|
this.overlay.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.img_dir + this.getOverlayImage() + "',sizingMethod='scale')";
|
|
}
|
|
else
|
|
this.overlay.style.backgroundImage = "url("+ this.img_dir + this.getOverlayImage() +")";
|
|
|
|
if(this.overlay_click_close)
|
|
AJS.AEV(this.overlay, "click", GB_hide);
|
|
|
|
AJS.getBody().insertBefore(this.overlay, AJS.getBody().firstChild);
|
|
};
|
|
|
|
GreyBox.prototype.initIfNeeded = function() {
|
|
this.init();
|
|
this.setWidthNHeight = AJS.$b(this.setWidthNHeight, this);
|
|
this.setTopNLeft = AJS.$b(this.setTopNLeft, this);
|
|
this.setFullScreenOption = AJS.$b(this.setFullScreenOption, this);
|
|
this.setOverlayDimension = AJS.$b(this.setOverlayDimension, this);
|
|
|
|
GreyBox.addOnWinResize(this.setWidthNHeight, this.setTopNLeft, this.setFullScreenOption, this.setOverlayDimension);
|
|
|
|
this.g_container.style.marginBottom = "-3px";
|
|
|
|
var fn = function() {
|
|
this.setOverlayDimension();
|
|
this.setVerticalPosition();
|
|
this.setTopNLeft();
|
|
this.setWidthNHeight();
|
|
};
|
|
AJS.AEV(window, "scroll", AJS.$b(fn, this));
|
|
|
|
if(!this.iframe) {
|
|
var new_frame;
|
|
var d = {'name': 'GB_frame', 'class': 'GB_frame', 'frameBorder': 0};
|
|
new_frame = AJS.IFRAME(d);
|
|
this.iframe = new_frame;
|
|
AJS.hideElement(this.iframe);
|
|
}
|
|
}
|
|
|
|
GreyBox.prototype.init = function() {
|
|
//Create the window
|
|
this.g_window = AJS.DIV({'id': 'GB_window'});
|
|
|
|
//Create the table structure
|
|
var table = AJS.TABLE({'class': 'GB_t_frame', 'frameborder': 0});
|
|
var tbody = AJS.TBODY();
|
|
AJS.ACN(table, tbody);
|
|
|
|
//Midlle
|
|
var td_middle_m = AJS.TD({'class': 'GB_content'});
|
|
this.td_middle_m = td_middle_m;
|
|
|
|
AJS.ACN(tbody, AJS.TR(td_middle_m));
|
|
|
|
//Append caption and close
|
|
var header = AJS.TABLE({'class': 'GB_header'});
|
|
this.header = header;
|
|
|
|
var caption = AJS.TD({'class': 'GB_caption'});
|
|
this.div_caption = caption;
|
|
|
|
/*header.style.backgroundImage = "url("+ this.img_dir +"header_bg.gif)";*/
|
|
|
|
tbody_header = AJS.TBODY();
|
|
var close = AJS.TD({'class': 'GB_close'});
|
|
|
|
if(this.show_close_img) {
|
|
var img_close = AJS.IMG({'src': this.img_dir + 'close.gif'});
|
|
AJS.ACN(close, img_close, "Close");
|
|
AJS.AEV(close, "click", GB_hide);
|
|
}
|
|
AJS.ACN(tbody_header, AJS.TR(caption, close));
|
|
|
|
AJS.ACN(header, tbody_header);
|
|
|
|
AJS.ACN(td_middle_m, header);
|
|
|
|
//Container
|
|
this.g_container = AJS.DIV({'class': 'GB_container'});
|
|
AJS.ACN(td_middle_m, this.g_container);
|
|
|
|
AJS.ACN(this.g_window, table);
|
|
|
|
AJS.getBody().insertBefore(this.g_window, this.overlay.nextSibling);
|
|
}
|
|
|
|
GreyBox.prototype.startLoading = function() {
|
|
//Start preloading the object
|
|
this.iframe.src = this.img_dir + 'loader_frame.html';
|
|
AJS.showElement(this.iframe);
|
|
}
|
|
|
|
/**
|
|
Set dimension functions
|
|
**/
|
|
GreyBox.prototype.setIframeWidthNHeight = function() {
|
|
try{
|
|
AJS.setWidth(this.iframe, this.width);
|
|
AJS.setHeight(this.iframe, this.height);
|
|
}
|
|
catch(e) {
|
|
}
|
|
}
|
|
|
|
GreyBox.prototype.setOverlayDimension = function() {
|
|
var page_size = AJS.getWindowSize();
|
|
if((navigator.userAgent.toLowerCase().indexOf("firefox") != -1))
|
|
AJS.setWidth(this.overlay, "100%");
|
|
else
|
|
AJS.setWidth(this.overlay, page_size.w);
|
|
|
|
var max_height = Math.max(AJS.getScrollTop()+page_size.h, AJS.getScrollTop()+this.height);
|
|
if(max_height < AJS.getScrollTop())
|
|
AJS.setHeight(this.overlay, max_height);
|
|
else
|
|
AJS.setHeight(this.overlay, AJS.getScrollTop()+page_size.h);
|
|
}
|
|
|
|
GreyBox.prototype.setWidthNHeight = function() {
|
|
//Set size
|
|
AJS.setWidth(this.g_window, this.width);
|
|
AJS.setHeight(this.g_window, this.height);
|
|
|
|
AJS.setWidth(this.g_container, this.width);
|
|
AJS.setHeight(this.g_container, this.height);
|
|
|
|
this.setIframeWidthNHeight();
|
|
|
|
//Set size on components
|
|
AJS.setWidth(this.td_middle_m, this.width+10);
|
|
}
|
|
|
|
/**
|
|
* Modified 2006-10-08 by Silverstripe
|
|
*/
|
|
GreyBox.prototype.setTopNLeft = function() {
|
|
var page_size = AJS.getWindowSize();
|
|
AJS.setLeft(this.g_window, ((page_size.w - this.width)/2)-13);
|
|
|
|
var fl = ((page_size.h - this.height) /2) - 15 + AJS.getScrollTop();
|
|
AJS.setTop(this.g_window, fl);
|
|
}
|
|
|
|
GreyBox.prototype.setVerticalPosition = function() {
|
|
var page_size = AJS.getWindowSize();
|
|
var st = AJS.getScrollTop();
|
|
if(this.g_window.offsetWidth <= page_size.h || st <= this.g_window.offsetTop) {
|
|
AJS.setTop(this.g_window, st);
|
|
}
|
|
}
|
|
|
|
GreyBox.prototype.setFullScreenOption = function() {
|
|
if(this.full_screen) {
|
|
var page_size = AJS.getWindowSize();
|
|
|
|
overlay_h = page_size.h;
|
|
|
|
this.width = Math.round(this.overlay.offsetWidth - (this.overlay.offsetWidth/100)*10);
|
|
this.height = Math.round(overlay_h - (overlay_h/100)*10);
|
|
}
|
|
}
|
|
|
|
GreyBox.prototype.defaultSize = function() {
|
|
this.width = 300;
|
|
this.height = 300;
|
|
}
|
|
|
|
////
|
|
// Misc.
|
|
//
|
|
GreyBox.addOnWinResize = function(funcs) {
|
|
funcs = AJS.$A(funcs);
|
|
AJS.map(funcs, function(fn) { AJS.AEV(window, "resize", fn); });
|
|
}
|