JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="https://raw.github.com/ryanjduffy/enyo/ENYO-1825/loader.js"></script>
<script src="https://raw.github.com/ryanjduffy/enyo/ENYO-1825/source/boot/boot.js"></script>

JavaScript

enyo.kind({
    name: "enyo.RemoteControlScrim",
    kind: "onyx.Scrim",
    classes: "onyx-scrim-translucent",
    style: "text-align:center",
    showing: false,
    components: [{
        kind: "onyx.Spinner",
        style: "position:absolute;top:50%;margin-top:-30px;display:inline-block"
    }]
});

enyo.kind({
    name: "enyo.RemoteControl",
    kind: "Control",
    loadState: 0,
    scrimKind: "enyo.RemoteControlScrim",
    published: {
        animate: true
    },
    events: {
        onLoad: "",
        onLoadFailed: ""
    },
    components: [{
        name: "ani",
        kind: "Animator",
        startValue: 65,
        endValue: 1,
        onStep: "aniStep",
        onStop: "aniStop",
        onEnd: "aniStop"
    }],
    getScrim: function () {
        // defer scrim creation ...
        return this.$.scrim || this.createComponent({
            name: "scrim",
            kind: this.scrimKind || "Control",
            owner: this
        }).render();
    },
    refresh: function () {
        this.setLoadState(0);
        this.load();
    },
    setLoadState: function (state) {
        this.loadState = state;
        if (this.loadState == 1) {
            this.getScrim().show();
        } else if (this.loadState == 2) { // what about errors?
            if (this.animate) {
                this.$.ani.play();
            } else {
                this.aniStop();
            }
        }
    },
    load: function () {
        if (this.href && this.loadState == 0) {
            this.setLoadState(1);
            //enyo.job(this.id+"_load", enyo.bind(this, function() {
            enyo.load([this.href], enyo.bind(this, "loaded"));
            //}), 2000);
        }
    },
    loaded: function (block) {
        // should be null unless my pull is changed to always created the failed member
        if (!block.failed || block.failed.length === 0) {
            this.setLoadState(2);
            this.remote = this.createComponent({
                kind:...