/* Clockwork Satellite JavaScript toolbox
Compiled by John Wigzell, April 2009.
Published under a creative commons attribution license, please credit and share if you re-use or adapt any of this code.
http://creativecommons.org/licenses/by-sa/3.0/
*/
/* Add event
Based on code by Scott Andrew and Dustin Diaz -
http://www.scottandrew.com/weblog/jsjunk
http://www.dustindiaz.com/top-ten-javascript/
*/
function addEvent(element, type, listener, capture) {
if (element.addEventListener) {
element.addEventListener(type, listener, capture);
return true;
}
else if (element.detachEvent) {
var ev = element.attachEvent("on" + type, listener);
return ev;
}
}
/* Add load event
Shorthand for addEvent(window, "load", [listener], false);
Written by John Wigzell -
http://clockworksatellite.co.uk/
*/
function addLoadEvent(listener) {
addEvent(window, "load", listener, false);
}
/* Get element(s) by class
Takes a string to search for, optionally an existing object to search within (defaults to "document") and optionally a particular tag type to concentrate on (defaults to "*").
Returns an array of objects.
Based on code by Dustin Diaz -
http://www.dustindiaz.com/top-ten-javascript/
*/
function getElementsByClass(needle, haystack, tag) {
var elements = new Array();
if (haystack == null) {
var haystack = document;
}
if (tag == null) {
var tag = "*";
}
var nodes = haystack.getElementsByTagName(tag);
var pattern = new RegExp("(^|\\\\s)" + needle + "(\\\\s|$)");
for (i = 0; i < nodes.length; i ++) {
if (pattern.test(nodes[i].className)) {
elements.push(nodes[i]);
}
}
return elements;
}
/* Get element(s)
Takes one or more arguments, initially searching for each by id, then class.
Returns an array of objects.
Written by John Wigzell -
http://clockworksatellite.co.uk/
*/
function getElements() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (element = document.getElementById(element)) {
elements.push(element)
}
if (element = getElementsByClass(element)) {
elements = elements.concat(element);
}
}
return elements;
}
/* Remove whitespace
Gecko browsers consider whitespace characters used to format HTML/XML to be distinct nodes.
This function strips out whitespace characters so that DOM manipulation functions behave as expected.
Provenance unknown (get in touch to correct this). Could be based on code offered in response to this blog post -
http://www.mikechambers.com/blog/2006/01/09/parsing-xml-in-javascript/
*/
function removeWhitespace() {
for (var i = 0; i < arguments.length; i ++) {
var element = arguments[i];
for (var j = 0; j < element.childNodes.length; j ++) {
var node = element.childNodes[j];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
element.removeChild(node);
}
}
}
}
/* Insert after
Inserts new DOM node (newNode) after reference node (refNode).
Based on code published anonymously on Snipplr -
http://snipplr.com/view/2107/insertafter-function-for-the-dom/
Also some reference to code published by Dustin Diaz and credited to Jeremy Keith -
http://www.dustindiaz.com/top-ten-javascript/
http://adactio.com/
*/
function insertAfter(newNode, refNode) {
var parent = refNode.parentNode;
if (parent.lastchild == refNode) {
parent.appendChild(newNode);
}
else {
parent.insertBefore(newNode, refNode.nextSibling);
}
}
/* Discard element
IE does not implement "element.removeChild" correctly (it continues to hold removed elements in memory); documented on MSDN -
http://msdn.microsoft.com/en-us/library/bb250448.aspx
This is a crude but effective way of properly removing DOM nodes in IE.
Based on code adapted by Chris Robinson (aka "crob") from an article published by Scott Sweeney (aka "Avery_Novalis") at Scribd -
http://www.outsidethediv.com/2008/10/removechild-vs-the-garbage-bin
http://www.scribd.com/doc/2159768/Ajax-Part2
*/
function discardElement(element) {
var garbageBin = document.getElementById("garbage-bin");
if (!garbageBin) {
garbageBin = document.createElement("div");
garbageBin.id = "garbage-bin";
garbageBin.style.display = "none";
document.body.appendChild(garbageBin);
}
garbageBin.appendChild(element);
garbageBin.innerHTML = "";
}
/* Change opacity
Sets the opacity of an object (object) to the given level (opacity).
Based on code by Patrick H Lauke (aka "redux"), who was inspired by Steve at Slayeroffice -
http://www.splintered.co.uk/experiments/
http://slayeroffice.com/code/imageCrossFade/
*/
function changeOpacity(object, opacity) {
if (object.style) {
if (object.style.MozOpacity != null) {
object.style.MozOpacity = (opacity / 100) - .001;
}
else if (object.style.opacity != null) {
object.style.opacity = (opacity / 100) - .001;
}
else if (object.style.filter != null) {
object.style.filter = "alpha(opacity=" + opacity + ")";
}
}
}
/* Fade class
Tools for fading the opacity of an object.
Requires changeOpacity() function.
*/
var Fade = function () {
this.object;
this.opacityFrom = 0;
this.opacityTo = 100;
this.fadeIncrement = 10;
this.fadeSpeed = 10;
this.removeObject = false;
this.opacityCurrent;
this.timeout;
this.fadeIn = function () {
var self = this;
if (this.opacityCurrent <= this.opacityTo) {
changeOpacity(this.object, this.opacityCurrent);
this.opacityCurrent += this.fadeIncrement;
this.timeout = window.setTimeout(function () {self.fadeIn();}, this.fadeSpeed);
}
};
this.fadeOut = function () {
var self = this;
if (this.opacityCurrent >= this.opacityTo) {
changeOpacity(this.object, this.opacityCurrent);
this.opacityCurrent -= this.fadeIncrement;
this.timeout = window.setTimeout(function () {self.fadeOut();}, this.fadeSpeed);
}
else {
if (this.removeObject == true) {
discardElement(this.object);
}
}
};
this.start = function () {
if (this.object.style) {
this.opacityCurrent = this.opacityFrom;
if (this.opacityFrom < this.opacityTo) {
this.fadeIn();
}
if (this.opacityFrom > this.opacityTo) {
this.fadeOut();
}
}
};
};
/* Slideshow class
Some elements based on code by Patrick H Lauke (aka "redux"), who was inspired by Steve at Slayeroffice -
http://www.splintered.co.uk/experiments/
http://slayeroffice.com/code/imageCrossFade/
Some elements based on code by Michael Leigeber -
http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
*/
var Slideshow = function () {
this.loop = false;
this.fadeIncrement = 10;
this.fadeSpeed = 20;
this.fadeInterval = 5000;
this.slideClass = "slide";
this.controlsShow = true;
this.controlsClass = "slideshow-controls";
this.controlsNextClass = "slideshow-controls-next";
this.controlsNextImage = "images/next.png";
this.controlsPlayClass = "slideshow-controls-play";
this.controlsPlayImage = "images/play.png";
this.controlsPauseClass = "slideshow-controls-pause";
this.controlsPauseImage = "images/pause.png";
this.controlsPreviousClass = "slideshow-controls-previous";
this.controlsPreviousImage = "images/previous.png";
this.indexShow = true;
this.indexClass = "slideshow-index";
this.indexJumpClass = "slideshow-index-jump";
this.indexJumpImage = "images/index-outline.gif";
this.indexJumpCurrentClass = "slideshow-index-jump-current";
this.indexJumpCurrentImage = "images/index-solid.gif";
this.slideContainer;
this.slideStack;
this.slideStackSlide;
this.currentSlide;
this.previousSlide;
this.timeout;
this.paused;
this.start = function () {
if (this.slideContainer = document.getElementById(this.slideContainer)) {
this.slideContainer.style.position = "relative";
while (this.slideContainer.firstChild) {
discardElement(this.slideContainer.firstChild);
}
this.currentSlide = 0;
this.previousSlide = this.slideStack.length - 1;
this.changeSlide();
if (this.loop == true) {
var self = this;
this.timeout = window.setTimeout(function () {self.playLoop();}, this.fadeInterval);
}
}
};
this.changeSlide = function () {
var self = this;
var previousNode = this.slideContainer.firstChild;
while (previousNode) {
if (previousNode.tagName == "IMG") {
previousNode.style.zIndex = "0";
this.fadeOut(previousNode);
}
previousNode = previousNode.nextSibling;
}
var image = new Image();
image.onload = function () {
var newNode = document.createElement("img");
newNode.src = self.slideStack[self.currentSlide];
newNode.className = self.slideClass;
newNode.style.top = "0px";
newNode.style.left = "0px";
newNode.style.position = "absolute";
newNode.style.zIndex = "100";
changeOpacity(newNode, 0);
self.slideContainer.appendChild(newNode);
self.fadeIn(newNode);
}
image.src = this.slideStack[this.currentSlide];
if (this.indexShow = true) {
this.buildIndex();
}
if (this.controlsShow = true) {
this.buildControls();
}
};
this.fadeIn = function (object) {
var fade = new Fade();
fade.object = object;
fade.opacityFrom = 0;
fade.opacityTo = 100;
fade.fadeSpeed = this.fadeSpeed;
fade.fadeIncrement = this.fadeIncrement;
fade.start();
};
this.fadeOut = function (object) {
var fade = new Fade();
fade.object = object;
fade.opacityFrom = 100;
fade.opacityTo = 0;
fade.fadeSpeed = this.fadeSpeed;
fade.fadeIncrement = this.fadeIncrement;
fade.removeObject = true;
fade.start();
};
this.jumpNext = function () {
this.pause();
this.previousSlide = this.currentSlide;
if ((this.currentSlide + 1) >= this.slideStack.length) {
this.currentSlide = 0;
}
else {
this.currentSlide += 1;
}
this.changeSlide();
};
this.jumpPrevious = function () {
this.pause();
this.previousSlide = this.currentSlide;
if ((this.currentSlide - 1) < 0) {
this.currentSlide = (this.slideStack.length - 1);
}
else {
this.currentSlide -= 1;
}
this.changeSlide();
};
this.jumpTo = function (slide) {
this.pause();
var slide = parseInt(slide, 10);
if (slide != this.currentSlide) {
this.previousSlide = this.currentSlide;
this.currentSlide = slide;
this.changeSlide();
}
};
this.playLoop = function () {
var self = this;
this.loop = true;
this.previousSlide = this.currentSlide;
if ((this.currentSlide + 1) >= this.slideStack.length) {
this.currentSlide = 0;
}
else {
this.currentSlide += 1;
}
this.changeSlide();
this.timeout = window.setTimeout(function () {self.playLoop();}, this.fadeInterval);
};
this.pause = function () {
this.loop = false;
window.clearTimeout(this.timeout);
if (this.indexShow = true) {
this.buildIndex();
}
if (this.controlsShow = true) {
this.buildControls();
}
};
this.buildControls = function () {
var self = this;
var oldControls = getElementsByClass(this.controlsClass, this.slideContainer, "div");
for (var i = 0; i < oldControls.length; i ++) {
this.slideContainer.removeChild(oldControls[i]);
}
var controlsContainer = document.createElement("div");
controlsContainer.className = this.controlsClass;
var previousButton = document.createElement("img");
previousButton.className = this.controlsPreviousClass;
previousButton.src = this.controlsPreviousImage;
previousButton.onclick = function () {self.jumpPrevious();};
controlsContainer.appendChild(previousButton);
if (this.loop == false) {
var playButton = document.createElement("img");
playButton.className = this.controlsPlayClass;
playButton.src = this.controlsPlayImage;
playButton.onclick = function () {self.playLoop();};
controlsContainer.appendChild(playButton);
}
else {
var pauseButton = document.createElement("img");
pauseButton.className = this.controlsPauseClass;
pauseButton.src = this.controlsPauseImage;
pauseButton.onclick = function () {self.pause();};
controlsContainer.appendChild(pauseButton);
}
var nextButton = document.createElement("img");
nextButton.className = this.controlsNextClass;
nextButton.src = this.controlsNextImage;
nextButton.onclick = function () {self.jumpNext();};
controlsContainer.appendChild(nextButton);
this.slideContainer.appendChild(controlsContainer);
};
this.buildIndex = function () {
var self = this;
var oldIndex = getElementsByClass(this.indexClass, this.slideContainer, "div");
for (var i = 0; i < oldIndex.length; i ++) {
this.slideContainer.removeChild(oldIndex[i]);
}
var indexContainer = document.createElement("div");
indexContainer.className = this.indexClass;
for (var i = 0; i < this.slideStack.length; i ++) {
if (i == this.currentSlide) {
var currentButton = document.createElement("img");
currentButton.className = this.indexJumpCurrentClass;
currentButton.src = this.indexJumpCurrentImage;
indexContainer.appendChild(currentButton);
}
else {
var jumpButton = document.createElement("img");
jumpButton.className = this.indexJumpClass;
jumpButton.src = this.indexJumpImage;
jumpButton.alt = i;
jumpButton.onclick = function () {var a = i; self.jumpTo(this.alt);};
indexContainer.appendChild(jumpButton);
}
}
this.slideContainer.appendChild(indexContainer);
};
};
/* Ajax class
Initialise an AJAX object.
Based on various scripts from around the web and in .net magazine
http://www.netmag.co.uk/
Written by John Wigzell -
http://clockworksatellite.co.uk/
*/
var Ajax = function () {
this.method = "GET";
this.uri;
this.response;
this.doc;
this.callback;
this.create = function () {
var request;
var self = this;
try {
request = new XMLHttpRequest();
}
catch (e) {
try {
request = new ActiveXObject("Msxml2.req");
}
catch (e) {
try {
request = new ActiveXObject("Microsoft.req");
}
catch (e) {
alert("Your browser does not support AJAX");
return false;
}
}
}
request.onreadystatechange = function () {
if(request.readyState != 4) {
return;
}
else {
if(request.status!=200) {
alert("Problem retrieving XML data");
return;
}
else {
self.callback(request.responseXML);
}
}
};
request.open(this.method, this.uri, true);
request.send(null);
}
};
/* Drag and drop
Allow an element to be dragged and dropped.
Based on a script from Nomadic Functions, extensively adapted by John Wigzell -
http://www.nofunc.com/Drag_Drop/
http://clockworksatellite.co.uk/
*/
var DragDrop = function () {
this.draggableElement;
this.draggableHandle;
this.oX;
this.oY;
this.eX;
this.eY;
this.tX;
this.tY;
this.active;
this.start = function () {
var self = this;
if (this.draggableElement = document.getElementById(this.draggableElement)) {
this.draggableElement.style.position = "relative";
this.draggableElement.style.top = 0;
this.draggableElement.style.left = 0;
if (this.draggableHandle = document.getElementById(this.draggableHandle)) {
this.draggableHandle.onmousedown = function (mouseDownEvent) {
self.active = true;
self.oX = parseInt(self.draggableElement.style.left);
self.oY = parseInt(self.draggableElement.style.top);
self.eX = self.getHorizontal(mouseDownEvent);
self.eY = self.getVertical(mouseDownEvent);
document.onmousemove = function (mouseMoveEvent) {
self.drag(mouseMoveEvent);
return false;
};
document.onmouseup = function () {
self.active = false;
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
else {
this.draggableElement.onmousedown = function (mouseDownEvent) {
self.active = true;
self.oX = parseInt(self.draggableElement.style.left);
self.oY = parseInt(self.draggableElement.style.top);
self.eX = self.getHorizontal(mouseDownEvent);
self.eY = self.getVertical(mouseDownEvent);
document.onmousemove = function (mouseMoveEvent) {
self.drag(mouseMoveEvent);
return false;
};
document.onmouseup = function () {
self.active = false;
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
}
};
this.drag = function (mouseMoveEvent) {
if (this.active == true) {
this.draggableElement.style.top = (this.tX = this.getVertical(mouseMoveEvent) + this.oY - this.eY + "px");
this.draggableElement.style.left = (this.tY = this.getHorizontal(mouseMoveEvent) + this.oX - this.eX + "px");
}
};
this.agent = function (agent) {
return (Math.max(navigator.userAgent.toLowerCase().indexOf(agent), 0));
}
this.getVertical = function (mouseMoveEvent) {
return (this.agent("msie") ? event.clientY + document.body.scrollTop : mouseMoveEvent.pageY);
}
this.getHorizontal = function (mouseMoveEvent) {
return (this.agent("msie") ? event.clientX + document.body.scrollTop : mouseMoveEvent.pageX);
}
};
// CMS-specific functions
function renderOutput(xml) {
var modules = xml.getElementsByTagName("module");
for (var i = 0; i < modules.length; i ++) {
var module = modules[i];
if (module.getAttribute("current") == "true") {
var format = module.getAttribute("format");
}
}
if (format == "pages") {
tree(xml);
}
if (format == "list") {
list(xml);
}
}
var ctype;
function tree(xml) {
var target = document.getElementById("palette-contents");
var panels = document.createElement("div");
panels.id = "panels";
target.appendChild(panels);
var tabs = document.createElement("ul");
tabs.className = "tabs";
panels.appendChild(tabs);
var sites = xml.getElementsByTagName("sites")[0];
var values = sites.getElementsByTagName("data")[0];
var items = values.getElementsByTagName("item");
for (var i = 0; i < items.length; i ++) {
var item = items[i];
var id = item.getAttribute("id");
var title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
var structure = item.getElementsByTagName("structure")[0];
var tab = document.createElement("li");
tab.innerHTML = "" + title + "";
tabs.appendChild(tab);
var panel = document.createElement("div");
panel.id = "pane_" + i;
panel.className = "panel";
var ul = document.createElement("ul");
panel.appendChild(ul);
traverse2(xml, structure, ul, id);
panels.appendChild(panel);
text="";
}
setTab("pane_0", "panels");
}
function getTitle(xml, id) {
var pages = xml.getElementsByTagName("pages")[0];
var items = pages.getElementsByTagName("item");
for (var i = 0; i < items.length; i ++) {
var item = items[i];
if (item.hasAttribute("id") && (item.getAttribute("id") == id)) {
var title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
}
}
return title;
}
function traverse2(xml, node, parent, siteid) {
removeWhitespace(node);
if (node.nodeType == 1 && node.hasAttribute("id")) {
var id = node.getAttribute("id");
var title = getTitle(xml, id);
}
else {
var id = "1111111111";
var title = "[Site root]";
}
var li = document.createElement("li");
parent.appendChild(li);
var span = document.createElement("span");
span.rel = id;
span.rev = siteid;
span.ondblclick = function () {
var target = document.getElementById("picklist_" + openPalette);
var page = this.rel;
var site = this.rev;
var title = this.innerHTML;
if (document.getElementById("form_site")) {
document.getElementById("form_site").value = site;
}
if (!document.getElementById(openPalette + "_" + id)) {
var row = document.createElement("div");
row.id = openPalette + "_" + id;
row.onclick = function () {
this.className = "selected";
}
if (window.ctype == "pickone") {
var del = target.getElementsByTagName("div");
for (var i = 0; i < del.length; i ++) {
target.removeChild(del[i]);
}
}
row.innerHTML = "" + title;
target.appendChild(row);
}
}
span.innerHTML = title;
li.appendChild(span);
if (node.hasChildNodes()) {
var ul = document.createElement("ul");
li.appendChild(ul);
var children = node.childNodes;
for (var i = 0; i < children.length; i ++) {
traverse2(xml, children[i], ul, siteid);
}
}
}
function list(xml) {
var target = document.getElementById("palette-contents");
var data = xml.getElementsByTagName("data")[0];
var items = data.getElementsByTagName("item");
for (i = 0; i < items.length; i ++) {
var item = items[i];
var id = item.getAttribute("id");
var title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
var listItem = document.createElement("div");
listItem.rel = id;
listItem.innerHTML = title;
listItem.ondblclick = function () {
var target = document.getElementById("picklist_" + openPalette);
var id = this.rel;
var title = this.innerHTML;
if (!document.getElementById(openPalette + "_" + id)) {
var row = document.createElement("div");
row.id = openPalette + "_" + id;
row.onclick = function () {
this.className = "selected";
}
if (window.ctype == "pickone") {
var del = target.getElementsByTagName("div");
for (var i = 0; i < del.length; i ++) {
target.removeChild(del[i]);
}
}
row.innerHTML = "" + title;
target.appendChild(row);
}
}
target.appendChild(listItem);
}
}
function closepalette() {
document.getElementById("palette").style.display = "none";
document.getElementById("palette-contents").innerHTML = null;
openPalette = null;
}
function openpalette(fieldset, ctype) {
window.ctype = ctype;
document.getElementById("palette").style.display = "block";
var ajaxConnection = new Ajax();
ajaxConnection.method = "GET";
ajaxConnection.uri = "backstage/" + fieldset + "/browse.xml";
ajaxConnection.callback = renderOutput;
ajaxConnection.create();
openPalette = fieldset;
}
function openpagepalette() {
window.ctype = "pickone";
document.getElementById("palette").style.display = "block";
var ajaxConnection = new Ajax();
ajaxConnection.method = "GET";
ajaxConnection.uri = "backstage/pages/browse.xml";
ajaxConnection.callback = renderOutput;
ajaxConnection.create();
openPalette = fieldset;
}
function deleteItems(source, id) {
var source = document.getElementById(source);
var rows = getElementsByClass("selected", source, "div");
for (var i = 0; i < rows.length; i ++) {
source.removeChild(rows[i]);
}
}
function initPicklist() {
var lists = getElementsByClass("picklist", document, "div");
for (var i = 0; i < lists.length; i ++) {
var divs = lists[i].getElementsByTagName("div");
for (var j = 0; j < divs.length; j ++) {
divs[j].onclick = function () {
this.className = "selected";
}
}
}
}
addLoadEvent(initPicklist);
/* Core JavaScript methods
John Wigzell
5 May 2008
*/
/* Collapsible tree functions
Expects nested
/
structures with all elements having id attributes
*/
function jnwgz_js_tree_toggle_click() {
var elementid = this.id.substr(0, this.id.length - 5);
jnwgz_js_tree_toggle(elementid);
}
function jnwgz_js_tree_toggle(elementid) {
if (document.getElementById(elementid).className == "tree_toggle_closed") {
document.getElementById(elementid).className = "tree_toggle_open";
document.getElementById(elementid + "_icon").className = "tree_toggle_icon_open";
}
else {
document.getElementById(elementid).className = "tree_toggle_closed";
document.getElementById(elementid + "_icon").className = "tree_toggle_icon_closed";
}
}
function jnwgz_js_tree_parse(elementid) {
var parent = document.getElementById(elementid);
var child = parent.firstChild;
while (child != null) {
if (child.tagName == "LI") {
var grandchild = child.firstChild;
while (grandchild != null) {
if (grandchild.tagName == "UL") {
jnwgz_js_tree_parse(grandchild.id);
grandchild.className = "tree_toggle_closed";
var node = document.createElement("div");
node.setAttribute("class", "tree_toggle_icon_closed");
node.setAttribute("id", grandchild.id + "_icon");
node.onclick = jnwgz_js_tree_toggle_click;
child.insertBefore(node, child.firstChild);
}
grandchild = grandchild.nextSibling;
}
}
child = child.nextSibling;
}
}
function jnwgz_js_tree() {
var elements = document.getElementsByTagName("UL");
for (var i = 0; i < elements.length; i ++) {
if (elements[i].className == "tree") {
jnwgz_js_tree_parse(elements[i].id);
}
}
}
// tabbed panels
function buttonOnClick() {
var target = this.href.replace(/^.*#/g, "");
setTab(target, this.rev, this.rel);
return false;
}
function setTab(target, rev) {
container = document.getElementById(rev);
for (var q = 0; q < container.childNodes.length; q ++) {
if ((container.childNodes[q].tagName == "UL") && (container.childNodes[q].className == "tabs")) {
tabset = container.childNodes[q];
tabs = tabset.getElementsByTagName("a");
for (var i = 0; i < tabs.length; i ++) {
if (tabs[i].href.match(target)) {
tabs[i].className = "active";
}
else {
tabs[i].className = "inactive";
}
tabs[i].onclick = buttonOnClick;
tabs[i].rev = rev;
}
}
if ((container.childNodes[q].tagName == "DIV") && (container.childNodes[q].className == "panel")) {
panel = container.childNodes[q];
if (panel.id == target) {
panel.style.display = "block";
}
else {
panel.style.display = "none";
}
}
}
}
/* Function loader
*/