☰

GitHub Sort Content

A userscript that makes some lists & markdown tables sortable

当前为 2018-10-05 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Sort Content
  3. // @version     2.0.1
  4. // @description A userscript that makes some lists & markdown tables sortable
  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_addStyle
  12. // @require     https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?updated=20180103
  13. // @require     https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js
  14. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=634242
  15. // @icon        https://assets-cdn.github.com/pinned-octocat.svg
  16. // ==/UserScript==
  17. (() => {
  18. 	"use strict";
  19. 	/** Example pages:
  20. 	 * Tables (Readme & wikis) - https://github.com/Mottie/GitHub-userscripts
  21. 	 * Repo files - https://github.com/Mottie/GitHub-userscripts (sort content, message or age)
  22. 	 * Your Repos & Your Teams - https://github.com/
  23. 	 * Pinned repos (org & user)- https://github.com/:org
  24. 	 * Organization repos - https://github.com/:org
  25. 	 * Organization people - https://github.com/orgs/:org/people
  26. 	 * Organization outside collaborators (own orgs) - https://github.com/orgs/:org/outside-collaborators
  27. 	 * Organization teams - https://github.com/orgs/:org/teams
  28. 	 * Repo stargazers - https://github.com/:user/:repo/stargazers
  29. 	 * Repo watchers - https://github.com/:user/:repo/watchers
  30. 	 * User repos - https://github.com/:user?tab=repositories
  31. 	 * User stars - https://github.com/:user?tab=stars
  32. 	 * User Followers - https://github.com/:user?tab=followers & https://github.com/:user/followers(/you_know)
  33. 	 * User Following - https://github.com/:user?tab=following & https://github.com/:user/following(/you_know)
  34. 	 * watching - https://github.com/watching
  35. 	*/
  36. 	/**
  37. 	 * sortables[entry].setup - exec on userscript init (optional)
  38. 	 * sortables[entry].check - exec on doc.body click; return truthy/falsy or
  39. 	 *  header element (passed to the sort)
  40. 	 * sortables[entry].sort - exec if check returns true or a header element;
  41. 	 *  el param is the element returned by check or original click target
  42. 	 */
  43. 	const sortables = {
  44. 		// markdown tables
  45. 		"tables": {
  46. 			// init after a short delay to allow rendering of file list
  47. 			setup: () => setTimeout(() => addRepoFileThead(), 200),
  48. 			check: el => el.nodeName === "TH" &&
  49. 				el.matches(".markdown-body table thead th, table.files thead th"),
  50. 			sort: el => initSortTable(el)
  51. 		},
  52. 		// https://github.com (repo list & teams list)
  53. 		"feed": {
  54. 			check: el => el.classList.contains("Box-title") &&
  55. 				el.closest(".Box.js-repos-container"),
  56. 			sort: el => initSortUl(el, $$(".Box-body li", el.closest(".Box")))
  57. 		},
  58. 		// https://github.com/orgs/:org/dashboard (repo list)
  59. 		"org-feed": {
  60. 			check: el => el.classList.contains("Box-title") &&
  61. 				el.closest("#org_your_repos.js-repos-container"),
  62. 			sort: el => initSortUl(el, $$(".boxed-group-inner li", el))
  63. 		},
  64. 		// https://github.com/(:user|:org) (pinned repos)
  65. 		"pinned": {
  66. 			check: el => $(".js-pinned-repos-reorder-container") &&
  67. 				el.matches(".org-profile.js-pinned-repos-reorder-container h2, .user-profile-nav"),
  68. 			sort: el => initSortUl(el, $(".pinned-repos-list").children)
  69. 		},
  70. 		// https://github.com/:org
  71. 		"org-repos": {
  72. 			check: el => {
  73. 				// Org repos have weirdly nested forms if there are pinned repos
  74. 				let wrap = false;
  75. 				if ($(".org-repos.repo-list") && el.matches(".TableObject, .TableObject-item")) {
  76. 					wrap = el.closest("form[data-pjax='#org-repositories']");
  77. 					if (wrap) {
  78. 						wrap = wrap.parentNode;
  79. 					} else {
  80. 						wrap = el;
  81. 					}
  82. 					return wrap && wrap.classList.contains("TableObject") ? wrap : false;
  83. 				}
  84. 				return wrap;
  85. 			},
  86. 			sort: el => {
  87. 				const list = $(".org-repos.repo-list");
  88. 				initSortUl(el, list.children);
  89. 				movePaginate(list);
  90. 			}
  91. 		},
  92. 		// https://github.com/orgs/:org/people
  93. 		"org-people": {
  94. 			setup: () => checkOwnOrg(),
  95. 			check: (el, loc) => loc.href.indexOf("/people") > -1 &&
  96. 				$("#org-members-table") && el.matches(".org-toolbar.ghsc-org-people"),
  97. 			sort: el => initSortUl(el, $$("#org-members-table li"), ".member-info a")
  98. 		},
  99. 		// https://github.com/orgs/:org/outside-collaborators (own org)
  100. 		"org-collab-own": {
  101. 			check: (el, loc) => loc.href.indexOf("/outside-collaborators") > -1 &&
  102. 				$("#org-outside-collaborators") && el.matches(".org-toolbar.ghsc-org-outside_collaborators"),
  103. 			sort: el => initSortUl(el, $$("#org-outside-collaborators li"), ".member-info a")
  104. 		},
  105. 		// https://github.com/orgs/:org/teams
  106. 		"org-teams": {
  107. 			check: el => $("#org-teams") && el.matches(".ghsc-org-teams.subnav.org-toolbar"),
  108. 			sort: el => initSortUl(el, $$("#org-teams li"), ".team-name")
  109. 		},
  110. 		// https://github.com/:user?tab=repositories
  111. 		"user-repos": {
  112. 			check: (el, loc) => loc.search.indexOf("tab=repositories") > -1 &&
  113. 				el.classList.contains("user-profile-nav"),
  114. 			sort: el => initSortUl(el, $$("#user-repositories-list li"))
  115. 		},
  116. 		// https://github.com/:user?tab=stars
  117. 		"user-stars": {
  118. 			check: (el, loc) => loc.search.indexOf("tab=stars") > -1 &&
  119. 				el.classList.contains("user-profile-nav"),
  120. 			sort: el => {
  121. 				const list = $(".TableObject").parentNode;
  122. 				initSortUl(el, $$(".col-12", list), "h3 a");
  123. 				movePaginate(list);
  124. 			}
  125. 		},
  126. 		// https://github.com/:user?tab=follow(ers|ing)
  127. 		"user-tab-follow": {
  128. 			check: (el, loc) => loc.search.indexOf("tab=follow") > -1 &&
  129. 				el.classList.contains("user-profile-nav"),
  130. 			sort: el => {
  131. 				const list = $(".table-fixed").parentNode;
  132. 				initSortUl(el, $$(".col-12", list), ".col-9 a.no-underline");
  133. 				movePaginate(list);
  134. 			}
  135. 		},
  136. 		// https://github.com/:user/follow(ers|ing)
  137. 		// https://github.com/:user/follow(ers|ing)/you_know
  138. 		"user-follow": {
  139. 			setup: () => {
  140. 				if (window.location.href.indexOf("/follow") > -1) {
  141. 					const repo = $(".userrepos, .follow-list");
  142. 					const wrap = repo && repo.closest(".container");
  143. 					if (wrap) {
  144. 						$("h2", wrap).classList.add("ghsc-header");
  145. 						repo.classList.add("ghsc-active");
  146. 					}
  147. 				}
  148. 			},
  149. 			check: el => $(".userrepos.ghsc-active, .follow-list.ghsc-active") && el.matches("h2.ghsc-header"),
  150. 			sort: el => initSortUl(el, $$(".userrepos li, .follow-list li"), ".follow-list-name")
  151. 		},
  152. 		// https://github.com/watching
  153. 		"user-watch": {
  154. 			check: (el, loc) => loc.href.indexOf("/watching") > -1 &&
  155. 				el.matches(".subscriptions-content .Box-header h3, .subscriptions-content .Box-header .text-right"),
  156. 			sort: el => initSortUl(el.closest(".Box-header"), $$(".standalone.repo-list li"))
  157. 		},
  158. 		// https://github.com/:user/repo/(stargazers|watchers)
  159. 		"repo-stars-or-watchers": {
  160. 			check: (el, loc) => (loc.href.indexOf("/stargazers") > -1 ||
  161. 				loc.href.indexOf("/watchers") > -1) &&
  162. 				$(".follow-list") && el.matches("#repos > h2"),
  163. 			sort: el => initSortUl(el, $$(".follow-list-item"), ".follow-list-name")
  164. 		}
  165. 	};
  166.  
  167. 	const sorts = ["asc", "desc"];
  168.  
  169. 	const icons = {
  170. 		unsorted: color => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="${color}">
  171. 			<path d="M15 8H1l7-8zm0 1H1l7 7z" opacity=".2"/>
  172. 		</svg>`,
  173. 		asc: color => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="${color}">
  174. 			<path d="M15 8H1l7-8z"/>
  175. 			<path d="M15 9H1l7 7z" opacity=".2"/>
  176. 		</svg>`,
  177. 		desc: color => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="${color}">
  178. 			<path d="M15 8H1l7-8z" opacity=".2"/>
  179. 			<path d="M15 9H1l7 7z"/>
  180. 		</svg>`
  181. 	};
  182.  
  183. 	function getIcon(type, color) {
  184. 		return "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(icons[type](color));
  185. 	}
  186.  
  187. 	function needDarkTheme() {
  188. 		// color will be "rgb(#, #, #)" or "rgba(#, #, #, #)"
  189. 		let color = window.getComputedStyle(document.body).backgroundColor;
  190. 		const rgb = (color || "")
  191. 			.replace(/\s/g, "")
  192. 			.match(/^rgba?\((\d+),(\d+),(\d+)/i);
  193. 		if (rgb) {
  194. 			// remove "rgb.." part from match & parse
  195. 			const colors = rgb.slice(1).map(Number);
  196. 			// http://stackoverflow.com/a/15794784/145346
  197. 			const brightest = Math.max.apply(null, colors);
  198. 			// return true if we have a dark background
  199. 			return brightest < 128;
  200. 		}
  201. 		// fallback to bright background
  202. 		return false;
  203. 	}
  204.  
  205. 	function addRepoFileThead() {
  206. 		const $table = $("table.files");
  207. 		if ($table && !$(".ghsc-header", $table)) {
  208. 			const thead = document.createElement("thead");
  209. 			thead.innerHTML = `<tr class="ghsc-header">
  210. 				<td></td>
  211. 				<th>Content</th>
  212. 				<th>Message</th>
  213. 				<th class="ghsc-age">Age</th>
  214. 			</tr>`;
  215. 			$table.insertBefore(thead, $table.childNodes[0]);
  216. 		}
  217. 	}
  218.  
  219. 	function initSortTable(el) {
  220. 		removeSelection();
  221. 		const dir = el.classList.contains(sorts[0]) ? sorts[1] : sorts[0],
  222. 			table = el.closest("table"),
  223. 			options = {
  224. 				order: dir,
  225. 				natural: true,
  226. 				selector: `td:nth-child(${el.cellIndex + 1})`
  227. 			};
  228. 		if (el.classList.contains("ghsc-age")) {
  229. 			// sort repo age column using ISO 8601 datetime format
  230. 			options.selector += " [datetime]";
  231. 			options.attr = "datetime";
  232. 		}
  233. 		tinysort($$("tbody tr:not(.up-tree)", table), options);
  234. 		$$("th", table).forEach(elm => {
  235. 			elm.classList.remove(...sorts);
  236. 		});
  237. 		el.classList.add(dir);
  238. 	}
  239.  
  240. 	function initSortUl(arrows, list, selector) {
  241. 		if (list) {
  242. 			removeSelection();
  243. 			const dir = arrows.classList.contains(sorts[0]) ? sorts[1] : sorts[0],
  244. 				options = {
  245. 					order: dir,
  246. 					natural: true
  247. 				};
  248. 			if (selector) {
  249. 				options.selector = selector;
  250. 			}
  251. 			tinysort(list, options);
  252. 			arrows.classList.remove(...sorts);
  253. 			arrows.classList.add(dir);
  254. 		}
  255. 	}
  256.  
  257. 	function getFixedHeader() {
  258. 		// Is https://github.com/StylishThemes/GitHub-FixedHeader active?
  259. 		const header = window.getComputedStyle($(".Header"));
  260. 		const height = header.position === "fixed" && parseInt(header.height, 10);
  261. 		// Adjust sort arrow position
  262. 		return height ?
  263. 			`.user-profile-nav.js-sticky.is-stuck {
  264. 				background-position:calc(100% - 5px) ${height + 20}px !important;
  265. 			}` : "";
  266. 	}
  267.  
  268. 	// The paginate block is a sibling along with the items in the list...
  269. 	// it needs to be moved to the end
  270. 	function movePaginate(list) {
  271. 		list.appendChild($(".paginate-container", list));
  272. 	}
  273.  
  274. 	// Own organization repo has admin stuff, so the layout needs to be
  275. 	// adjusted slightly
  276. 	function checkOwnOrg() {
  277. 		// div[data-bulk-actions-url$="people/toolbar_actions"] .subnav.org-toolbar
  278. 		const el = $(".subnav.org-toolbar");
  279. 		const wrapper = el && el.closest("div[data-bulk-actions-url]");
  280. 		if (wrapper) {
  281. 			// "/orgs/:org/people/toolbar_actions"
  282. 			const type = wrapper.getAttribute("data-bulk-actions-url").split("/")[3]
  283. 			el.classList.add("ghsc-org", `ghsc-org-${type}`);
  284. 		}
  285. 		// Own org people
  286. 		if (
  287. 			sortables["org-people"].check(el, window.location) &&
  288. 			$(".member-list-item.adminable")
  289. 		) {
  290. 			// Own org shows an admin table
  291. 			el.classList.add("ghsc-own-org");
  292. 		}
  293. 	}
  294.  
  295. 	function $(str, el) {
  296. 		return (el || document).querySelector(str);
  297. 	}
  298.  
  299. 	function $$(str, el) {
  300. 		return [...(el || document).querySelectorAll(str)];
  301. 	}
  302.  
  303. 	function removeSelection() {
  304. 		// remove text selection - http://stackoverflow.com/a/3171348/145346
  305. 		const sel = window.getSelection ?
  306. 			window.getSelection() :
  307. 			document.selection;
  308. 		if (sel) {
  309. 			if (sel.removeAllRanges) {
  310. 				sel.removeAllRanges();
  311. 			} else if (sel.empty) {
  312. 				sel.empty();
  313. 			}
  314. 		}
  315. 	}
  316.  
  317. 	function update() {
  318. 		Object.keys(sortables).forEach(item => {
  319. 			if (sortables[item].setup) {
  320. 				sortables[item].setup();
  321. 			}
  322. 		});
  323. 	}
  324.  
  325. 	function init() {
  326. 		const color = needDarkTheme() ? "#ddd" : "#222";
  327. 		const userSortPosition = getFixedHeader();
  328.  
  329. 		GM.addStyle(`
  330. 			tr.ghsc-header th, tr.ghsc-header td {
  331. 				border-bottom: #eee 1px solid;
  332. 				padding: 2px 2px 2px 10px;
  333. 			}
  334. 			/* unsorted icon */
  335. 			.markdown-body table thead th, table.files thead th {
  336. 				cursor: pointer;
  337. 				padding-right: 22px !important;
  338. 				background-image: url(${getIcon("unsorted", color)}) !important;
  339. 				background-repeat: no-repeat !important;
  340. 				background-position: calc(100% - 5px) center !important;
  341. 				text-align: left;
  342. 			}
  343. 			.js-repos-container h3.Box-title,
  344. 			#org_your_repos h3.Box-title,
  345. 			.org-profile .TableObject:first-child,
  346. 			.ghsc-org.subnav.org-toolbar,
  347. 			.user-profile-nav.js-sticky,
  348. 			.user-profile-nav.js-sticky.is-stuck,
  349. 			.org-profile.js-pinned-repos-reorder-container h2,
  350. 			.subscriptions-content .Box-header .text-right,
  351. 			#repos > h2,
  352. 			h2.ghsc-header {
  353. 				cursor:pointer;
  354. 				background-image: url(${getIcon("unsorted", color)}) !important;
  355. 				background-repeat: no-repeat !important;
  356. 				background-position: calc(100% - 5px) center !important;
  357. 			}
  358. 			/* https://github.com/ -> your repositories */
  359. 			.dashboard-sidebar .js-repos-container h3 {
  360. 				background-position: 115px 5px !important;
  361. 			}
  362. 			/* https://github.com/ -> your teams */
  363. 			.dashboard-sidebar #your_teams h3 {
  364. 				background-position: 240px 10px !important;
  365. 			}
  366. 			/* pinned repos */
  367. 			.org-profile.js-pinned-repos-reorder-container h2 {
  368. 				background-position: 150px 5px !important;
  369. 			}
  370. 			/* https://github.com/:user?tab=repositories */
  371. 			.user-profile-nav.js-sticky {
  372. 				background-position: calc(100% - 5px) 22px !important;
  373. 			}
  374. 			${userSortPosition}
  375. 			/* https://github.com/:org repos */
  376. 			.org-profile > div > .TableObject {
  377. 				width: 100%; /* Fix width of org with no pinned repos */
  378. 				padding-right: 30px;
  379. 				background-position: right 10px !important;
  380. 			}
  381. 			.org-profile form + .TableObject-item .ml-6,
  382. 			.org-profile .TableObject-item .mr-6 {
  383. 				margin-left: 2px !important;
  384. 				margin-right: 2px !important;
  385. 			}
  386. 			.org-profile .TableObject {
  387. 				background-position: calc(100% - 12px) 10px !important;
  388. 			}
  389. 			/* Own org people; collaborators page doesn't need adjusting */
  390. 			.ghsc-org-people.ghsc-own-org.subnav.org-toolbar,
  391. 			.ghsc-org-teams.subnav.org-toolbar,
  392. 			#org_your_repos h3.Box-title {
  393. 				background-position: calc(100% - 135px) center !important;
  394. 			}
  395. 			/* https://github.com/watching */
  396. 			.subscriptions-content .Box-header .text-right {
  397. 				background-position: 5px 7px !important;
  398. 			}
  399. 			/* Hide "Sorted by most recently watched" text when sorted */
  400. 			.subscriptions-content .Box-header.asc .text-right > .text-small,
  401. 			.subscriptions-content .Box-header.desc .text-right > .text-small {
  402. 				display: none;
  403. 			}
  404. 			/* https://github.com/watching */
  405. 			.subscriptions-content .Box-header {
  406. 				background-position: 160px 15px !important;
  407. 			}
  408. 			/* asc/dec icons */
  409. 			table thead th.asc,
  410. 			.js-repos-container.asc .Box-title,
  411. 			#org_your_repos.asc .Box-title,
  412. 			.org-profile .TableObject.asc,
  413. 			.js-bulk-actions-container .subnav.org-toolbar.asc,
  414. 			.user-profile-nav.asc,
  415. 			.user-profile-nav.is-stuck.asc,
  416. 			.org-profile.js-pinned-repos-reorder-container h2.asc,
  417. 			.subscriptions-content .Box-header.asc .text-right,
  418. 			#repos > h2.asc,
  419. 			h2.ghsc-header.asc {
  420. 				background-image: url(${getIcon("asc", color)}) !important;
  421. 				background-repeat: no-repeat !important;
  422. 			}
  423. 			table thead th.desc,
  424. 			.js-repos-container.desc .Box-title,
  425. 			#org_your_repos.desc .Box-title,
  426. 			.org-profile .TableObject.desc,
  427. 			.js-bulk-actions-container .subnav.org-toolbar.desc,
  428. 			.user-profile-nav.desc,
  429. 			.user-profile-nav.is-stuck.desc,
  430. 			.org-profile.js-pinned-repos-reorder-container h2.desc,
  431. 			.subscriptions-content .Box-header.desc .text-right,
  432. 			#repos > h2.desc,
  433. 			h2.ghsc-header.desc {
  434. 				background-image: url(${getIcon("desc", color)}) !important;
  435. 				background-repeat: no-repeat !important;
  436. 			}
  437. 		`);
  438.  
  439. 		document.body.addEventListener("click", event => {
  440. 			const target = event.target;
  441. 			const loc = window.location;
  442. 			if (target && target.nodeType === 1) {
  443. 				Object.keys(sortables).some(item => {
  444. 					const el = sortables[item].check(target, loc);
  445. 					if (el) {
  446. 						sortables[item].sort(el instanceof HTMLElement ? el : target);
  447. 						event.preventDefault();
  448. 						return true;
  449. 					}
  450. 					return false;
  451. 				});
  452. 			}
  453. 		});
  454. 		update();
  455. 	}
  456.  
  457. 	document.addEventListener("ghmo:container", () => update());
  458. 	init();
  459. })();