• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

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