rordenerena / Trello Seguimiento

// ==UserScript==
// @name         Trello Seguimiento
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://trello.com/*/proyectos-alto-nivel
// @icon         https://www.google.com/s2/favicons?domain=trello.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    var width = 18;
    var height=30;
    var cols = parseInt(100/width);

    function haz() {
        if($(".roe").length == 0) {
            let text = "";
            let counter = 0;
            $(".roe").remove();
            $(".roeboard").removeClass("roeboard");
            $(".roelist-wrapper").removeClass("roelist-wrapper");

            $("#board").addClass("roeboard");
            $(".list-wrapper").addClass("roelist-wrapper");

            $("h2.list-header-name-assist").each( function (index, element) {
                let eltext = $(element).text();
                eltext = eltext.split("]")[0];

                let bro = $(element).parent().parent().parent();

                if(text=="") {
                    text = eltext;
                } else if(text != eltext) {
                    text = eltext;
                    let space = (cols - (counter % cols)) * width % (cols*width);
                    /*console.log(cols + " - (" + counter + " % " + cols + ") * " + width + " = " + space);*/

                    let sp = $("<div class=\"roe js-list list-wrapper\" style=\"position:relative;float:left;width:" + space + "vw;height: "+height+"vh;\">");
                    let line = $("<div class=\"roe js-list list-wrapper\" style=\"position:relative;margin-top: 10px;float:left;width:95vw;background-color: white;height: 20px;font-weight: bold; font-size: 1.5em;text-align:center;\">").text(text.split("[")[1]);
                    bro.before(sp);
                    bro.before(line);
                    counter = 0;
                }
                counter++;
            });
        }
}
var bPausa = false;

var parapisha = function() {
    bPausa = !bPausa;
    if(bPausa) {
        $(".roe").remove();
        $(".roeboard").removeClass("roeboard");
        $(".roelist-wrapper").removeClass("roelist-wrapper");
    }
}

    setTimeout(function() {
        let style = $("<style>");
        style.text(`
        :root {
            --roe-width: ${width};
            --roe-height: ${height}vh;
            --roe-cols: ${cols};
        }

        .roeboard {
            user-select: none !important;
            white-space: nowrap !important;
            margin-bottom: 8px !important;
            overflow-x: visible !important;
            overflow-y: visible !important;
            padding-bottom: 8px !important;
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
        }

        .roelist-wrapper {
            width: var(--roe-width)vw !important;
            margin-right: 4px !important;
            margin-left: 8px !important;
            height: var(--roe-height) !important;
            box-sizing: border-box !important;
            display: inline-block !important;
            vertical-align: top !important;
            white-space: nowrap !important;
            float: left !important;
            margin-top: 10px !important;
        }
        `);
        $("head").append(style);
        let btnPause = $("<button>").attr("type","button").css({
            position: "fixed",
            top: "0px",
            left: "55%",
            zIndex: 99
        }).click(parapisha).text("Play/Pause custom");
        $("body").append(btnPause);

        setInterval( ()=>{
            if(!bPausa) {
                haz();
            }
        } , 1000 );

    }, 5000);
})();