GitHub Sort Content

A userscript that makes some lists & markdown tables sortable

Versione datata 17/05/2018. Vedi la nuova versione l'ultima versione.

  1. // ==UserScript==
  2. // @name GitHub Sort Content
  3. // @version 1.2.9
  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://greatest.deepsurf.us/scripts/28721-mutations/code/mutations.js?version=597950
  15. // @icon https://assets-cdn.github.com/pinned-octocat.svg
  16. // ==/UserScript==
  17. (() => {
  18. "use strict";
  19. /* example pages:
  20. tables - https://github.com/Mottie/GitHub-userscripts
  21. Contribute repos, Your Repos & Your Teams - https://github.com/
  22. organization repos - https://github.com/jquery
  23. organization members - https://github.com/orgs/jquery/people
  24. pinned & no pinned repos - https://github.com/addyosmani
  25. repos - https://github.com/addyosmani?tab=repositories
  26. stars - https://github.com/stars
  27. watching - https://github.com/watching
  28. */
  29. const sorts = ["asc", "desc"],
  30. icons = {
  31. white: {
  32. unsorted: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6bTAgMUgxbDcgN3oiIGZpbGw9IiNkZGQiIG9wYWNpdHk9Ii4yIi8+PC9zdmc+",
  33. asc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjZGRkIi8+PHBhdGggZD0iTTE1IDlIMWw3IDd6IiBmaWxsPSIjZGRkIiBvcGFjaXR5PSIuMiIvPjwvc3ZnPg==",
  34. desc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjZGRkIiBvcGFjaXR5PSIuMiIvPjxwYXRoIGQ9Ik0xNSA5SDFsNyA3eiIgZmlsbD0iI2RkZCIvPjwvc3ZnPg=="
  35. },
  36. black: {
  37. unsorted: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6bTAgMUgxbDcgN3oiIGZpbGw9IiMyMjIiIG9wYWNpdHk9Ii4yIi8+PC9zdmc+",
  38. asc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjMjIyIi8+PHBhdGggZD0iTTE1IDlIMWw3IDd6IiBmaWxsPSIjMjIyIiBvcGFjaXR5PSIuMiIvPjwvc3ZnPg==",
  39. desc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjMjIyIiBvcGFjaXR5PSIuMiIvPjxwYXRoIGQ9Ik0xNSA5SDFsNyA3eiIgZmlsbD0iIzIyMiIvPjwvc3ZnPg=="
  40. }
  41. },
  42. // toolbars - target for sort arrows
  43. regexBars = new RegExp(
  44. "\\b(" +
  45. [
  46. "TableObject", // org repos
  47. "org-toolbar", // org people
  48. "sort-bar", // https://github.com/stars
  49. "tabnav-tabs", // https://github.com/:user/follower(s|ing)
  50. "Box-header|flex-auto", // watching
  51. "user-profile-nav" // user repos
  52. ].join("|") +
  53. ")\\b"
  54. );
  55.  
  56. function addRepoFileThead() {
  57. const $table = $("table.files");
  58. if ($table && !$(".ghsc-header", $table)) {
  59. const thead = document.createElement("thead");
  60. thead.innerHTML = `<tr class="ghsc-header">
  61. <td></td>
  62. <th>Content</th>
  63. <th>Message</th>
  64. <th class="ghsc-age">Age</th>
  65. </tr>`;
  66. $table.insertBefore(thead, $table.childNodes[0]);
  67. }
  68. }
  69.  
  70. function initSortTable(el) {
  71. removeSelection();
  72. const dir = el.classList.contains(sorts[0]) ? sorts[1] : sorts[0],
  73. table = el.closest("table"),
  74. options = {
  75. order: dir,
  76. natural: true,
  77. selector: `td:nth-child(${el.cellIndex + 1})`
  78. };
  79. if (el.classList.contains("ghsc-age")) {
  80. // sort repo age column using ISO 8601 datetime format
  81. options.selector += " [datetime]";
  82. options.attr = "datetime";
  83. }
  84. tinysort($$("tbody tr:not(.up-tree)", table), options);
  85. $$("th", table).forEach(elm => {
  86. elm.classList.remove(...sorts);
  87. });
  88. el.classList.add(dir);
  89. }
  90.  
  91. function initSortUl(arrows, list, selector) {
  92. if (list && list.children) {
  93. removeSelection();
  94. const dir = arrows.classList.contains(sorts[0]) ? sorts[1] : sorts[0],
  95. options = {
  96. order: dir,
  97. natural: true
  98. };
  99. if (selector) {
  100. options.selector = selector;
  101. }
  102. // using children because the big repo contains UL > DIV
  103. tinysort(list.children, options);
  104. arrows.classList.remove(...sorts);
  105. arrows.classList.add(dir);
  106. }
  107. }
  108.  
  109. function needDarkTheme() {
  110. // color will be "rgb(#, #, #)" or "rgba(#, #, #, #)"
  111. let color = window.getComputedStyle(document.body).backgroundColor;
  112. const rgb = (color || "")
  113. .replace(/\s/g, "")
  114. .match(/^rgba?\((\d+),(\d+),(\d+)/i);
  115. if (rgb) {
  116. // remove "rgb.." part from match & parse
  117. const colors = rgb.slice(1).map(Number);
  118. // http://stackoverflow.com/a/15794784/145346
  119. const brightest = Math.max.apply(null, colors);
  120. // return true if we have a dark background
  121. return brightest < 128;
  122. }
  123. // fallback to bright background
  124. return false;
  125. }
  126.  
  127. function $(str, el) {
  128. return (el || document).querySelector(str);
  129. }
  130.  
  131. function $$(str, el) {
  132. return [...(el || document).querySelectorAll(str)];
  133. }
  134.  
  135. function removeSelection() {
  136. // remove text selection - http://stackoverflow.com/a/3171348/145346
  137. const sel = window.getSelection ?
  138. window.getSelection() :
  139. document.selection;
  140. if (sel) {
  141. if (sel.removeAllRanges) {
  142. sel.removeAllRanges();
  143. } else if (sel.empty) {
  144. sel.empty();
  145. }
  146. }
  147. }
  148.  
  149. function init() {
  150. const styles = needDarkTheme() ? icons.white : icons.black;
  151.  
  152. GM.addStyle(`
  153. /* unsorted icon */
  154. .markdown-body table thead th, table.files thead th {
  155. cursor:pointer;
  156. padding-right:22px !important;
  157. background-image:url(${styles.unsorted}) !important;
  158. background-repeat:no-repeat !important;
  159. background-position:calc(100% - 5px) center !important;
  160. text-align:left;
  161. }
  162. tr.ghsc-header th, tr.ghsc-header td {
  163. border-bottom:#eee 1px solid;
  164. padding:2px 2px 2px 10px;
  165. }
  166. div.js-pinned-repos-reorder-container > h3,
  167. .dashboard-sidebar .boxed-group > h3,
  168. .sort-bar, h2 + .tabnav > .tabnav-tabs, .org-toolbar,
  169. .org-profile .TableObject-item--primary,
  170. .subscriptions-content .Box-header, div.user-profile-nav.js-sticky {
  171. cursor:pointer;
  172. padding-right:10px;
  173. background-image:url(${styles.unsorted}) !important;
  174. background-repeat:no-repeat !important;
  175. background-position:calc(100% - 5px) center !important;
  176. }
  177. /* https://github.com/ -> your repositories */
  178. #your_repos h3 {
  179. background-position: 175px 10px !important;
  180. }
  181. /* https://github.com/:user?tab=repositories */
  182. div.user-profile-nav.js-sticky {
  183. background-position:calc(100% - 80px) 22px !important;
  184. }
  185. /* https://github.com/:organization repos & people */
  186. .org-profile .TableObject-item--primary, .org-toolbar {
  187. background-position:calc(100% - 5px) 10px !important;
  188. }
  189. .TableObject-item--primary input {
  190. width: 97.5% !important;
  191. }
  192. /* https://github.com/stars */
  193. .sort-bar {
  194. background-position:525px 10px !important;
  195. }
  196. /* https://github.com/watching */
  197. .subscriptions-content .Box-header {
  198. background-position:160px 15px !important;
  199. }
  200. /* asc/dec icons */
  201. table thead th.asc, div.boxed-group h3.asc, div.user-profile-nav.asc,
  202. div.js-repo-filter.asc, .org-toolbar.asc,
  203. .TableObject-item--primary.asc, .sort-bar.asc,
  204. h2 + .tabnav > .tabnav-tabs.asc,
  205. .subscriptions-content .Box-header.asc {
  206. background-image:url(${styles.asc}) !important;
  207. background-repeat:no-repeat !important;
  208. }
  209. table thead th.desc, div.boxed-group h3.desc, div.user-profile-nav.desc,
  210. div.js-repo-filter.desc, .org-toolbar.desc,
  211. .TableObject-item--primary.desc, .sort-bar.desc,
  212. h2 + .tabnav > .tabnav-tabs.desc,
  213. .subscriptions-content .Box-header.desc {
  214. background-image:url(${styles.desc}) !important;
  215. background-repeat:no-repeat !important;
  216. }
  217. /* remove sort arrows */
  218. .popular-repos + div.boxed-group h3 {
  219. background-image:none !important;
  220. cursor:default;
  221. }
  222. /* move "Customize your pinned..." - https://github.com/:self */
  223. .pinned-repos-setting-link {
  224. margin-right:14px;
  225. }
  226. `);
  227.  
  228. document.body.addEventListener("click", event => {
  229. let el;
  230. const target = event.target,
  231. name = target.nodeName;
  232. if (target && target.nodeType === 1 && (
  233. // nodes th|h3 & form for stars page
  234. name === "H3" || name === "TH" || name === "FORM" ||
  235. // https://github.com/:organization filter bar
  236. // filter: .TableObject-item--primary, repo wrapper: .org-profile
  237. // https://github.com/stars (sort-bar)
  238. // https://github.com/:user/followers (tabnav-tabs)
  239. // https://github.com/:user/following (tabnav-tabs)
  240. // https://github.com/:user?tab=repositories (user-profile-nav)
  241. // https://github.com/:user?tab=stars (user-profile-nav)
  242. // https://github.com/:user?tab=followers (user-profile-nav)
  243. // https://github.com/:user?tab=followering (user-profile-nav)
  244. regexBars.test(target.className)
  245. )) {
  246. // don't sort tables not inside of markdown,
  247. // except for the repo "code" tab file list
  248. if (name === "TH" && target.closest(".markdown-body, table.files")) {
  249. return initSortTable(target);
  250. }
  251.  
  252. // following
  253. el = $("ol.follow-list", target.closest(".container"));
  254. if (el) {
  255. return initSortUl(target, el, ".follow-list-name a");
  256. }
  257.  
  258. // organization people - https://github.com/orgs/:organization/people
  259. el = $("ul.member-listing-next", target.parentNode);
  260. if (el) {
  261. return initSortUl(target, el, ".member-info a");
  262. }
  263.  
  264. // stars - https://github.com/stars
  265. el = target.closest(".sort-bar");
  266. if (el && $(".repo-list", el.parentNode)) {
  267. return initSortUl(el, $(".repo-list", el.parentNode), "h3 a");
  268. }
  269.  
  270. // org repos - https://github.com/:organization
  271. el = target.closest(".org-profile");
  272. if (el && $(".repo-list", el)) {
  273. return initSortUl(target, $(".repo-list", el), "h3 a");
  274. }
  275.  
  276. // https://github.com/watching
  277. el = target.closest(".subscriptions-content");
  278. if (el && $(".repo-list", el)) {
  279. return initSortUl($(".Box-header", el), $(".repo-list", el), "li a");
  280. }
  281.  
  282. // mini-repo listings with & without filter - https://github.com/
  283. // and pinned repo lists
  284. el = target.closest(".boxed-group");
  285. // prevent clicking on the H3 header of filtered repos
  286. if (el && name === "H3" && (
  287. el.parentNode.id === "your_teams" ||
  288. el.parentNode.id === "your_repos" ||
  289. el.classList.contains("js-repos-container") ||
  290. el.classList.contains("js-repo-filter") || // still valid?
  291. el.classList.contains("js-pinned-repos-reorder-container")
  292. )) {
  293. return initSortUl(target, $(".mini-repo-list", el));
  294. }
  295.  
  296. // user sticky navigation
  297. if (target.classList.contains("user-profile-nav")) {
  298. el = $(".UnderlineNav-item.selected", target);
  299. if (el) {
  300. if (el.textContent.indexOf("Overview") > -1) {
  301. return initSortUl(target, $(".pinned-repos-list"), ".repo");
  302. } else if (el.href.indexOf("tab=repo") > -1) {
  303. return initSortUl(target, $("#user-repositories-list ul"), "h3 a");
  304. } else if (el.href.indexOf("tab=stars") > -1) {
  305. return initSortUl(target, target.nextElementSibling, "h3 a");
  306. } else if (el.href.indexOf("tab=follow") > -1) {
  307. return initSortUl(target, target.nextElementSibling, "a .f4");
  308. }
  309. }
  310. }
  311. }
  312. });
  313. addRepoFileThead();
  314. }
  315.  
  316. document.addEventListener("ghmo:container", () => {
  317. // init after a short delay to allow rendering of file list
  318. setTimeout(() => {
  319. addRepoFileThead();
  320. }, 200);
  321. });
  322. init();
  323. })();