From 3412e50b54e3daac8745234e21ab6e72be0ed165 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 04 Jun 2014 11:20:33 -0400
Subject: [PATCH] Fix attachment menu structure and aria-attributes
---
program/js/treelist.js | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 209 insertions(+), 31 deletions(-)
diff --git a/program/js/treelist.js b/program/js/treelist.js
index 5913f44..4cffdac 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -1,20 +1,33 @@
-/*
- +-----------------------------------------------------------------------+
- | Roundcube Treelist widget |
- | |
- | This file is part of the Roundcube Webmail client |
- | Copyright (C) 2013, The Roundcube Dev Team |
- | |
- | Licensed under the GNU General Public License version 3 or |
- | any later version with exceptions for skins & plugins. |
- | See the README file for a full license statement. |
- | |
- +-----------------------------------------------------------------------+
- | Authors: Thomas Bruederli <roundcube@gmail.com> |
- +-----------------------------------------------------------------------+
- | Requires: common.js |
- +-----------------------------------------------------------------------+
-*/
+/**
+ * Roundcube Treelist Widget
+ *
+ * This file is part of the Roundcube Webmail client
+ *
+ * @licstart The following is the entire license notice for the
+ * JavaScript code in this file.
+ *
+ * Copyright (c) 2013-2014, The Roundcube Dev Team
+ *
+ * The JavaScript code in this page is free software: you can
+ * redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GNU GPL) as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option)
+ * any later version. The code is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute non-source (e.g., minimized or compacted) forms of
+ * that code without the copy of the GNU GPL normally required by
+ * section 4, provided you include this license notice and a URL
+ * through which recipients can access the Corresponding Source.
+ *
+ * @licend The above is the entire license notice
+ * for the JavaScript code in this file.
+ *
+ * @author Thomas Bruederli <roundcube@gmail.com>
+ * @requires jquery.js, common.js
+ */
/**
@@ -28,6 +41,9 @@
id_prefix: '',
autoexpand: 1000,
selectable: false,
+ scroll_delay: 500,
+ scroll_step: 5,
+ scroll_speed: 20,
check_droptarget: function(node){ return !node.virtual }
}, p || {});
@@ -36,12 +52,14 @@
indexbyid = {},
selection = null,
drag_active = false,
+ has_focus = false,
box_coords = {},
item_coords = [],
autoexpand_timer,
autoexpand_item,
body_scroll_top = 0,
list_scroll_top = 0,
+ scroll_timer,
me = this;
@@ -52,6 +70,7 @@
this.collapse = collapse;
this.select = select;
this.render = render;
+ this.reset = reset;
this.drag_start = drag_start;
this.drag_end = drag_end;
this.intersects = intersects;
@@ -76,6 +95,7 @@
// register click handlers on list
container.on('click', 'div.treetoggle', function(e){
toggle(dom2id($(this).parent()));
+ e.stopPropagation();
});
container.on('click', 'li', function(e){
@@ -85,6 +105,19 @@
e.stopPropagation();
}
});
+
+ 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
@@ -99,11 +132,6 @@
if (node = indexbyid[id]) {
node.collapsed = typeof set == 'undefined' || set;
update_dom(node);
-
- // Work around a bug in IE6 and IE7, see #1485309
- if (window.bw && (bw.ie6 || bw.ie7) && node.collapsed) {
- id2dom(node.id).next().children('ul:visible').hide().show();
- }
if (recursive && node.children) {
for (var i=0; i < node.children.length; i++) {
@@ -140,13 +168,13 @@
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);
@@ -181,6 +209,7 @@
// insert as child of an existing node
if (parent_node) {
+ node.level = parent_node.level + 1;
if (!parent_node.children)
parent_node.children = [];
@@ -199,6 +228,7 @@
}
// insert at top level
else {
+ node.level = 0;
data.push(node);
li = render_node(node, container);
}
@@ -295,7 +325,7 @@
*/
function update_data()
{
- data = walk_list(container);
+ data = walk_list(container, 0);
}
/**
@@ -304,9 +334,24 @@
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);
+ }
+
+ /**
+ *
+ */
+ function reset()
+ {
+ select('');
+
+ data = [];
+ indexbyid = {};
+ drag_active = false;
+
+ container.html('');
}
/**
@@ -322,6 +367,7 @@
// render child nodes
for (var i=0; i < data.length; i++) {
+ data[i].level = 0;
render_node(data[i], container);
}
@@ -338,6 +384,7 @@
var li = $('<li>')
.attr('id', p.id_prefix + (p.id_encode ? p.id_encode(node.id) : node.id))
+ .attr('role', 'treeitem')
.addClass((node.classes || []).join(' '));
if (replace)
@@ -357,12 +404,14 @@
// 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);
}
}
@@ -374,7 +423,7 @@
* 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){
@@ -383,8 +432,9 @@
id: dom2id(li),
classes: li.attr('class').split(' '),
virtual: li.hasClass('virtual'),
+ level: level,
html: li.children().first().get(0).outerHTML,
- children: walk_list(sublist)
+ children: walk_list(sublist, level+1)
}
if (sublist.length) {
@@ -392,14 +442,26 @@
}
if (node.children.length) {
node.collapsed = sublist.css('display') == 'none';
+ li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
}
if (li.hasClass('selected')) {
+ li.attr('aria-selected', 'true');
selection = 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;
}
@@ -448,6 +510,70 @@
scroller.scrollTop(rel_offset + current_offset);
}
+ /**
+ * 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)
+ toggle(id, rcube_event.get_modifier(e) == SHIFT_KEY); // toggle subtree
+ }
+ return false;
+ }
+
+ 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
/**
@@ -461,6 +587,7 @@
body_scroll_top = bw.ie ? 0 : window.pageYOffset;
list_scroll_top = container.parent().scrollTop();
+ pos.top += list_scroll_top;
drag_active = true;
box_coords = {
@@ -476,6 +603,7 @@
item = li.children().first().get(0);
if (height = item.offsetHeight) {
pos = $(item).offset();
+ pos.top += list_scroll_top;
item_coords[id] = {
x1: pos.left,
y1: pos.top,
@@ -485,6 +613,38 @@
};
}
}
+
+ // enable auto-scrolling of list container
+ if (container.height() > container.parent().height()) {
+ container.parent()
+ .mousemove(function(e) {
+ var scroll = 0,
+ mouse = rcube_event.get_mouse_pos(e);
+ mouse.y -= container.parent().offset().top;
+
+ if (mouse.y < 25 && list_scroll_top > 0) {
+ scroll = -1; // up
+ }
+ else if (mouse.y > container.parent().height() - 25) {
+ scroll = 1; // down
+ }
+
+ if (drag_active && scroll != 0) {
+ if (!scroll_timer)
+ scroll_timer = window.setTimeout(function(){ drag_scroll(scroll); }, p.scroll_delay);
+ }
+ else if (scroll_timer) {
+ window.clearTimeout(scroll_timer);
+ scroll_timer = null;
+ }
+ })
+ .mouseleave(function() {
+ if (scroll_timer) {
+ window.clearTimeout(scroll_timer);
+ scroll_timer = null;
+ }
+ });
+ }
}
/**
@@ -493,6 +653,7 @@
function drag_end()
{
drag_active = false;
+ scroll_timer = null;
if (autoexpand_timer) {
clearTimeout(autoexpand_timer);
@@ -504,16 +665,33 @@
}
/**
+ * Scroll list container in the given direction
+ */
+ function drag_scroll(dir)
+ {
+ if (!drag_active)
+ return;
+
+ var old_top = list_scroll_top;
+ container.parent().get(0).scrollTop += p.scroll_step * dir;
+ list_scroll_top = container.parent().scrollTop();
+ scroll_timer = null;
+
+ if (list_scroll_top != old_top)
+ scroll_timer = window.setTimeout(function(){ drag_scroll(dir); }, p.scroll_speed);
+ }
+
+ /**
* Determine if the given mouse coords intersect the list and one if its items
*/
function intersects(mouse, highlight)
{
// offsets to compensate for scrolling while dragging a message
var boffset = bw.ie ? -document.documentElement.scrollTop : body_scroll_top,
- moffset = list_scroll_top - container.parent().scrollTop(),
+ moffset = container.parent().scrollTop(),
result = null;
- mouse.top = mouse.y + -moffset - boffset;
+ mouse.top = mouse.y + moffset - boffset;
// 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) {
--
Gitblit v1.9.1