☰

GitLab Sort Content

A userscript that makes some lists & markdown tables sortable

目前為 2018-04-08 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        GitLab Sort Content
  3. // @version     0.1.0-beta
  4. // @description A userscript that makes some lists & markdown tables sortable
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://gitlab.com/Mottie
  8. // @include     https://gitlab.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://gitlab.com/assets/gitlab_logo-7ae504fe4f68fdebb3c2034e36621930cd36ea87924c11ff65dbcb8ed50dca58.png
  13. // ==/UserScript==
  14. (() => {
  15. 	"use strict";
  16. 	/* example pages:
  17. 	tables/repo files - https://github.com/Mottie/GitLab-userscripts
  18. 	*/
  19. 	const sorts = ["asc", "desc"],
  20. 		icons = {
  21. 			white: {
  22. 				unsorted: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6bTAgMUgxbDcgN3oiIGZpbGw9IiNkZGQiIG9wYWNpdHk9Ii4yIi8+PC9zdmc+",
  23. 				asc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjZGRkIi8+PHBhdGggZD0iTTE1IDlIMWw3IDd6IiBmaWxsPSIjZGRkIiBvcGFjaXR5PSIuMiIvPjwvc3ZnPg==",
  24. 				desc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjZGRkIiBvcGFjaXR5PSIuMiIvPjxwYXRoIGQ9Ik0xNSA5SDFsNyA3eiIgZmlsbD0iI2RkZCIvPjwvc3ZnPg=="
  25. 			},
  26. 			black: {
  27. 				unsorted: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6bTAgMUgxbDcgN3oiIGZpbGw9IiMyMjIiIG9wYWNpdHk9Ii4yIi8+PC9zdmc+",
  28. 				asc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjMjIyIi8+PHBhdGggZD0iTTE1IDlIMWw3IDd6IiBmaWxsPSIjMjIyIiBvcGFjaXR5PSIuMiIvPjwvc3ZnPg==",
  29. 				desc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE1IDhIMWw3LTh6IiBmaWxsPSIjMjIyIiBvcGFjaXR5PSIuMiIvPjxwYXRoIGQ9Ik0xNSA5SDFsNyA3eiIgZmlsbD0iIzIyMiIvPjwvc3ZnPg=="
  30. 			}
  31. 		};
  32.  
  33. 	function initSortTable(el) {
  34. 		removeSelection();
  35. 		const dir = el.classList.contains(sorts[0]) ? sorts[1] : sorts[0],
  36. 			table = el.closest("table"),
  37. 			firstRow = $("tbody tr:first-child", table),
  38. 			options = {
  39. 				order: dir,
  40. 				natural: true,
  41. 				selector: `td:nth-child(${el.cellIndex + 1})`
  42. 			};
  43. 		if (el.textContent.trim() === "Last update") {
  44. 			// sort repo age column using ISO 8601 datetime format
  45. 			options.selector += " time";
  46. 			options.attr = "datetime";
  47. 		}
  48. 		// Don't sort directory up row
  49. 		if ($("a", firstRow).textContent === "..") {
  50. 			firstRow.classList.add("no-sort");
  51. 		}
  52. 		tinysort($$("tbody tr:not(.no-sort)", table), options);
  53. 		$$("th", table).forEach(elm => {
  54. 			elm.classList.remove(...sorts);
  55. 		});
  56. 		el.classList.add(dir);
  57. 	}
  58.  
  59. 	function needDarkTheme() {
  60. 		let brightest = 0,
  61. 			// color will be "rgb(#, #, #)" or "rgba(#, #, #, #)"
  62. 			color = window.getComputedStyle(document.body).backgroundColor;
  63. 		const rgb = (color || "")
  64. 			.replace(/\s/g, "")
  65. 			.match(/^rgba?\((\d+),(\d+),(\d+)/i);
  66. 		if (rgb) {
  67. 			color = rgb.slice(1); // remove "rgb.." part from match
  68. 			color.forEach(c => {
  69. 				// http://stackoverflow.com/a/15794784/145346
  70. 				brightest = Math.max(brightest, parseInt(c, 10));
  71. 			});
  72. 			// return true if we have a dark background
  73. 			return brightest < 128;
  74. 		}
  75. 		// fallback to bright background
  76. 		return false;
  77. 	}
  78.  
  79. 	function $(str, el) {
  80. 		return (el || document).querySelector(str);
  81. 	}
  82.  
  83. 	function $$(str, el) {
  84. 		return Array.from((el || document).querySelectorAll(str));
  85. 	}
  86.  
  87. 	function removeSelection() {
  88. 		// remove text selection - http://stackoverflow.com/a/3171348/145346
  89. 		const sel = window.getSelection ?
  90. 			window.getSelection() :
  91. 			document.selection;
  92. 		if (sel) {
  93. 			if (sel.removeAllRanges) {
  94. 				sel.removeAllRanges();
  95. 			} else if (sel.empty) {
  96. 				sel.empty();
  97. 			}
  98. 		}
  99. 	}
  100.  
  101. 	function init() {
  102. 		const styles = needDarkTheme() ? icons.white : icons.black;
  103.  
  104. 		GM.addStyle(`
  105. 			/* unsorted icon */
  106. 			[data-rich-type="markup"] thead th, .tree-table th {
  107. 				cursor:pointer;
  108. 				padding-right:22px !important;
  109. 				background-image:url(${styles.unsorted}) !important;
  110. 				background-repeat:no-repeat !important;
  111. 				background-position:calc(100% - 5px) center !important;
  112. 				text-align:left;
  113. 			}
  114. 			/* asc/dec icons */
  115. 			table thead th.asc {
  116. 				background-image:url(${styles.asc}) !important;
  117. 				background-repeat:no-repeat !important;
  118. 			}
  119. 			table thead th.desc {
  120. 				background-image:url(${styles.desc}) !important;
  121. 				background-repeat:no-repeat !important;
  122. 			}
  123. 		`);
  124.  
  125. 		document.body.addEventListener("click", event => {
  126. 			const target = event.target;
  127. 			if (target && target.nodeType === 1 && target.nodeName === "TH") {
  128. 				// don't sort tables not inside of markdown,
  129. 				// except for the repo "code" tab file list
  130. 				if (target.closest(".blob-viewer") || target.closest(".tree-table")) {
  131. 					return initSortTable(target);
  132. 				}
  133. 			}
  134. 		});
  135. 	}
  136. 	init();
  137. })();