// ==UserScript==
// @name        Trello Collapsible Lists
// @description written by @alexkli
// @match https://trello.com/b/*
// ==/UserScript==

const boardId = window.location.pathname.replace(/^\/b\/([^\/]+).*$/, '$1');

function getListKey(list) {
    const listName = list.querySelector('.list-header-name-assist').textContent;
    return `list-collapsed-${boardId}-${listName}`;
}

function toggleList(collapseButton) {
    const list = collapseButton.parentNode.parentNode;
    const listContent = list.querySelector('.list-cards');
    const listKey = getListKey(list);

    if (listContent.toggleAttribute('hidden')) {
        // hidden
        collapseButton.innerText = '▶︎';
        list.querySelector('.card-composer-container').style.display = 'none';
        localStorage.setItem(listKey, 'true');
    } else {
        // visible
        collapseButton.innerText = '▼';
        list.querySelector('.card-composer-container').style.display = 'flex';
        localStorage.removeItem(listKey);
    }
}

function init() {
    // list: .list
    // header: .list-header
    // list content: .list-cards
    document.querySelectorAll('.list').forEach((list) => {
        const listKey = getListKey(list);
        
        const listHeader = list.querySelector('.list-header');
        const collapseButton = document.createElement('div');
        collapseButton.className = 'list-collapse-button';
        collapseButton.innerText = '▼';
        collapseButton.style.position = 'absolute';
        collapseButton.style.width = '8px';
        collapseButton.style.cursor = 'pointer';
        collapseButton.addEventListener("click", (event) => {
            toggleList(event.target);
        });
        listHeader.insertBefore(collapseButton, listHeader.firstChild);
        
        const listHeaderTarget = list.querySelector('.list-header-target');
        listHeaderTarget.style.left = '25px';

        const listTitle = list.querySelector('.list-header-name');
        listTitle.style['margin-left'] = '10px';
        
        if (localStorage.getItem(listKey)) {
            toggleList(collapseButton);
        }
    });
}

function onDocumentReady() {
    // wait until we have .list elements present in the DOM
    const observer = new MutationObserver((mutationList) => {
        if (document.querySelector('.list')) {
            observer.disconnect();
            init();
        }
    });
    observer.observe(document, {
        childList: true,
        subtree: true
    });
}

if (document.readyState !== "loading") {
    onDocumentReady();
} else {
    window.addEventListener("DOMContentLoaded", onDocumentReady);
}