trello-collapse.user.js

// ==UserScript==
// @name         collapse trello columns
// @namespace    http://tampermonkey.net/
// @version      0.10
// @updateUrl    https://gist.github.com/omega/4b7a4e9242c0340348b5271f7fecc5be/raw/trello-collapse.user.js
// @description  try to take over the world!
// @author       You
// @match        https://trello.com/b/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    var currentBoard = "";

    var findBoardId = function() {
        var path = window.location.pathname.toString();
        var pathRe = /\/b\/(.*)\/(.*)\/?/;
        var found = path.match(pathRe);
        return found && found[1];
    };

    var handleCollapsing = function(event) {
        var n = event.target;

        while (n.parentNode !== null) {
            if (n.classList.contains('list-wrapper')) {
                var name = n.querySelector('textarea.list-header-name').value;
                var collapsed = GM_getValue(currentBoard, "").split(";");

                if (n.classList.toggle('list-collapse')) {
                    // collapsed
                    collapsed.push(name);
                } else {
                    // expanded
                    var idx = collapsed.indexOf(name);
                    if (idx != -1) {
                        collapsed.splice(idx, 1);
                    }
                }
                GM_setValue(currentBoard, collapsed.join(";"));

                break;
            }
            n = n.parentNode;
        }
    };

    var initBoard = function(boardId) {
        var lists = document.querySelectorAll('.list-wrapper');

        // need to also detect list changes better.. right now it will not always init correctly
        console.log(lists, lists.length);
        if (lists.length === 0) {
            window.setTimeout(function() { initBoard(boardId); }, 200);
        }
        var initCollapsed = GM_getValue(boardId, "").split(";");
        for (var list of lists) {

            var menu = list.querySelector('.list-header-extras');

            if (menu && ! menu.querySelector('.js-toggle-collapse')) {
                var menuItem = menu.lastChild.cloneNode(true);

                menuItem.classList.remove('js-open-list-menu');
                menuItem.classList.add('js-toggle-collapse');

                menuItem.firstChild.classList.remove('icon-overflow-menu-horizontal');
                menuItem.firstChild.classList.add('icon-add');

                menu.appendChild(menuItem);

                menuItem.addEventListener("click", handleCollapsing);

                var name = list.querySelector('textarea.list-header-name').value;
                if (initCollapsed.indexOf(name) != -1) {
                    list.classList.add("list-collapse");
                }

            }
        }
    };

    // figure out board ID



    window.setInterval(function() {
        var newBoard = findBoardId();
        if (newBoard && newBoard !== currentBoard) {
            console.log("new board?", currentBoard, newBoard);
            // should init this board then?
            currentBoard = newBoard;
            window.setTimeout(function() { initBoard(currentBoard); }, 500);
        }
    }, 100);

    GM_addStyle(
        '.list-wrapper .list {' +
        '    transition: transform 0.2s ease;' +
        '}' +
        '.list-wrapper .list-cards {' +
        '    height: auto;' +
        '    transition: height 0.4s ease;' +
        '}' +
        '.list-wrapper.list-collapse .list-cards {' +
        '    height: 0;' +
        '}' +
        '.list-collapse .open-card-composer {' +
        '    display: none;' +
        '}' +
        '.list-collapse {' +
        '    width: 70px;' +
        '}' +
        '.list-collapse .list {' +
        '    transform: rotate(-90deg) translate(-270px);' +
        '    transform-origin: top left;' +
        '    width: 270px;' +
        '}' +
        '.list-collapse .list-header {' +
        '    width: auto; min-height: 52px' +
        '}' +
        '.list-collapse .list-header textarea {' +
        '    height: auto !important;' +
        '}' +
        '.list-collapse .list-header-extras {' +
        '    transform: rotate(90deg) translate(-28px);' +
        '    transform-origin: bottom;' +
        '    bottom: 4px;' +
        '    top: auto;' +
        '}');
})();