1 /* |
|
2 * Treeview 1.5pre - jQuery plugin to hide and show branches of a tree |
|
3 * |
|
4 * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ |
|
5 * http://docs.jquery.com/Plugins/Treeview |
|
6 * |
|
7 * Copyright 2010 Jörn Zaefferer |
|
8 * Released under the MIT license: |
|
9 * http://www.opensource.org/licenses/mit-license.php |
|
10 */ |
|
11 |
|
12 ;(function($) { |
|
13 |
|
14 // TODO rewrite as a widget, removing all the extra plugins |
|
15 $.extend($.fn, { |
|
16 swapClass: function(c1, c2) { |
|
17 var c1Elements = this.filter('.' + c1); |
|
18 this.filter('.' + c2).removeClass(c2).addClass(c1); |
|
19 c1Elements.removeClass(c1).addClass(c2); |
|
20 return this; |
|
21 }, |
|
22 replaceClass: function(c1, c2) { |
|
23 return this.filter('.' + c1).removeClass(c1).addClass(c2).end(); |
|
24 }, |
|
25 hoverClass: function(className) { |
|
26 className = className || "hover"; |
|
27 return this.hover(function() { |
|
28 $(this).addClass(className); |
|
29 }, function() { |
|
30 $(this).removeClass(className); |
|
31 }); |
|
32 }, |
|
33 heightToggle: function(animated, callback) { |
|
34 animated ? |
|
35 this.animate({ height: "toggle" }, animated, callback) : |
|
36 this.each(function(){ |
|
37 jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ](); |
|
38 if(callback) |
|
39 callback.apply(this, arguments); |
|
40 }); |
|
41 }, |
|
42 heightHide: function(animated, callback) { |
|
43 if (animated) { |
|
44 this.animate({ height: "hide" }, animated, callback); |
|
45 } else { |
|
46 this.hide(); |
|
47 if (callback) |
|
48 this.each(callback); |
|
49 } |
|
50 }, |
|
51 prepareBranches: function(settings) { |
|
52 if (!settings.prerendered) { |
|
53 // mark last tree items |
|
54 this.filter(":last-child:not(ul)").addClass(CLASSES.last); |
|
55 // collapse whole tree, or only those marked as closed, anyway except those marked as open |
|
56 this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide(); |
|
57 } |
|
58 // return all items with sublists |
|
59 return this.filter(":has(>ul)"); |
|
60 }, |
|
61 applyClasses: function(settings, toggler) { |
|
62 // TODO use event delegation |
|
63 this.filter(":has(>ul):not(:has(>a))").find(">span").unbind("click.treeview").bind("click.treeview", function(event) { |
|
64 // don't handle click events on children, eg. checkboxes |
|
65 if ( this == event.target ) |
|
66 toggler.apply($(this).next()); |
|
67 }).add( $("a", this) ).hoverClass(); |
|
68 |
|
69 if (!settings.prerendered) { |
|
70 // handle closed ones first |
|
71 this.filter(":has(>ul:hidden)") |
|
72 .addClass(CLASSES.expandable) |
|
73 .replaceClass(CLASSES.last, CLASSES.lastExpandable); |
|
74 |
|
75 // handle open ones |
|
76 this.not(":has(>ul:hidden)") |
|
77 .addClass(CLASSES.collapsable) |
|
78 .replaceClass(CLASSES.last, CLASSES.lastCollapsable); |
|
79 |
|
80 // create hitarea if not present |
|
81 var hitarea = this.find("div." + CLASSES.hitarea); |
|
82 if (!hitarea.length) |
|
83 hitarea = this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>").find("div." + CLASSES.hitarea); |
|
84 hitarea.removeClass().addClass(CLASSES.hitarea).each(function() { |
|
85 var classes = ""; |
|
86 $.each($(this).parent().attr("class").split(" "), function() { |
|
87 classes += this + "-hitarea "; |
|
88 }); |
|
89 $(this).addClass( classes ); |
|
90 }) |
|
91 } |
|
92 |
|
93 // apply event to hitarea |
|
94 this.find("div." + CLASSES.hitarea).click( toggler ); |
|
95 }, |
|
96 treeview: function(settings) { |
|
97 |
|
98 settings = $.extend({ |
|
99 cookieId: "treeview" |
|
100 }, settings); |
|
101 |
|
102 if ( settings.toggle ) { |
|
103 var callback = settings.toggle; |
|
104 settings.toggle = function() { |
|
105 return callback.apply($(this).parent()[0], arguments); |
|
106 }; |
|
107 } |
|
108 |
|
109 // factory for treecontroller |
|
110 function treeController(tree, control) { |
|
111 // factory for click handlers |
|
112 function handler(filter) { |
|
113 return function() { |
|
114 // reuse toggle event handler, applying the elements to toggle |
|
115 // start searching for all hitareas |
|
116 toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() { |
|
117 // for plain toggle, no filter is provided, otherwise we need to check the parent element |
|
118 return filter ? $(this).parent("." + filter).length : true; |
|
119 }) ); |
|
120 return false; |
|
121 }; |
|
122 } |
|
123 // click on first element to collapse tree |
|
124 $("a:eq(0)", control).click( handler(CLASSES.collapsable) ); |
|
125 // click on second to expand tree |
|
126 $("a:eq(1)", control).click( handler(CLASSES.expandable) ); |
|
127 // click on third to toggle tree |
|
128 $("a:eq(2)", control).click( handler() ); |
|
129 } |
|
130 |
|
131 // handle toggle event |
|
132 function toggler() { |
|
133 $(this) |
|
134 .parent() |
|
135 // swap classes for hitarea |
|
136 .find(">.hitarea") |
|
137 .swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea ) |
|
138 .swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea ) |
|
139 .end() |
|
140 // swap classes for parent li |
|
141 .swapClass( CLASSES.collapsable, CLASSES.expandable ) |
|
142 .swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable ) |
|
143 // find child lists |
|
144 .find( ">ul" ) |
|
145 // toggle them |
|
146 .heightToggle( settings.animated, settings.toggle ); |
|
147 if ( settings.unique ) { |
|
148 $(this).parent() |
|
149 .siblings() |
|
150 // swap classes for hitarea |
|
151 .find(">.hitarea") |
|
152 .replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea ) |
|
153 .replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea ) |
|
154 .end() |
|
155 .replaceClass( CLASSES.collapsable, CLASSES.expandable ) |
|
156 .replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable ) |
|
157 .find( ">ul" ) |
|
158 .heightHide( settings.animated, settings.toggle ); |
|
159 } |
|
160 } |
|
161 this.data("toggler", toggler); |
|
162 |
|
163 function serialize() { |
|
164 function binary(arg) { |
|
165 return arg ? 1 : 0; |
|
166 } |
|
167 var data = []; |
|
168 branches.each(function(i, e) { |
|
169 data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0; |
|
170 }); |
|
171 $.cookie(settings.cookieId, data.join(""), settings.cookieOptions ); |
|
172 } |
|
173 |
|
174 function deserialize() { |
|
175 var stored = $.cookie(settings.cookieId); |
|
176 if ( stored ) { |
|
177 var data = stored.split(""); |
|
178 branches.each(function(i, e) { |
|
179 $(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ](); |
|
180 }); |
|
181 } |
|
182 } |
|
183 |
|
184 // add treeview class to activate styles |
|
185 this.addClass("treeview"); |
|
186 |
|
187 // prepare branches and find all tree items with child lists |
|
188 var branches = this.find("li").prepareBranches(settings); |
|
189 |
|
190 switch(settings.persist) { |
|
191 case "cookie": |
|
192 var toggleCallback = settings.toggle; |
|
193 settings.toggle = function() { |
|
194 serialize(); |
|
195 if (toggleCallback) { |
|
196 toggleCallback.apply(this, arguments); |
|
197 } |
|
198 }; |
|
199 deserialize(); |
|
200 break; |
|
201 case "location": |
|
202 var current = this.find("a").filter(function() { |
|
203 return location.href.toLowerCase().indexOf(this.href.toLowerCase()) == 0; |
|
204 }); |
|
205 if ( current.length ) { |
|
206 // TODO update the open/closed classes |
|
207 var items = current.addClass("selected").parents("ul, li").add( current.next() ).show(); |
|
208 if (settings.prerendered) { |
|
209 // if prerendered is on, replicate the basic class swapping |
|
210 items.filter("li") |
|
211 .swapClass( CLASSES.collapsable, CLASSES.expandable ) |
|
212 .swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable ) |
|
213 .find(">.hitarea") |
|
214 .swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea ) |
|
215 .swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea ); |
|
216 } |
|
217 } |
|
218 break; |
|
219 } |
|
220 |
|
221 branches.applyClasses(settings, toggler); |
|
222 |
|
223 // if control option is set, create the treecontroller and show it |
|
224 if ( settings.control ) { |
|
225 treeController(this, settings.control); |
|
226 $(settings.control).show(); |
|
227 } |
|
228 |
|
229 return this; |
|
230 } |
|
231 }); |
|
232 |
|
233 // classes used by the plugin |
|
234 // need to be styled via external stylesheet, see first example |
|
235 $.treeview = {}; |
|
236 var CLASSES = ($.treeview.classes = { |
|
237 open: "open", |
|
238 closed: "closed", |
|
239 expandable: "expandable", |
|
240 expandableHitarea: "expandable-hitarea", |
|
241 lastExpandableHitarea: "lastExpandable-hitarea", |
|
242 collapsable: "collapsable", |
|
243 collapsableHitarea: "collapsable-hitarea", |
|
244 lastCollapsableHitarea: "lastCollapsable-hitarea", |
|
245 lastCollapsable: "lastCollapsable", |
|
246 lastExpandable: "lastExpandable", |
|
247 last: "last", |
|
248 hitarea: "hitarea" |
|
249 }); |
|
250 |
|
251 })(jQuery); |
|