|
0
|
1 /**
|
|
|
2 * Roundcube Treelist Widget
|
|
|
3 *
|
|
|
4 * This file is part of the Roundcube Webmail client
|
|
|
5 *
|
|
|
6 * @licstart The following is the entire license notice for the
|
|
|
7 * JavaScript code in this file.
|
|
|
8 *
|
|
|
9 * Copyright (c) 2013-2014, The Roundcube Dev Team
|
|
|
10 *
|
|
|
11 * The JavaScript code in this page is free software: you can
|
|
|
12 * redistribute it and/or modify it under the terms of the GNU
|
|
|
13 * General Public License (GNU GPL) as published by the Free Software
|
|
|
14 * Foundation, either version 3 of the License, or (at your option)
|
|
|
15 * any later version. The code is distributed WITHOUT ANY WARRANTY;
|
|
|
16 * without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
|
17 * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
|
|
18 *
|
|
|
19 * As additional permission under GNU GPL version 3 section 7, you
|
|
|
20 * may distribute non-source (e.g., minimized or compacted) forms of
|
|
|
21 * that code without the copy of the GNU GPL normally required by
|
|
|
22 * section 4, provided you include this license notice and a URL
|
|
|
23 * through which recipients can access the Corresponding Source.
|
|
|
24 *
|
|
|
25 * @licend The above is the entire license notice
|
|
|
26 * for the JavaScript code in this file.
|
|
|
27 *
|
|
|
28 * @author Thomas Bruederli <roundcube@gmail.com>
|
|
|
29 * @requires jquery.js, common.js
|
|
|
30 */
|
|
|
31
|
|
|
32
|
|
|
33 /**
|
|
|
34 * Roundcube Treelist widget class
|
|
|
35 * @constructor
|
|
|
36 */
|
|
|
37 function rcube_treelist_widget(node, p)
|
|
|
38 {
|
|
|
39 // apply some defaults to p
|
|
|
40 p = $.extend({
|
|
|
41 id_prefix: '',
|
|
|
42 autoexpand: 1000,
|
|
|
43 selectable: false,
|
|
|
44 scroll_delay: 500,
|
|
|
45 scroll_step: 5,
|
|
|
46 scroll_speed: 20,
|
|
|
47 save_state: false,
|
|
|
48 keyboard: true,
|
|
|
49 tabexit: true,
|
|
|
50 parent_focus: false,
|
|
|
51 check_droptarget: function(node) { return !node.virtual; }
|
|
|
52 }, p || {});
|
|
|
53
|
|
|
54 var container = $(node),
|
|
|
55 data = p.data || [],
|
|
|
56 indexbyid = {},
|
|
|
57 selection = null,
|
|
|
58 drag_active = false,
|
|
|
59 search_active = false,
|
|
|
60 last_search = '',
|
|
|
61 has_focus = false,
|
|
|
62 box_coords = {},
|
|
|
63 item_coords = [],
|
|
|
64 autoexpand_timer,
|
|
|
65 autoexpand_item,
|
|
|
66 body_scroll_top = 0,
|
|
|
67 list_scroll_top = 0,
|
|
|
68 scroll_timer,
|
|
|
69 searchfield,
|
|
|
70 tree_state,
|
|
|
71 ui_droppable,
|
|
|
72 ui_draggable,
|
|
|
73 draggable_opts,
|
|
|
74 droppable_opts,
|
|
|
75 list_id = (container.attr('id') || p.id_prefix || '0'),
|
|
|
76 me = this;
|
|
|
77
|
|
|
78
|
|
|
79 /////// export public members and methods
|
|
|
80
|
|
|
81 this.container = container;
|
|
|
82 this.expand = expand;
|
|
|
83 this.collapse = collapse;
|
|
|
84 this.select = select;
|
|
|
85 this.render = render;
|
|
|
86 this.reset = reset;
|
|
|
87 this.drag_start = drag_start;
|
|
|
88 this.drag_end = drag_end;
|
|
|
89 this.intersects = intersects;
|
|
|
90 this.droppable = droppable;
|
|
|
91 this.draggable = draggable;
|
|
|
92 this.update = update_node;
|
|
|
93 this.insert = insert;
|
|
|
94 this.remove = remove;
|
|
|
95 this.get_item = get_item;
|
|
|
96 this.get_node = get_node;
|
|
|
97 this.get_selection = get_selection;
|
|
|
98 this.is_search = is_search;
|
|
|
99 this.reset_search = reset_search;
|
|
|
100
|
|
|
101 /////// startup code (constructor)
|
|
|
102
|
|
|
103 // abort if node not found
|
|
|
104 if (!container.length)
|
|
|
105 return;
|
|
|
106
|
|
|
107 if (p.data)
|
|
|
108 index_data({ children:data });
|
|
|
109 // load data from DOM
|
|
|
110 else
|
|
|
111 update_data();
|
|
|
112
|
|
|
113 // scroll to the selected item
|
|
|
114 if (selection) {
|
|
|
115 scroll_to_node(id2dom(selection, true));
|
|
|
116 }
|
|
|
117
|
|
|
118 container.attr('role', 'tree')
|
|
|
119 .on('focusin', function(e) {
|
|
|
120 // TODO: only accept focus on virtual nodes from keyboard events
|
|
|
121 has_focus = true;
|
|
|
122 })
|
|
|
123 .on('focusout', function(e) {
|
|
|
124 has_focus = false;
|
|
|
125 })
|
|
|
126 // register click handlers on list
|
|
|
127 .on('click', 'div.treetoggle', function(e) {
|
|
|
128 toggle(dom2id($(this).parent()));
|
|
|
129 e.stopPropagation();
|
|
|
130 })
|
|
|
131 .on('click', 'li', function(e) {
|
|
|
132 // do not select record on checkbox/input click
|
|
|
133 if ($(e.target).is('input'))
|
|
|
134 return true;
|
|
|
135
|
|
|
136 var node = p.selectable ? indexbyid[dom2id($(this))] : null;
|
|
|
137 if (node && !node.virtual) {
|
|
|
138 select(node.id);
|
|
|
139 e.stopPropagation();
|
|
|
140 }
|
|
|
141 })
|
|
|
142 // mute clicks on virtual folder links (they need tabindex="0" in order to be selectable by keyboard)
|
|
|
143 .on('mousedown', 'a', function(e) {
|
|
|
144 var link = $(e.target), node = indexbyid[dom2id(link.closest('li'))];
|
|
|
145 if (node && node.virtual && !link.attr('href')) {
|
|
|
146 e.preventDefault();
|
|
|
147 e.stopPropagation();
|
|
|
148 return false;
|
|
|
149 }
|
|
|
150 });
|
|
|
151
|
|
|
152 // activate search function
|
|
|
153 if (p.searchbox) {
|
|
|
154 searchfield = $(p.searchbox).off('keyup.treelist').on('keyup.treelist', function(e) {
|
|
|
155 var key = rcube_event.get_keycode(e),
|
|
|
156 mod = rcube_event.get_modifier(e);
|
|
|
157
|
|
|
158 switch (key) {
|
|
|
159 case 9: // tab
|
|
|
160 break;
|
|
|
161
|
|
|
162 case 13: // enter
|
|
|
163 search(this.value, true);
|
|
|
164 return rcube_event.cancel(e);
|
|
|
165
|
|
|
166 case 27: // escape
|
|
|
167 reset_search();
|
|
|
168 break;
|
|
|
169
|
|
|
170 case 38: // arrow up
|
|
|
171 case 37: // left
|
|
|
172 case 39: // right
|
|
|
173 case 40: // arrow down
|
|
|
174 return; // ignore arrow keys
|
|
|
175
|
|
|
176 default:
|
|
|
177 search(this.value, false);
|
|
|
178 break;
|
|
|
179 }
|
|
|
180 }).attr('autocomplete', 'off');
|
|
|
181
|
|
|
182 // find the reset button for this search field
|
|
|
183 searchfield.parent().find('a.reset').off('click.treelist').on('click.treelist', function(e) {
|
|
|
184 reset_search();
|
|
|
185 return false;
|
|
|
186 })
|
|
|
187 }
|
|
|
188
|
|
|
189 $(document.body).on('keydown', keypress);
|
|
|
190
|
|
|
191 // catch focus when clicking the list container area
|
|
|
192 if (p.parent_focus) {
|
|
|
193 container.parent(':not(body)').click(function(e) {
|
|
|
194 // click on a checkbox does not catch the focus
|
|
|
195 if ($(e.target).is('input'))
|
|
|
196 return true;
|
|
|
197
|
|
|
198 if (!has_focus && selection) {
|
|
|
199 $(get_item(selection)).find(':focusable').first().focus();
|
|
|
200 }
|
|
|
201 else if (!has_focus) {
|
|
|
202 container.children('li:has(:focusable)').first().find(':focusable').first().focus();
|
|
|
203 }
|
|
|
204 });
|
|
|
205 }
|
|
|
206
|
|
|
207 /////// private methods
|
|
|
208
|
|
|
209 /**
|
|
|
210 * Collaps a the node with the given ID
|
|
|
211 */
|
|
|
212 function collapse(id, recursive, set)
|
|
|
213 {
|
|
|
214 var node;
|
|
|
215
|
|
|
216 if (node = indexbyid[id]) {
|
|
|
217 node.collapsed = typeof set == 'undefined' || set;
|
|
|
218 update_dom(node);
|
|
|
219
|
|
|
220 if (recursive && node.children) {
|
|
|
221 for (var i=0; i < node.children.length; i++) {
|
|
|
222 collapse(node.children[i].id, recursive, set);
|
|
|
223 }
|
|
|
224 }
|
|
|
225
|
|
|
226 me.triggerEvent(node.collapsed ? 'collapse' : 'expand', node);
|
|
|
227 save_state(id, node.collapsed);
|
|
|
228 }
|
|
|
229 }
|
|
|
230
|
|
|
231 /**
|
|
|
232 * Expand a the node with the given ID
|
|
|
233 */
|
|
|
234 function expand(id, recursive)
|
|
|
235 {
|
|
|
236 collapse(id, recursive, false);
|
|
|
237 }
|
|
|
238
|
|
|
239 /**
|
|
|
240 * Toggle collapsed state of a list node
|
|
|
241 */
|
|
|
242 function toggle(id, recursive)
|
|
|
243 {
|
|
|
244 var node;
|
|
|
245 if (node = indexbyid[id]) {
|
|
|
246 collapse(id, recursive, !node.collapsed);
|
|
|
247 }
|
|
|
248 }
|
|
|
249
|
|
|
250 /**
|
|
|
251 * Select a tree node by it's ID
|
|
|
252 */
|
|
|
253 function select(id)
|
|
|
254 {
|
|
|
255 // allow subscribes to prevent selection change
|
|
|
256 if (me.triggerEvent('beforeselect', indexbyid[id]) === false) {
|
|
|
257 return;
|
|
|
258 }
|
|
|
259
|
|
|
260 if (selection) {
|
|
|
261 id2dom(selection, true).removeClass('selected').removeAttr('aria-selected');
|
|
|
262 if (search_active)
|
|
|
263 id2dom(selection).removeClass('selected').removeAttr('aria-selected');
|
|
|
264 selection = null;
|
|
|
265 }
|
|
|
266
|
|
|
267 if (!id)
|
|
|
268 return;
|
|
|
269
|
|
|
270 var li = id2dom(id, true);
|
|
|
271 if (li.length) {
|
|
|
272 li.addClass('selected').attr('aria-selected', 'true');
|
|
|
273 selection = id;
|
|
|
274 // TODO: expand all parent nodes if collapsed
|
|
|
275
|
|
|
276 if (search_active)
|
|
|
277 id2dom(id).addClass('selected').attr('aria-selected', 'true');
|
|
|
278
|
|
|
279 scroll_to_node(li);
|
|
|
280 }
|
|
|
281
|
|
|
282 me.triggerEvent('select', indexbyid[id]);
|
|
|
283 }
|
|
|
284
|
|
|
285 /**
|
|
|
286 * Getter for the currently selected node ID
|
|
|
287 */
|
|
|
288 function get_selection()
|
|
|
289 {
|
|
|
290 return selection;
|
|
|
291 }
|
|
|
292
|
|
|
293 /**
|
|
|
294 * Return the DOM element of the list item with the given ID
|
|
|
295 */
|
|
|
296 function get_node(id)
|
|
|
297 {
|
|
|
298 return indexbyid[id];
|
|
|
299 }
|
|
|
300
|
|
|
301 /**
|
|
|
302 * Return the DOM element of the list item with the given ID
|
|
|
303 */
|
|
|
304 function get_item(id, real)
|
|
|
305 {
|
|
|
306 return id2dom(id, real).get(0);
|
|
|
307 }
|
|
|
308
|
|
|
309 /**
|
|
|
310 * Insert the given node
|
|
|
311 */
|
|
|
312 function insert(node, parent_id, sort)
|
|
|
313 {
|
|
|
314 var li, parent_li,
|
|
|
315 parent_node = parent_id ? indexbyid[parent_id] : null
|
|
|
316 search_ = search_active;
|
|
|
317
|
|
|
318 // ignore, already exists
|
|
|
319 if (indexbyid[node.id]) {
|
|
|
320 return;
|
|
|
321 }
|
|
|
322
|
|
|
323 // apply saved state
|
|
|
324 state = get_state(node.id, node.collapsed);
|
|
|
325 if (state !== undefined) {
|
|
|
326 node.collapsed = state;
|
|
|
327 }
|
|
|
328
|
|
|
329 // insert as child of an existing node
|
|
|
330 if (parent_node) {
|
|
|
331 node.level = parent_node.level + 1;
|
|
|
332 if (!parent_node.children)
|
|
|
333 parent_node.children = [];
|
|
|
334
|
|
|
335 search_active = false;
|
|
|
336 parent_node.children.push(node);
|
|
|
337 parent_li = id2dom(parent_id);
|
|
|
338
|
|
|
339 // re-render the entire subtree
|
|
|
340 if (parent_node.children.length == 1) {
|
|
|
341 render_node(parent_node, null, parent_li);
|
|
|
342 li = id2dom(node.id);
|
|
|
343 }
|
|
|
344 else {
|
|
|
345 // append new node to parent's child list
|
|
|
346 li = render_node(node, parent_li.children('ul').first());
|
|
|
347 }
|
|
|
348
|
|
|
349 // list is in search mode
|
|
|
350 if (search_) {
|
|
|
351 search_active = search_;
|
|
|
352
|
|
|
353 // add clone to current search results (top level)
|
|
|
354 if (!li.is(':visible')) {
|
|
|
355 $('<li>')
|
|
|
356 .attr('id', li.attr('id') + '--xsR')
|
|
|
357 .attr('class', li.attr('class'))
|
|
|
358 .addClass('searchresult__')
|
|
|
359 .append(li.children().first().clone(true, true))
|
|
|
360 .appendTo(container);
|
|
|
361 }
|
|
|
362 }
|
|
|
363 }
|
|
|
364 // insert at top level
|
|
|
365 else {
|
|
|
366 node.level = 0;
|
|
|
367 data.push(node);
|
|
|
368 li = render_node(node, container);
|
|
|
369 }
|
|
|
370
|
|
|
371 indexbyid[node.id] = node;
|
|
|
372
|
|
|
373 // set new reference to node.html after insert
|
|
|
374 // will otherwise vanish in Firefox 3.6
|
|
|
375 if (typeof node.html == 'object') {
|
|
|
376 indexbyid[node.id].html = id2dom(node.id, true).children();
|
|
|
377 }
|
|
|
378
|
|
|
379 if (sort) {
|
|
|
380 resort_node(li, typeof sort == 'string' ? '[class~="' + sort + '"]' : '');
|
|
|
381 }
|
|
|
382 }
|
|
|
383
|
|
|
384 /**
|
|
|
385 * Update properties of an existing node
|
|
|
386 */
|
|
|
387 function update_node(id, updates, sort)
|
|
|
388 {
|
|
|
389 var li, parent_ul, parent_node, old_parent,
|
|
|
390 node = indexbyid[id];
|
|
|
391
|
|
|
392 if (node) {
|
|
|
393 li = id2dom(id);
|
|
|
394 parent_ul = li.parent();
|
|
|
395
|
|
|
396 if (updates.id || updates.html || updates.children || updates.classes || updates.parent) {
|
|
|
397 if (updates.parent && (parent_node = indexbyid[updates.parent])) {
|
|
|
398 // remove reference from old parent's child list
|
|
|
399 if (parent_ul.closest('li').length && (old_parent = indexbyid[dom2id(parent_ul.closest('li'))])) {
|
|
|
400 old_parent.children = $.grep(old_parent.children, function(elem, i){ return elem.id != node.id; });
|
|
|
401 }
|
|
|
402
|
|
|
403 // append to new parent node
|
|
|
404 parent_ul = id2dom(updates.parent).children('ul').first();
|
|
|
405 if (!parent_node.children)
|
|
|
406 parent_node.children = [];
|
|
|
407 parent_node.children.push(node);
|
|
|
408 }
|
|
|
409 else if (updates.parent !== undefined) {
|
|
|
410 parent_ul = container;
|
|
|
411 }
|
|
|
412
|
|
|
413 $.extend(node, updates);
|
|
|
414 li = render_node(node, parent_ul, li);
|
|
|
415 }
|
|
|
416
|
|
|
417 if (node.id != id) {
|
|
|
418 delete indexbyid[id];
|
|
|
419 indexbyid[node.id] = node;
|
|
|
420 }
|
|
|
421
|
|
|
422 if (sort) {
|
|
|
423 resort_node(li, typeof sort == 'string' ? '[class~="' + sort + '"]' : '');
|
|
|
424 }
|
|
|
425 }
|
|
|
426 }
|
|
|
427
|
|
|
428 /**
|
|
|
429 * Helper method to sort the list of the given item
|
|
|
430 */
|
|
|
431 function resort_node(li, filter)
|
|
|
432 {
|
|
|
433 var first, sibling,
|
|
|
434 myid = li.get(0).id,
|
|
|
435 sortname = li.children().first().text().toUpperCase();
|
|
|
436
|
|
|
437 li.parent().children('li' + filter).each(function(i, elem) {
|
|
|
438 if (i == 0)
|
|
|
439 first = elem;
|
|
|
440 if (elem.id == myid) {
|
|
|
441 // skip
|
|
|
442 }
|
|
|
443 else if (elem.id != myid && sortname >= $(elem).children().first().text().toUpperCase()) {
|
|
|
444 sibling = elem;
|
|
|
445 }
|
|
|
446 else {
|
|
|
447 return false;
|
|
|
448 }
|
|
|
449 });
|
|
|
450
|
|
|
451 if (sibling) {
|
|
|
452 li.insertAfter(sibling);
|
|
|
453 }
|
|
|
454 else if (first && first.id != myid) {
|
|
|
455 li.insertBefore(first);
|
|
|
456 }
|
|
|
457
|
|
|
458 // reload data from dom
|
|
|
459 update_data();
|
|
|
460 }
|
|
|
461
|
|
|
462 /**
|
|
|
463 * Remove the item with the given ID
|
|
|
464 */
|
|
|
465 function remove(id)
|
|
|
466 {
|
|
|
467 var node, li, parent;
|
|
|
468
|
|
|
469 if (node = indexbyid[id]) {
|
|
|
470 li = id2dom(id, true);
|
|
|
471 parent = li.parent();
|
|
|
472 li.remove();
|
|
|
473
|
|
|
474 node.deleted = true;
|
|
|
475 delete indexbyid[id];
|
|
|
476
|
|
|
477 if (search_active) {
|
|
|
478 id2dom(id, false).remove();
|
|
|
479 }
|
|
|
480
|
|
|
481 // remove tree-toggle button and children list
|
|
|
482 if (!parent.children().length) {
|
|
|
483 parent.parent().find('div.treetoggle').remove();
|
|
|
484 parent.remove();
|
|
|
485 }
|
|
|
486
|
|
|
487 return true;
|
|
|
488 }
|
|
|
489
|
|
|
490 return false;
|
|
|
491 }
|
|
|
492
|
|
|
493 /**
|
|
|
494 * (Re-)read tree data from DOM
|
|
|
495 */
|
|
|
496 function update_data()
|
|
|
497 {
|
|
|
498 data = walk_list(container, 0);
|
|
|
499 }
|
|
|
500
|
|
|
501 /**
|
|
|
502 * Apply the 'collapsed' status of the data node to the corresponding DOM element(s)
|
|
|
503 */
|
|
|
504 function update_dom(node)
|
|
|
505 {
|
|
|
506 var li = id2dom(node.id, true);
|
|
|
507 li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
|
|
|
508 li.children('ul').first()[(node.collapsed ? 'hide' : 'show')]();
|
|
|
509 li.children('div.treetoggle').removeClass('collapsed expanded').addClass(node.collapsed ? 'collapsed' : 'expanded');
|
|
|
510 me.triggerEvent('toggle', node);
|
|
|
511 }
|
|
|
512
|
|
|
513 /**
|
|
|
514 *
|
|
|
515 */
|
|
|
516 function reset(keep_content)
|
|
|
517 {
|
|
|
518 select('');
|
|
|
519
|
|
|
520 data = [];
|
|
|
521 indexbyid = {};
|
|
|
522 drag_active = false;
|
|
|
523
|
|
|
524 if (keep_content) {
|
|
|
525 if (draggable_opts) {
|
|
|
526 if (ui_draggable)
|
|
|
527 draggable('destroy');
|
|
|
528 draggable(draggable_opts);
|
|
|
529 }
|
|
|
530
|
|
|
531 if (droppable_opts) {
|
|
|
532 if (ui_droppable)
|
|
|
533 droppable('destroy');
|
|
|
534 droppable(droppable_opts);
|
|
|
535 }
|
|
|
536
|
|
|
537 update_data();
|
|
|
538 }
|
|
|
539 else {
|
|
|
540 container.html('');
|
|
|
541 }
|
|
|
542
|
|
|
543 reset_search();
|
|
|
544 }
|
|
|
545
|
|
|
546 /**
|
|
|
547 *
|
|
|
548 */
|
|
|
549 function search(q, enter)
|
|
|
550 {
|
|
|
551 q = String(q).toLowerCase();
|
|
|
552
|
|
|
553 if (!q.length)
|
|
|
554 return reset_search();
|
|
|
555 else if (q == last_search && !enter)
|
|
|
556 return 0;
|
|
|
557
|
|
|
558 var hits = [];
|
|
|
559 var search_tree = function(items) {
|
|
|
560 $.each(items, function(i, node) {
|
|
|
561 var li, sli;
|
|
|
562 if (!node.virtual && !node.deleted && String(node.text).toLowerCase().indexOf(q) >= 0 && hits.indexOf(node.id) < 0) {
|
|
|
563 li = id2dom(node.id);
|
|
|
564
|
|
|
565 // skip already filtered nodes
|
|
|
566 if (li.data('filtered'))
|
|
|
567 return;
|
|
|
568
|
|
|
569 sli = $('<li>')
|
|
|
570 .attr('id', li.attr('id') + '--xsR')
|
|
|
571 .attr('class', li.attr('class'))
|
|
|
572 .addClass('searchresult__')
|
|
|
573 // append all elements like links and inputs, but not sub-trees
|
|
|
574 .append(li.children(':not(div.treetoggle,ul)').clone(true, true))
|
|
|
575 .appendTo(container);
|
|
|
576 hits.push(node.id);
|
|
|
577 }
|
|
|
578
|
|
|
579 if (node.children && node.children.length) {
|
|
|
580 search_tree(node.children);
|
|
|
581 }
|
|
|
582 });
|
|
|
583 };
|
|
|
584
|
|
|
585 // reset old search results
|
|
|
586 if (search_active) {
|
|
|
587 $(container).children('li.searchresult__').remove();
|
|
|
588 search_active = false;
|
|
|
589 }
|
|
|
590
|
|
|
591 // hide all list items
|
|
|
592 $(container).children('li').hide().removeClass('selected');
|
|
|
593
|
|
|
594 // search recursively in tree (to keep sorting order)
|
|
|
595 search_tree(data);
|
|
|
596 search_active = true;
|
|
|
597
|
|
|
598 me.triggerEvent('search', { query: q, last: last_search, count: hits.length, ids: hits, execute: enter||false });
|
|
|
599
|
|
|
600 last_search = q;
|
|
|
601
|
|
|
602 return hits.count;
|
|
|
603 }
|
|
|
604
|
|
|
605 /**
|
|
|
606 *
|
|
|
607 */
|
|
|
608 function reset_search()
|
|
|
609 {
|
|
|
610 if (searchfield)
|
|
|
611 searchfield.val('');
|
|
|
612
|
|
|
613 $(container).children('li.searchresult__').remove();
|
|
|
614 $(container).children('li').filter(function() { return !$(this).data('filtered'); }).show();
|
|
|
615
|
|
|
616 search_active = false;
|
|
|
617
|
|
|
618 me.triggerEvent('search', { query: false, last: last_search });
|
|
|
619 last_search = '';
|
|
|
620
|
|
|
621 if (selection)
|
|
|
622 select(selection);
|
|
|
623 }
|
|
|
624
|
|
|
625 /**
|
|
|
626 *
|
|
|
627 */
|
|
|
628 function is_search()
|
|
|
629 {
|
|
|
630 return search_active;
|
|
|
631 }
|
|
|
632
|
|
|
633 /**
|
|
|
634 * Render the tree list from the internal data structure
|
|
|
635 */
|
|
|
636 function render()
|
|
|
637 {
|
|
|
638 if (me.triggerEvent('renderBefore', data) === false)
|
|
|
639 return;
|
|
|
640
|
|
|
641 // remove all child nodes
|
|
|
642 container.html('');
|
|
|
643
|
|
|
644 // render child nodes
|
|
|
645 for (var i=0; i < data.length; i++) {
|
|
|
646 data[i].level = 0;
|
|
|
647 render_node(data[i], container);
|
|
|
648 }
|
|
|
649
|
|
|
650 me.triggerEvent('renderAfter', container);
|
|
|
651 }
|
|
|
652
|
|
|
653 /**
|
|
|
654 * Render a specific node into the DOM list
|
|
|
655 */
|
|
|
656 function render_node(node, parent, replace)
|
|
|
657 {
|
|
|
658 if (node.deleted)
|
|
|
659 return;
|
|
|
660
|
|
|
661 var li = $('<li>')
|
|
|
662 .attr('id', p.id_prefix + (p.id_encode ? p.id_encode(node.id) : node.id))
|
|
|
663 .attr('role', 'treeitem')
|
|
|
664 .addClass((node.classes || []).join(' '))
|
|
|
665 .data('id', node.id);
|
|
|
666
|
|
|
667 if (replace) {
|
|
|
668 replace.replaceWith(li);
|
|
|
669 if (parent)
|
|
|
670 li.appendTo(parent);
|
|
|
671 }
|
|
|
672 else
|
|
|
673 li.appendTo(parent);
|
|
|
674
|
|
|
675 if (typeof node.html == 'string')
|
|
|
676 li.html(node.html);
|
|
|
677 else if (typeof node.html == 'object')
|
|
|
678 li.append(node.html);
|
|
|
679
|
|
|
680 if (!node.text)
|
|
|
681 node.text = li.children().first().text();
|
|
|
682
|
|
|
683 if (node.virtual)
|
|
|
684 li.addClass('virtual');
|
|
|
685 if (node.id == selection)
|
|
|
686 li.addClass('selected');
|
|
|
687
|
|
|
688 // add child list and toggle icon
|
|
|
689 if (node.children && node.children.length) {
|
|
|
690 li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
|
|
|
691 $('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '"> </div>').appendTo(li);
|
|
|
692 var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass).attr('role', 'group');
|
|
|
693 if (node.collapsed)
|
|
|
694 ul.hide();
|
|
|
695
|
|
|
696 for (var i=0; i < node.children.length; i++) {
|
|
|
697 node.children[i].level = node.level + 1;
|
|
|
698 render_node(node.children[i], ul);
|
|
|
699 }
|
|
|
700 }
|
|
|
701
|
|
|
702 return li;
|
|
|
703 }
|
|
|
704
|
|
|
705 /**
|
|
|
706 * Recursively walk the DOM tree and build an internal data structure
|
|
|
707 * representing the skeleton of this tree list.
|
|
|
708 */
|
|
|
709 function walk_list(ul, level)
|
|
|
710 {
|
|
|
711 var result = [];
|
|
|
712 ul.children('li').each(function(i,e){
|
|
|
713 var state, li = $(e), sublist = li.children('ul');
|
|
|
714 var node = {
|
|
|
715 id: dom2id(li),
|
|
|
716 classes: String(li.attr('class')).split(' '),
|
|
|
717 virtual: li.hasClass('virtual'),
|
|
|
718 level: level,
|
|
|
719 html: li.children().first().get(0).outerHTML,
|
|
|
720 text: li.children().first().text(),
|
|
|
721 children: walk_list(sublist, level+1)
|
|
|
722 }
|
|
|
723
|
|
|
724 if (sublist.length) {
|
|
|
725 node.childlistclass = sublist.attr('class');
|
|
|
726 }
|
|
|
727 if (node.children.length) {
|
|
|
728 if (node.collapsed === undefined)
|
|
|
729 node.collapsed = sublist.css('display') == 'none';
|
|
|
730
|
|
|
731 // apply saved state
|
|
|
732 state = get_state(node.id, node.collapsed);
|
|
|
733 if (state !== undefined) {
|
|
|
734 node.collapsed = state;
|
|
|
735 sublist[(state?'hide':'show')]();
|
|
|
736 }
|
|
|
737
|
|
|
738 if (!li.children('div.treetoggle').length)
|
|
|
739 $('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '"> </div>').appendTo(li);
|
|
|
740
|
|
|
741 li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
|
|
|
742 }
|
|
|
743 if (li.hasClass('selected')) {
|
|
|
744 li.attr('aria-selected', 'true');
|
|
|
745 selection = node.id;
|
|
|
746 }
|
|
|
747
|
|
|
748 li.data('id', node.id);
|
|
|
749
|
|
|
750 // declare list item as treeitem
|
|
|
751 li.attr('role', 'treeitem').attr('aria-level', node.level+1);
|
|
|
752
|
|
|
753 // allow virtual nodes to receive focus
|
|
|
754 if (node.virtual) {
|
|
|
755 li.children('a:first').attr('tabindex', '0');
|
|
|
756 }
|
|
|
757
|
|
|
758 result.push(node);
|
|
|
759 indexbyid[node.id] = node;
|
|
|
760 });
|
|
|
761
|
|
|
762 ul.attr('role', level == 0 ? 'tree' : 'group');
|
|
|
763
|
|
|
764 return result;
|
|
|
765 }
|
|
|
766
|
|
|
767 /**
|
|
|
768 * Recursively walk the data tree and index nodes by their ID
|
|
|
769 */
|
|
|
770 function index_data(node)
|
|
|
771 {
|
|
|
772 if (node.id) {
|
|
|
773 indexbyid[node.id] = node;
|
|
|
774 }
|
|
|
775 for (var c=0; node.children && c < node.children.length; c++) {
|
|
|
776 index_data(node.children[c]);
|
|
|
777 }
|
|
|
778 }
|
|
|
779
|
|
|
780 /**
|
|
|
781 * Get the (stripped) node ID from the given DOM element
|
|
|
782 */
|
|
|
783 function dom2id(li)
|
|
|
784 {
|
|
|
785 var domid = String(li.attr('id')).replace(new RegExp('^' + (p.id_prefix) || '%'), '').replace(/--xsR$/, '');
|
|
|
786 return p.id_decode ? p.id_decode(domid) : domid;
|
|
|
787 }
|
|
|
788
|
|
|
789 /**
|
|
|
790 * Get the <li> element for the given node ID
|
|
|
791 */
|
|
|
792 function id2dom(id, real)
|
|
|
793 {
|
|
|
794 var domid = p.id_encode ? p.id_encode(id) : id,
|
|
|
795 suffix = search_active && !real ? '--xsR' : '';
|
|
|
796
|
|
|
797 return $('#' + p.id_prefix + domid + suffix, container);
|
|
|
798 }
|
|
|
799
|
|
|
800 /**
|
|
|
801 * Scroll the parent container to make the given list item visible
|
|
|
802 */
|
|
|
803 function scroll_to_node(li)
|
|
|
804 {
|
|
|
805 var scroller = container.parent(),
|
|
|
806 current_offset = scroller.scrollTop(),
|
|
|
807 rel_offset = li.offset().top - scroller.offset().top;
|
|
|
808
|
|
|
809 if (rel_offset < 0 || rel_offset + li.height() > scroller.height())
|
|
|
810 scroller.scrollTop(rel_offset + current_offset);
|
|
|
811 }
|
|
|
812
|
|
|
813 /**
|
|
|
814 * Save node collapse state to localStorage
|
|
|
815 */
|
|
|
816 function save_state(id, collapsed)
|
|
|
817 {
|
|
|
818 if (p.save_state && window.rcmail) {
|
|
|
819 var key = 'treelist-' + list_id;
|
|
|
820 if (!tree_state) {
|
|
|
821 tree_state = rcmail.local_storage_get_item(key, {});
|
|
|
822 }
|
|
|
823
|
|
|
824 if (tree_state[id] != collapsed) {
|
|
|
825 tree_state[id] = collapsed;
|
|
|
826 rcmail.local_storage_set_item(key, tree_state);
|
|
|
827 }
|
|
|
828 }
|
|
|
829 }
|
|
|
830
|
|
|
831 /**
|
|
|
832 * Read node collapse state from localStorage
|
|
|
833 */
|
|
|
834 function get_state(id)
|
|
|
835 {
|
|
|
836 if (p.save_state && window.rcmail) {
|
|
|
837 if (!tree_state) {
|
|
|
838 tree_state = rcmail.local_storage_get_item('treelist-' + list_id, {});
|
|
|
839 }
|
|
|
840 return tree_state[id];
|
|
|
841 }
|
|
|
842
|
|
|
843 return undefined;
|
|
|
844 }
|
|
|
845
|
|
|
846 /**
|
|
|
847 * Handler for keyboard events on treelist
|
|
|
848 */
|
|
|
849 function keypress(e)
|
|
|
850 {
|
|
|
851 var target = e.target || {},
|
|
|
852 keyCode = rcube_event.get_keycode(e);
|
|
|
853
|
|
|
854 if (!has_focus || target.nodeName == 'INPUT' && keyCode != 38 && keyCode != 40 || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
|
|
|
855 return true;
|
|
|
856
|
|
|
857 switch (keyCode) {
|
|
|
858 case 38:
|
|
|
859 case 40:
|
|
|
860 case 63232: // 'up', in safari keypress
|
|
|
861 case 63233: // 'down', in safari keypress
|
|
|
862 var li = p.keyboard ? container.find(':focus').closest('li') : [];
|
|
|
863 if (li.length) {
|
|
|
864 focus_next(li, (mod = keyCode == 38 || keyCode == 63232 ? -1 : 1));
|
|
|
865 }
|
|
|
866 return rcube_event.cancel(e);
|
|
|
867
|
|
|
868 case 37: // Left arrow key
|
|
|
869 case 39: // Right arrow key
|
|
|
870 var id, node, li = container.find(':focus').closest('li');
|
|
|
871 if (li.length) {
|
|
|
872 id = dom2id(li);
|
|
|
873 node = indexbyid[id];
|
|
|
874 if (node && node.children.length && node.collapsed != (keyCode == 37))
|
|
|
875 toggle(id, rcube_event.get_modifier(e) == SHIFT_KEY); // toggle subtree
|
|
|
876 }
|
|
|
877 return false;
|
|
|
878
|
|
|
879 case 9: // Tab
|
|
|
880 if (p.keyboard && p.tabexit) {
|
|
|
881 // jump to last/first item to move focus away from the treelist widget by tab
|
|
|
882 var limit = rcube_event.get_modifier(e) == SHIFT_KEY ? 'first' : 'last';
|
|
|
883 focus_noscroll(container.find('li[role=treeitem]:has(a)')[limit]().find('a:'+limit));
|
|
|
884 }
|
|
|
885 break;
|
|
|
886 }
|
|
|
887
|
|
|
888 return true;
|
|
|
889 }
|
|
|
890
|
|
|
891 function focus_next(li, dir, from_child)
|
|
|
892 {
|
|
|
893 var mod = dir < 0 ? 'prev' : 'next',
|
|
|
894 next = li[mod](), limit, parent;
|
|
|
895
|
|
|
896 if (dir > 0 && !from_child && li.children('ul[role=group]:visible').length) {
|
|
|
897 li.children('ul').children('li:first').find('a:first').focus();
|
|
|
898 }
|
|
|
899 else if (dir < 0 && !from_child && next.children('ul[role=group]:visible').length) {
|
|
|
900 next.children('ul').children('li:last').find('a:first').focus();
|
|
|
901 }
|
|
|
902 else if (next.length && next.find('a:first').focus().length) {
|
|
|
903 // focused
|
|
|
904 }
|
|
|
905 else {
|
|
|
906 parent = li.parent().closest('li[role=treeitem]');
|
|
|
907 if (parent.length)
|
|
|
908 if (dir < 0) {
|
|
|
909 parent.find('a:first').focus();
|
|
|
910 }
|
|
|
911 else {
|
|
|
912 focus_next(parent, dir, true);
|
|
|
913 }
|
|
|
914 }
|
|
|
915 }
|
|
|
916
|
|
|
917 /**
|
|
|
918 * Focus the given element without scrolling the list container
|
|
|
919 */
|
|
|
920 function focus_noscroll(elem)
|
|
|
921 {
|
|
|
922 if (elem.length) {
|
|
|
923 var frame = container.parent().get(0) || { scrollTop:0 },
|
|
|
924 y = frame.scrollTop || frame.scrollY;
|
|
|
925 elem.focus();
|
|
|
926 frame.scrollTop = y;
|
|
|
927 }
|
|
|
928 }
|
|
|
929
|
|
|
930
|
|
|
931 ///// drag & drop support
|
|
|
932
|
|
|
933 /**
|
|
|
934 * When dragging starts, compute absolute bounding boxes of the list and it's items
|
|
|
935 * for faster comparisons while mouse is moving
|
|
|
936 */
|
|
|
937 function drag_start(force)
|
|
|
938 {
|
|
|
939 if (!force && drag_active)
|
|
|
940 return;
|
|
|
941
|
|
|
942 drag_active = true;
|
|
|
943
|
|
|
944 var li, item, height,
|
|
|
945 pos = container.offset();
|
|
|
946
|
|
|
947 body_scroll_top = bw.ie ? 0 : window.pageYOffset;
|
|
|
948 list_scroll_top = container.parent().scrollTop();
|
|
|
949 pos.top += list_scroll_top;
|
|
|
950
|
|
|
951 box_coords = {
|
|
|
952 x1: pos.left,
|
|
|
953 y1: pos.top,
|
|
|
954 x2: pos.left + container.width(),
|
|
|
955 y2: pos.top + container.height()
|
|
|
956 };
|
|
|
957
|
|
|
958 item_coords = [];
|
|
|
959 for (var id in indexbyid) {
|
|
|
960 li = id2dom(id);
|
|
|
961 item = li.children().first().get(0);
|
|
|
962 if (item && (height = item.offsetHeight)) {
|
|
|
963 pos = $(item).offset();
|
|
|
964 pos.top += list_scroll_top;
|
|
|
965 item_coords[id] = {
|
|
|
966 x1: pos.left,
|
|
|
967 y1: pos.top,
|
|
|
968 x2: pos.left + item.offsetWidth,
|
|
|
969 y2: pos.top + height,
|
|
|
970 on: id == autoexpand_item
|
|
|
971 };
|
|
|
972 }
|
|
|
973 }
|
|
|
974
|
|
|
975 // enable auto-scrolling of list container
|
|
|
976 if (container.height() > container.parent().height()) {
|
|
|
977 container.parent()
|
|
|
978 .mousemove(function(e) {
|
|
|
979 var scroll = 0,
|
|
|
980 mouse = rcube_event.get_mouse_pos(e);
|
|
|
981 mouse.y -= container.parent().offset().top;
|
|
|
982
|
|
|
983 if (mouse.y < 25 && list_scroll_top > 0) {
|
|
|
984 scroll = -1; // up
|
|
|
985 }
|
|
|
986 else if (mouse.y > container.parent().height() - 25) {
|
|
|
987 scroll = 1; // down
|
|
|
988 }
|
|
|
989
|
|
|
990 if (drag_active && scroll != 0) {
|
|
|
991 if (!scroll_timer)
|
|
|
992 scroll_timer = window.setTimeout(function(){ drag_scroll(scroll); }, p.scroll_delay);
|
|
|
993 }
|
|
|
994 else if (scroll_timer) {
|
|
|
995 window.clearTimeout(scroll_timer);
|
|
|
996 scroll_timer = null;
|
|
|
997 }
|
|
|
998 })
|
|
|
999 .mouseleave(function() {
|
|
|
1000 if (scroll_timer) {
|
|
|
1001 window.clearTimeout(scroll_timer);
|
|
|
1002 scroll_timer = null;
|
|
|
1003 }
|
|
|
1004 });
|
|
|
1005 }
|
|
|
1006 }
|
|
|
1007
|
|
|
1008 /**
|
|
|
1009 * Signal that dragging has stopped
|
|
|
1010 */
|
|
|
1011 function drag_end()
|
|
|
1012 {
|
|
|
1013 if (!drag_active)
|
|
|
1014 return;
|
|
|
1015
|
|
|
1016 drag_active = false;
|
|
|
1017 scroll_timer = null;
|
|
|
1018
|
|
|
1019 if (autoexpand_timer) {
|
|
|
1020 clearTimeout(autoexpand_timer);
|
|
|
1021 autoexpand_timer = null;
|
|
|
1022 autoexpand_item = null;
|
|
|
1023 }
|
|
|
1024
|
|
|
1025 $('li.droptarget', container).removeClass('droptarget');
|
|
|
1026 }
|
|
|
1027
|
|
|
1028 /**
|
|
|
1029 * Scroll list container in the given direction
|
|
|
1030 */
|
|
|
1031 function drag_scroll(dir)
|
|
|
1032 {
|
|
|
1033 if (!drag_active)
|
|
|
1034 return;
|
|
|
1035
|
|
|
1036 var old_top = list_scroll_top;
|
|
|
1037 container.parent().get(0).scrollTop += p.scroll_step * dir;
|
|
|
1038 list_scroll_top = container.parent().scrollTop();
|
|
|
1039 scroll_timer = null;
|
|
|
1040
|
|
|
1041 if (list_scroll_top != old_top)
|
|
|
1042 scroll_timer = window.setTimeout(function(){ drag_scroll(dir); }, p.scroll_speed);
|
|
|
1043 }
|
|
|
1044
|
|
|
1045 /**
|
|
|
1046 * Determine if the given mouse coords intersect the list and one of its items
|
|
|
1047 */
|
|
|
1048 function intersects(mouse, highlight)
|
|
|
1049 {
|
|
|
1050 // offsets to compensate for scrolling while dragging a message
|
|
|
1051 var boffset = bw.ie ? -document.documentElement.scrollTop : body_scroll_top,
|
|
|
1052 moffset = container.parent().scrollTop(),
|
|
|
1053 result = null;
|
|
|
1054
|
|
|
1055 mouse.top = mouse.y + moffset - boffset;
|
|
|
1056
|
|
|
1057 // no intersection with list bounding box
|
|
|
1058 if (mouse.x < box_coords.x1 || mouse.x >= box_coords.x2 || mouse.top < box_coords.y1 || mouse.top >= box_coords.y2) {
|
|
|
1059 // TODO: optimize performance for this operation
|
|
|
1060 if (highlight)
|
|
|
1061 $('li.droptarget', container).removeClass('droptarget');
|
|
|
1062 return result;
|
|
|
1063 }
|
|
|
1064
|
|
|
1065 // check intersection with visible list items
|
|
|
1066 var id, pos, node;
|
|
|
1067 for (id in item_coords) {
|
|
|
1068 pos = item_coords[id];
|
|
|
1069 if (mouse.x >= pos.x1 && mouse.x < pos.x2 && mouse.top >= pos.y1 && mouse.top < pos.y2) {
|
|
|
1070 node = indexbyid[id];
|
|
|
1071
|
|
|
1072 // if the folder is collapsed, expand it after the configured time
|
|
|
1073 if (node.children && node.children.length && node.collapsed && p.autoexpand && autoexpand_item != id) {
|
|
|
1074 if (autoexpand_timer)
|
|
|
1075 clearTimeout(autoexpand_timer);
|
|
|
1076
|
|
|
1077 autoexpand_item = id;
|
|
|
1078 autoexpand_timer = setTimeout(function() {
|
|
|
1079 expand(autoexpand_item);
|
|
|
1080 drag_start(true); // re-calculate item coords
|
|
|
1081 autoexpand_item = null;
|
|
|
1082 if (ui_droppable)
|
|
|
1083 $.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);
|
|
|
1084 }, p.autoexpand);
|
|
|
1085 }
|
|
|
1086 else if (autoexpand_timer && autoexpand_item != id) {
|
|
|
1087 clearTimeout(autoexpand_timer);
|
|
|
1088 autoexpand_item = null;
|
|
|
1089 autoexpand_timer = null;
|
|
|
1090 }
|
|
|
1091
|
|
|
1092 // check if this item is accepted as drop target
|
|
|
1093 if (p.check_droptarget(node)) {
|
|
|
1094 if (highlight) {
|
|
|
1095 id2dom(id).addClass('droptarget');
|
|
|
1096 pos.on = true;
|
|
|
1097 }
|
|
|
1098 result = id;
|
|
|
1099 }
|
|
|
1100 else {
|
|
|
1101 result = null;
|
|
|
1102 }
|
|
|
1103 }
|
|
|
1104 else if (pos.on) {
|
|
|
1105 id2dom(id).removeClass('droptarget');
|
|
|
1106 pos.on = false;
|
|
|
1107 }
|
|
|
1108 }
|
|
|
1109
|
|
|
1110 return result;
|
|
|
1111 }
|
|
|
1112
|
|
|
1113 /**
|
|
|
1114 * Wrapper for jQuery.UI.droppable() activation on this widget
|
|
|
1115 *
|
|
|
1116 * @param object Options as passed to regular .droppable() function
|
|
|
1117 */
|
|
|
1118 function droppable(opts)
|
|
|
1119 {
|
|
|
1120 if (!opts) opts = {};
|
|
|
1121
|
|
|
1122 if ($.type(opts) == 'string') {
|
|
|
1123 if (opts == 'destroy') {
|
|
|
1124 ui_droppable = null;
|
|
|
1125 }
|
|
|
1126 $('li:not(.virtual)', container).droppable(opts);
|
|
|
1127 return this;
|
|
|
1128 }
|
|
|
1129
|
|
|
1130 droppable_opts = opts;
|
|
|
1131
|
|
|
1132 var my_opts = $.extend({
|
|
|
1133 greedy: true,
|
|
|
1134 tolerance: 'pointer',
|
|
|
1135 hoverClass: 'droptarget',
|
|
|
1136 addClasses: false
|
|
|
1137 }, opts);
|
|
|
1138
|
|
|
1139 my_opts.activate = function(e, ui) {
|
|
|
1140 drag_start();
|
|
|
1141 ui_droppable = ui;
|
|
|
1142 if (opts.activate)
|
|
|
1143 opts.activate(e, ui);
|
|
|
1144 };
|
|
|
1145
|
|
|
1146 my_opts.deactivate = function(e, ui) {
|
|
|
1147 drag_end();
|
|
|
1148 ui_droppable = null;
|
|
|
1149 if (opts.deactivate)
|
|
|
1150 opts.deactivate(e, ui);
|
|
|
1151 };
|
|
|
1152
|
|
|
1153 my_opts.over = function(e, ui) {
|
|
|
1154 intersects(rcube_event.get_mouse_pos(e), false);
|
|
|
1155 if (opts.over)
|
|
|
1156 opts.over(e, ui);
|
|
|
1157 };
|
|
|
1158
|
|
|
1159 $('li:not(.virtual)', container).droppable(my_opts);
|
|
|
1160
|
|
|
1161 return this;
|
|
|
1162 }
|
|
|
1163
|
|
|
1164 /**
|
|
|
1165 * Wrapper for jQuery.UI.draggable() activation on this widget
|
|
|
1166 *
|
|
|
1167 * @param object Options as passed to regular .draggable() function
|
|
|
1168 */
|
|
|
1169 function draggable(opts)
|
|
|
1170 {
|
|
|
1171 if (!opts) opts = {};
|
|
|
1172
|
|
|
1173 if ($.type(opts) == 'string') {
|
|
|
1174 if (opts == 'destroy') {
|
|
|
1175 ui_draggable = null;
|
|
|
1176 }
|
|
|
1177 $('li:not(.virtual)', container).draggable(opts);
|
|
|
1178 return this;
|
|
|
1179 }
|
|
|
1180
|
|
|
1181 draggable_opts = opts;
|
|
|
1182
|
|
|
1183 var my_opts = $.extend({
|
|
|
1184 appendTo: 'body',
|
|
|
1185 revert: 'invalid',
|
|
|
1186 iframeFix: true,
|
|
|
1187 addClasses: false,
|
|
|
1188 cursorAt: {left: -20, top: 5},
|
|
|
1189 create: function(e, ui) { ui_draggable = ui; },
|
|
|
1190 helper: function(e) {
|
|
|
1191 return $('<div>').attr('id', 'rcmdraglayer')
|
|
|
1192 .text($.trim($(e.target).first().text()));
|
|
|
1193 }
|
|
|
1194 }, opts);
|
|
|
1195
|
|
|
1196 $('li:not(.virtual)', container).draggable(my_opts);
|
|
|
1197
|
|
|
1198 return this;
|
|
|
1199 }
|
|
|
1200 }
|
|
|
1201
|
|
|
1202 // use event processing functions from Roundcube's rcube_event_engine
|
|
|
1203 rcube_treelist_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
|
|
|
1204 rcube_treelist_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
|
|
|
1205 rcube_treelist_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;
|
