JSFiddle - React, Tailwind, and code Playground

by lynnaloo

CSS

.pullout {
    position: absolute;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 320px;
    background: #ccc;
}

.xv-pullout-header {
  text-align: center;
  padding: 10px 0;
}

JavaScript

enyo.kind({
    name: "TestSlidable",
    kind: "enyo.Slideable",
    unit: "%",
    min: -100,
    value: -100,
    classes: "pullout",
    components: [{
        content: "Menu"
    },
    {classes: "xv-pullout-header", name: "pulloutHeader", content: "Test Test Test"},
    ],
    togglePullout: function (inSender, inEvent) {

        var name = inEvent.name;

        if (this.isAtMax()) {
            this.animateToMin();

        } else if (this.isAtMin()) {

            this.animateToMax();
        }
        enyo.floatingLayer.render();
    }
});

enyo.kind({
    name: "IconButton",
    kind: "onyx.TooltipDecorator",
    published: {
        src: "",
        content: ""
    },
    style: "margin: 0;",
    components: [{
        name: "iconButton",
        kind: "onyx.IconButton",
        showing: true
    }, {
        name: "toolTip",
        kind: "onyx.Tooltip"
    }],

    create: function () {
        this.inherited(arguments);
        this.sourceChanged();
        this.toolTipChanged();
    },

    sourceChanged: function () {
        this.$.iconButton.setSrc(this.src);
    },

    toolTipChanged: function () {
        this.$.toolTip.setContent(this.content);
    }
});

enyo.kind({
    name: "Layout",
    components: [{
        kind: "IconButton",
        content: "New Text",
        src: "http://enyojs.com/enyo-2.1/lib/onyx/images/search-input-cancel.png",
        showing: true,
        ontap: "requery"
    }, {
        name: "Menu",
        kind: "TestSlidable"
    }],
    requery: function (inSender, inEvent) {
        console.log("toggle");
        this.$.Menu.togglePullout(inSender, inEvent);
    }
});
new Layout().renderInto(document.body);