☰

GitHub Diff File Toggle

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

Fra 14.10.2018. Se den seneste versjonen.

  1. // ==UserScript==
  2. // @name        GitHub Diff File Toggle
  3. // @version     1.2.4
  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://greatest.deepsurf.us/scripts/28721-mutations/code/mutations.js?version=634242
  15. // @icon        https://avatars3.githubusercontent.com/u/6145677?v=3&s=200
  16. // ==/UserScript==
  17. /* jshint esnext:true, unused:true */
  18. (() => {
  19.   "use strict";
  20.   /*
  21.   This code is also part of the GitHub-Dark Script
  22.   (https://github.com/StylishThemes/GitHub-Dark-Script)
  23.   Extracted out into a separate userscript in case users only want to add this
  24.   functionality
  25.   */
  26.   const icon =
  27.     `<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="10" height="6.5" viewBox="0 0 10 6.5">
  28.       <path d="M0 1.5L1.5 0l3.5 3.7L8.5.0 10 1.5 5 6.5 0 1.5z"/>
  29.     </svg>`;
  30.  
  31.   // Add file diffs toggle
  32.   function addFileToggle() {
  33.     const files = $$("#files .file-actions");
  34.     let button = document.createElement("button");
  35.     button.type = "button";
  36.     button.className = "ghd-file-toggle btn btn-sm tooltipped tooltipped-n";
  37.     button.setAttribute("aria-label", "Click to Expand or Collapse file");
  38.     button.setAttribute("tabindex", "-1");
  39.     button.innerHTML = icon;
  40.     files.forEach(el => {
  41.       if (!$(".ghd-file-toggle", el)) {
  42.         // hide GitHub toggle view button
  43.         el.querySelector(".js-details-target").style.display = "none";
  44.         el.appendChild(button.cloneNode(true));
  45.       }
  46.     });
  47.     // start with all but first entry collapsed
  48.     if (files.length) {
  49.       if (/^t/.test(GM_getValue("accordion"))) {
  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 = closest(".file", event.target);
  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 Array.from((el || document).querySelectorAll(str));
  108.   }
  109.  
  110.   function closest(selector, el) {
  111.     while (el && el.nodeType === 1) {
  112.       if (el.matches(selector)) {
  113.         return el;
  114.       }
  115.       el = el.parentNode;
  116.     }
  117.     return null;
  118.   }
  119.  
  120.   // Don't initialize if GitHub Dark Script is active
  121.   if (!$("#ghd-menu")) {
  122.     GM_addStyle(`
  123.       .Details--on .ghd-file-toggle svg {
  124.         -webkit-transform:rotate(90deg); transform:rotate(90deg);
  125.       }
  126.       .ghd-file-toggle svg.octicon {
  127.         pointer-events: none;
  128.         vertical-align: middle;
  129.       }
  130.     `);
  131.  
  132.     document.addEventListener("ghmo:container", addFileToggle);
  133.     document.addEventListener("ghmo:diff", addFileToggle);
  134.  
  135.     // Add GM options
  136.     GM_registerMenuCommand("GitHub Diff File Toggle", () => {
  137.       let result = "" + (GM_getValue("accordion") || false);
  138.       const val = prompt("Accordion Mode? (true/false):", result);
  139.       if (val) {
  140.         result = /^t/.test(val);
  141.         GM_setValue("accordion", result);
  142.       }
  143.     });
  144.  
  145.     addBindings();
  146.     addFileToggle();
  147.   }
  148.  
  149. })();