Basecamp Keyword Highlighter

Highlights predefined list of keywords in the Basecamp task list at the beginning of task description

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        Basecamp Keyword Highlighter
// @description Highlights predefined list of keywords in the Basecamp task list at the beginning of task description
// @include     https://*.basecamphq.com/projects/*/todo_lists
// @grant       none
// @version     0.5.3
// @namespace https://greasyfork.org/users/32141
// ==/UserScript==

// Here you can add your own keywords:
var keywordsColors = {
    // red
    'bf0303': ['error', 'bug'],

    // green
    '008c00': ['todo', 'feature'],

    // purple
    '5a00b3': ['postponed'],

    // pink
    'cc00ba': ['high']
};

function createKeywordStyles() {
    var color,
        style = document.createElement('style'),
        innerHtml = '.keyword {color: #fff; border-radius: 3px; padding: 0px 2px 0px 2px; }\n';

    for (color in keywordsColors) {
        innerHtml += '.keyword-' + color + ' { background-color: #' + color + '; }\n';
    }

    style.type = 'text/css';
    style.innerHTML = innerHtml;

    document.getElementsByTagName('head')[0].appendChild(style);
}

function processTodoLists(rootEl) {
    var el,
        child,
        color,
        regexps = {},
        keywords,
        tasksContent;

    function getType(obj) {
        return Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '').toLowerCase();
    }

    function findElements(rootEl, tagName, param) {
        var result = [],
            elements = rootEl.getElementsByTagName(tagName),
            paramType = getType(param);

        for (var i = 0; i < elements.length; i++) {
            if (paramType == 'string' && elements[i].id.indexOf(param) === 0) {
                result.push(elements[i]);
            } else if (paramType == 'regexp' && param.test(elements[i].id)) {
                result.push(elements[i]);
            }
        }

        return result;
    }

    function formatTask(el, color, word) {
        el.innerHTML = el.innerHTML.replace(word, '<span class="keyword keyword-' + color + '">' + word + '</span>');
    }

    tasksContent = findElements(rootEl, 'span', /^item_wrap_/);
    for (var i = 0; i < tasksContent.length; i++) {
        el = tasksContent[i];
        child = el.firstChild;

        if (child.nodeName && child.nodeName.toLowerCase() == 'span' &&
            child.classList && child.classList.contains('keyword')) {
            continue;
        }

        var text = tasksContent[i].textContent;
        for (color in keywordsColors) {
            if (!keywordsColors.hasOwnProperty(color)) {
                continue;
            }

            keywords = keywordsColors[color];
            if (!regexps[color]) {
                regexps[color] = new RegExp('^((?:' + keywords.join('|') + ')[^:^\s]*).*', 'i');
            }

            var regexp = regexps[color];
            if (regexp.test(text)) {
                formatTask(tasksContent[i], color, regexp.exec(text)[1]);
                break;
            }
        }
    }
}

createKeywordStyles();

document.observe("dom:modified", function(ev) {
    processTodoLists(ev.target);
});
processTodoLists(document);