KeysNavigation

class webix.KeysNavigation()

Keysnavigation mixin

References

helpers
assert(), once().

Referenced by

mixins
Touch().
views
calendar(), colorboard(), dataview(), list(), tree().

External references

Official documentation page.

Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
webix.KeysNavigation = {
    $init:function(){
        if(this.getSelectedId){
            this.attachEvent("onAfterRender", this._set_focusable_item);
            this.attachEvent("onAfterSelect", webix.once(function(){
                if(this.count()>1){
                    var node =  this._dataobj.querySelector("["+this._id+"]");
                    if(node) node.setAttribute("tabindex", "-1");
                }
            }));
        }
    },
    _set_focusable_item:function(){
        var sel = this.getSelectedId(true);
        if(!sel.length || !this.getItemNode(sel[0])){
            var node =  this._dataobj.querySelector("["+this._id+"]");
            if(node) node.setAttribute("tabindex", "0");
        }
    },
    _navigation_helper:function(mode){
        return function(view, e){
            var tag = (e.srcElement || e.target);

            //ignore clipboard listener
            if (!tag.getAttribute("webixignore")){
                //ignore hotkeys if focus in the common input
                //to allow normal text edit operations
                var name = tag.tagName;
                if (name == "INPUT" || name == "TEXTAREA" || name == "SELECT") return true;
            }

            if (view && view.moveSelection && view.config.navigation && !view._in_edit_mode){
                webix.html.preventEvent(e);
                return view.moveSelection(mode, e.shiftKey);
            }
            return true;
        };
    },
    moveSelection:function(mode, shift){
        var config = this._settings;
        if(config.disabled) return;
        //get existing selection
        var selected = this.getSelectedId(true);
        var x_layout = (this.count && (config.layout =="x" || config.xCount > 1));


         if((mode == "right" || mode == "left") && this._parent_menu){
            var parent = webix.$$(this._parent_menu);

            parent._hide_sub_menu(true);
            if(parent.config.layout === "x")
                parent.moveSelection(mode);
            else
                webix.UIManager.setFocus(parent);
            return;
        }

        if (!selected.length && this.count()){
            if (mode == "down" || (mode == "right" && x_layout)) mode = "top";
            else if (mode == "up" || (mode == "left" && x_layout)) mode = "bottom";
            else return;
            selected = [this.getFirstId()];
        }

        if (selected.length == 1){  //if we have a selection
            selected = selected[0];
            var prev = selected;

            if (mode == "left" && this.close)
                return this.close(selected);
            if (mode == "right" && this.open)
                return this.open(selected);

            else if (mode == "top") {
                selected = this.getFirstId();
            } else if (mode == "bottom") {
                selected = this.getLastId();
            } else if (mode == "up" || mode == "left" || mode == "pgup") {
                var index = this.getIndexById(selected);
                var step = mode == "pgup" ? 10 : 1;
                selected = this.getIdByIndex(Math.max(0, index-step));
            } else if (mode == "down" || mode == "right" || mode == "pgdown") {
                var index = this.getIndexById(selected);
                var step = mode == "pgdown" ? 10 : 1;
                selected = this.getIdByIndex(Math.min(this.count()-1, index+step));
            } else {
                webix.assert(false, "Not supported selection moving mode");
                return;
            }

            if(this._skip_item)
                selected = this._skip_item(selected, prev, mode);

            this.showItem(selected);
            this.select(selected);

            if(this.getSubMenu && this.getSubMenu(selected))
                this._mouse_move_activation(selected, this.getItemNode(selected));

            if(!this._settings.clipboard){
                var node = this.getItemNode(selected);
                if(node) node.focus();
            }
        }
        return false;
    },
    navigation_setter:function(value){
        //using global flag to apply hotkey only once
        if (value && !webix.UIManager._global_nav_grid_hotkeys){
            webix.UIManager._global_nav_grid_hotkeys = true;
            //hotkeys will react on any component but will not work in edit mode
            //you can define moveSelection method to handle navigation keys
            webix.UIManager.addHotKey("up",         this._navigation_helper("up"));
            webix.UIManager.addHotKey("down",       this._navigation_helper("down"));
            webix.UIManager.addHotKey("shift+up",   this._navigation_helper("up"));
            webix.UIManager.addHotKey("shift+down", this._navigation_helper("down"));
            webix.UIManager.addHotKey("shift+right",   this._navigation_helper("right"));
            webix.UIManager.addHotKey("shift+left", this._navigation_helper("left"));
            webix.UIManager.addHotKey("pageup",     this._navigation_helper("pgup"));
            webix.UIManager.addHotKey("pagedown",   this._navigation_helper("pgdown"));
            webix.UIManager.addHotKey("home",       this._navigation_helper("top"));
            webix.UIManager.addHotKey("end",        this._navigation_helper("bottom"));
            webix.UIManager.addHotKey("right",      this._navigation_helper("right"));
            webix.UIManager.addHotKey("left",        this._navigation_helper("left"));

        }

        return value;
    }
};