From 7e84a4560d1635e40cca4f718ea41471db2e1599 Mon Sep 17 00:00:00 2001 From: Will Moore Date: Mon, 20 Feb 2012 13:47:16 +0000 Subject: [PATCH 1/4] Right/left up/down keys do full selection --- .../templates/webclient/data/containers.html | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html index ec4f211e54e..8a9c25e3e55 100644 --- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html +++ b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html @@ -581,7 +581,46 @@ return config; } + }, + + // default hotkeys only do 'hover' on up/down/left/right. We want to 'select' + "hotkeys" : { + "right" : function () { + var o = this.data.ui.last_selected; + if(o && o.length) { + if(o.hasClass("jstree-closed")) { this.open_node(o); } + else { + this.hover_node(this._get_next(o)); + this._get_next(o).children("a:eq(0)").click(); + } + } + return false; + }, + "down" : function () { + var o = this.data.ui.last_selected; + if(o && o.length) { + if(o.hasClass("jstree-closed")) { this.open_node(o); } + else { + this.hover_node(this._get_next(o)); + this._get_next(o).children("a:eq(0)").click(); + } + } + return false; + }, + "up" : function () { + var o = this.data.ui.last_selected || -1; + this.hover_node(this._get_prev(o)); + this._get_prev(o).children("a:eq(0)").click(); + return false; + }, + "left" : function () { + var o = this.data.ui.last_selected || -1; + this.hover_node(this._get_prev(o)); + this._get_prev(o).children("a:eq(0)").click(); + return false; + }, } + }) .delegate("a", "click.jstree", function (e) { var data = $.jstree._focused(); From 865bc349137a3d60f3ac842f48052a0e7e07878e Mon Sep 17 00:00:00 2001 From: Will Moore Date: Thu, 1 Mar 2012 08:58:21 +0000 Subject: [PATCH 2/4] Hotkeys working as on Mac (and Windows?) Closes #8076 Up & Down traverse tree without expanding/collapsing. Left & Right do collapse & expand. Up & Down keys have a small timeout on selection to prevent too many calls when the keys are held down to rapidly traverse the tree. --- .../templates/webclient/data/containers.html | 84 ++++++++++++++++--- 1 file changed, 73 insertions(+), 11 deletions(-) diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html index 8a9c25e3e55..f4ffc5c957c 100644 --- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html +++ b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html @@ -584,12 +584,16 @@ }, // default hotkeys only do 'hover' on up/down/left/right. We want to 'select' + // up/down just move selection, don't expand/collapse + // left/right expand and collapse. If right and no children, select next. + // space+up/down to select range. "hotkeys" : { "right" : function () { var o = this.data.ui.last_selected; if(o && o.length) { if(o.hasClass("jstree-closed")) { this.open_node(o); } - else { + // if we are on a leaf and we have more siblings, select them + else if (this.is_leaf(o) && (o.nextAll("li").size() > 0)){ this.hover_node(this._get_next(o)); this._get_next(o).children("a:eq(0)").click(); } @@ -597,28 +601,86 @@ return false; }, "down" : function () { + // remove selection + this.data.ui.selected && this.data.ui.selected.children("a").removeClass("jstree-clicked"); + // starting point is the last-selected... var o = this.data.ui.last_selected; + // ...unless hover appears selected (we're in the process of rapidly traversing the tree) + if (this.data.ui.hovered && this.data.ui.hovered.children("a").hasClass("jstree-clicked") ) { + o = this.data.ui.hovered; + } if(o && o.length) { - if(o.hasClass("jstree-closed")) { this.open_node(o); } - else { - this.hover_node(this._get_next(o)); - this._get_next(o).children("a:eq(0)").click(); - } + var new_select = this._get_next(o); + // make the 'next' node appear selected + o.children("a").removeClass("jstree-clicked"); + new_select.children("a").addClass("jstree-clicked"); + this.hover_node(new_select); // also add 'hover' as our marker + var datatree = this; + // our *actual* selection occurs after timeout, if selection hasn't moved yet + setTimeout(function (){ + if (new_select.children("a").hasClass("jstree-hovered")) { + datatree.data.ui.selected = $(); // clears any previous selection + datatree.select_node(new_select); // trigger selection event + } + }, 100); } return false; }, "up" : function () { - var o = this.data.ui.last_selected || -1; - this.hover_node(this._get_prev(o)); - this._get_prev(o).children("a:eq(0)").click(); + // remove selection + this.data.ui.selected && this.data.ui.selected.children("a").removeClass("jstree-clicked"); + // starting point is the last-selected... + var o = this.data.ui.last_selected; + // ...unless hover appears selected (we're in the process of rapidly traversing the tree) + if (this.data.ui.hovered && this.data.ui.hovered.children("a").hasClass("jstree-clicked") ) { + o = this.data.ui.hovered; + } + if(o && o.length) { + var new_select = this._get_prev(o); + // make the 'previous' node appear selected + o.children("a").removeClass("jstree-clicked"); + new_select.children("a").addClass("jstree-clicked"); + this.hover_node(new_select); // also add 'hover' as our marker + var datatree = this; + // our *actual* selection occurs after timeout, if selection hasn't moved yet + setTimeout(function (){ + if (new_select.children("a").hasClass("jstree-hovered")) { + datatree.data.ui.selected = $(); // clears any previous selection + datatree.select_node(new_select); // trigger selection event + } + }, 100); + } return false; }, "left" : function () { var o = this.data.ui.last_selected || -1; - this.hover_node(this._get_prev(o)); - this._get_prev(o).children("a:eq(0)").click(); + if(o && o.length) { + // if node is expanded, simply collapse + if (o.hasClass("jstree-open")) { + this.close_node(o); + } else if (this._get_parent(o)) { + var new_select = this._get_parent(o); + new_select.children("a:eq(0)").click(); + } + } return false; }, + "shift+down" : function (e) { + var o = this.data.ui.selected.last(); + if(o && o.length) { + var new_select = this._get_next(o); + this.select_node(new_select, true, e); // tree handles shift events for multi-select + } + return false; + }, + "shift+up" : function (e) { + var o = this.data.ui.selected.first(); + if(o && o.length) { + var new_select = this._get_prev(o); + this.select_node(new_select, true, e); // tree handles shift events for multi-select + } + return false; + } } }) From ef9632e77ff3d6679bcb51df8e476ccab8a5195f Mon Sep 17 00:00:00 2001 From: Will Moore Date: Thu, 1 Mar 2012 12:14:44 +0000 Subject: [PATCH 3/4] Adding selection delay to Right-key (same as down) --- .../templates/webclient/data/containers.html | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html index f4ffc5c957c..370842973f7 100644 --- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html +++ b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html @@ -589,13 +589,30 @@ // space+up/down to select range. "hotkeys" : { "right" : function () { + // starting point is the last-selected... var o = this.data.ui.last_selected; + // ...unless hover appears selected (we're in the process of rapidly traversing the tree) + if (this.data.ui.hovered && this.data.ui.hovered.children("a").hasClass("jstree-clicked") ) { + o = this.data.ui.hovered; + } if(o && o.length) { if(o.hasClass("jstree-closed")) { this.open_node(o); } // if we are on a leaf and we have more siblings, select them else if (this.is_leaf(o) && (o.nextAll("li").size() > 0)){ - this.hover_node(this._get_next(o)); - this._get_next(o).children("a:eq(0)").click(); + var new_select = this._get_next(o); + // make the 'next' node appear selected + o.children("a").removeClass("jstree-clicked"); + new_select.children("a").addClass("jstree-clicked"); + this.hover_node(new_select); // also add 'hover' as our marker + var datatree = this; + // our *actual* selection occurs after timeout, if selection hasn't moved yet + setTimeout(function (){ + console.log( new_select.children("a").hasClass("jstree-hovered") ); + if (new_select.children("a").hasClass("jstree-hovered")) { + datatree.data.ui.selected = $(); // clears any previous selection + datatree.select_node(new_select); // trigger selection event + } + }, 100); } } return false; From 459338c89b72583b5ea94c01fddde27276b22103 Mon Sep 17 00:00:00 2001 From: Will Moore Date: Thu, 1 Mar 2012 12:16:49 +0000 Subject: [PATCH 4/4] Removing console.log --- .../omeroweb/webclient/templates/webclient/data/containers.html | 1 - 1 file changed, 1 deletion(-) diff --git a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html index 370842973f7..55fb8c3ee76 100644 --- a/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html +++ b/components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html @@ -607,7 +607,6 @@ var datatree = this; // our *actual* selection occurs after timeout, if selection hasn't moved yet setTimeout(function (){ - console.log( new_select.children("a").hasClass("jstree-hovered") ); if (new_select.children("a").hasClass("jstree-hovered")) { datatree.data.ui.selected = $(); // clears any previous selection datatree.select_node(new_select); // trigger selection event