GitHub Static Time

A userscript that replaces relative times with a static time formatted as you like it

当前为 2017-04-25 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name GitHub Static Time
  3. // @version 0.1.0
  4. // @description A userscript that replaces relative times with a static time formatted as you like it
  5. // @license https://creativecommons.org/licenses/by-sa/4.0/
  6. // @author Rob Garrison
  7. // @namespace https://github.com/Mottie
  8. // @include https://github.com/*
  9. // @run-at document-end
  10. // @grant GM_addStyle
  11. // @grant GM_getValue
  12. // @grant GM_setValue
  13. // @grant GM_registerMenuCommand
  14. // @require https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js
  15. // @require https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=189706
  16. // @icon https://github.com/fluidicon.png
  17. // ==/UserScript==
  18. (() => {
  19. "use strict";
  20.  
  21. let busy = false,
  22. timeFormat = GM_getValue("ghst-format", "LLL"),
  23. locale = GM_getValue("ghst-locale", "en");
  24.  
  25. // list copied from
  26. // https://github.com/moment/momentjs.com/blob/master/data/locale.js
  27. const locales = [
  28. { "abbr": "af", "name": "Afrikaans" },
  29. { "abbr": "sq", "name": "Albanian" },
  30. { "abbr": "ar", "name": "Arabic" },
  31. { "abbr": "ar-dz", "name": "Arabic (Algeria)" },
  32. { "abbr": "ar-kw", "name": "Arabic (Kuwait)" },
  33. { "abbr": "ar-ly", "name": "Arabic (Lybia)" },
  34. { "abbr": "ar-ma", "name": "Arabic (Morocco)" },
  35. { "abbr": "ar-sa", "name": "Arabic (Saudi Arabia)" },
  36. { "abbr": "ar-tn", "name": "Arabic (Tunisia)" },
  37. { "abbr": "hy-am", "name": "Armenian" },
  38. { "abbr": "az", "name": "Azerbaijani" },
  39. { "abbr": "eu", "name": "Basque" },
  40. { "abbr": "be", "name": "Belarusian" },
  41. { "abbr": "bn", "name": "Bengali" },
  42. { "abbr": "bs", "name": "Bosnian" },
  43. { "abbr": "br", "name": "Breton" },
  44. { "abbr": "bg", "name": "Bulgarian" },
  45. { "abbr": "my", "name": "Burmese" },
  46. { "abbr": "km", "name": "Cambodian" },
  47. { "abbr": "ca", "name": "Catalan" },
  48. { "abbr": "tzm", "name": "Central Atlas Tamazight" },
  49. { "abbr": "tzm-latn", "name": "Central Atlas Tamazight Latin" },
  50. { "abbr": "zh-cn", "name": "Chinese (China)" },
  51. { "abbr": "zh-hk", "name": "Chinese (Hong Kong)" },
  52. { "abbr": "zh-tw", "name": "Chinese (Taiwan)" },
  53. { "abbr": "cv", "name": "Chuvash" },
  54. { "abbr": "hr", "name": "Croatian" },
  55. { "abbr": "cs", "name": "Czech" },
  56. { "abbr": "da", "name": "Danish" },
  57. { "abbr": "nl", "name": "Dutch" },
  58. { "abbr": "nl-be", "name": "Dutch (Belgium)" },
  59. { "abbr": "en-au", "name": "English (Australia)" },
  60. { "abbr": "en-ca", "name": "English (Canada)" },
  61. { "abbr": "en-ie", "name": "English (Ireland)" },
  62. { "abbr": "en-nz", "name": "English (New Zealand)" },
  63. { "abbr": "en-gb", "name": "English (United Kingdom)" },
  64. { "abbr": "en", "name": "English (United States)" },
  65. { "abbr": "eo", "name": "Esperanto" },
  66. { "abbr": "et", "name": "Estonian" },
  67. { "abbr": "fo", "name": "Faroese" },
  68. { "abbr": "fi", "name": "Finnish" },
  69. { "abbr": "fr", "name": "French" },
  70. { "abbr": "fr-ca", "name": "French (Canada)" },
  71. { "abbr": "fr-ch", "name": "French (Switzerland)" },
  72. { "abbr": "fy", "name": "Frisian" },
  73. { "abbr": "gl", "name": "Galician" },
  74. { "abbr": "ka", "name": "Georgian" },
  75. { "abbr": "de", "name": "German" },
  76. { "abbr": "de-at", "name": "German (Austria)" },
  77. { "abbr": "de-ch", "name": "German (Switzerland)" },
  78. { "abbr": "el", "name": "Greek" },
  79. { "abbr": "he", "name": "Hebrew" },
  80. { "abbr": "hi", "name": "Hindi" },
  81. { "abbr": "hu", "name": "Hungarian" },
  82. { "abbr": "is", "name": "Icelandic" },
  83. { "abbr": "id", "name": "Indonesian" },
  84. { "abbr": "it", "name": "Italian" },
  85. { "abbr": "ja", "name": "Japanese" },
  86. { "abbr": "jv", "name": "Javanese" },
  87. { "abbr": "kn", "name": "Kannada" },
  88. { "abbr": "kk", "name": "Kazakh" },
  89. { "abbr": "tlh", "name": "Klingon" },
  90. { "abbr": "gom-latn", "name": "Konkani Latin script" },
  91. { "abbr": "ko", "name": "Korean" },
  92. { "abbr": "ky", "name": "Kyrgyz" },
  93. { "abbr": "lo", "name": "Lao" },
  94. { "abbr": "lv", "name": "Latvian" },
  95. { "abbr": "lt", "name": "Lithuanian" },
  96. { "abbr": "lb", "name": "Luxembourgish" },
  97. { "abbr": "mk", "name": "Macedonian" },
  98. { "abbr": "ms-my", "name": "Malay" },
  99. { "abbr": "ms", "name": "Malay" },
  100. { "abbr": "ml", "name": "Malayalam" },
  101. { "abbr": "dv", "name": "Maldivian" },
  102. { "abbr": "mi", "name": "Maori" },
  103. { "abbr": "mr", "name": "Marathi" },
  104. { "abbr": "me", "name": "Montenegrin" },
  105. { "abbr": "ne", "name": "Nepalese" },
  106. { "abbr": "se", "name": "Northern Sami" },
  107. { "abbr": "nb", "name": "Norwegian Bokmål" },
  108. { "abbr": "nn", "name": "Nynorsk" },
  109. { "abbr": "fa", "name": "Persian" },
  110. { "abbr": "pl", "name": "Polish" },
  111. { "abbr": "pt", "name": "Portuguese" },
  112. { "abbr": "pt-br", "name": "Portuguese (Brazil)" },
  113. { "abbr": "x-pseudo", "name": "Pseudo" },
  114. { "abbr": "pa-in", "name": "Punjabi (India)" },
  115. { "abbr": "ro", "name": "Romanian" },
  116. { "abbr": "ru", "name": "Russian" },
  117. { "abbr": "gd", "name": "Scottish Gaelic" },
  118. { "abbr": "sr", "name": "Serbian" },
  119. { "abbr": "sr-cyrl", "name": "Serbian Cyrillic" },
  120. { "abbr": "sd", "name": "Sindhi" },
  121. { "abbr": "si", "name": "Sinhalese" },
  122. { "abbr": "sk", "name": "Slovak" },
  123. { "abbr": "sl", "name": "Slovenian" },
  124. { "abbr": "es", "name": "Spanish" },
  125. { "abbr": "es-do", "name": "Spanish (Dominican Republic)" },
  126. { "abbr": "sw", "name": "Swahili" },
  127. { "abbr": "sv", "name": "Swedish" },
  128. { "abbr": "tl-ph", "name": "Tagalog (Philippines)" },
  129. { "abbr": "tzl", "name": "Talossan" },
  130. { "abbr": "ta", "name": "Tamil" },
  131. { "abbr": "te", "name": "Telugu" },
  132. { "abbr": "tet", "name": "Tetun Dili (East Timor)" },
  133. { "abbr": "th", "name": "Thai" },
  134. { "abbr": "bo", "name": "Tibetan" },
  135. { "abbr": "tr", "name": "Turkish" },
  136. { "abbr": "uk", "name": "Ukrainian" },
  137. { "abbr": "ur", "name": "Urdu" },
  138. { "abbr": "uz", "name": "Uzbek" },
  139. { "abbr": "uz-latn", "name": "Uzbek Latin" },
  140. { "abbr": "vi", "name": "Vietnamese" },
  141. { "abbr": "cy", "name": "Welsh" },
  142. { "abbr": "yo", "name": "Yoruba Nigeria" },
  143. { "abbr": "ss", "name": "siSwati" }
  144. ],
  145. block = document.createElement("span");
  146. block.className = "ghst-time time";
  147.  
  148. function staticTime(tempFormat) {
  149. if (busy) {
  150. return;
  151. }
  152. busy = true;
  153. let indx = 0,
  154. selector = tempFormat ? ".ghst-time" : "relative-time, time-ago";
  155. if ($(selector)) {
  156. let indx = 0;
  157. const els = $$(selector),
  158. len = els.length;
  159.  
  160. // loop with delay to allow user interaction
  161. const loop = () => {
  162. let el, time, node, indx2,
  163. // max number of DOM insertions per loop
  164. max = 0;
  165. while (max < 20 && indx < len) {
  166. if (indx >= len) {
  167. return;
  168. }
  169. el = els[indx];
  170. time = el.getAttribute("datetime") || "";
  171. if (time) {
  172. if (tempFormat) {
  173. el.textContent = moment(time).format(tempFormat);
  174. } else {
  175. node = block.cloneNode(true);
  176. node.setAttribute("datetime", time);
  177. node.textContent = moment(time).format(timeFormat);
  178. // replace relative-time element
  179. el.parentNode.replaceChild(node, el);
  180. }
  181. max++;
  182. }
  183. indx++;
  184. }
  185. if (indx < len) {
  186. setTimeout(() => {
  187. loop();
  188. }, 200);
  189. }
  190. };
  191. loop();
  192. }
  193. busy = false;
  194. }
  195.  
  196. function addPanel() {
  197. const div = document.createElement("div");
  198. GM_addStyle(`
  199. #ghst-settings { opacity:0; visibility:hidden; }
  200. #ghst-settings.ghst-open { position:fixed; z-index:65535; top:0; bottom:0;
  201. left:0; right:0; opacity:1; visibility:visible;
  202. background:rgba(0, 0, 0, .5); }
  203. #ghst-settings-inner { position:fixed; left:50%; top:50%; width:25rem;
  204. transform:translate(-50%,-50%); box-shadow:0 .5rem 1rem #111;
  205. color:#c0c0c0 }
  206. #ghst-settings-inner .boxed-group-inner { height: 205px; }
  207. #ghst-footer { clear:both; border-top:1px solid rgba(68, 68, 68, .3);
  208. padding-top:5px; }
  209. `);
  210. div.id = "ghst-settings";
  211. let options = "";
  212. locales.forEach(loc => {
  213. let sel = loc.abbr === locale ? " selected" : "";
  214. options += `<option value="${loc.abbr}"${sel}>${loc.name}</option>`;
  215. });
  216. div.innerHTML = `
  217. <div id="ghst-settings-inner" class="boxed-group">
  218. <h3>GitHub Static Time Settings</h3>
  219. <div class="boxed-group-inner">
  220. <dl class="form-group flattened">
  221. <dt>
  222. <label for="ghst-locale">Select a locale</label>
  223. </dt>
  224. <dd>
  225. <select id="ghst-locale" class="form-select float-right" value="${locale}">
  226. ${options}
  227. </select>
  228. <br>
  229. </dd>
  230. </dl>
  231. <dl class="form-group flattened">
  232. <dt>
  233. <label for="ghst-format">
  234. <p>Set <a href="https://momentjs.com/docs/#/displaying/format/">
  235. MomentJS
  236. </a> format (e.g. "MMMM Do YYYY, h:mm A"):
  237. </p>
  238. </label>
  239. </dt>
  240. <dd>
  241. <input id="ghst-format" type="text" class="form-control" value="${timeFormat}"/>
  242. </dd>
  243. </dl>
  244. <div id="ghst-footer">
  245. <button type="button" id="ghst-cancel" class="btn btn-sm float-right">Cancel</button>
  246. <button type="button" id="ghst-save" class="btn btn-sm float-right">Save</button>
  247. </div>
  248. </div>
  249. </div>`;
  250. $("body").appendChild(div);
  251. on("#ghst-settings", "click", closePanel);
  252. on("body", "keyup", event => {
  253. if (
  254. event.key === "Escape" &&
  255. $("#ghst-settings").classList.contains("ghst-open")
  256. ) {
  257. closePanel(event);
  258. return false;
  259. } else if (event.key === "Enter" && event.shiftKey) {
  260. closePanel();
  261. update("save");
  262. }
  263. });
  264. on("#ghst-settings-inner", "click", event => {
  265. event.stopPropagation();
  266. event.preventDefault();
  267. });
  268. on("#ghst-save", "click", () => {
  269. closePanel();
  270. update("save");
  271. });
  272. on("#ghst-locale", "change", update);
  273. on("#ghst-format", "change", update);
  274. on("#ghst-cancel", "click", closePanel);
  275. }
  276.  
  277. function closePanel(event) {
  278. $("#ghst-settings").classList.remove("ghst-open");
  279. if (event) {
  280. return update("revert");
  281. }
  282. }
  283.  
  284. function update(mode) {
  285. if (mode === "revert") {
  286. $("#ghst-locale").value = locale;
  287. $("#ghst-format").value = timeFormat;
  288. }
  289. let loc = $("#ghst-locale").value || "en",
  290. time = $("#ghst-format").value || "LLL";
  291. if (mode === "save") {
  292. timeFormat = time;
  293. locale = loc;
  294. GM_setValue("ghst-format", timeFormat);
  295. GM_setValue("ghst-locale", locale);
  296. }
  297. moment.locale(loc);
  298. staticTime(time);
  299. return false;
  300. }
  301.  
  302. function $(str, el) {
  303. return (el || document).querySelector(str);
  304. }
  305.  
  306. function $$(str, el) {
  307. return Array.from((el || document).querySelectorAll(str));
  308. }
  309.  
  310. function on(el, name, handler) {
  311. $(el).addEventListener(name, handler);
  312. }
  313.  
  314. function init() {
  315. addPanel();
  316. moment.locale(locale);
  317. staticTime();
  318. }
  319.  
  320. // Add GM options
  321. GM_registerMenuCommand("Set GitHub static time format", () => {
  322. $("#ghst-settings").classList.add("ghst-open");
  323. });
  324.  
  325. document.addEventListener("ghmo:container", staticTime);
  326. document.addEventListener("ghmo:preview", staticTime);
  327. init();
  328.  
  329. })();