server_playground/doc/www.w3.org/2004/08/TalkFiles/popup.js

//
// Popup script for the talks database
// Ivan Herman $Date: 2006/05/02 09:16:39 $ (with lots of help from Dave Raggett)

//
// This is an ugly but effective trick from Dave Raggett. The issue:
//    the mechamism is based on using the javascript to 'move' the abstract content out of the way
//    however, the onload event is dispatched once the inital document is rendered. That means
//    that there is an ugly flash on the screen with the abstract texts. The trick below adds
//    an extra style entry to do this when the javascript is used. (That means that if there is no
//    javascript then everything is fine and displayed, as it should be)
// 
document.write("<style type='text/css'>\n" +
   "div.abstract { display: none; }" +
   "</style>");


// I took this from Dave Raggett, too
var ns_pos = (typeof window.pageYOffset!='undefined');

var currentPopup  = null;		// Name tells it all...
var abstracts = new Array();	// All the abstracts are collected at the beginning to speed this up
var buttons   = new Array();    // The dismiss buttons on the abstract popups. Used to set the focus

window.onload = init;

//
// Initialization: 
//		collect all abstracts into and array
//		set the positioning of each abstract as 'absolute'
//				(the reason not to have that as part of the css styling is that it would be 
//				 disruptive for a non-javascript based environment)
//
function init() {
   	// handle all possible abstracts and related tags...
	_init(document.getElementsByTagName("span"));
	_init(document.getElementsByTagName("div"));
	_init(document.getElementsByTagName("cite"));
}

function _init(dds) {
	// IE getAttribute requires "class" to be "className" :-(
	var name = ns_pos ? "class" : "className";
	for( var i=0; i < dds.length; i++ ) {
		dd = dds[i];
		cl = dd.getAttribute(name);
		// if( hasClass(dd,"abstract") ) {
		if( hasClass(dd,"abstract") ) {
			dd.style.position    = "absolute";
			dd.style.left        = "-10000px";
			dd.style.width       = "35em";
			dd.style.borderWidth = "thin";
			dd.style.borderColor = "black";
			dd.style.borderStyle = "solid";
			dd.style.background  = "rgb(240, 240, 200)";
			dd.style.display     = "block";		
			dd.style.padding     = "0.5em";
			
			// adding this button is Dave's idea, that ensures usability on 
			// keyboard only environments. The extra trick is when the button is
			// displayed, it also gets the focus....
			var button = document.createElement("button");
			button.onclick   = dismiss;
			button.innerHTML = "Dismiss";
			dd.appendChild(button);		
			
			// store both the button and the abstract for later processing
			abstracts.push(dd);
			buttons.push(button);
		} else if( hasClass(dd,"abstractTitle") ) {
			dd.style.backgroundImage = "url(/2004/08/TalkFiles/close.png)";
			dd.style.cursor          = "pointer";
			dd.style.display         = "block";
			dd.style.paddingBottom   = "0.1em";
		} else if( hasClass(dd,"abstractContent") ) {
			dd.style.display         = "block";
			dd.style.padding         = "0.5em";
		} else if( hasClass(dd,"abstractClick") ) {
			dd.style.display         = "inline";
		}
	}	
}

//
// Switch the a popup down by setting its display to 'none'
//
function dismiss() {
	if( currentPopup != null ) {
		currentPopup.style.left = "-10000px";
		currentPopup = null;
	}
}

//
// see if an element has a particular class, regardless of whether that is the only class
// or part of a list of classes
function hasClass(element, name) {
	// this is one of the many uglinesses of IE :-(
	if (typeof window.pageYOffset =='undefined')
		var cls = element.getAttribute("className");
	else
		cls = element.getAttribute("class");
	
	
	var regString = "(^| )" + name + "( |$)\W*";
	var regExpression = new RegExp(regString);
	if (regExpression.test(cls))
		return true;
	else
		return false;
}



//
// Callback to switch an abstract on, by using its 'id'. It also switches off any other
// popup on the screen
//
// Caveat: the positioning of the popup should be improved...
//
function switchOn(id) {
	if( currentPopup != null ) {
		dismiss();
	}
	for( var i=0; i < abstracts.length; i++ ) {
		dd = abstracts[i];
		if( dd.getAttribute("id") == id ) {
			dd.style.left = "10em";
			buttons[i].focus();
			currentPopup = dd;
			return;
		}
	}
}

//
// Callback to switch an abstract off 
//
function switchOff(id,e) {
	dismiss()
}


//
// $Log: popup.js,v $
// Revision 1.5  2006/05/02 09:16:39  ivan
// Some small stylistic tweaks suggested by Dave R
//
// Revision 1.4  2006/04/20 08:00:55  ivan
// - added an (adapted) version of hasClass from Dave (an extra space was
//   necessary in the regular expression)
// - added a focus on the button for the popup (which necessitated the storage
//   of the buttons in a separate array)
// - function interfaces simplified (the event is not necessary any more,
//   because the popup's position is not dependent on the event any more)
//
// Revision 1.3  2006/04/19 15:30:56  ivan
// Added an extra 'dismiss' button to the abstract popup (with proper styling)
//
// Revision 1.2  2006/04/19 13:39:44  ivan
// Added the popup related changes to css, and the right URI for the close image into the script
//
//
//