JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="diamondswrap">
    <div class="item">Hello world</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello world</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello world</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
</div>

<!--<div class="diamonds">
    <div class="diamond-row-wrap">
        <div class="diamond-row-upper">
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Hello</div>
                </div>
            </div>
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Hello</div>
                </div>
            </div>
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Hello</div>
                </div>
            </div>
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Hello</div>
                </div>
            </div>
        </div>
        <div class="diamond-row-lower">
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Lower</div>
                </div>
            </div>
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Lower</div>
                </div>
            </div>
            <div class="diamond-box-wrap">
                <div class="diamond-box">
                    <div class="diamond-box-inner">Lower</div>
                </div>
            </div>
        </div>
    </div>
    <div...

CSS

.diamondswrap {
    outline: 1px solid black;
    width: 100%;
    min-width: 400px;
    min-height: 100px;
    text-align: center;
}

.diamonds {
    text-align: center;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
    outline: 1px solid red;
}

.diamond-row-wrap {
    text-align: center;
    position: relative;
    float: left;
    clear: both;
}
.diamond-row-upper, .diamond-row-lower {
    overflow: auto;
    clear: both;
    width: 100%;
}
.diamond-row-lower {
    overflow: visible;
    position: absolute;
    bottom: 0;
}
    .diamond-row-lower .diamond-box {
        margin-left: 64.75%;
        margin-top: 64.75%;
    }

.diamond-box-wrap {
    float: left;
    width: 250px; /** Size of diamonds */
    height: 250px;
}

.diamond-box {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);

    -webkit-box-sizing: border-box;    
    box-sizing: border-box;

    overflow: hidden;
    
    position: relative;
    z-index: 1;
    
    width: 70.5%;
    height: 70.5%;
    margin: 14.75%;
    
    border: 0.5px solid transparent;
}
    .diamond-box:hover {
        opacity: 0.7;
    }

.diamond-box-inner {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);

    -webkit-transform-origin: center center;    
    transform-origin: center center;
    
    -webkit-box-sizing: border-box;    
    box-sizing: border-box;
    
    width: 141.5%;
    height: 141.5%;
    margin: -20.5% 0 0 -20.5%;
    
    /** Demo props */
    background-color: #666;
    color: white;
    padding: 40%;
}

JavaScript

(function($) {
    
    var Diamonds = function(customOptions) {
        this.options = {
            wrapElement : null,
            itemSelector : ".item",
            size : 250,
            gap : 0.5,
            autoRedraw : true,
            hideIncompleteRow : false,
            itemWrap : '<div class="diamond-box-wrap"><div class="diamond-box"><div class="diamond-box-inner"></div></div></div>',
            rowWrap : '<div class="diamond-row-wrap"></div>',
            rowUpperWrap : '<div class="diamond-row-upper"></div>',
            rowLowerWrap : '<div class="diamond-row-lower"></div>',
            diamondWrap : '<div class="diamonds"></div>',
            overrideCss : '.diamond-box-wrap { width: {{size}}px; height: {{size}}px; } .diamond-box { border-width: {{gap}}px }'
        };
        this.setOptions(customOptions);
        
        this.itemElements = $(this.options.itemSelector, this.options.wrapElement);
        
        // Create override css
        this.styleElement = this._createOverrideCss();
        
        // Initial draw
        this.draw();
        
        // Auto redraw
        this.startAutoRedraw();
    };
    
    Diamonds.prototype.destroy = function() {
        this._removeOverrideCss();
        this.stopAutoRedraw();
        this._emptyElement(this.options.wrapElement);
        this.options.wrapElement.append(this.itemElements);
    };
    
    Diamonds.prototype._createOverrideCss = function() {
        var css = this.options.overrideCss;
        css = css.replace(new RegExp("{{size}}", 'g'), this.options.size);
        css = css.replace(new RegExp("{{gap}}", 'g'), this.options.gap);
        
        var style = $('<style type="text/css"></style>');
        style.html(css);
        
        $("head").append(style);
        return style;
    };
    
    Diamonds.prototype._removeOverrideCss = function() {
        this.styleElement.remove();
    };
    
    Diamonds.prototype.stopAutoRedraw = function() {
       ...