1 // Sliding drawers on the sidebar |
1 // Sliding drawers on the sidebar |
2 |
2 |
3 // our global vars |
3 // our global vars |
4 // the delay between the slide in/out, and a little inertia |
4 // the delay between the slide in/out, and a little inertia |
5 |
5 |
|
6 /* |
|
7 pseudocode: |
|
8 oninit(): |
|
9 i = 0 |
|
10 for every div with class "slideblock", do |
|
11 if ( cookie['mdgSliderState_' || i] == 'closed' ) |
|
12 hide(div) |
|
13 |
|
14 div.trigger.addEvent onclick(): |
|
15 if ( div.hidden ) |
|
16 div.show() |
|
17 cookie['mdgSliderState_' || i] = 'open' |
|
18 else |
|
19 div.hide() |
|
20 cookie['mdgSliderState_' || i] = 'closed |
|
21 |
|
22 i++ |
|
23 |
|
24 */ |
|
25 |
|
26 |
6 var sliders_initted = false; |
27 var sliders_initted = false; |
7 |
28 |
8 var initSliders = function() |
29 var initSliders = function() |
9 { |
30 { |
10 sliders_initted = true; |
31 if ( KILL_SWITCH || IE ) |
11 if ( KILL_SWITCH ) |
|
12 return false; |
32 return false; |
13 // detect whether the user has ie or not, how we get the height is different |
33 |
14 var useragent = navigator.userAgent.toLowerCase(); |
34 var divs = getElementsByClassName(document, "div", "slideblock"); |
15 var ie = ((useragent.indexOf('msie') != -1) && (useragent.indexOf('opera') == -1) && (useragent.indexOf('webtv') == -1)); |
35 var divs2 = getElementsByClassName(document, "div", "slideblock2"); |
|
36 for ( var i = 0; i < divs2.length; i++ ) |
|
37 { |
|
38 divs.push(divs2[i]); |
|
39 } |
|
40 delete divs2; |
|
41 |
|
42 if ( divs.length < 1 ) |
|
43 return false; |
|
44 |
|
45 for ( var i = 0; i < divs.length; i++ ) |
|
46 { |
|
47 var div = divs[i]; |
|
48 // set a unique id for this slider |
|
49 div.metaid = i; |
16 |
50 |
17 if(ie) |
51 var cookiename = 'mdgSliderState_' + i; |
18 return; |
52 if ( readCookie(cookiename) == 'closed' ) |
|
53 { |
|
54 div.style.display = 'none'; |
|
55 } |
19 |
56 |
20 var divs = getElementsByClassName(document, "div", "slideblock"); |
57 var el = div.previousSibling; |
21 |
58 if ( !el ) |
22 for(var i=0; i<divs.length; i++) |
59 continue; |
|
60 while ( el.tagName != 'DIV' ) |
|
61 el = el.previousSibling; |
|
62 var toggler = el.getElementsByTagName('a')[0]; |
|
63 if ( !toggler ) |
|
64 continue; |
|
65 toggler.onclick = function() |
23 { |
66 { |
24 // set a unique id for this slider |
67 load_component('jquery'); |
25 divs[i].metaid = i; |
68 load_component('jquery-ui'); |
26 |
69 |
27 // get the original height |
70 var mydiv = this.parentNode.nextSibling; |
28 var baseheight = (ie) ? divs[i].offsetHeight + "px" : document.defaultView.getComputedStyle(divs[i], null).getPropertyValue('height', null); |
71 while ( mydiv.tagName != 'DIV' ) |
29 |
72 mydiv = mydiv.nextSibling; |
30 // use cookies to toggle whether to display it or not |
73 if ( mydiv.style.display == 'none' ) |
31 var id = ( divs[i].parentNode.firstChild.nextSibling ) ? divs[i].parentNode.firstChild.nextSibling.firstChild : divs[i].parentNode.parentNode.firstChild.nextSibling.firstChild; |
74 { |
32 |
75 $(mydiv).show('blind'); |
33 if ( !id.nextSibling ) |
76 var cookiename = 'mdgSliderState_' + mydiv.metaid; |
34 return; |
77 createCookie(cookiename, 'open', 365); |
35 |
78 } |
36 if(id.innerHTML || id.nextSibling.length < 1) id = id.innerHTML; |
79 else |
37 else id = id.nextSibling.innerHTML; // Gecko fix |
80 { |
38 |
81 $(mydiv).hide('blind'); |
39 var cookieName = 'mdgSliderState_'+i; // id.replace(' ', '_'); |
82 var cookiename = 'mdgSliderState_' + mydiv.metaid; |
40 //alert(cookieName + ': ' + readCookie(cookieName)); |
83 createCookie(cookiename, 'closed', 365); |
41 if(readCookie(cookieName)=='closed') |
84 } |
42 { |
85 |
43 divs[i].style.display = "none"; |
86 return false; |
44 } |
|
45 else |
|
46 { |
|
47 divs[i].style.display = "block"; |
|
48 } |
|
49 |
|
50 // "save" our div height, because once it's display is set to none we can't get the original height again |
|
51 var d = new div(); |
|
52 d.el = divs[i]; |
|
53 d.ht = baseheight.substring(0, baseheight.indexOf("p")); |
|
54 |
|
55 // store our saved version |
|
56 divheights[i] = d; |
|
57 } |
87 } |
|
88 } |
58 } |
89 } |
59 |
90 |
60 addOnloadHook(initSliders); |
91 addOnloadHook(initSliders); |
61 |
92 |
62 // this is one of our divs, it just has a DOM reference to the element and the original height |
|
63 function div(_el, _ht) |
|
64 { |
|
65 this.el = _el; |
|
66 this.ht = _ht; |
|
67 } |
|
68 |
|
69 function toggle(t) |
|
70 { |
|
71 if(IE) |
|
72 return false; |
|
73 if ( KILL_SWITCH ) |
|
74 return false; |
|
75 if ( !sliders_initted ) |
|
76 initSliders(); |
|
77 // reset our inertia base and interval |
|
78 inertiabase = inertiabaseoriginal; |
|
79 clearInterval(slideinterval); |
|
80 |
|
81 // get our block |
|
82 block = t.parentNode.nextSibling; |
|
83 |
|
84 // for mozilla, it doesn't like whitespace between elements |
|
85 if(block.className == undefined) |
|
86 block = t.parentNode.nextSibling.nextSibling; |
|
87 |
|
88 if(block.style.display == "none") |
|
89 { |
|
90 block.style.display = "block"; |
|
91 block.style.height = "1px"; |
|
92 |
|
93 // our goal and current height |
|
94 targetheight = divheight(block); |
|
95 heightnow = 1; |
|
96 |
|
97 // remember toggled state |
|
98 cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_'); |
|
99 createCookie(cookieName, 'open', 3650); |
|
100 |
|
101 // our interval |
|
102 slideinterval = setInterval(slideout, slideintervalinc); |
|
103 } |
|
104 else |
|
105 { |
|
106 // our goal and current height |
|
107 targetheight = 1; |
|
108 heightnow = divheight(block); |
|
109 |
|
110 // remember toggled state |
|
111 cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_'); |
|
112 createCookie(cookieName, 'closed', 3650); |
|
113 |
|
114 // our interval |
|
115 slideinterval = setInterval(slidein, slideintervalinc); |
|
116 } |
|
117 } |
|
118 |
|
119 // this is our slidein function the interval uses, it keeps subtracting |
|
120 // from the height till it's 1px then it hides it |
|
121 function slidein() |
|
122 { |
|
123 if(heightnow > targetheight) |
|
124 { |
|
125 // reduce the height by intertiabase * inertiainc |
|
126 heightnow -= inertiabase; |
|
127 |
|
128 // increase the intertiabase by the amount to keep it changing |
|
129 inertiabase += inertiainc; |
|
130 |
|
131 // it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false; |
|
132 block.style.height = (heightnow > 1) ? heightnow + "px" : targetheight + "px"; |
|
133 } |
|
134 else |
|
135 { |
|
136 // finished, so hide the div properly and kill the interval |
|
137 clearInterval(slideinterval); |
|
138 block.style.display = "none"; |
|
139 } |
|
140 } |
|
141 |
|
142 // this is the function our slideout interval uses, it keeps adding |
|
143 // to the height till it's fully displayed |
|
144 function slideout() |
|
145 { |
|
146 block.style.display = 'block'; |
|
147 if(heightnow < targetheight) |
|
148 { |
|
149 // increases the height by the inertia stuff |
|
150 heightnow += inertiabase; |
|
151 |
|
152 // increase the inertia stuff |
|
153 inertiabase += inertiainc; |
|
154 |
|
155 // it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false; |
|
156 block.style.height = (heightnow < targetheight) ? heightnow + "px" : targetheight + "px"; |
|
157 |
|
158 } |
|
159 else |
|
160 { |
|
161 // finished, so make sure the height is what it's meant to be (inertia can make it off a little) |
|
162 // then kill the interval |
|
163 clearInterval(slideinterval); |
|
164 block.style.height = targetheight + "px"; |
|
165 } |
|
166 } |
|
167 |
|
168 // returns the height of the div from our array of such things |
|
169 function divheight(d) |
|
170 { |
|
171 for(var i=0; i<divheights.length; i++) |
|
172 { |
|
173 if(divheights[i].el == d) |
|
174 { |
|
175 return divheights[i].ht; |
|
176 } |
|
177 } |
|
178 } |
|
179 |
|
180 |
|