JSFiddle - React, Tailwind, and code Playground

by gorillawit

CSS

.extras-grid {
  position:relative
}
.extras-grid > * {
  position:absolute;
  -webkit-transition:all 250ms ease-out;
}

JavaScript

var _Grid = {
      name:"extras.Grid",
      kind:"Control",
      className:"extras-grid",
      published:{
          height:200,
          width:150,

          collapsed:false
      },
      create:function() {
          this.inherited(arguments);
          this.resizeHandler();
      },
      rendered:function() {
          this.inherited(arguments);
          if(!this.dim) {
              this.resizeHandler();
          }
      },
      // iterates children and repositions them
      positionControls:function() {
          var c = this.getControls();
          for(var i=0;i<c.length;i++) {
              this.positionControl(c[i], i);
          }
      },
      // calculates position for a control and applies the style
      positionControl:function(control, index) {
          var colsPerRow = Math.floor(this.dim.width/this.width)
          var top = (this.collapsed) ? 0 : Math.floor(index/colsPerRow)*this.height;
          var left = (this.collapsed) ? 0 : (index%colsPerRow)*this.width;
          control.applyStyle("top", top + "px");
          control.applyStyle("left", left + "px");
      },
      collapsedChanged:function() {
          this.positionControls();
      },
      widthChanged:function() {
          this.positionControls();
      },
      heightChanged:function() {
          this.positionControls();
      },
      // reflows controls when window.resize event fires (e.g. device rotation)
      resizeHandler:function() {
          var n = this.hasNode();
          if(!n) return;

          var s = enyo.dom.getComputedStyle(n);
          this.dim = {width:parseInt(s.width),height:parseInt(s.height)};
          this.positionControls();
      }
  }

  enyo.kind(_Grid);

  var _Example = {
      name:"com.technisode.example.App",
      kind:"extras.Grid",
      cellClass:"button",
      components:[{kind:"Button", caption:"Collapse", onclick:"toggle"},
                  {kind:"Button", caption:"Small Grid", onclick:"smallGrid"},
                 ...