☰

GitHub Diff File Toggle

A userscript that adds a toggle to show or hide diff files

// ==UserScript==
// @name        GitHub Diff File Toggle
// @version     1.2.6
// @description A userscript that adds a toggle to show or hide diff files
// @license     MIT
// @author      StylishThemes
// @namespace   https://github.com/StylishThemes
// @include     https://github.com/*
// @run-at      document-end
// @grant       GM_addStyle
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_registerMenuCommand
// @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=634242
// @icon        https://avatars3.githubusercontent.com/u/6145677?v=3&s=200
// @homepageURL https://github.com/StylishThemes/GitHub-Dark-Script
// ==/UserScript==
(() => {
  "use strict";
  // This code is also part of the GitHub-Dark Script
  // (https://github.com/StylishThemes/GitHub-Dark-Script)
  // Extracted out into a separate userscript in case users only want to add this
  // functionality
  const icon =
    `<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="10" height="6.5" viewBox="0 0 10 6.5">
      <path d="M0 1.5L1.5 0l3.5 3.7L8.5.0 10 1.5 5 6.5 0 1.5z"/>
    </svg>`;

  // Add file diffs toggle
  function addFileToggle() {
    const files = $$("#files .file-actions");
    const button = document.createElement("button");
    let updated = false;
    button.type = "button";
    button.className = "ghd-file-toggle btn btn-sm tooltipped tooltipped-n";
    button.setAttribute("aria-label", "Click to Expand or Collapse file");
    button.setAttribute("tabindex", "-1");
    button.innerHTML = icon;
    files.forEach(el => {
      if (!$(".ghd-file-toggle", el)) {
        // hide GitHub toggle view button
        el.querySelector(".js-details-target").style.display = "none";
        el.appendChild(button.cloneNode(true));
        updated = true;
      }
    });
    // start with all but first entry collapsed
    if (updated && files.length) {
      if ((GM_getValue("accordion") || "").startsWith("t")) {
        toggleFile({
          target: $(".ghd-file-toggle")
        }, "init");
      }
    }
  }

  function toggleSibs(target, state) {
    const isCollapsed = state,
      toggles = $$(".file");
    let el,
      indx = toggles.length;
    while (indx--) {
      el = toggles[indx];
      if (el !== target) {
        el.classList.toggle("Details--on", isCollapsed);
      }
    }
  }

  function toggleFile(event, init) {
    const accordion = GM_getValue("accordion"),
      el = event.target.closest(".file");
    if (el && accordion) {
      if (!init) {
        el.classList.toggle("Details--on");
      }
      toggleSibs(el, false);
    } else if (el) {
      el.classList.toggle("Details--on");
      // shift+click toggle all files!
      if (event.shiftKey) {
        toggleSibs(el, el.classList.contains("Details--on"));
      }
    }
    document.activeElement.blur();
    // move current open panel to the top
    if (el.classList.contains("Details--on")) {
      location.hash = el.id;
    }
  }

  function addBindings() {
    $("body").addEventListener("click", event => {
      const target = event.target;
      if (target && target.classList.contains("ghd-file-toggle")) {
        toggleFile(event);
        return false;
      }
    });
  }

  function $(str, el) {
    return (el || document).querySelector(str);
  }

  function $$(str, el) {
    return [...(el || document).querySelectorAll(str)];
  }

  // Don't initialize if GitHub Dark Script is active
  if (!$("#ghd-menu")) {
    GM_addStyle(`
      .Details--on .ghd-file-toggle svg {
        -webkit-transform:rotate(90deg); transform:rotate(90deg);
      }
      .ghd-file-toggle svg.octicon {
        pointer-events: none;
        vertical-align: middle;
      }
    `);

    document.addEventListener("ghmo:container", addFileToggle);
    document.addEventListener("ghmo:diff", addFileToggle);

    // Add GM options
    GM_registerMenuCommand("GitHub Diff File Toggle", () => {
      let result = `${GM_getValue("accordion") || false}`;
      const val = prompt("Accordion Mode? (true/false):", result);
      if (val) {
        result = val.startsWith("t");
        GM_setValue("accordion", result);
      }
    });

    addBindings();
    addFileToggle();
  }
})();