Raw Source Toggle Dropdown

• Minified Source

mestiez / GitHub Collapse Project Columns

// ==UserScript==
// @name         GitHub Collapse Project Columns
// @namespace    https://github.com/mestiez
// @version      1.3
// @description  makes project columns collapsible
// @author       mestiez
// @match        https://github.com/*/*/projects/*
// @grant        none
// @icon         https://github.githubassets.com/pinned-octocat.svg
// @run-at       document-end
// @license MIT
// ==/UserScript==

var button = '<button type="button" class="float-right js-details-target btn-octicon p-1 tooltipped tooltipped-w hide-sm column-menu-item" aria-label="Collapse" aria-expanded="false"><svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6 2L0 8l6 6V2z"></path></svg></button>';
var titleStyle = "font-weight:600; font-size:14px!important;transform-origin:0 100%;transform: rotateZ(90deg) translate(-20px, 0);position:absolute;line-height:40px";
(function () {
  "use strict";

  const columns = document.getElementsByClassName("project-column");
  for (let i = 0; i < columns.length; i++) {
    const column = columns[i];
    const details = column.getElementsByClassName("js-details-container")[0];
    const columnCards = column.getElementsByClassName("js-project-column-cards")[0];
    const automationFooter = column.getElementsByClassName("js-project-column-automation-footer")[0];
    const element = details.children[0];
    const newTitle = document.createElement("h4");
    newTitle.style = "display: none";
    newTitle.innerText = column.getElementsByClassName("js-project-column-name")[0].innerText;
    column.insertBefore(newTitle, column.firstChild);

    column.addEventListener("click", () => {
      column.style = "";
      columnCards.style = "";
      if (automationFooter) {
        automationFooter.style = "";
      }
      details.style = "";
      newTitle.style = "display: none";
      window.localStorage[column.dataset.id] = "expanded";
    });

    element.innerHTML += button;
    element.lastElementChild.addEventListener("click", (e) => {
      event.stopImmediatePropagation();
      columnCards.style = "filter: opacity(0%); pointer-events: none";
      if (automationFooter) {
        automationFooter.style = "display: none";
      }
      details.style = "display: none";
      newTitle.style = titleStyle;
      column.style = "max-width: 40px !important;min-width: 40px !important;white-space: nowrap !important; cursor: pointer !important;";
      window.localStorage[column.dataset.id] = "collapsed";
    });
    if (window.localStorage[column.dataset.id] === "collapsed") {
      element.lastElementChild.click();
    }
  }
})();