Index ¦ Archives  ¦ Atom  ¦ RSS

Enyo - JustType-ish Functionality

Yet again, here's another bit of Enyo goodness. Inspired by Preware, I really love it when an app accepts keyboard input straight off the bat. I don't have to click anything, I can just start typing and it knows what I want to do. That's what JustType is on the OS level, but apps should have that too. If you're an app catalog like Preware, why is someone typing other than to search globally. If you're an app with any sort of content, they're probably searching.

This is another mixin, which means it requires the latest patch to enyo's mixin functionality. Once you have that, just copy-paste the code below and attach it to your main kind (the one referenced in index.html) by adding in the mixins: attribute and setting justtype: to the name of the search field to use. Once you do that, all keypresses that aren't already focused will go to that justtype: field if it's showing.

// 'just type' mixin

var JustType = {
    create:function(){
        this.inherited(arguments);

        if(!this.justtype) return;
        enyo.dispatcher.keyWatcher = this.keyWatcher;
        this.keyWatcher.owner = this;
        this.keyWatcher.justtype = this.justtype;
    },
    dispatchDomEvent:function(inEvent){
        if(inEvent.type == 'focus'){
            this.keyWatcher.isFocused = true;
        } else if (inEvent.type == 'blur'){
            this.keyWatcher.isFocused = false;
        }
        this.inherited(arguments);
    },
    keyWatcher:{
        dispatchDomEvent:function(inEvent){
            var search = this.owner.$[this.justtype];
            if(inEvent.type == 'keypress'
                    && search.getShowing()
                    && !this.isFocused) {
                search.forceFocus();
                var input = search.$.input;
                input.setValue(input.getValue()+String.fromCharCode(inEvent.charCode));
            }
        }
    },
};

enyo.kind({
    name: "MainAppKind",
    kind: enyo.VFlexBox,
    mixins:[JustType],
    justtype:"search",
    components:[
        {kind:"SearchInput",name:"search"}
    ]
});

© Fahrzin Hemmati. Built using Pelican. Theme by Giulio Fidente on github.