|
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 |