☰

GitHub Diff File Toggle

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

  1. // ==UserScript==
  2. // @name        GitHub Diff File Toggle
  3. // @version     1.2.6
  4. // @description A userscript that adds a toggle to show or hide diff files
  5. // @license     MIT
  6. // @author      StylishThemes
  7. // @namespace   https://github.com/StylishThemes
  8. // @include     https://github.com/*
  9. // @run-at      document-end
  10. // @grant       GM_addStyle
  11. // @grant       GM_getValue
  12. // @grant       GM_setValue
  13. // @grant       GM_registerMenuCommand
  14. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=634242
  15. // @icon        https://avatars3.githubusercontent.com/u/6145677?v=3&s=200
  16. // @homepageURL https://github.com/StylishThemes/GitHub-Dark-Script
  17. // ==/UserScript==
  18. (() => {
  19.   "use strict";
  20.   // This code is also part of the GitHub-Dark Script
  21.   // (https://github.com/StylishThemes/GitHub-Dark-Script)
  22.   // Extracted out into a separate userscript in case users only want to add this
  23.   // functionality
  24.   const icon =
  25.     `<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="10" height="6.5" viewBox="0 0 10 6.5">
  26.       <path d="M0 1.5L1.5 0l3.5 3.7L8.5.0 10 1.5 5 6.5 0 1.5z"/>
  27.     </svg>`;
  28.  
  29.   // Add file diffs toggle
  30.   function addFileToggle() {
  31.     const files = $$("#files .file-actions");
  32.     const button = document.createElement("button");
  33.     let updated = false;
  34.     button.type = "button";
  35.     button.className = "ghd-file-toggle btn btn-sm tooltipped tooltipped-n";
  36.     button.setAttribute("aria-label", "Click to Expand or Collapse file");
  37.     button.setAttribute("tabindex", "-1");
  38.     button.innerHTML = icon;
  39.     files.forEach(el => {
  40.       if (!$(".ghd-file-toggle", el)) {
  41.         // hide GitHub toggle view button
  42.         el.querySelector(".js-details-target").style.display = "none";
  43.         el.appendChild(button.cloneNode(true));
  44.         updated = true;
  45.       }
  46.     });
  47.     // start with all but first entry collapsed
  48.     if (updated && files.length) {
  49.       if ((GM_getValue("accordion") || "").startsWith("t")) {
  50.         toggleFile({
  51.           target: $(".ghd-file-toggle")
  52.         }, "init");
  53.       }
  54.     }
  55.   }
  56.  
  57.   function toggleSibs(target, state) {
  58.     const isCollapsed = state,
  59.       toggles = $$(".file");
  60.     let el,
  61.       indx = toggles.length;
  62.     while (indx--) {
  63.       el = toggles[indx];
  64.       if (el !== target) {
  65.         el.classList.toggle("Details--on", isCollapsed);
  66.       }
  67.     }
  68.   }
  69.  
  70.   function toggleFile(event, init) {
  71.     const accordion = GM_getValue("accordion"),
  72.       el = event.target.closest(".file");
  73.     if (el && accordion) {
  74.       if (!init) {
  75.         el.classList.toggle("Details--on");
  76.       }
  77.       toggleSibs(el, false);
  78.     } else if (el) {
  79.       el.classList.toggle("Details--on");
  80.       // shift+click toggle all files!
  81.       if (event.shiftKey) {
  82.         toggleSibs(el, el.classList.contains("Details--on"));
  83.       }
  84.     }
  85.     document.activeElement.blur();
  86.     // move current open panel to the top
  87.     if (el.classList.contains("Details--on")) {
  88.       location.hash = el.id;
  89.     }
  90.   }
  91.  
  92.   function addBindings() {
  93.     $("body").addEventListener("click", event => {
  94.       const target = event.target;
  95.       if (target && target.classList.contains("ghd-file-toggle")) {
  96.         toggleFile(event);
  97.         return false;
  98.       }
  99.     });
  100.   }
  101.  
  102.   function $(str, el) {
  103.     return (el || document).querySelector(str);
  104.   }
  105.  
  106.   function $$(str, el) {
  107.     return [...(el || document).querySelectorAll(str)];
  108.   }
  109.  
  110.   // Don't initialize if GitHub Dark Script is active
  111.   if (!$("#ghd-menu")) {
  112.     GM_addStyle(`
  113.       .Details--on .ghd-file-toggle svg {
  114.         -webkit-transform:rotate(90deg); transform:rotate(90deg);
  115.       }
  116.       .ghd-file-toggle svg.octicon {
  117.         pointer-events: none;
  118.         vertical-align: middle;
  119.       }
  120.     `);
  121.  
  122.     document.addEventListener("ghmo:container", addFileToggle);
  123.     document.addEventListener("ghmo:diff", addFileToggle);
  124.  
  125.     // Add GM options
  126.     GM_registerMenuCommand("GitHub Diff File Toggle", () => {
  127.       let result = `${GM_getValue("accordion") || false}`;
  128.       const val = prompt("Accordion Mode? (true/false):", result);
  129.       if (val) {
  130.         result = val.startsWith("t");
  131.         GM_setValue("accordion", result);
  132.       }
  133.     });
  134.  
  135.     addBindings();
  136.     addFileToggle();
  137.   }
  138. })();