Platform-Aware Controls for Enyo

CSS

.pac-firefoxOS.onyx-toolbar {
    background-color:rgb(187,81,31);
}

.pac-chrome.onyx-toolbar {
    background-color:rgb(252,210,9);
}

.pac-chrome-21.onyx-toolbar {
    background-color:rgb(0,210,9);
}

JavaScript

// platform overrides for testing
//enyo.platform = {firefoxOS:1}
//enyo.platform = {chrome:24};
//enyo.platform = {chrome:21};
//enyo.platform = {commodore:64};
enyo.platform = {webos:3}

/** Platform-Aware Controls (PAC) **/

enyo.kind({
    name:"pac.BackButton",
    kind:"onyx.Button",
    content:$L("Back")
});

enyo.kind({
    name:"pac.Header",
    kind:"onyx.Toolbar",
    published:{
        back:true
    },
    create:function() {
        this.inherited(arguments);
        this.backChanged();
    },
    backChanged:function() {
        if(this.back) {
            this.$.backButton || this.createComponent({
                name:"backButton",
                kind:"BackButton",
                addBefore:this.getClientControls()[0]
            });
        } else {
            this.$.backButton && this.$.backButton.hide();
        }
    }
});

// register default handlers
enyo.registerTheme(pac);

pac.registerTheme = function(platform) {
    var parts = platform.match(/([^-]+)-?(.*)/),
        p = parts[1],
        v = parts[2].replace("-", ".") || 0,
        x = enyo.platform[p];
    
    if(x && (x == v || v == 0)) {
        enyo.registerTheme(pac[platform]);
    }
}

/** FirefoxOS **/

enyo.kind({
    name:"pac.firefoxOS.Header",
    kind:"pac.Header",
    classes:"pac-firefoxOS"
});

enyo.kind({
    name:"pac.firefoxOS.BackButton",
    kind:"pac.BackButton",
    classes:"pac-firefoxOS"
});

pac.registerTheme("firefoxOS");

/** Chrome **/

enyo.kind({
    name:"pac.chrome.Header",
    kind:"pac.Header",
    classes:"pac-chrome",
});

enyo.kind({
    name:"pac.chrome.BackButton",
    kind:"pac.BackButton",
    content:"Go Back!"
});

pac.registerTheme("chrome");

enyo.kind({
    name:"pac.chrome-21.Header",
    kind:"pac.chrome.Header",
    classes:"pac-chrome-21"
});

pac.registerTheme("chrome-21");

/** webos **/

enyo.kind({
    name:"pac.webos.Header",
    kind:"pac.Header",
    classes:"pac-webos",
    backChanged:enyo.nop // disable back...