Toggle Jira Columns

jiraColumnToggle.user.js

// ==UserScript==
// @name         Jira Column Toggle
// @namespace    https://gist.github.com/rummik/f34ab0165cdd2aa34d8cdf3adb16082f
// @version      0.7
// @description  toggle single columns with a click
// @author       Patric Wilms, *Kim Zick
// @match        */secure/RapidBoard.jspa*
// @updateURL    https://gist.github.com/rummik/f34ab0165cdd2aa34d8cdf3adb16082f/raw/jiraColumnToggle.user.js
// @downloadURL  https://gist.github.com/rummik/f34ab0165cdd2aa34d8cdf3adb16082f/raw/jiraColumnToggle.user.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let $ = window.$;
    let _ = window._;
    let $document = $(document);
    let header = '.ghx-column-headers .ghx-column';
    let column = '.ghx-columns .ghx-column';
    let title = 'h2';
    let tickets = '.ghx-wrap-issue';
    let styleSheet = document.styleSheets[document.styleSheets.length - 1];

    styleSheet.insertRule(`
        ${header}, ${column}[data-collapsed=true] {
            cursor: pointer !important;
            overflow: hidden;
        }
    `);

    styleSheet.insertRule(`
        ${column}[data-collapsed=true]::before {
            content: "";
            text-transform: uppercase;
            position: sticky;
            top: 6.5em;
            margin-left: 1.25em;
            transform: rotate(90deg);
            transform-origin: 0 50%;
            opacity: 0.8;
            display: block;
            width: 0;
            line-height: 1em;
            font-size: 0.9em;
            white-space: pre;
        }
    `);

    styleSheet.insertRule(`
        ${column}[data-collapsed=true] ${tickets} {
            overflow: hidden;
            width: 0;
        }
    `);

    function $select(target, selector) {
        let $target = $(target);
        return $target.is(selector) ? $target : $target.parents(selector);
    }

    $document.on('click', header, ({ target }) => {
        let $header = $select(target, header);
        let id = $header.data('id');
        let $title = $header.find(title);
        let $column = $(`[data-column-id="${id}"]`);
        let $tickets = $column.children(tickets);

        if ($header.attr('data-collapsed') === undefined) {
            $header.add($column).attr('data-collapsed', 'false');

            styleSheet.insertRule(`
                ${column}[data-column-id="${id}"][data-collapsed=true]::before {
                    content: "${$title.text()}";
                }
            `);
        }

        if ($header.attr('data-collapsed') === 'true') {
            return $column.first().click();
        }

        $column.css({ color: $header.css('background-color') });
        $tickets.add($title).animate({ opacity: 0 });
        $column.add($header).animate({ width: $header.outerHeight() }, _.debounce(() => {
            $column.attr('data-collapsed', 'true').animate({ color: $title.css('color') }, _.debounce(() => {
                $header.attr('data-collapsed', 'true');
            }));
        }));
    });

    $document.on('click', column, ({ target }) => {
        let id = $select(target, column).data('column-id');
        let $header = $(`[data-id="${id}"]`);
        let $column = $(`[data-column-id="${id}"]`);
        let $title = $header.find(title);
        let $tickets = $column.children(tickets);

        if ($header.attr('data-collapsed') === 'false') {
            return;
        }

        $column.animate({ color: $header.css('background-color') }, _.debounce(() => {
            $column.attr('data-collapsed', 'false');

            $column.first().width('auto').width((i, width) => {
                $column.first().width($header.outerHeight());

                $title.add($tickets).animate({ opacity: 1 });
                $column.add($header).animate({ width }, _.debounce(() => {
                    $column.add($header).width('');
                    $header.attr('data-collapsed', 'false');
                }));
            });
        }));
    });
})();