JSFiddle - React, Tailwind, and code Playground

by error454

CSS

.floater{
    position: absolute;
}

JavaScript

enyo.kind({
    name: "TestKind",
    kind: enyo.Control,
    components: [
        {kind: "Signals", onload: "load"},
        {name: "image", onload: "imageLoaded", kind: "Image", classes: "floater"}
    ],
    load: function(){
        //Load a randomly sized image from placehold.it
        var width = Math.floor(500 * Math.random() + 2);
        var height = Math.floor(500 * Math.random() + 2);
        var imageSrc = "http://placehold.it/" + width + "x" + height;
        this.$.image.setSrc(imageSrc);
    },
    resizeHandler: function(){        
        this.inherited(arguments);
        
        //Get the dimensions of the client screen and the image            
        var screenW = window.innerWidth;
        var screenH = window.innerHeight;
        var imageVars = this.$.image.getBounds();
        
        //Center the image on the screen
        this.$.image.setBounds({
            top: (screenH - imageVars.height) * 0.5,
            left: (screenW - imageVars.width) * 0.5
        }, "px");
    },
    imageLoaded: function(){
        //When the image has finished loading, force the resize
        //handler to be called
        this.resized();
    }
});

new TestKind().write();