1
|
1 |
// Sliding drawers on the sidebar
|
|
2 |
|
|
3 |
// our global vars
|
|
4 |
// the delay between the slide in/out, and a little inertia
|
|
5 |
|
|
6 |
var sliders_initted = false;
|
|
7 |
|
|
8 |
function initSliders()
|
|
9 |
{
|
|
10 |
sliders_initted = true;
|
|
11 |
// detect whether the user has ie or not, how we get the height is different
|
|
12 |
var useragent = navigator.userAgent.toLowerCase();
|
|
13 |
var ie = ((useragent.indexOf('msie') != -1) && (useragent.indexOf('opera') == -1) && (useragent.indexOf('webtv') == -1));
|
|
14 |
|
|
15 |
if(ie)
|
|
16 |
return;
|
|
17 |
|
|
18 |
var divs = getElementsByClassName(document, "div", "slideblock");
|
|
19 |
|
|
20 |
for(var i=0; i<divs.length; i++)
|
|
21 |
{
|
|
22 |
// set a unique id for this slider
|
|
23 |
divs[i].metaid = i;
|
|
24 |
|
|
25 |
// get the original height
|
|
26 |
var baseheight = (ie) ? divs[i].offsetHeight + "px" : document.defaultView.getComputedStyle(divs[i], null).getPropertyValue('height', null);
|
|
27 |
|
|
28 |
// use cookies to toggle whether to display it or not
|
|
29 |
var id = ( divs[i].parentNode.firstChild.nextSibling ) ? divs[i].parentNode.firstChild.nextSibling.firstChild : divs[i].parentNode.parentNode.firstChild.nextSibling.firstChild;
|
|
30 |
|
|
31 |
if(id.innerHTML || id.nextSibling.length < 1) id = id.innerHTML;
|
|
32 |
else id = id.nextSibling.innerHTML; // Gecko fix
|
|
33 |
|
|
34 |
var cookieName = 'mdgSliderState_'+i; // id.replace(' ', '_');
|
|
35 |
//alert(cookieName + ': ' + readCookie(cookieName));
|
|
36 |
if(readCookie(cookieName)=='closed')
|
|
37 |
{
|
|
38 |
divs[i].style.display = "none";
|
|
39 |
}
|
|
40 |
else
|
|
41 |
{
|
|
42 |
divs[i].style.display = "block";
|
|
43 |
}
|
|
44 |
|
|
45 |
// "save" our div height, because once it's display is set to none we can't get the original height again
|
|
46 |
var d = new div();
|
|
47 |
d.el = divs[i];
|
|
48 |
d.ht = baseheight.substring(0, baseheight.indexOf("p"));
|
|
49 |
|
|
50 |
// store our saved version
|
|
51 |
divheights[i] = d;
|
|
52 |
}
|
|
53 |
}
|
|
54 |
|
|
55 |
// this is one of our divs, it just has a DOM reference to the element and the original height
|
|
56 |
function div(_el, _ht)
|
|
57 |
{
|
|
58 |
this.el = _el;
|
|
59 |
this.ht = _ht;
|
|
60 |
}
|
|
61 |
|
|
62 |
function toggle(t)
|
|
63 |
{
|
|
64 |
if(IE)
|
|
65 |
return false;
|
|
66 |
if ( !sliders_initted )
|
|
67 |
initSliders();
|
|
68 |
// reset our inertia base and interval
|
|
69 |
inertiabase = inertiabaseoriginal;
|
|
70 |
clearInterval(slideinterval);
|
|
71 |
|
|
72 |
// get our block
|
|
73 |
block = t.parentNode.nextSibling;
|
|
74 |
|
|
75 |
// for mozilla, it doesn't like whitespace between elements
|
|
76 |
if(block.className == undefined)
|
|
77 |
block = t.parentNode.nextSibling.nextSibling;
|
|
78 |
|
|
79 |
if(block.style.display == "none")
|
|
80 |
{
|
|
81 |
block.style.display = "block";
|
|
82 |
block.style.height = "1px";
|
|
83 |
|
|
84 |
// our goal and current height
|
|
85 |
targetheight = divheight(block);
|
|
86 |
heightnow = 1;
|
|
87 |
|
|
88 |
// remember toggled state
|
|
89 |
cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_');
|
|
90 |
createCookie(cookieName, 'open', 3650);
|
|
91 |
|
|
92 |
// our interval
|
|
93 |
slideinterval = setInterval(slideout, slideintervalinc);
|
|
94 |
}
|
|
95 |
else
|
|
96 |
{
|
|
97 |
// our goal and current height
|
|
98 |
targetheight = 1;
|
|
99 |
heightnow = divheight(block);
|
|
100 |
|
|
101 |
// remember toggled state
|
|
102 |
cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_');
|
|
103 |
createCookie(cookieName, 'closed', 3650);
|
|
104 |
|
|
105 |
// our interval
|
|
106 |
slideinterval = setInterval(slidein, slideintervalinc);
|
|
107 |
}
|
|
108 |
}
|
|
109 |
|
|
110 |
// this is our slidein function the interval uses, it keeps subtracting
|
|
111 |
// from the height till it's 1px then it hides it
|
|
112 |
function slidein()
|
|
113 |
{
|
|
114 |
if(heightnow > targetheight)
|
|
115 |
{
|
|
116 |
// reduce the height by intertiabase * inertiainc
|
|
117 |
heightnow -= inertiabase;
|
|
118 |
|
|
119 |
// increase the intertiabase by the amount to keep it changing
|
|
120 |
inertiabase += inertiainc;
|
|
121 |
|
|
122 |
// it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false;
|
|
123 |
block.style.height = (heightnow > 1) ? heightnow + "px" : targetheight + "px";
|
|
124 |
}
|
|
125 |
else
|
|
126 |
{
|
|
127 |
// finished, so hide the div properly and kill the interval
|
|
128 |
clearInterval(slideinterval);
|
|
129 |
block.style.display = "none";
|
|
130 |
}
|
|
131 |
}
|
|
132 |
|
|
133 |
// this is the function our slideout interval uses, it keeps adding
|
|
134 |
// to the height till it's fully displayed
|
|
135 |
function slideout()
|
|
136 |
{
|
|
137 |
block.style.display = 'block';
|
|
138 |
if(heightnow < targetheight)
|
|
139 |
{
|
|
140 |
// increases the height by the inertia stuff
|
|
141 |
heightnow += inertiabase;
|
|
142 |
|
|
143 |
// increase the inertia stuff
|
|
144 |
inertiabase += inertiainc;
|
|
145 |
|
|
146 |
// it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false;
|
|
147 |
block.style.height = (heightnow < targetheight) ? heightnow + "px" : targetheight + "px";
|
|
148 |
|
|
149 |
}
|
|
150 |
else
|
|
151 |
{
|
|
152 |
// finished, so make sure the height is what it's meant to be (inertia can make it off a little)
|
|
153 |
// then kill the interval
|
|
154 |
clearInterval(slideinterval);
|
|
155 |
block.style.height = targetheight + "px";
|
|
156 |
}
|
|
157 |
}
|
|
158 |
|
|
159 |
// returns the height of the div from our array of such things
|
|
160 |
function divheight(d)
|
|
161 |
{
|
|
162 |
for(var i=0; i<divheights.length; i++)
|
|
163 |
{
|
|
164 |
if(divheights[i].el == d)
|
|
165 |
{
|
|
166 |
return divheights[i].ht;
|
|
167 |
}
|
|
168 |
}
|
|
169 |
}
|
|
170 |
|
|
171 |
/*
|
|
172 |
the getElementsByClassName function I pilfered from this guy. It's
|
|
173 |
a useful function that'll return any/all tags with a specific css class.
|
|
174 |
|
|
175 |
Written by Jonathan Snook, http://www.snook.ca/jonathan
|
|
176 |
Add-ons by Robert Nyman, http://www.robertnyman.com
|
|
177 |
|
|
178 |
Modified to match all elements that match the class name plus an integer after the name
|
|
179 |
This is used in Enano to allow sliding sidebar widgets that use their own CSS
|
|
180 |
*/
|
|
181 |
function getElementsByClassName(oElm, strTagName, strClassName)
|
|
182 |
{
|
|
183 |
// first it gets all of the specified tags
|
|
184 |
var arrElements = (strTagName == "*" && document.all) ? document.all : oElm.getElementsByTagName(strTagName);
|
|
185 |
|
|
186 |
// then it sets up an array that'll hold the results
|
|
187 |
var arrReturnElements = new Array();
|
|
188 |
|
|
189 |
// some regex stuff you don't need to worry about
|
|
190 |
strClassName = strClassName.replace(/\-/g, "\\-");
|
|
191 |
|
|
192 |
var oRegExp = new RegExp("(^|\\s)" + strClassName + "([0-9]*)(\\s|$)");
|
|
193 |
var oElement;
|
|
194 |
|
|
195 |
// now it iterates through the elements it grabbed above
|
|
196 |
for(var i=0; i<arrElements.length; i++)
|
|
197 |
{
|
|
198 |
oElement = arrElements[i];
|
|
199 |
|
|
200 |
// if the class matches what we're looking for it ads to the results array
|
|
201 |
if(oElement.className.match(oRegExp))
|
|
202 |
{
|
|
203 |
arrReturnElements.push(oElement);
|
|
204 |
}
|
|
205 |
}
|
|
206 |
|
|
207 |
// then it kicks the results back to us
|
|
208 |
return (arrReturnElements)
|
|
209 |
}
|
|
210 |
|