// ==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 // @updateURL https://raw.githubusercontent.com/StylishThemes/GitHub-Dark-Script/master/github-script-diff-toggle.user.js // @downloadURL https://raw.githubusercontent.com/StylishThemes/GitHub-Dark-Script/master/github-script-diff-toggle.user.js // @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 = ` `; // 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(); } })();