|
1
|
// $Id$
|
|
2
|
|
|
3
|
|
|
4
|
(function($){
|
|
5
|
|
|
6
|
/**
|
|
7
|
*
|
|
8
|
*/
|
|
9
|
$.fn.cdm_taxontree = function(options)
|
|
10
|
{
|
|
11
|
var opts = $.extend({},$.fn.cdm_taxontree.defaults, options);
|
|
12
|
|
|
13
|
return this.each(
|
|
14
|
function()
|
|
15
|
{
|
|
16
|
/* ----------- magicbox ---------- */
|
|
17
|
if(opts.magicbox){
|
|
18
|
$(this).cdm_taxontree_magicbox();
|
|
19
|
}
|
|
20
|
|
|
21
|
/* ----------- tree browser ---------- */
|
|
22
|
$(this).children('li').not('.invisible').click(
|
|
23
|
function(event) {
|
|
24
|
event.stopPropagation();
|
|
25
|
if($(this).hasClass('collapsed')){
|
|
26
|
var bindChildren = ($(this).find('ul').length == 0);
|
|
27
|
if(bindChildren){
|
|
28
|
var url = $(this).attr('ref');
|
|
29
|
if(url != undefined){
|
|
30
|
$(this).removeAttr('ref');
|
|
31
|
var parent_li = $(this);
|
|
32
|
$(this).set_background_image('loading_subtree.gif');
|
|
33
|
|
|
34
|
// load DOM subtree and append it
|
|
35
|
$.get(url, function(html){
|
|
36
|
var tree_container = parent_li.parents('div.cdm_taxontree_container');
|
|
37
|
parent_li.set_background_image('minus.png');
|
|
38
|
if(opts.magicbox){
|
|
39
|
// preserve scroll positions
|
|
40
|
var tmp_scroller_y_left = tree_container.children().scrollTop();
|
|
41
|
parent_li.append(html).find('ul').cdm_taxontree(options);
|
|
42
|
// resize parent container
|
|
43
|
tree_container.cdm_taxontree_container_resize();
|
|
44
|
// restore scroll positions
|
|
45
|
tree_container.children().scrollTop(tmp_scroller_y_left);
|
|
46
|
}else{
|
|
47
|
parent_li.append(html).find('ul').cdm_taxontree(options);
|
|
48
|
}
|
|
49
|
});
|
|
50
|
}
|
|
51
|
} else {
|
|
52
|
$(this).set_background_image('minus.png');
|
|
53
|
}
|
|
54
|
$(this).removeClass('collapsed').addClass('expanded').children('ul').css('display', 'block');
|
|
55
|
} else if($(this).hasClass('expanded')){
|
|
56
|
$(this).removeClass('expanded').addClass('collapsed').children('ul').css('display', 'none');
|
|
57
|
$(this).set_background_image('plus.png');
|
|
58
|
}
|
|
59
|
}
|
|
60
|
); // END click()
|
|
61
|
|
|
62
|
$(this).children('li').children('a').click(
|
|
63
|
function(event)
|
|
64
|
{
|
|
65
|
event.stopPropagation();
|
|
66
|
}
|
|
67
|
);
|
|
68
|
|
|
69
|
/* ----------- widget ------------------- */
|
|
70
|
if(opts.widget){
|
|
71
|
var widget = $(this).parents('.cdm_taxontree_widget');
|
|
72
|
var optionList = widget.find('select');
|
|
73
|
|
|
74
|
// keep all options unselected
|
|
75
|
optionList.change(function(){
|
|
76
|
$(this).children("[@selected]").remove();
|
|
77
|
$(this).children().removeAttr('selected');
|
|
78
|
});
|
|
79
|
optionList.children("[@selected]").click(function(){
|
|
80
|
$(this).remove();
|
|
81
|
});
|
|
82
|
// select all options onsubmit
|
|
83
|
optionList.parents('form').submit(function(){
|
|
84
|
optionList.children().attr('selected', 'selected');
|
|
85
|
});
|
|
86
|
//
|
|
87
|
bind_select_click(optionList, $(this), opts.multiselect);
|
|
88
|
}
|
|
89
|
}
|
|
90
|
);
|
|
91
|
|
|
92
|
function bind_select_click(optionList, treelist, isMultiselect)
|
|
93
|
{
|
|
94
|
treelist.find('li .widget_select').click(
|
|
95
|
function(event)
|
|
96
|
{
|
|
97
|
event.stopPropagation();
|
|
98
|
var value = $(this).attr('alt');
|
|
99
|
if(optionList.children('[value='+value+']').length > 0){
|
|
100
|
// remove from select
|
|
101
|
optionList.children('[value='+value+']').remove();
|
|
102
|
} else {
|
|
103
|
// add to select
|
|
104
|
if(!isMultiselect){
|
|
105
|
// remove all from select
|
|
106
|
optionList.children().remove();
|
|
107
|
}
|
|
108
|
optionList.append('<option value="'+value+'">'+$(this).attr('title')+'</option>');
|
|
109
|
|
|
110
|
// fix bug in IE
|
|
111
|
if( jQuery.browser['msie']) {
|
|
112
|
if(jQuery.browser['version'].charAt(0) <= '6'){
|
|
113
|
return;
|
|
114
|
}
|
|
115
|
}
|
|
116
|
// optionList.children().removeAttr('selected'); // yields a bug in IE6, @see http://gimp4you.eu.org/sandbox/js/test/removeAttr.html
|
|
117
|
optionList.children("[@selected]").attr('selected','');
|
|
118
|
}
|
|
119
|
});
|
|
120
|
} // END bind_select_click()
|
|
121
|
|
|
122
|
}; // END cdm_taxontree()
|
|
123
|
|
|
124
|
})(jQuery);
|
|
125
|
|
|
126
|
/**
|
|
127
|
*
|
|
128
|
*/
|
|
129
|
$.fn.set_background_image = function (imageFile)
|
|
130
|
{
|
|
131
|
// var bg_image_tmp = $(this).css('background-image');
|
|
132
|
// var bg_image_new = bg_image_tmp.replace(/^(.*)(\/.*)(\))$/, '$1/'+imageFile+'$3');
|
|
133
|
// $(this).css('background-image', bg_image_new);
|
|
134
|
$(this).css('background-image', imageFile);
|
|
135
|
}
|
|
136
|
|
|
137
|
/**
|
|
138
|
*
|
|
139
|
*/
|
|
140
|
$.fn.cdm_taxontree_container_resize = function()
|
|
141
|
{
|
|
142
|
var current_w = $(this).parent().width();
|
|
143
|
|
|
144
|
// determine max horizontal extent of any children
|
|
145
|
var tree_list = $(this).find('.cdm_taxontree_scroller_y > ul');
|
|
146
|
var w = tree_list.css('position', 'absolute').outerWidth({ margin: true });
|
|
147
|
tree_list.css('position', 'static');
|
|
148
|
|
|
149
|
// Other Browsers than Firefox
|
|
150
|
if( jQuery.browser['msie']) {
|
|
151
|
if(jQuery.browser['version'].charAt(0) == '7'){
|
|
152
|
w = w + 17;
|
|
153
|
}
|
|
154
|
if(jQuery.browser['version'].charAt(0) <= '6'){
|
|
155
|
return;
|
|
156
|
}
|
|
157
|
}
|
|
158
|
|
|
159
|
if(current_w < w){
|
|
160
|
$(this).parent().width(w);
|
|
161
|
$(this).children().width(w);
|
|
162
|
}
|
|
163
|
return $(this).children().outerWidth();
|
|
164
|
}
|
|
165
|
|
|
166
|
/**
|
|
167
|
*
|
|
168
|
*/
|
|
169
|
$.fn.cdm_taxontree_container_debug_size = function(msg)
|
|
170
|
{
|
|
171
|
var out = msg
|
|
172
|
+ '<br /> scoll_x: ' + $(this).parent().width()
|
|
173
|
+ '<br /> container: ' + $(this).width()
|
|
174
|
+ '<br /> scoll_y: ' + $(this).children().width()
|
|
175
|
+ '<br /> ul: ' + $(this).find('.cdm_taxontree_scroller_y > ul').width()
|
|
176
|
+ '<br />';
|
|
177
|
$('#DEBUG_JS').append(out);
|
|
178
|
}
|
|
179
|
|
|
180
|
/**
|
|
181
|
*
|
|
182
|
*/
|
|
183
|
$.fn.cdm_taxontree_magicbox = function()
|
|
184
|
{
|
|
185
|
// exclude IE6 and lower versions
|
|
186
|
if(!(jQuery.browser['msie'] && jQuery.browser['version'].charAt(0) < '7')){
|
|
187
|
|
|
188
|
var container = $(this).parent().parent('div.cdm_taxontree_container');
|
|
189
|
if(container[0] == undefined){
|
|
190
|
return;
|
|
191
|
}
|
|
192
|
|
|
193
|
container.hover(
|
|
194
|
// --- mouseOver ---- //
|
|
195
|
function()
|
|
196
|
{
|
|
197
|
var scroller_x = $(this).parent();
|
|
198
|
var scroller_y = $(this).children('.cdm_taxontree_scroller_y');
|
|
199
|
var container = scroller_x.parent();
|
|
200
|
|
|
201
|
var h = parseFloat(scroller_x.height());
|
|
202
|
var scroll_top = scroller_x.scrollTop();
|
|
203
|
var border_color = scroller_x.css('border-top-color');
|
|
204
|
|
|
205
|
// store scroll_left of scroller_x so that it can be restored on mouseOut
|
|
206
|
scroller_x.append('<div class="_scrollLeft" style="display: none;" title="'+scroller_x.scrollLeft()+'"></div>');
|
|
207
|
|
|
208
|
var newWidth = $(this).cdm_taxontree_container_resize();
|
|
209
|
|
|
210
|
if(scroller_x.hasClass('expand-left')){
|
|
211
|
var shift_left = container.outerWidth({ margin: true }) - newWidth;
|
|
212
|
} else {
|
|
213
|
var shift_left = '0';
|
|
214
|
}
|
|
215
|
|
|
216
|
scroller_y.css('overflow-y', 'auto').css('border-color', border_color).scrollTop(scroll_top);
|
|
217
|
scroller_x.css('overflow-y', 'visible').css('overflow-x', 'visible').css('margin-left', shift_left).css('border-color', 'transparent').height(h);
|
|
218
|
}
|
|
219
|
// ----------------- //
|
|
220
|
,
|
|
221
|
// --- mouseOut ---- //
|
|
222
|
function()
|
|
223
|
{
|
|
224
|
//return;
|
|
225
|
var container = $(this);
|
|
226
|
var scroller_x = $(this).parent('.cdm_taxontree_scroller_x');
|
|
227
|
var scroller_y = container.children('.cdm_taxontree_scroller_y');
|
|
228
|
var border_color = scroller_y.css('border-top-color');
|
|
229
|
|
|
230
|
var scroll_top = scroller_y.scrollTop();
|
|
231
|
scroller_y.css('overflow-y', 'visible').css('border-color', 'transparent');
|
|
232
|
scroller_x.css('overflow-y', 'auto').css('margin-left', '0').css('border-color', border_color).width('auto').scrollTop(scroll_top);
|
|
233
|
|
|
234
|
// restore scroll_left of scroller_x
|
|
235
|
var scrollLeft = scroller_x.children('._scrollLeft').attr('title');
|
|
236
|
scroller_x.scrollLeft(scrollLeft)
|
|
237
|
scroller_x.children('._scrollLeft').remove();
|
|
238
|
}
|
|
239
|
// ------------------ //
|
|
240
|
);
|
|
241
|
}
|
|
242
|
// END exclude IE6
|
|
243
|
}
|
|
244
|
|
|
245
|
$.fn.cdm_taxontree.defaults = { // set up default options
|
|
246
|
widget: false, // true = enable widget mode
|
|
247
|
magicbox: false, // true = enable quirky magicbox
|
|
248
|
element_name: 'widgetval', //
|
|
249
|
multiselect: false // true = enable selection of multiple
|
|
250
|
};
|
|
251
|
|
|
252
|
/* ========================== auto activate ==========================
|
|
253
|
|
|
254
|
if (Drupal.jsEnabled) {
|
|
255
|
$(document).ready(function() {
|
|
256
|
$('ul.cdm_taxontree').cdm_taxontree();
|
|
257
|
});
|
|
258
|
}
|
|
259
|
*/
|