diff options
Diffstat (limited to 'program/js/treelist.js')
| -rw-r--r-- | program/js/treelist.js | 162 |
1 files changed, 153 insertions, 9 deletions
diff --git a/program/js/treelist.js b/program/js/treelist.js index 85d8aa928..cce4d17fd 100644 --- a/program/js/treelist.js +++ b/program/js/treelist.js @@ -55,6 +55,7 @@ function rcube_treelist_widget(node, p) drag_active = false, search_active = false, last_search = '', + has_focus = false, box_coords = {}, item_coords = [], autoexpand_timer, @@ -64,6 +65,7 @@ function rcube_treelist_widget(node, p) scroll_timer, searchfield, tree_state, + ui_droppable, list_id = (container.attr('id') || p.id_prefix || '0'), me = this; @@ -79,6 +81,7 @@ function rcube_treelist_widget(node, p) this.drag_start = drag_start; this.drag_end = drag_end; this.intersects = intersects; + this.droppable = droppable; this.update = update_node; this.insert = insert; this.remove = remove; @@ -149,6 +152,19 @@ function rcube_treelist_widget(node, p) }) } + container.on('focusin', function(e){ + // TODO: only accept focus on virtual nodes from keyboard events + has_focus = true; + }) + .on('focusout', function(e){ + has_focus = false; + }); + + container.attr('role', 'tree'); + + $(document.body) + .bind('keydown', keypress); + /////// private methods @@ -199,13 +215,13 @@ function rcube_treelist_widget(node, p) function select(id) { if (selection) { - id2dom(selection).removeClass('selected'); + id2dom(selection).removeClass('selected').removeAttr('aria-selected'); selection = null; } var li = id2dom(id); if (li.length) { - li.addClass('selected'); + li.addClass('selected').attr('aria-selected', 'true'); selection = id; // TODO: expand all parent nodes if collapsed scroll_to_node(li); @@ -260,6 +276,7 @@ function rcube_treelist_widget(node, p) // insert as child of an existing node if (parent_node) { + node.level = parent_node.level + 1; if (!parent_node.children) parent_node.children = []; @@ -294,6 +311,7 @@ function rcube_treelist_widget(node, p) } // insert at top level else { + node.level = 0; data.push(node); li = render_node(node, container); } @@ -390,7 +408,7 @@ function rcube_treelist_widget(node, p) */ function update_data() { - data = walk_list(container); + data = walk_list(container, 0); } /** @@ -399,6 +417,7 @@ function rcube_treelist_widget(node, p) function update_dom(node) { var li = id2dom(node.id); + li.attr('aria-expanded', node.collapsed ? 'false' : 'true'); li.children('ul').first()[(node.collapsed ? 'hide' : 'show')](); li.children('div.treetoggle').removeClass('collapsed expanded').addClass(node.collapsed ? 'collapsed' : 'expanded'); me.triggerEvent('toggle', node); @@ -505,6 +524,7 @@ function rcube_treelist_widget(node, p) // render child nodes for (var i=0; i < data.length; i++) { + data[i].level = 0; render_node(data[i], container); } @@ -521,7 +541,9 @@ function rcube_treelist_widget(node, p) var li = $('<li>') .attr('id', p.id_prefix + (p.id_encode ? p.id_encode(node.id) : node.id)) - .addClass((node.classes || []).join(' ')); + .attr('role', 'treeitem') + .addClass((node.classes || []).join(' ')) + .data('id', node.id); if (replace) replace.replaceWith(li); @@ -543,12 +565,14 @@ function rcube_treelist_widget(node, p) // add child list and toggle icon if (node.children && node.children.length) { + li.attr('aria-expanded', node.collapsed ? 'false' : 'true'); $('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '"> </div>').appendTo(li); - var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass); + var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass).attr('role', 'group'); if (node.collapsed) ul.hide(); for (var i=0; i < node.children.length; i++) { + node.children[i].level = node.level + 1; render_node(node.children[i], ul); } } @@ -560,7 +584,7 @@ function rcube_treelist_widget(node, p) * Recursively walk the DOM tree and build an internal data structure * representing the skeleton of this tree list. */ - function walk_list(ul) + function walk_list(ul, level) { var result = []; ul.children('li').each(function(i,e){ @@ -569,9 +593,10 @@ function rcube_treelist_widget(node, p) id: dom2id(li), classes: String(li.attr('class')).split(' '), virtual: li.hasClass('virtual'), + level: level, html: li.children().first().get(0).outerHTML, text: li.children().first().text(), - children: walk_list(sublist) + children: walk_list(sublist, level+1) } if (sublist.length) { @@ -589,14 +614,29 @@ function rcube_treelist_widget(node, p) if (!li.children('div.treetoggle').length) $('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '"> </div>').appendTo(li); + + li.attr('aria-expanded', node.collapsed ? 'false' : 'true'); } if (li.hasClass('selected')) { + li.attr('aria-selected', 'true'); selection = node.id; } + li.data('id', node.id); + + // declare list item as treeitem + li.attr('role', 'treeitem').attr('aria-level', node.level+1); + + // allow virtual nodes to receive focus + if (node.virtual) { + li.children('a:first').attr('tabindex', '0'); + } + result.push(node); indexbyid[node.id] = node; - }) + }); + + ul.attr('role', level == 0 ? 'tree' : 'group'); return result; } @@ -679,6 +719,75 @@ function rcube_treelist_widget(node, p) return undefined; } + /** + * Handler for keyboard events on treelist + */ + function keypress(e) + { + var target = e.target || {}, + keyCode = rcube_event.get_keycode(e); + + if (!has_focus || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT') + return true; + + switch (keyCode) { + case 38: + case 40: + case 63232: // 'up', in safari keypress + case 63233: // 'down', in safari keypress + var li = container.find(':focus').closest('li'); + if (li.length) { + focus_next(li, (mod = keyCode == 38 || keyCode == 63232 ? -1 : 1)); + } + break; + + case 37: // Left arrow key + case 39: // Right arrow key + var id, node, li = container.find(':focus').closest('li'); + if (li.length) { + id = dom2id(li); + node = indexbyid[id]; + if (node && node.children.length && node.collapsed != (keyCode == 37)) + toggle(id, rcube_event.get_modifier(e) == SHIFT_KEY); // toggle subtree + } + return false; + + case 9: // Tab + // jump to last/first item to move focus away from the treelist widget by tab + var limit = rcube_event.get_modifier(e) == SHIFT_KEY ? 'first' : 'last'; + container.find('li[role=treeitem]:has(a)')[limit]().find('a:'+limit).focus(); + break; + } + + return true; + } + + function focus_next(li, dir, from_child) + { + var mod = dir < 0 ? 'prev' : 'next', + next = li[mod](), limit, parent; + + if (dir > 0 && !from_child && li.children('ul[role=group]:visible').length) { + li.children('ul').children('li:first').children('a:first').focus(); + } + else if (dir < 0 && !from_child && next.children('ul[role=group]:visible').length) { + next.children('ul').children('li:last').children('a:last').focus(); + } + else if (next.length && next.children('a:first')) { + next.children('a:first').focus(); + } + else { + parent = li.parent().closest('li[role=treeitem]'); + if (parent.length) + if (dir < 0) { + parent.children('a:first').focus(); + } + else { + focus_next(parent, dir, true); + } + } + } + ///// drag & drop support @@ -802,7 +911,8 @@ function rcube_treelist_widget(node, p) // no intersection with list bounding box if (mouse.x < box_coords.x1 || mouse.x >= box_coords.x2 || mouse.top < box_coords.y1 || mouse.top >= box_coords.y2) { // TODO: optimize performance for this operation - $('li.droptarget', container).removeClass('droptarget'); + if (highlight) + $('li.droptarget', container).removeClass('droptarget'); return result; } @@ -823,6 +933,8 @@ function rcube_treelist_widget(node, p) expand(autoexpand_item); drag_start(); // re-calculate item coords autoexpand_item = null; + if (ui_droppable) + $.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null); }, p.autoexpand); } else if (autoexpand_timer && autoexpand_item != id) { @@ -851,6 +963,38 @@ function rcube_treelist_widget(node, p) return result; } + + /** + * Wrapper for jQuery.UI.droppable() activation on this widget + * + * @param object Options as passed to regular .droppable() function + */ + function droppable(opts) + { + var my_opts = $.extend({ greedy: true, hoverClass: 'droptarget', addClasses:false }, opts); + + my_opts.activate = function(e, ui) { + drag_start(); + ui_droppable = ui; + if (opts.activate) + opts.activate(e, ui); + }; + + my_opts.deactivate = function(e, ui) { + drag_end(); + ui_droppable = null; + if (opts.deactivate) + opts.deactivate(e, ui); + }; + + my_opts.over = function(e, ui) { + intersects(rcube_event.get_mouse_pos(e), false); + if (opts.over) + opts.over(e, ui); + }; + + $('li:not(.virtual)', container).droppable(my_opts); + } } // use event processing functions from Roundcube's rcube_event_engine |