JSFiddle - React, Tailwind, and code Playground
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:this.remoteKind, classes:(this.fit) ? "enyo-fit" : ""}).render();
this.doLoad({remote:this.remote});
} else {
this.setLoadState(-1);
this.doLoadFailed({failed:block.failed});
}
},
aniStep:function(source) {
this.getScrim().applyStyle("opacity", source.value/100)
},
aniStop:function(source) {
this.getScrim().hide();
}
});
enyo.kind({
name: "enyo.LazyPanels",
kind: "enyo.Panels",
defaultKind:...