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
|
// toggling event visibility
// $Id: toggle.js,v 1.1 2007-02-20 01:56:44 ot Exp $
// v1.0 David Dorward for the W3C CSS Validation Service, 18/12/2006
// Based on v2.01 Kent Brewster, 6/8/2006 http://www.mindsack.com
// namespace protection: one global variable to rule them all
var W3C = {};
W3C.QA = {};
W3C.QA.Validator = {};
W3C.QA.Validator.CSS = {};
W3C.QA.Validator.CSS.toggle =
{
init : function(toggle, closed, hidden)
{
// three class names, fed in from init call
this.toggleClass = toggle;
this.toggleClosed = closed;
this.toggleHidden = hidden;
this.toggleText = "toggletext";
// crawl through the document, look for toggled elements
this.crawl(document.body);
},
crawl : function(el)
{
// get this element's next sibling
var nextSib = this.getNextSibling(el);
// if it has a class name, the class name matches our toggle class
if (el.className && el.className.match(this.toggleClass))
{
// labels are nice, but redundant with the link we are adding
for (i=0;i<el.childNodes.length;i++)
{
current_child_node=el.childNodes[i];
if (current_child_node.tagName && current_child_node.className && current_child_node.className.match(this.toggleText))
// we only want to match an element with a class
{
current_child_node.className = 'hideme';
if (current_child_node.tagName.toLowerCase() == "legend")
{
var paragraph = document.createElement('p');
}
else
{
var paragraph = document.createElement(current_child_node.tagName.toLowerCase());
}
var link = document.createElement('a');
var text = current_child_node.childNodes[0].nodeValue;
//text = text.replace("_", " ", "g");
//var text = "Show/Hide extra validation options";
text = document.createTextNode(text);
link.appendChild(text);
link.href="#" + el.id;
link.onclick = this.newToggleState(this,paragraph,el);
paragraph.appendChild(link);
paragraph.className += ' toggle closed';
el.parentNode.insertBefore(paragraph, el);
}
}
// if the next sib ought to be hidden and it isn't already, hide it
// you can hard-code class=hidden in the HTML if you like, and avoid the Flash of Unstyled Content
if (el.className.match(this.toggleClosed))
{
el.className += ' ' + this.toggleHidden;
//el.parentNode.className += ' ' + this.toggleClosed;
}
}
// is there more to do? Do it, if so:
if (el.firstChild)
{
this.crawl(el.firstChild);
}
if (nextSib)
{
this.crawl(nextSib);
}
},
newToggleState : function(o,element,nextEl) {
return function () { return o.toggleState(element,nextEl) };
},
toggleState : function(el,nextEl)
{
// there's got to be a way to get this without stating it explicitly
var o = W3C.QA.Validator.CSS.toggle;
// change the style of the triggering element
if(el.className.match(o.toggleClosed))
{
el.className = el.className.replace(o.toggleClosed, '');
}
else
{
el.className = el.className + ' ' + o.toggleClosed;
}
// yes, we need to check if it's really there; other scripts could have removed it
if(nextEl && nextEl.className.match('hidden'))
{
nextEl.className = nextEl.className.replace(o.toggleHidden, '');
}
else
{
nextEl.className += ' ' + o.toggleHidden;
}
return false;
},
getNextSibling : function(el)
{
var nextSib = el.nextSibling;
// hack for Gecko browsers
if (nextSib && nextSib.nodeType != 1)
{
nextSib = nextSib.nextSibling;
}
return nextSib;
},
getEl : function(v)
{
var tg = (v) ? v : event;
var el = null;
if (tg.target)
{
el = (tg.target.nodeType == 3) ? tg.target.parentNode : tg.target;
}
else
{
el = tg.srcElement;
}
return el;
}
};
// feed it the CSS class names of your choice
window.onload = function()
{
W3C.QA.Validator.CSS.toggle.init('alttoggle', 'closed', 'hidden');
};
|
