Announcement

Collapse
No announcement yet.

Keyboard friendly desktop launchpad

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Keyboard friendly desktop launchpad

    Would love to see the desktop launchpad become a little more keyboard friendly (ie Page down, Page up navigation would move the page).

    Also if a user starts to type any keyboard character (other than page up/down) the search bar would be activated and the key strokes would be directed there (save the user a mouse click).

    (ie if I start to type app build (search would appear and app builder would be selected so I can press enter and run the function)... Then default to search so I can start to search once I am in the app.

  • #2
    You can achieve some of these custom actions from within the Desktop Hook.js.

    Below within the componentrender method it listens for page up/down to scroll the launchpad and keys 0-9 or a-z will open the search.

    Code:
        componentrender      : function (cmp) {
    
            if (cmp.xtype === 'controlbar') {
                // save off the controlbar since will use it later
                //
                me.controlbar = cmp;
            }
    
            if (cmp.xtype === 'launchpad') {
                // listen for keyup
                //
                document.addEventListener('keyup', function (e) {
                    var activeApp = Portal.util.Helper.getActiveApp();
    
                    // if launchpad is active listen for page up/down
                    //
                    if (activeApp.xtype === 'launchpad') {
                        var dataviewEl = activeApp.down('dataview').getEl().dom;
    
                        if (e.keyCode === 34) {
                            // page down
                            //
                            if (dataviewEl.scrollTop + dataviewEl.clientHeight < dataviewEl.scrollHeight) {
                                dataviewEl.scrollTop = dataviewEl.scrollTop + dataviewEl.clientHeight;
                            }
                        } else if (e.keyCode === 33) {
                            // page up
                            //
                            if (dataviewEl.scrollTop - dataviewEl.clientHeight >= 0) {
                                dataviewEl.scrollTop = dataviewEl.scrollTop - dataviewEl.clientHeight;
                            } else {
                                dataviewEl.scrollTop = 0;
                            }
                        } else {
                            if (!Valence.isEmpty(me.controlbar)) {
                                // focus search
                                //
                                if (!me.controlbar.getViewModel().get('isSearching')) {
                                    // if 0-9 or a-z keys then autofocus search
                                    //
                                    if (e.keyCode >= 48 && e.keyCode <= 90) {
                                        if (!Valence.isEmpty(me.controlbar)) {
                                            var search  = me.controlbar.lookupReference('search'),
                                                inputId = search.getInputId();
    
                                            search.on({
                                                enable : {
                                                    single : true,
                                                    delay  : 100,
                                                    fn     : function () {
                                                        search.doRawQuery();
                                                    }
                                                }
                                            });
    
                                            document.querySelector('#' + inputId).value = e.key;
                                            me.controlbar.getController().onClickSearch();
                                        }
                                    }
                                }
                            }
                        }
                    }
                });
            }
        },

    Comment


    • #3
      This is great, thank you!

      Comment

      Working...
      X