☰

Greasy Fork 支持简体中文。

GitHub Diff File Toggle

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

目前為 2019-07-08 提交的版本，檢視 最新版本。

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