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. })();