popup.js
5.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
//
// 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
//
//
//