Userscript: Leankit - Show Tags all the Time in the board (not only on hover) - Instructions: 1. Install »Tampermonkey« add-on 2. Click on »Raw« on this page 3. Click »Install«

Leankit-show-tags-all-the-time.user.js

// ==UserScript==
// @name         Leankit: Show Tags all the Time
// @namespace    http://fqxp.de/
// @version      0.1
// @description  Show tags of tickets in Leankit in the ticket instead of only when hovering over the tag icon
// @author       Frank Ploss <[email protected]>
// @match        https://*.leankit.com/board/*
// @match        https://*.leankit.com/card/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

let inEventListener = false;

(function() {
    'use strict';

    document.addEventListener("DOMNodeInserted", function(e) {
        if (inEventListener) {
            return;
        }

        inEventListener = true;
        updateTags();
        inEventListener = false;
    }, false);
})();

function updateTags() {
    const TAG_CLASS = "tampermonkey-tags";
    const LEANKIT_TAG_CLASS = "cardIcons-icon cardIcons-icon--tags";
    const tagEls = document.getElementsByClassName(LEANKIT_TAG_CLASS);

    Array.prototype.forEach.call(tagEls, function(tagEl){
        const tagText = tagEl.title.slice(6);
        const cardEl = tagEl.parentNode.parentNode;
        const tagNodes = cardEl.getElementsByClassName(TAG_CLASS);
        let tagNode = null;

        if (tagNodes.length === 0) {
            tagNode = document.createElement("div");
            tagNode.classList.add(TAG_CLASS);
            tagNode.classList.add("card-text");
            tagNode.style.cssText = [
                "font-size: 75%",
                "font-weight: bold",
                "display: inline",
                "padding: 0px 2px 2px 2px",
                "margin-right: 4px",
                "float: right",
                "background-color: rgba(0, 0, 170, .5)",
                "color: white",
                "border-radius: 2px",
                "position: absolute",
                "bottom: 4px",
                "right: 0px",
            ].join(";");
            cardEl.append(tagNode);
            tagEl.style.cssText = "display: none";
        } else {
            tagNode = tagNodes[0];
        }

        tagNode.innerHTML = tagText;
    });
};