JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="https://raw.github.com/tiqtech/InContact/master/enyo/grid.js"></script>

CSS

.extras-grid {
    position:relative
}

.extras-grid > * {
    position:absolute;
}

.extras-grid.animate > * {
    -webkit-transition:all 400ms ease-out;
}

.extras-grid > .dragging {
    opacity:0.5;
    -webkit-transition:none;
}

/* example-specific css */
.extras-grid {
    background:#444;
    height:100%;
}

.extras-grid > * {
    border:4px solid white;
    background:rgba(128,128,128,0.5);
    width:84px;
    height:84px;
    color:#e3e3e3;
    opacity:0;
}

JavaScript

enyo.kind({
    name:"ex.App",
    kind:"Control",
    style:"position:fixed;top:0;left:0;right:0;bottom:0",
    components:[
        {kind:"Button", onclick:"addToGrid", content:"Add"},
        {kind:"Button", onclick:"collapseClicked", content:"Collapse"},
        {name:"grid", kind:"extras.Grid", autoHeight:false, cellHeight:100, cellWidth:100, margin:5, components:[
            {content:"1"},
            {content:"2"},
            {content:"3"},
            {content:"4"},
            {content:"5"},
            {content:"6"},
            {content:"7"},
            {content:"8"},
            {content:"9"},
            {content:"10"}
        ]}
    ],
    rendered:function() {
        this.inherited(arguments);
        this.$.grid.addClass("animate");
    },
    addToGrid:function() {
        this.$.grid.createComponent({content:"abc", owner:this, style:"opacity:1"});
        this.$.grid.render();
        this.$.grid.positionControls();
    },
    collapseClicked:function() {
        this.$.grid.setCollapsed(!this.$.grid.getCollapsed());
    }
});

// enyo 2 patches
extras.Grid.prototype.classes = "extras-grid";
extras.Grid.prototype.getDimensions = function() {
    if(!this.dim) {
        var s = {w:this.hasNode().offsetWidth,h:this.hasNode().offsetHeight};
        this.dim = {width:parseInt(s.w)-this.margin*2,height:parseInt(s.h)-this.margin*2};
    }
        
    return this.dim;
}
extras.Grid.prototype.resizeHandler = function() {
    var n = this.hasNode();
    if(!n) return;
    
    this.dim = null;
    this.positionControls();
};

extras.Grid.prototype.positionControls = function() {
        var c = this.getControls();
        if(c.length === 0) return;
        
        var d = this.getDimensions();
        
        var colsPerRow = Math.floor(d.width/this.cellWidth);
        
        for(var i=0;i<c.length;i++) {
            this.positionControl(c[i], i, colsPerRow);
        }
        
        var h = Math.ceil(c.length/colsPerRow)*this.cellHeight +...