Brief episodes of technology, often in the presentation layer (webOS, html5, javascript, portals, etc) space.

- Ryan
Recent Tweets @theryanjduffy

This is very much beta code but wanted to share how to add history to the Enyo2 Panels control.  For flavor, I even added html5 history support so if you’re using a Panels controls as the main view controller (like Pane in Enyo1), you get quick back button support.

Here’s the code as well as a quick example (full screen and in jsfiddle):

enyo.kind({
    name:"extras.Panels",
    kind:"enyo.Panels",
    published:{
        history:""
    },
    create:function() {
        this.historyChanged();
        this.inherited(arguments);
        this.createComponent({kind:"Signals", onBack:"back", onpopstate:"statePopped"});
        enyo.dispatcher.listen(window, "popstate");
    },
    historyChanged:function() {
        this.history = this.history || [];
    },
    back:function() {
        this.history.pop(); // current
        if(this.history.length > 0) {
            var last = this.history.pop();
            this.setIndex(last);
        }
    },
    indexChanged:function() {
        this.inherited(arguments);
        if(this.history[this.history.length-1] !== this.index) {
            this.pushState();
        }
    },
    pushState:function() {
        if(window.history.pushState) {
            var c = this.getControls();
            window.history.pushState({index:this.index}, "", "#"+c[this.index].name);
        }
        this.history.push(this.index);
    },
    statePopped:function(source, event) {
        if(event.state) {
            this.back();
        }
    }
});

If you’re looking to support other browsers, you might check out history.js which appears to be a nice polyfill for the history API.