☰

Greasy Fork is available in English.

Absolute Date for GitHub

Changes relative dates to absolute dates on GitHub

  1. // ==UserScript==
  2. // @name         Absolute Date for GitHub
  3. // @namespace    https://foooomio.net/
  4. // @version      0.6
  5. // @description  Changes relative dates to absolute dates on GitHub
  6. // @author       foooomio
  7. // @license      MIT License
  8. // @match        https://*.github.com/*
  9. // @run-at       document-start
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @grant        GM_addStyle
  13. // @grant        GM_registerMenuCommand
  14. // @grant        unsafeWindow
  15. // @require      https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js
  16. // @require      https://greatest.deepsurf.us/scripts/7212-gm-config-eight-s-version/code/GM_config%20(eight's%20version).js?version=156587
  17. // ==/UserScript==
  18.  
  19. (() => {
  20.   /* global dayjs, GM_config */
  21.   'use strict';
  22.  
  23.   const formatDate = (date) => dayjs(date).format(GM_config.get('format'));
  24.  
  25.   function overrideMethod() {
  26.     unsafeWindow.customElements.define = new Proxy(unsafeWindow.customElements.define, {
  27.       apply: function (target, thisArg, argumentsList) {
  28.         const [name, constructor] = argumentsList;
  29.         if (name === 'relative-time') {
  30.           constructor.prototype.update = function () {
  31.             this.shadowRoot.textContent = this.textContent = formatDate(this.date);
  32.           };
  33.         }
  34.         return Reflect.apply(target, thisArg, argumentsList);
  35.       },
  36.     });
  37.   }
  38.  
  39.   function updateFormat() {
  40.     const elements = document.querySelectorAll('relative-time');
  41.     elements.forEach((element) => element.connectedCallback());
  42.   }
  43.  
  44.   function addInitialStyle() {
  45.     GM_addStyle(`
  46.       [aria-labelledby="files"] [style="width:100px;"] {
  47.         width: unset !important;
  48.       }
  49.       [aria-labelledby="folders-and-files"] thead th:last-of-type {
  50.         width: 160px;
  51.       }
  52.       [aria-labelledby$="files"] relative-time {
  53.         font-variant-numeric: var(--absolute-date-aligned);
  54.       }
  55.       relative-time::before {
  56.         content: var(--absolute-date-preposition);
  57.       }
  58.       [aria-labelledby$="files"] relative-time::before {
  59.         content: unset
  60.       }
  61.     `);
  62.   }
  63.  
  64.   function setDatesAligned() {
  65.     if (GM_config.get('aligned')) {
  66.       document.documentElement.style.setProperty('--absolute-date-aligned', 'tabular-nums');
  67.     } else {
  68.       document.documentElement.style.removeProperty('--absolute-date-aligned');
  69.     }
  70.   }
  71.  
  72.   function setPreposition() {
  73.     const preposition = GM_config.get('preposition');
  74.     if (preposition) {
  75.       document.documentElement.style.setProperty('--absolute-date-preposition', `"${preposition} "`);
  76.     } else {
  77.       document.documentElement.style.removeProperty('--absolute-date-preposition');
  78.     }
  79.   }
  80.  
  81.   function setupConfig() {
  82.     GM_config.init('Absolute Date for GitHub settings', {
  83.       preposition: {
  84.         label: 'Word to add before dates (except in file lists of repositories)',
  85.         type: 'text',
  86.         default: 'at',
  87.       },
  88.       format: {
  89.         label: 'Date format (See https://day.js.org/docs/en/display/format)',
  90.         type: 'text',
  91.         default: 'YYYY/MM/DD HH:mm',
  92.       },
  93.       aligned: {
  94.         label: 'Align dates in file lists of repositories',
  95.         type: 'checkbox',
  96.         default: true,
  97.       },
  98.     });
  99.  
  100.     GM_registerMenuCommand('Settings...', GM_config.open);
  101.  
  102.     GM_config.onload = () => {
  103.       setDatesAligned();
  104.       setPreposition();
  105.       updateFormat();
  106.     };
  107.   }
  108.  
  109.   setupConfig();
  110.   overrideMethod();
  111.  
  112.   addInitialStyle();
  113.  
  114.   setDatesAligned();
  115.   setPreposition();
  116.  
  117.   document.addEventListener('turbo:render', () => {
  118.     setDatesAligned();
  119.     setPreposition();
  120.   });
  121. })();