JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="https://raw.github.com/enyojs/layout/master/panels/package.js"></script>

CSS

.panels {
    height:400px;
    width:400px;
}

JavaScript

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();
        }
    }
});

enyo.kind({
    name:"ex.App",
    kind:"Control",
    components:[
        {name:"panels", kind:"extras.Panels", classes:"panels", components:[
            {name:"home", content:"home"},
            {name:"search", components:[
                {kind:"Button", content:"Result 1", ontap:"viewResult"},
                {kind:"Button", content:"Result 2", ontap:"viewResult"},
                {kind:"Button", content:"Result 3", ontap:"viewResult"}
            ]},
            {name:"results"}
        ]},
        {kind:"Button", content:"Home", ontap:"goHome"},
        {kind:"Button", content:"Search", ontap:"goSearch"}
    ],
    viewResult:function(source) {
        this.$.results.setContent(source.content);
        this.$.panels.setIndex(2);
    },
    goHome:function() {
        this.$.panels.setIndex(0);
    },
   ...