JSFiddle - React, Tailwind, and code Playground

by lynnaloo

JavaScript

// test widgets
enyo.kind({
    name: "Chart1",
    content: "Test Chart 1",
    style: "background: blue;"
});

enyo.kind({
    name: "Chart2",
    content: "Test Chart 2",
    style: "background: red;"
});

enyo.kind({
    name: "Chart3",
    content: "Test Chart 3",
    style: "background: yellow;"
});

enyo.kind({
    name: "ChartsArranger",
    kind: "Panels",
    arrangerKind: "GridArranger",
    fit: true,
    wrap: true,
    colHeight: "300",
    colWidth: "200",
    panelCount: 0
});

enyo.kind({
    name: "Test",
    kind: "FittableRows",
    components: [{
        kind: "onyx.Toolbar",
        components: [{
            kind: "onyx.MenuDecorator",
            onSelect: "itemSelected",
            components: [{
                content: "Add Chart",
                kind: "onyx.Button",
                onActivate: "preventMenuActivate",
                style: "border-radius: 3px 0 0 3px;"
            }, {
                content: "v",
                allowHtml: true,
                style: "border-radius: 0 3px 3px 0;"
            }, {
                kind: "onyx.Menu",
                components: [{
                    content: "Chart1"
                }, {
                    content: "Chart2"
                }, {
                    content: "Chart3"
                }]
            }]
        }]
    }, {
        name: "arranger",
        kind: "ChartsArranger"
    }],
    addChart: function (value) {
        var panels = this.$.arranger,
            component = {
                kind: value
            },
            newPanel = panels.createComponent(component);
        this.$.arranger.panelCount++;
        newPanel.render();
        panels.reflow();
    },
    removeChart: function () {
        var panel = this.$.panels.getActive();
        if (panel) {
            panel.destroy();
        }
        this.$.panels.render();
    },
    preventMenuActivate: function () {
        //return true;
    },
    itemSelected: function (inSender, inEvent) {
     ...