☰

GitHub Image Preview

A userscript that adds clickable image thumbnails

目前為 2021-11-30 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Image Preview
  3. // @version     2.0.6
  4. // @description A userscript that adds clickable image thumbnails
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @grant       GM_getValue
  12. // @grant       GM_setValue
  13. // @grant       GM_xmlhttpRequest
  14. // @connect     github.com
  15. // @connect     githubusercontent.com
  16. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=952601
  17. // @icon        https://github.githubassets.com/pinned-octocat.svg
  18. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  19. // ==/UserScript==
  20. (() => {
  21. 	"use strict";
  22.  
  23. 	GM_addStyle(`
  24. 		.ghip-wrapper .ghip-content { display:none; }
  25. 		.ghip-wrapper.ghip-show-previews .ghip-content { display:flex; width:100%; }
  26. 		.ghip-wrapper.ghip-show-previews .Box-row { border:0 !important;
  27. 			background-color:transparent !important; }
  28. 		.ghip-show-previews .Box-row:not(.ghsc-header):not(.hidden) > div[role] {
  29. 			display:none !important; }
  30. 		.ghip-wrapper.ghip-show-previews img.ghip-non-image { height:80px;
  31. 			margin-top:15px; opacity:.2; }
  32. 		.ghip-wrapper.ghip-show-previews .image { width:100%; position:relative;
  33. 			overflow:hidden; text-align:center; }
  34.  
  35. 		.ghip-wrapper.ghip-tiled .Box-row:not(.ghsc-header):not(.hidden) {
  36. 			width:24.5%; max-width:24.5%; justify-content:center; overflow:hidden;
  37. 			display:inline-flex !important; padding:8px !important; }
  38. 		.ghip-wrapper.ghip-tiled .image { height:180px;	margin:12px !important; }
  39. 		.ghip-wrapper.ghip-tiled .image img,
  40. 			.ghip-wrapper svg { max-height:130px; max-width:90%; }
  41. 		/* zoom doesn't work in Firefox, but "-moz-transform:scale(3);"
  42. 			doesn't limit the size of the image, so it overflows */
  43. 		.ghip-wrapper.ghip-tiled .image:hover img:not(.ghip-non-image) { zoom:3; }
  44.  
  45. 		.ghip-wrapper.ghip-fullw .image { height:unset; padding-bottom:0; }
  46. 		
  47. 		.ghip-wrapper .image span { display:block;	position:relative; }
  48. 		.ghip-wrapper .ghip-folder { margin-bottom:2em; }
  49. 		.image .ghip-file-type { font-size:40px; top:-2em; left:0; z-index:2;
  50. 			position:relative; text-shadow:1px 1px 1px #fff, -1px 1px 1px #fff,
  51. 			1px -1px 1px #fff, -1px -1px 1px #fff; }
  52. 		.ghip-wrapper h4 { overflow:hidden; white-space:nowrap;
  53. 			text-overflow:ellipsis; margin:0 12px 5px; }
  54.  
  55. 		.ghip-wrapper img, .ghip-wrapper svg { max-width:95%; }
  56. 		.ghip-wrapper img.error { border:5px solid red;
  57. 			border-radius:32px; }
  58. 		.btn.ghip-tiled > *, .btn.ghip-fullw > *, .ghip-wrapper iframe {
  59. 			pointer-events:none; vertical-align:baseline; }
  60. 		.ghip-content span.exploregrid-item .ghip-file-name { cursor:default; }
  61. 		/* override GitHub-Dark styles */
  62. 		.ghip-wrapper img[src*='octocat-spinner'], img[src='/images/spinner.gif'] {
  63. 			width:auto !important; height:auto !important; }
  64. 		.ghip-wrapper td .simplified-path { color:#888 !important; }
  65. 	`);
  66.  
  67. 	// supported img types
  68. 	const imgExt = /(png|jpg|jpeg|gif|tif|tiff|bmp|webp)$/i;
  69. 	const svgExt = /svg$/i;
  70. 	const spinner = "https://github.githubassets.com/images/spinners/octocat-spinner-32.gif";
  71.  
  72. 	const folderIconClasses = `
  73. 		.octicon-file-directory,
  74. 		.octicon-file-symlink-directory,
  75. 		.octicon-file-submodule`;
  76.  
  77. 	const tiled = `
  78. 		<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
  79. 			<path d="M0 0h7v7H0zM9 9h7v7H9zM9 0h7v7H9zM0 9h7v7H0z"/>
  80. 		</svg>`;
  81.  
  82. 	const fullWidth = `
  83. 		<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
  84. 			<path d="M0 0h16v7H0zM0 9h16v7H0z"/>
  85. 		</svg>`;
  86.  
  87. 	const imgTemplate = [
  88. 		// not using backticks here; we need to minimize extra whitespace everywhere
  89. 		"<a href='${url}' class='exploregrid-item image m-3 float-left js-navigation-open' rel='nofollow'>",
  90. 		"${content}",
  91. 		"</a>"
  92. 	].join("");
  93.  
  94. 	const spanTemplate = [
  95. 		"<span class='exploregrid-item image m-3 float-left'>",
  96. 		"${content}",
  97. 		"</span>"
  98. 	].join("");
  99.  
  100. 	const contentWrap = document.createElement("div");
  101. 	contentWrap.className = "ghip-content";
  102.  
  103. 	function setupWraper() {
  104. 		// set up wrapper
  105. 		const grid = $("div[role='grid']", $("#files").parentElement);
  106. 		if (grid) {
  107. 			grid.parentElement.classList.add("ghip-wrapper");
  108. 		}
  109. 	}
  110.  
  111. 	function addToggles() {
  112. 		if ($(".gh-img-preview") || !$(".file-navigation")) {
  113. 			return;
  114. 		}
  115. 		const div = document.createElement("div");
  116. 		const btn = `btn BtnGroup-item tooltipped tooltipped-n" aria-label="Show`;
  117. 		div.className = "BtnGroup ml-2 gh-img-preview";
  118. 		div.innerHTML = `
  119. 			<button type="button" class="ghip-tiled ${btn} tiled files with image preview">${tiled}</button>
  120. 			<button type="button" class="ghip-fullw ${btn} full width files with image preview">${fullWidth}</button>
  121. 		`;
  122. 		$(".file-navigation").appendChild(div);
  123.  
  124. 		$(".ghip-tiled", div).addEventListener("click", event => {
  125. 			openView("tiled", event);
  126. 		});
  127. 		$(".ghip-fullw", div).addEventListener("click", event => {
  128. 			openView("fullw", event);
  129. 		});
  130. 	}
  131.  
  132. 	function setInitState() {
  133. 		const state = GM_getValue("gh-image-preview");
  134. 		if (state) {
  135. 			openView(state);
  136. 		}
  137. 	}
  138.  
  139. 	function openView(name, event) {
  140. 		setupWraper();
  141. 		const wrap = $(".ghip-wrapper");
  142. 		if (!wrap) {
  143. 			return;
  144. 		}
  145. 		const el = $(".ghip-" + name);
  146. 		if (el) {
  147. 			if (event) {
  148. 				el.classList.toggle("selected");
  149. 				if (!el.classList.contains("selected")) {
  150. 					return showList();
  151. 				}
  152. 			}
  153. 			showPreview(name);
  154. 		}
  155. 	}
  156.  
  157. 	function showPreview(name) {
  158. 		buildPreviews();
  159. 		const wrap = $(".ghip-wrapper");
  160. 		const selected = "ghip-" + name;
  161. 		const notSelected = "ghip-" + (name === "fullw" ? "tiled" : "fullw");
  162. 		wrap.classList.add("ghip-show-previews", selected);
  163. 		$(".btn." + selected).classList.add("selected");
  164. 		wrap.classList.remove(notSelected);
  165. 		$(".btn." + notSelected).classList.remove("selected");
  166. 		GM_setValue("gh-image-preview", name);
  167. 	}
  168.  
  169. 	function showList() {
  170. 		const wrap = $(".ghip-wrapper");
  171. 		wrap.classList.remove("ghip-show-previews", "ghip-tiled", "ghip-fullw");
  172. 		$(".btn.ghip-tiled").classList.remove("selected");
  173. 		$(".btn.ghip-fullw").classList.remove("selected");
  174. 		GM_setValue("gh-image-preview", "");
  175. 	}
  176.  
  177. 	function buildPreviews() {
  178. 		const wrap = $(".ghip-wrapper");
  179. 		if (!wrap) {
  180. 			return;
  181. 		}
  182. 		$$(".Box-row", wrap).forEach(row => {
  183. 			let content = "";
  184. 			// not every submodule includes a link; reference examples from
  185. 			// see https://github.com/electron/electron/tree/v1.1.1/vendor
  186. 			const el = $("a", row) || $("div[role='rowheader'] span[title]", row);
  187. 			const url = el && el.nodeName === "A" ? el.href : "";
  188. 			// use innerHTML because some links include path - see "third_party/lss"
  189. 			const fileName = el && el.textContent.trim() || "";
  190. 			// add link color
  191. 			const title = (type = "file-name") =>
  192. 				`<h4
  193. 					class="ghip-${type}"
  194. 					title="${fileName}"
  195. 				>${fileName}</h4>`;
  196.  
  197. 			if (el && el.title.includes("parent dir")) {
  198. 				// *** up tree link ***
  199. 				content = url ?
  200. 					updateTemplate(
  201. 						url,
  202. 						"<h4 class='ghip-up-tree'>&middot;&middot;</h4>"
  203. 					) : "";
  204. 			} else if (imgExt.test(url)) {
  205. 				// *** image preview ***
  206. 				content = updateTemplate(
  207. 					url,
  208. 					`${title()}<img src='${url}?raw=true'/>`
  209. 				);
  210. 			} else if (svgExt.test(url)) {
  211. 				// *** svg preview ***
  212. 				// loaded & encoded because GitHub sets content-type headers as a string
  213. 				content = updateTemplate(url, `${title()}${svgPlaceholder(url)}`);
  214. 			} else {
  215. 				// *** non-images (file/folder icons) ***
  216. 				const svg = $("svg", row);
  217. 				if (svg) {
  218. 					// non-files svg class: "directory", "submodule" or "symlink"
  219. 					// add "ghip-folder" class for file-filters userscript
  220. 					const noExt = svg.matches(folderIconClasses) ? " ghip-folder" : "";
  221. 					// add xmlns otherwise the svg won't work inside an img
  222. 					// GitHub doesn't include this attribute on any svg octicons
  223. 					const svgHTML = svg.outerHTML.replace("<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  224. 					// include "leaflet-tile-container" to invert icon for GitHub-Dark
  225. 					content = `${title("non-image")}<span class="leaflet-tile-container${noExt}">` +
  226. 						`<img class="ghip-non-image" src="data:image/svg+xml;base64,` +
  227. 						window.btoa(svgHTML) + `"/>`;
  228. 					// get file name + extension
  229. 					const str = url.substring(url.lastIndexOf("/") + 1, url.length);
  230. 					// don't include extension for folders, or files with no extension,
  231. 					// or files starting with a "." (e.g. ".gitignore")
  232. 					content += (!noExt && str.indexOf(".") > 0) ?
  233. 						"<h4 class='ghip-file-type'>" +
  234. 						str
  235. 							.substring(str.lastIndexOf(".") + 1, str.length)
  236. 							.toUpperCase() +
  237. 						"</h4></span>" : "</span>";
  238. 					content = url ?
  239. 						updateTemplate(url, content) :
  240. 						// empty url; use non-link template
  241. 						// see "depot_tools @ 4fa73b8" at
  242. 						// https://github.com/electron/electron/tree/v1.1.1/vendor
  243. 						updateTemplate(url, content, spanTemplate);
  244. 				}
  245. 			}
  246. 			const preview = $(".ghip-content", row) || contentWrap.cloneNode();
  247. 			preview.innerHTML = content;
  248. 			row.append(preview);
  249. 		});
  250. 		lazyLoadSVGs();
  251. 	}
  252.  
  253. 	function updateTemplate(url, content, template = imgTemplate) {
  254. 		return template.replace("${url}", url).replace("${content}", content);
  255. 	}
  256.  
  257. 	function svgPlaceholder(url) {
  258. 		const str = url.substring(url.lastIndexOf("/") + 1, url.length);
  259. 		return `<img data-svg-holder="${str}" data-svg-url="${url}" alt="${str}" src="${spinner}" />`;
  260. 	}
  261.  
  262. 	function lazyLoadSVGs() {
  263. 		const imgs = $$("[data-svg-holder]");
  264. 		if (imgs.length && "IntersectionObserver" in window) {
  265. 			let imgObserver = new IntersectionObserver(entries => {
  266. 				entries.forEach(entry => {
  267. 					if (entry.isIntersecting) {
  268. 						const img = entry.target;
  269. 						setTimeout(() => {
  270. 							const bounds = img.getBoundingClientRect();
  271. 							// Don't load all svgs when the user scrolls down the page really
  272. 							// fast
  273. 							if (bounds.top <= window.innerHeight && bounds.bottom >= 0) {
  274. 								getSVG(imgObserver, img);
  275. 							}
  276. 						}, 300);
  277. 					}
  278. 				});
  279. 			});
  280. 			imgs.forEach(function(img) {
  281. 				imgObserver.observe(img);
  282. 			});
  283. 		}
  284. 	}
  285.  
  286. 	function getSVG(observer, img) {
  287. 		GM_xmlhttpRequest({
  288. 			method: "GET",
  289. 			url: img.dataset.svgUrl + "?raw=true",
  290. 			onload: response => {
  291. 				const url = response.finalUrl,
  292. 					file = url.substring(url.lastIndexOf("/") + 1, url.length),
  293. 					target = $("[data-svg-holder='" + file + "']"),
  294. 					resp = response.responseText,
  295. 					// Loading too many images at once makes GitHub returns a "You have triggered
  296. 					// an abuse detection mechanism" message
  297. 					abuse = resp.includes("abuse detection");
  298. 				if (target && !abuse) {
  299. 					const encoded = window.btoa(response.responseText);
  300. 					target.src = "data:image/svg+xml;base64," + encoded;
  301. 					target.title = "";
  302. 					target.classList.remove("error");
  303. 					observer.unobserve(img);
  304. 				} else if (abuse) {
  305. 					img.title = "GitHub is reporting that too many images have been loaded at once, please wait";
  306. 					img.classList.add("error");
  307. 				}
  308. 			}
  309. 		});
  310. 	}
  311.  
  312. 	function $(selector, el) {
  313. 		return (el || document).querySelector(selector);
  314. 	}
  315. 	function $$(selector, el) {
  316. 		return [...(el || document).querySelectorAll(selector)];
  317. 	}
  318.  
  319. 	function init() {
  320. 		if ($("#files")) {
  321. 			setupWraper();
  322. 			addToggles();
  323. 			setTimeout(setInitState, 0);
  324. 		}
  325. 	}
  326.  
  327. 	document.addEventListener("ghmo:container", init);
  328. 	init();
  329. })();