tiles.js

(function() {
    'use strict';

    var tiles = [];
    var activeTiles = [];
    var inactiveTiles = [];

    function waitForData() {
        if($(".widget-size-1x1").length <= 0) {
            setTimeout(waitForData, 50);
        } else {
            setTimeout(waitForData, 3000);
            init();
        }
    }

    function updateInactiveTiles() {
        inactiveTiles = tiles.filter((e) => activeTiles.indexOf(e) == -1);
        console.log(tiles.length + ", " + activeTiles.length + ", " + inactiveTiles.length + ", " + inactiveTiles);
    }

    function init() {
        tiles = $(".widget-size-1x1").closest(".widget").toArray();
        activeTiles = tiles.filter((e) => {
            return parseInt(e.style.top) < 490;
        });

        update();
    }

    function update() {
        updateInactiveTiles();
        inactiveTiles.forEach((e) => {
            //$(e).hide();
            e.style.transform = 'rotateY(180deg)';
        });
        showTiles();
    }

    function randomActiveTile() {
        return activeTiles[Math.floor(Math.random() * activeTiles.length)];
    }

    function randomInactiveTile() {
        return inactiveTiles[Math.floor(Math.random() * inactiveTiles.length)];
    }

    function swaptActiveWithInactiveTile(active, inactive) {
        if(!active || !inactive)
            return;

        // Swap tile locations
        var oldTop = inactive.style.top;
        var oldLeft = inactive.style.left;

        inactive.style.transition = 'none'; // disable animation while moving
        inactive.style.top = active.style.top;
        inactive.style.left = active.style.left;
        $(inactive).show();
        inactive.style.transition = '0.6s'; // enable animation

        // Rotate tiles
        inactive.style.transform = 'rotateY(0deg)'; // Rotate into view
        active.style.transform = 'rotateY(180deg)'; // Rotate out of view

        // After the animation, move previously active element to location of the inactive one
        setTimeout(() => {
            active.style.transition = 'none'; // disable animation while moving
            active.style.top = oldTop;
            active.style.left = oldLeft;
            active.style.transition = '0.6s'; // enable animation
            //$(active).hide();
        }, 600);
    }

    function showTiles() {
        var active = randomActiveTile();
        var inactive = randomInactiveTile();
        swaptActiveWithInactiveTile(active, inactive);
    }

    waitForData();

    addGlobalStyle('.widget { transition: 0.6s; transform-style: preserve-3d; backface-visibility: hidden; }');
    function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
    }
})();