/*
* This file is part of WebSiCo: online Web Site Composer, http://websico.net
* Copyright (c) 2005-2009 Olivier Seston, http://seston.net
* All rights reserved.
* --------------------------------------------------------------------------
* GLOBAL OPERATIONS IN ANY MODE
* ---------------------------------------
*/
// Globals set by bodystart.php
// ----------------------------
var ws_mode;
// Add event listener kind of compatibility for old browsers, like IE :o)
// Probably buggy, should be revisited.....
// -----------------------------------------------------------------------
if (!window.addEventListener) {
function addEventListener(event_name, handler, capture) {
var old_handler = this['on' + event_name] ? this['on' + event_name] : function(){};
this['on' + event_name] = function() {old_handler(); return handler();};
}
}
if (!document.addEventListener) document.addEventListener = addEventListener;
// An ugly attempt to fix system containers height:
// some browser does not understand well "height: 100%;" in css,
// so it's hard fixed here... for all browsers for consistancy.
// Note 1: for IE they say, in standard mode, a height css property has effect only
// if parent has also an explicit height property, that's true but leads to a big mess
// in table generation, as each tr must be heighted etc...
// Note 2: the fix is uncomplete because when we size the height content of a cell
// in a vertical table, the cell height is recomputed by the browser; we can
// force the cell height but for... always the same browser.
// ------------------------------------------------------------------------------------
var ws_containerList = new Array(); // Setup by Display() of each container
window.addEventListener("load", ws_compute_layout, false);
//window.addEventListener("resize", ws_compute_layout, false);
function ws_compute_layout() {
for (var i=ws_containerList.length-1; i>=0; i--) {
var elt = ws_containerList[i];
if (elt.ws_props & WS_SYSTEM_CONTAINER && elt.tagName == 'TABLE' && elt.className.indexOf(' WS_ALONE') != -1) {
if ((elt.ws_owner.ws_props & WS_SYSTEM_CONTAINER)) {
elt.style.height = elt.offsetParent.clientHeight + 'px';
// ws_containerList[i].offsetParent.style.height = ws_containerList[i].offsetHeight + 'px';
}
}
}
}
// Special command keys (maintenance mode, stats...)
// -------------------------------------------------
document.addEventListener("keydown",
function(event) {
event = window.event || event;
if (event.keyCode == 123) { // F12
if (event.ctrlKey) { // CTRL + F12
if (!ws_dont_explore)
ws_reloadRequest({mode: (ws_mode == WS_EXPLORE ? 0 : WS_EXPLORE)});
else
return;
} else if (event.shiftKey) { // SHIFT + F12
ws_reloadRequest({mode: (ws_mode == WS_PREVIEW ? 0 : WS_PREVIEW)});
} else {
ws_reloadRequest({mode: (ws_mode == WS_EDIT ? 0 : WS_EDIT)});
}
} else if (event.keyCode == 27) { // ESC
if (ws_mode & WS_EDIT)
ws_cancelAction();
}
},
false);
/* GALLERY MANAGEMENT
* ------------------*/
var ws_gallery; // Global gallery object
// Now gallery object is built onmouseover of thumbnail image, this is to avoid wait for
// all thumbnail images load in main page
window.addEventListener("load", function(){ws_gallery = new ws_Gallery()}, false);
function ws_Gallery(){
this.active = -1;
this.movie = 0;
this.moviePeriod = 2500; // In millisecond unit
this.controlImg = document.createElement('img'); // To load it in cache
this.controlImg.src = ws_core_path + 'ws_images/ws_gallery_control.gif';
this.movieOnImg = document.createElement('img'); // To load it in cache
this.movieOnImg.src = ws_core_path + 'ws_images/ws_movie_on.gif';
this.goodBrowserResize = navigator.userAgent.indexOf('Safari') != -1 ||
navigator.userAgent.indexOf('Opera') != -1; // Simply the best
// Build table of images and set onclick callbacks
this.images = [];
var links = document.getElementsByTagName('a');
for (var i = 0, j = 0; i < links.length; i++) { // Images encapsulated in a link of class "zoomable"
if (links[i].firstChild && links[i].firstChild.tagName == 'IMG' && links[i].className.indexOf("zoomable") != -1) {
var a = links[i];
var img = a.firstChild;
this.images[j] = {
thumbNail: img,
path: a.href,
width: img.width,
height: img.height,
img: document.createElement('img'),
loaded_path: 0,
requested_path: 0,
progressImg: document.createElement('img') // Each one has it's own progress bar (this is because of concurrence issues)
};
this.images[j].progressImg.className = "progressBar";
this.images[j].progressImg.src = ws_core_path + 'ws_images/ws_progress.gif';
this.images[j].img.ws_galleryIndex = j;
try {
this.images[j].caption = document.getElementById(a.getAttribute('captionId')).innerHTML;
} catch (e){}
a.ws_gIndex = j++;
a.onclick = function(event){
event = window.event || event;
if (!(ws_mode & WS_EDIT) || event.altKey) {
if (ws_mode & WS_EDIT) ws_cancelAction();
ws_gallery.show(this.ws_gIndex);
event.cancelBubble = true;
}
return false};
a.onmousedown = function(event){return false};
img.onmouseover = function(){ws_gallery.loadImage(this.parentNode.ws_gIndex); return false};
}
}
// Build DOM elements
if (this.images.length) {
// Gallery image
this.gallery = document.createElement('div');
this.gallery.onmouseover = function() {
clearTimeout(this.ws_hideControl);
ws_gallery.control.style.visibility = 'visible';
this.ws_hideControl = setTimeout("ws_gallery.control.style.visibility='hidden';", 3000);
};
this.gallery.appendChild(document.createElement('div')); // Just to build a first child, will be replaced by progressBar
this.caption = this.gallery.appendChild(document.createElement('div'));
this.caption.className = "caption";
this.img = this.gallery.appendChild(document.createElement('img'));
this.img.className = "image";
this.img.onclick = function(){ws_gallery.hide()};
// Control bar
this.control = this.gallery.appendChild(document.createElement('div'));
this.control.className = "control";
this.counter = this.control.appendChild(document.createElement('div'));
this.counter.className = "counter";
this.controlMapImg = this.control.appendChild(document.createElement('img'));
this.controlMapImg.src = this.controlImg.src;
this.controlMapImg.useMap = "#controlMap";
this.control.onmouseover = function(event) {
event = window.event || event;
clearTimeout(this.parentNode.ws_hideControl);
event.cancelBubble = true;
return false};
var map = this.control.appendChild(document.createElement('map'));
map.id = "controlMap";
map.name = "controlMap";
map.innerHTML = '\
\
\
\
\
\
\
';
// Add event handlers
document.addEventListener("keydown",
function(event) { // Keyboard events
event = window.event || event;
if (event.keyCode == 27) { // Esc
ws_gallery.hide();
} else if (ws_gallery.active >= 0) { // Walk in gallery
if (event.keyCode == 39) // Right arrow
ws_gallery.show(ws_gallery.active + 1);
else if (event.keyCode == 37) // Left arrow
ws_gallery.show(ws_gallery.active - 1);
}
}, false);
window.addEventListener("resize", function(){ws_gallery.resize()}, false);
this.resize(); // To set initial size
}
}
ws_Gallery.prototype.show = function(i) {
i = (i < 0) ? this.images.length - 1 : (i >= this.images.length) ? 0 : i;
// Progress bar
this.gallery.replaceChild(this.images[i].progressImg, this.gallery.firstChild);
this.gallery.firstChild.style.left = (ws_getInnerWidth() - this.gallery.firstChild.width) / 2 + 'px';
this.active = i;
// Caption and counter
if (this.images[i].caption) {
this.caption.innerHTML = this.images[i].caption;
this.caption.style.display = '';
} else {
this.caption.style.display = 'none';
}
this.counter.innerHTML = (i+1) + '/' + this.images.length;
// Image
var ratio = Math.min(this.width / this.images[i].width, this.height / this.images[i].height);
var width = this.images[i].width * ratio;
var height = this.images[i].height * ratio;
this.img.style.width = width + 'px';
this.img.style.height = height + 'px';
this.img.style.marginTop = (ws_getInnerHeight() - height) / 2 + 'px';
this.img.src = this.images[i].loaded_path || this.images[i].thumbNail.src;
this.loadImage(i);
this.loadImage(i + 1);
this.loadImage(i - 1);
// Page obfuscation must happen after scroll savings
document.body.appendChild(this.gallery);
var page = document.getElementById('outerContainer');
if (!page.style.display.length) {
this.savedScrollX = ws_getScrollX();
this.savedScrollY = ws_getScrollY();
}
page.style.display = 'none';
if ((pageToolBar = document.getElementById('ws_pageToolbar')))
pageToolBar.style.display = 'none';
document.body.className = 'gallery';
window.scroll(0, 0);
};
ws_Gallery.prototype.loadImage = function(i) { // Load images
i = (i < 0) ? this.images.length - 1 : (i >= this.images.length) ? 0 : i;
var gImg = this.images[i];
// For some browsers it's really better to size image with the help of a server php
var imagePath = this.goodBrowserResize ? gImg.path
: ws_core_path + "ws_buildimage.php?url=" + gImg.path + "&height=" + this.height + "&width=" + this.width;
if (imagePath != gImg.requested_path) { // Some acrobatics because .src is modified by browser
gImg.requested_path = imagePath;
gImg.img.ws_galleryIndex = i;
gImg.progressImg.style.visibility = 'visible';
gImg.img.onload = function() {
var gImg = ws_gallery.images[this.ws_galleryIndex];
gImg.loaded_path = gImg.requested_path;
gImg.progressImg.style.visibility = 'hidden';
if (ws_gallery.active == this.ws_galleryIndex) {
ws_gallery.img.src = this.src;
// To avoid FF & IE little resizing caused by border
ws_gallery.img.style.width = '';
ws_gallery.img.style.height = '';
}
};
gImg.img.src = gImg.requested_path;
}
};
ws_Gallery.prototype.resize = function() { // Resize window
this.width = ws_getInnerWidth() - 40;
this.height = ws_getInnerHeight() - 40;
// this.progressBar.style.left = (ws_getInnerWidth() - this.progressBar.width) / 2 + 'px';
if ((i = this.active) >= 0)
this.show(i);
};
ws_Gallery.prototype.hide = function hide() { // Hide gallery
if (this.active >= 0) {
document.getElementById('outerContainer').style.display = '';
if ((pageToolBar = document.getElementById('ws_pageToolbar')))
pageToolBar.style.display = '';
window.scroll(this.savedScrollX, this.savedScrollY);
document.body.className = '';
document.body.removeChild(this.gallery);
document.body.focus(); // To clear blinking cursor with FF (!?)
clearTimeout(this.gallery.ws_hideControl);
this.movieControl(0);
this.active = -1;
}
};
ws_Gallery.prototype.movieControl = function(action) {
this.movie = arguments.length ? action : !this.movie;
clearInterval(this.movieTimer);
if (this.movie) {
this.controlMapImg.src = this.movieOnImg.src;
this.movieTimer = setInterval("ws_gallery.show(ws_gallery.active + 1);", this.moviePeriod);
} else {
this.controlMapImg.src = this.controlImg.src;
}
}
ws_Gallery.prototype.setMoviePeriod = function(period) {
if (this.movie) {
this.moviePeriod = period;
if (this.moviePeriod < 0) this.moviePeriod = 0;
this.movieControl(1);
}
}
// MENU SHOW/HIDE
// --------------
function ws_showMenu(menuId, parentItem, event) {
var menu = document.getElementById(menuId);
if (menu && !menu.ws_active) {
menu.ws_active = true;
menu.style.display = 'block'; // When hidden display is set to 'none', to disapear from layout
menu.style.fontSize = '100%'; // To keep font-size same as parent
if (parentItem && !menu.ws_displayed) {
parentItem.parentNode.appendChild(menu); // This is to display over parent (works with IE, in place of z-index..)
var parentX = parentItem.offsetLeft + findPosX(parentItem.offsetParent) - findPosX(menu.offsetParent);
var parentY = parentItem.offsetTop + findPosY(parentItem.offsetParent) - findPosY(menu.offsetParent);
menu.ws_parentLink = parentItem;
menu.ws_parentLink.className += ' hover';
menu.style.margin = 0; // To be close to parent
// Try normal position
if (parentItem.parentNode.className == "horizontal") {
menu.style.top = parentY + parentItem.offsetHeight + 'px';
menu.style.left = parentX + 'px';
menu.style.minWidth = parentItem.offsetWidth + 'px';
} else {
menu.style.top = parentY + 'px';
menu.style.left = parentX + parentItem.offsetWidth - 10 + 'px';
}
// Adjust position in case of overflow
if (findPosY(menu) + menu.offsetHeight > ws_getInnerHeight() + ws_getScrollY())
menu.style.top = ws_getInnerHeight() + ws_getScrollY() - menu.offsetHeight - 20 + 'px';
if (findPosY(menu) < ws_getScrollY())
menu.style.top = ws_getScrollY() - findPosY(menu.offsetParent) + 'px';
if (findPosX(menu) + menu.offsetWidth > ws_getInnerWidth() + ws_getScrollX())
menu.style.left = parentX - menu.offsetWidth + 10 + 'px';
if (findPosX(menu) < ws_getScrollX())
menu.style.left = ws_getScrollX() - findPosX(menu.offsetParent) + 'px';
}
menu.ws_displayed = true;
ws_overPopup = 1; // To hide some maintenance targets
}
}
function ws_hideMenu(menuId) {
var menu = document.getElementById(menuId);
if (menu && menu.ws_active) {
menu.ws_active = false;
setTimeout("\
var menu=document.getElementById('" + menuId + "');\
if (!menu.ws_active){\
menu.style.display = 'none';\
ws_overPopup = 0;\
if (menu.ws_parentLink)\
menu.ws_parentLink.className = new String(menu.ws_parentLink.className).replace('hover', '');\
menu.ws_displayed = false;\
}", 200);
}
}
// USER SELECTION
// --------------
function ws_userSelect(objectId, check) {
var cdata = '';
if (document.cookie.search('wsc_selected=') != -1) {
cdata = document.cookie.replace(/.*wsc_selected=([^;]*).*/, '$1');
cdata = cdata.replace(objectId, '');
cdata = cdata.replace(/^,*/, '');
cdata = cdata.replace(/(,*)$/, '');
cdata = cdata.replace(/,,*/g, ',');
}
if (check) {
if (cdata.length) cdata += ',';
cdata += objectId;
}
d = new Date(new Date().getTime() + 30*24*3600*1000).toGMTString();
document.cookie = 'wsc_selected=' + cdata + '; expires=' + d;
}
// FIND ABSOLUTE COORDINATES OF AN OBJECT
// --------------------------------------
// Thanks to Peter-Paul Koch, www.quirksmode.org
// ---------------------------------------------
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
// FIND WINDOW VALUES
// ------------------
// Thanks to Peter-Paul Koch, www.quirksmode.org
// ---------------------------------------------
function ws_getScrollX() {
if (window.pageXOffset)
return window.pageXOffset;
else if (document.documentElement && document.documentElement.scrollLeft)
return document.documentElement.scrollLeft;
else
return document.body.scrollLeft;
}
function ws_getScrollY() {
if (window.pageYOffset)
return window.pageYOffset;
else if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
else
return document.body.scrollTop;
}
function ws_getInnerWidth() {
if (window.innerWidth)
return window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
else
return document.body.clientWidth;
}
function ws_getInnerHeight() {
if (window.innerHeight)
return window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
else
return document.body.clientHeight;
}
function ws_getDocumentWidth() {
if (window.scrollMaxX) // FF
return ws_getInnerWidth() + window.scrollMaxX;
else
return document.body.scrollWidth;
}
function ws_getDocumentHeight() {
if (window.scrollMaxY) // FF
return ws_getInnerHeight() + window.scrollMaxY;
else
return document.body.scrollHeight;
}
// SET HTML ELEMENT OPACITY
// ------------------------
// Not too many opacity manip with IE because of well known font anti-aliasing issue:
// anti-aliasing fall back in 'standard' even if 'cleartype' is used on the user os,
// with surprising bad visual effect in some cases.
// So we must use it with (great) care...,
// so great care that it's sometimes not called for IE :)
// ----------------------------------------------------------------------------------
function ws_setOpacity(element, opacity) {
element.style.zoom = 1; // Element must have layout to take filter in account (IE specific..)
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity*100 + ')';
element.style.opacity = opacity;
}
// MISC UTILS
// ----------
// String manipulation
// -------------------
function ws_bsn2nl(s) {
return s.replace(/\\n/g, "\n");
}
// Reload actual page with query variables
// ---------------------------------------
function ws_reloadRequest(variables) {
for (var i in variables) {
str = new String(location.href);
if (location.search) {
var match = str.match(new RegExp('([?&])' + i + '=[^&#]*'));
if (match) {
str = str.replace(match[0], match[1] + i + "=" + variables[i]);
if (str.indexOf('?') == -1 && str.indexOf('&') != -1)
str = str.replace(/(^[^&]+)&/, '$1?');
} else {
str += "&" + i + "=" + variables[i];
}
} else if (location.hash) {
str = str.replace("#", "?" + i + "=" + variables[i] + "#");
} else {
str += "?" + i + "=" + variables[i];
}
}
location.href = str;
}
// Mail address decode for mailto link
// -----------------------------------
function Disp(str, obj) {
var res = "";
for(var i = 0; i < str.length; i++)
res += String.fromCharCode(str.charCodeAt(i) + i%4 - 1);
if (obj)
obj.href = 'mailto:' + res;
return res;
}
// Open miniWindow
// ---------------
var ws_miniWindow = 0;
function miniWindow(url, width, height) {
if (ws_miniWindow)
ws_miniWindow.close(); // To be recreated on top
if (!width) width = 100;
if (!height) height = 100;
ws_miniWindow = open(url,'miniWindow','resizable, scrollbars, width=' + width + ', height=' + height);
}
// Smoothly adjust window size to fit it's content
// -----------------------------------------------
function adjustWindowSize(startWidth, startHeight, w) {
if (!w) w = window;
w.resizeTo(startWidth ? startWidth : 110, startHeight ? startHeight : 110);
w.scrollTo(1000,1000);
w.focus();
var delta = 16;
// Move the window during growth to avoid IE loop
// when on screen bottom or right boundary
// Incidently, not so bad visual effect !
var step = w.document.documentElement.scrollLeft / 5;
while(w.document.documentElement.scrollLeft) { // Begin by width to be sure to get the height without hscroller height
w.moveBy(-delta, 0);
w.resizeBy(step, 0);
w.moveBy(delta + 1, 0);
}
var step = w.document.documentElement.scrollTop / 5;
while(w.document.documentElement.scrollTop) {
w.moveBy(0, -delta);
w.resizeBy(0, step);
w.moveBy(0, delta + 1);
}
/*
while(document.documentElement.scrollLeft || document.documentElement.scrollTop) {
moveBy(-delta, -delta);
resizeBy((document.documentElement.scrollLeft ? 32 : 0), (document.documentElement.scrollTop ? 32 : 0));
moveBy(delta + 1, delta + 1);
}
*/
}