GitHub Sort Content

A userscript that makes some lists & markdown tables sortable

目前為 2017-05-16 提交的版本,檢視 最新版本

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