Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

8076 hotkeys #105

Merged
merged 4 commits into from

3 participants

@will-moore
Collaborator

Hotkeys for tree traversal/selection working same as on Mac OS (and Windows?).

will-moore added some commits
@will-moore will-moore Right/left up/down keys do full selection 7e84a45
@will-moore will-moore 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.
865bc34
@will-moore will-moore Adding selection delay to Right-key (same as down) ef9632e
@will-moore will-moore Removing console.log 459338c
@omeroscott

@will-moore @chris-allan Tested both on Windows and Mac with the 3 browsers of Chrome, firefox and safari/IE8 no issues recorded. Future work identified in ticket #8233 RFE: Hotkey navigation responsive to the scroll bar.

@chris-allan chris-allan merged commit 46e1146 into openmicroscopy:develop
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 1, 2012
  1. @will-moore
  2. @will-moore

    Hotkeys working as on Mac (and Windows?) Closes #8076

    will-moore authored
    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.
  3. @will-moore
  4. @will-moore

    Removing console.log

    will-moore authored
This page is out of date. Refresh to see the latest.
View
117 components/tools/OmeroWeb/omeroweb/webclient/templates/webclient/data/containers.html
@@ -581,7 +581,124 @@
return config;
}
+ },
+
+ // 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 () {
+ // 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)){
+ 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;
+ },
+ "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) {
+ 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 () {
+ // 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;
+ 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;
+ }
}
+
})
.delegate("a", "click.jstree", function (e) {
var data = $.jstree._focused();
Something went wrong with that request. Please try again.