Trello Color Card for Fluid

trello-color-card-fluid.user.js

// ==UserScript==
// @name           Trello Color Card
// @namespace      http://weahead.se
// @author         Michael Lopez <[email protected]>
// @description    Colors Trello cards depending on completed checklist items.
// @include        https://trello.com/*
// ==/UserScript==

(function () {
    if (window.fluid) {
        var color = '#24A828';
        
        var colorize = function () {
            var checklistBadges = jQuery('.list-card-details .icon-checklist');
            checklistBadges.each(function (i, e) {
                var $e = jQuery(e);
                var text = $e.next().text();
                var parts = text.split('/');
                var $card = $e.closest('.list-card');
                var filterValue = 'opacity(' + parts[0] / parts[1] + ')';
                var $background = jQuery('<div class="tcc"></div>').css({
                    '-webkit-filter': filterValue,
                    'filter': filterValue,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'width': '100%',
                    'height': '100%'
                });
                if (color) {
                    $background.css('background-color', color);
                }
                $card.append($background);
            });
        };
        
        var maxTries = 10;
        var tries = 0;
        var pollForCards = function () {
            var cards = jQuery('.list-card').length;
            if (cards > 0) {
                colorize();
            } else if (tries < maxTries) {
                setTimeout(pollForCards, 100);
                tries++;
            }
        };
        
        setTimeout(pollForCards, 100);
    }
})();