Workflowy Additions

README.md

These are my workflowy customisations, the intention is that when you are on workflowy.com you load the CSS with an addon like stylebot for chrome and the javascript for something like tampermonkey. I'll expand with some specific installation instructions later and maybe migrate this away from GISTS.

workflowy.css

.contentTagText {
    text-decoration: none;
}

.editing .projectTag {
    display: inline;
}

.isProject .editing .contentMatch {
    background-color: #EEE;
}

.isProject > .name .content {
    margin-left: -5px;
}

.isProject > .name .editing.content {
    margin-left: 0px;
}

.isProject.tm_p1 > .name > .editing.content, .isProject.tm_p2 > .name > .editing.content, .isProject.tm_p3 > .name > .editing.content {
    color: #EEE;
}

.mainTreeRoot > .children > .project {
    margin-bottom: 15px;
}

.mainTreeRoot > .children > .project > .highlight {
    border: 1px dashed #999;
}

.mainTreeRoot > .children > .isProject > .highlight {
    background-color: #EFEFEF;
    border-style: solid;
}

.moving > .highlight, .highlighted > .highlight {
    background: #fafafa;
}

.moving > .highlight, .highlighted.moveHovered > .highlight {
    background: #eee;
}

.name .contentTag {
    color: #F89406;
    /*
    background-image: -webkit-linear-gradient(bottom, rgb(100,128,84) 27%, rgb(170,199,126) 100%);
    color: white;
    */
    font-weight: bold;
}

.name .editing .contentTag {
    color: #FBEED5;
}

.notes .contentTag, .contentTag.projectTag {
    border-radius: 2px;
}

.projectTag {
    display: block;
    margin-left: 5px;
    margin-right: 25px;
}

.projectTag .contentTagClickable:hover {
    background-color: transparent;
}

.tm_p1 > .name > .content {
    color: #B94A48;
}

.tm_p1 > .name > .editing.content, .tm_p2 > .name > .editing.content, .tm_p3 > .name > .editing.content {
    color: #FFF;
}

.tm_p2 > .name > .content {
    color: #468847;
}

.tm_p3 > .name > .content {
    color: #3A87AD;
}

.tm_refile {
    display: none;
}

.tm_refile.matches {
    display: block;
}

.tm_waiting {
    display: none;
}

.tm_waiting.matches {
    display: block;
    opacity: 0.5;
}

body {
    font-family: "Dejavu sans", arial, sans-serif;
}

workflowy.js

// ==UserScript==
// @name       Workflowy Additions
// @namespace  http://www.oscarduignan.co.uk/workflowy-additions
// @version    0.3
// @description  Enhances workflowy so it fits better with my workflow
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @match      https://workflowy.com/*
// @copyright  2012+, Oscar Duignan
// ==/UserScript==


$(document).ready(function(){
    setupProjects({
        projectClass: "isProject", 
        projectTagClass: "projectTag"
    });
    
    setupCustomTags();
    
    console.log("Tampermonkey: loaded workflowy project additions");
});


function setupProjects(options) {
    $(".contentTag").each(function(){
        if(!this.previousSibling && !$(this).parents(".notes").length){
            $(this).addClass(options.projectTagClass);
            $(this).closest(".project").addClass(options.projectClass);
        }
    });

    document.addEventListener("DOMNodeInserted", function(e) {
        $(".contentTag").each(function(){
            if(!this.previousSibling && !$(this).parents(".notes").length){
                $(this).addClass(options.projectTagClass);
                $(this).closest(".project").addClass(options.projectClass);
            }
        });
    }, false);
}


function setupCustomTags() {
    projectsWithTagShouldHaveClass("#WAITING", 'tm_waiting');
    projectsWithTagShouldHaveClass("#REFILE", 'tm_refile');
    projectsWithTagShouldHaveClass("@p1", 'tm_p1');
    projectsWithTagShouldHaveClass("@p2", 'tm_p2');
    projectsWithTagShouldHaveClass("@p3", 'tm_p3');

    document.addEventListener("DOMNodeInserted", function(e) {
        projectsWithTagShouldHaveClass("#WAITING", 'tm_waiting');
        projectsWithTagShouldHaveClass("#REFILE", 'tm_refile');
        projectsWithTagShouldHaveClass("@p1", 'tm_p1');
        projectsWithTagShouldHaveClass("@p2", 'tm_p2');
        projectsWithTagShouldHaveClass("@p3", 'tm_p3');
    });
}


function projectsWithTagShouldHaveClass(tag, cssClass) {
    // Add class to projects that don't have it but have the tag in their notes
    $(".project:not(." + cssClass + "):has(>.notes>.content>.contentTag>.contentTagClickable[data-tag='" + tag + "'])").addClass(cssClass);
    // Remove the class from projects that have it but don't have the tag in their notes
    $("." + cssClass + ":not(:has(>.notes>.content>.contentTag>.contentTagClickable[data-tag='" + tag + "']))").removeClass(cssClass);
}

what does it do?