Github 时间格式转换

将 GitHub 页面上的相对时间转换为绝对日期和时间
换行
// ==UserScript==
// @name               Github Time Format Converter
// @name:zh-CN         Github 时间格式转换
// @name:zh-TW         Github 時間格式轉換
// @description        Convert relative times on GitHub to absolute date and time
// @description:zh-CN  将 GitHub 页面上的相对时间转换为绝对日期和时间
// @description:zh-TW  將 GitHub 頁面上的相對時間轉換成絕對日期與時間
// @version            1.2.0
// @icon               https://raw.githubusercontent.com/MiPoNianYou/UserScripts/main/Icons/Github-Time-Format-Converter-Icon.svg
// @author             念柚
// @namespace          https://github.com/MiPoNianYou/UserScripts
// @supportURL         https://github.com/MiPoNianYou/UserScripts/issues
// @license            GPL-3.0
// @match              https://github.com/*
// @exclude            https://github.com/topics/*
// @grant              GM_addStyle
// @run-at             document-idle
// ==/UserScript==

(function () {
  "use strict";

  const Config = {
    SCRIPT_SETTINGS: {
      TOOLTIP_VERTICAL_OFFSET: 5,
      VIEWPORT_EDGE_MARGIN: 5,
      TRANSITION_DURATION_MS: 100,
      UI_FONT_STACK: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
      UI_FONT_STACK_MONO: "ui-monospace, SFMono-Regular, Menlo, monospace",
    },
    ELEMENT_IDS: {
      TOOLTIP_CONTAINER: "TimeConverterTooltipContainer",
    },
    CSS_CLASSES: {
      PROCESSED_TIME_ELEMENT: "time-converter-processed-element",
      TOOLTIP_IS_VISIBLE: "time-converter-tooltip--is-visible",
    },
    UI_TEXTS: {
      "zh-CN": {
        INVALID_DATE_STRING: "无效日期",
      },
      "zh-TW": {
        INVALID_DATE_STRING: "無效日期",
      },
      "en-US": {
        INVALID_DATE_STRING: "Invalid Date",
      },
    },
    DOM_SELECTORS: {
      RELATIVE_TIME: `relative-time:not(.${"time-converter-processed-element"})`,
      PROCESSED_TIME_SPAN: `span.${"time-converter-processed-element"}[data-tooltip-time]`,
    },
  };
  Config.DOM_SELECTORS.RELATIVE_TIME = `relative-time:not(.${Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT})`;
  Config.DOM_SELECTORS.PROCESSED_TIME_SPAN = `span.${Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT}[data-tooltip-time]`;

  const State = {
    currentUserLocale: "en-US",
    localizedText: Config.UI_TEXTS["en-US"],
    shortDateFormatter: null,
    tooltipTimeFormatter: null,

    initialize() {
      this.currentUserLocale = this.detectBrowserLanguage();
      this.localizedText =
        Config.UI_TEXTS[this.currentUserLocale] ||
        Config.UI_TEXTS["en-US"] ||
        {};
      this.initializeDateTimeFormatters(this.currentUserLocale);
    },

    detectBrowserLanguage() {
      const languages = navigator.languages || [navigator.language];
      for (const lang of languages) {
        const langLower = lang.toLowerCase();
        if (langLower === "zh-cn") return "zh-CN";
        if (
          langLower === "zh-tw" ||
          langLower === "zh-hk" ||
          langLower === "zh-mo" ||
          langLower === "zh-hant"
        )
          return "zh-TW";
        if (langLower === "en-us") return "en-US";
        if (langLower.startsWith("zh-")) return "zh-CN";
        if (langLower.startsWith("en-")) return "en-US";
      }
      for (const lang of languages) {
        const langLower = lang.toLowerCase();
        if (langLower.startsWith("zh")) return "zh-CN";
        if (langLower.startsWith("en")) return "en-US";
      }
      return "en-US";
    },

    initializeDateTimeFormatters(locale) {
      try {
        this.shortDateFormatter = new Intl.DateTimeFormat(locale, {
          year: "2-digit",
          month: "2-digit",
          day: "2-digit",
        });

        this.tooltipTimeFormatter = new Intl.DateTimeFormat(locale, {
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
        });
      } catch (e) {
        this.shortDateFormatter = null;
        this.tooltipTimeFormatter = null;
      }
    },

    getLocalizedText(key) {
      return (
        this.localizedText[key] ||
        (Config.UI_TEXTS["en-US"]
          ? Config.UI_TEXTS["en-US"][key]
          : undefined) ||
        key.replace(/_/g, " ")
      );
    },
  };

  const UserInterface = {
    tooltipContainerElement: null,

    injectStyles() {
      const appleEaseOutStandard = "cubic-bezier(0, 0, 0.58, 1)";
      const transitionDuration = Config.SCRIPT_SETTINGS.TRANSITION_DURATION_MS;

      const cssStyles = `
        :root {
          --ctp-frappe-rosewater: rgb(242, 213, 207);
          --ctp-frappe-flamingo: rgb(238, 190, 190);
          --ctp-frappe-pink: rgb(244, 184, 228);
          --ctp-frappe-mauve: rgb(202, 158, 230);
          --ctp-frappe-red: rgb(231, 130, 132);
          --ctp-frappe-maroon: rgb(234, 153, 156);
          --ctp-frappe-peach: rgb(239, 159, 118);
          --ctp-frappe-yellow: rgb(229, 200, 144);
          --ctp-frappe-green: rgb(166, 209, 137);
          --ctp-frappe-teal: rgb(129, 200, 190);
          --ctp-frappe-sky: rgb(153, 209, 219);
          --ctp-frappe-sapphire: rgb(133, 193, 220);
          --ctp-frappe-blue: rgb(140, 170, 238);
          --ctp-frappe-lavender: rgb(186, 187, 241);
          --ctp-frappe-text: rgb(198, 208, 245);
          --ctp-frappe-subtext1: rgb(181, 191, 226);
          --ctp-frappe-subtext0: rgb(165, 173, 206);
          --ctp-frappe-overlay2: rgb(148, 156, 187);
          --ctp-frappe-overlay1: rgb(131, 139, 167);
          --ctp-frappe-overlay0: rgb(115, 121, 148);
          --ctp-frappe-surface2: rgb(98, 104, 128);
          --ctp-frappe-surface1: rgb(81, 87, 109);
          --ctp-frappe-surface0: rgb(65, 69, 89);
          --ctp-frappe-base: rgb(48, 52, 70);
          --ctp-frappe-mantle: rgb(41, 44, 60);
          --ctp-frappe-crust: rgb(35, 38, 52);

          --ctp-latte-rosewater: rgb(220, 138, 120);
          --ctp-latte-flamingo: rgb(221, 120, 120);
          --ctp-latte-pink: rgb(234, 118, 203);
          --ctp-latte-mauve: rgb(136, 57, 239);
          --ctp-latte-red: rgb(210, 15, 57);
          --ctp-latte-maroon: rgb(230, 69, 83);
          --ctp-latte-peach: rgb(254, 100, 11);
          --ctp-latte-yellow: rgb(223, 142, 29);
          --ctp-latte-green: rgb(64, 160, 43);
          --ctp-latte-teal: rgb(23, 146, 153);
          --ctp-latte-sky: rgb(4, 165, 229);
          --ctp-latte-sapphire: rgb(32, 159, 181);
          --ctp-latte-blue: rgb(30, 102, 245);
          --ctp-latte-lavender: rgb(114, 135, 253);
          --ctp-latte-text: rgb(76, 79, 105);
          --ctp-latte-subtext1: rgb(92, 95, 119);
          --ctp-latte-subtext0: rgb(108, 111, 133);
          --ctp-latte-overlay2: rgb(124, 127, 147);
          --ctp-latte-overlay1: rgb(140, 143, 161);
          --ctp-latte-overlay0: rgb(156, 160, 176);
          --ctp-latte-surface2: rgb(172, 176, 190);
          --ctp-latte-surface1: rgb(188, 192, 204);
          --ctp-latte-surface0: rgb(204, 208, 218);
          --ctp-latte-base: rgb(239, 241, 245);
          --ctp-latte-mantle: rgb(230, 233, 239);
          --ctp-latte-crust: rgb(220, 224, 232);

          --ctp-tooltip-bg-dark: rgb(from var(--ctp-frappe-mantle) r g b / 0.92);
          --ctp-tooltip-text-dark: var(--ctp-frappe-text);
          --ctp-tooltip-border-dark: rgb(from var(--ctp-frappe-surface2) r g b / 0.25);
          --ctp-tooltip-shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.2);

          --ctp-tooltip-bg-light: rgb(from var(--ctp-latte-mantle) r g b / 0.92);
          --ctp-tooltip-text-light: var(--ctp-latte-text);
          --ctp-tooltip-border-light: rgb(from var(--ctp-latte-surface2) r g b / 0.3);
          --ctp-tooltip-shadow-light: 0 1px 3px rgba(90, 90, 90, 0.08), 0 5px 10px rgba(90, 90, 90, 0.12);
        }

        #${Config.ELEMENT_IDS.TOOLTIP_CONTAINER} {
          position: fixed;
          padding: 6px 10px;
          border-radius: 8px;
          font-size: 12px;
          line-height: 1.4;
          z-index: 2147483647;
          pointer-events: none;
          white-space: pre;
          max-width: 350px;
          opacity: 0;
          visibility: hidden;
          font-family: ${Config.SCRIPT_SETTINGS.UI_FONT_STACK_MONO};
          backdrop-filter: blur(10px) saturate(180%);
          -webkit-backdrop-filter: blur(10px) saturate(180%);
          transition: opacity ${transitionDuration}ms ${appleEaseOutStandard},
                      visibility ${transitionDuration}ms ${appleEaseOutStandard};

          background-color: var(--ctp-tooltip-bg-dark);
          color: var(--ctp-tooltip-text-dark);
          border: 1px solid var(--ctp-tooltip-border-dark);
          box-shadow: var(--ctp-tooltip-shadow-dark);
        }

        #${Config.ELEMENT_IDS.TOOLTIP_CONTAINER}.${Config.CSS_CLASSES.TOOLTIP_IS_VISIBLE} {
          opacity: 1;
          visibility: visible;
        }

        .${Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT}[data-tooltip-time] {
          display: inline-block;
          vertical-align: baseline;
          font-family: ${Config.SCRIPT_SETTINGS.UI_FONT_STACK_MONO};
          text-align: right;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          cursor: help;
          color: inherit;
          background: none;
          border: none;
        }

        @media (prefers-color-scheme: light) {
          #${Config.ELEMENT_IDS.TOOLTIP_CONTAINER} {
            background-color: var(--ctp-tooltip-bg-light);
            color: var(--ctp-tooltip-text-light);
            border: 1px solid var(--ctp-tooltip-border-light);
            box-shadow: var(--ctp-tooltip-shadow-light);
          }
        }
      `;
      try {
        GM_addStyle(cssStyles);
      } catch (e) {}
    },

    ensureTooltipContainer() {
      this.tooltipContainerElement = document.getElementById(
        Config.ELEMENT_IDS.TOOLTIP_CONTAINER
      );
      if (!this.tooltipContainerElement && document.body) {
        this.tooltipContainerElement = document.createElement("div");
        this.tooltipContainerElement.id = Config.ELEMENT_IDS.TOOLTIP_CONTAINER;
        this.tooltipContainerElement.setAttribute("role", "tooltip");
        this.tooltipContainerElement.setAttribute("aria-hidden", "true");
        try {
          document.body.appendChild(this.tooltipContainerElement);
        } catch (e) {}
      }
      return this.tooltipContainerElement;
    },

    displayTooltip(targetElement) {
      const tooltipTime = targetElement.dataset.tooltipTime;
      this.ensureTooltipContainer();

      if (!tooltipTime || !this.tooltipContainerElement) return;

      this.tooltipContainerElement.textContent = tooltipTime;
      this.tooltipContainerElement.setAttribute("aria-hidden", "false");

      const targetRect = targetElement.getBoundingClientRect();
      this.tooltipContainerElement.classList.add(
        Config.CSS_CLASSES.TOOLTIP_IS_VISIBLE
      );

      this.tooltipContainerElement.style.left = "-9999px";
      this.tooltipContainerElement.style.top = "-9999px";
      this.tooltipContainerElement.style.visibility = "hidden";

      requestAnimationFrame(() => {
        if (!this.tooltipContainerElement || !targetElement.isConnected) {
          this.hideTooltip();
          return;
        }

        const tooltipWidth = this.tooltipContainerElement.offsetWidth;
        const tooltipHeight = this.tooltipContainerElement.offsetHeight;
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        const verticalOffset = Config.SCRIPT_SETTINGS.TOOLTIP_VERTICAL_OFFSET;
        const margin = Config.SCRIPT_SETTINGS.VIEWPORT_EDGE_MARGIN;

        let tooltipLeft =
          targetRect.left + targetRect.width / 2 - tooltipWidth / 2;
        tooltipLeft = Math.max(margin, tooltipLeft);
        tooltipLeft = Math.min(
          viewportWidth - tooltipWidth - margin,
          tooltipLeft
        );

        let tooltipTop;
        const spaceAbove = targetRect.top - verticalOffset;
        const spaceBelow = viewportHeight - targetRect.bottom - verticalOffset;

        if (spaceAbove >= tooltipHeight + margin) {
          tooltipTop = targetRect.top - tooltipHeight - verticalOffset;
        } else if (spaceBelow >= tooltipHeight + margin) {
          tooltipTop = targetRect.bottom + verticalOffset;
        } else {
          tooltipTop =
            spaceAbove > spaceBelow
              ? Math.max(
                  margin,
                  targetRect.top - tooltipHeight - verticalOffset
                )
              : Math.min(
                  viewportHeight - tooltipHeight - margin,
                  targetRect.bottom + verticalOffset
                );
          if (tooltipTop < margin) tooltipTop = margin;
        }

        this.tooltipContainerElement.style.left = `${tooltipLeft}px`;
        this.tooltipContainerElement.style.top = `${tooltipTop}px`;
        this.tooltipContainerElement.style.visibility = "visible";
      });
    },

    hideTooltip() {
      if (this.tooltipContainerElement) {
        this.tooltipContainerElement.classList.remove(
          Config.CSS_CLASSES.TOOLTIP_IS_VISIBLE
        );
        this.tooltipContainerElement.setAttribute("aria-hidden", "true");
      }
    },
  };

  const TimeConverter = {
    formatDateTime(dateSource, formatType) {
      const dateObject =
        typeof dateSource === "string" ? new Date(dateSource) : dateSource;
      if (isNaN(dateObject.getTime())) {
        return State.getLocalizedText("INVALID_DATE_STRING");
      }

      let formatter;
      if (formatType === "shortDate") {
        formatter = State.shortDateFormatter;
      } else if (formatType === "tooltipTime") {
        formatter = State.tooltipTimeFormatter;
      } else {
        formatter = State.shortDateFormatter;
      }

      if (!formatter) {
        const year = String(dateObject.getFullYear()).slice(-2);
        const month = String(dateObject.getMonth() + 1).padStart(2, "0");
        const day = String(dateObject.getDate()).padStart(2, "0");
        const hours = String(dateObject.getHours()).padStart(2, "0");
        const minutes = String(dateObject.getMinutes()).padStart(2, "0");
        const seconds = String(dateObject.getSeconds()).padStart(2, "0");

        if (formatType === "shortDate") {
          return `${year}-${month}-${day}`;
        } else if (formatType === "tooltipTime") {
          return `${hours}:${minutes}:${seconds}`;
        }
        return `${year}-${month}-${day}`;
      }

      try {
        let formattedString = formatter.format(dateObject);
        formattedString = formattedString.replace(/[/]/g, "-");
        if (formatType !== "shortDate" && formatType !== "tooltipTime") {
          formattedString = formattedString.replace(", ", " ");
        }
        return formattedString;
      } catch (e) {
        return State.getLocalizedText("INVALID_DATE_STRING");
      }
    },

    convertElement(element) {
      if (
        !element ||
        !(element instanceof Element) ||
        element.classList.contains(Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT)
      ) {
        return;
      }

      const dateTimeAttribute = element.getAttribute("datetime");
      if (!dateTimeAttribute) {
        element.classList.add(Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT);
        return;
      }

      try {
        const displayDateText = this.formatDateTime(
          dateTimeAttribute,
          "shortDate"
        );
        const tooltipTimeText = this.formatDateTime(
          dateTimeAttribute,
          "tooltipTime"
        );

        if (
          displayDateText === State.getLocalizedText("INVALID_DATE_STRING") ||
          tooltipTimeText === State.getLocalizedText("INVALID_DATE_STRING")
        ) {
          element.classList.add(Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT);
          return;
        }

        const replacementSpan = document.createElement("span");
        replacementSpan.textContent = displayDateText;
        replacementSpan.dataset.tooltipTime = tooltipTimeText;
        replacementSpan.classList.add(
          Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT
        );

        if (element.parentNode) {
          element.parentNode.replaceChild(replacementSpan, element);
        } else {
          element.classList.add(Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT);
        }
      } catch (error) {
        element.classList.add(Config.CSS_CLASSES.PROCESSED_TIME_ELEMENT);
      }
    },

    processAllInNode(targetNode = document.body) {
      if (!targetNode || typeof targetNode.querySelectorAll !== "function")
        return;
      try {
        const timeElements = targetNode.querySelectorAll(
          Config.DOM_SELECTORS.RELATIVE_TIME
        );
        timeElements.forEach(this.convertElement.bind(this));
      } catch (e) {}
    },
  };

  const EventManager = {
    domMutationObserver: null,

    init() {
      this.setupTooltipListeners();
      this.startDomObserver();
    },

    setupTooltipListeners() {
      document.body.addEventListener("mouseover", (event) => {
        const targetSpan = event.target.closest(
          Config.DOM_SELECTORS.PROCESSED_TIME_SPAN
        );
        if (targetSpan) UserInterface.displayTooltip(targetSpan);
      });
      document.body.addEventListener("mouseout", (event) => {
        const targetSpan = event.target.closest(
          Config.DOM_SELECTORS.PROCESSED_TIME_SPAN
        );
        if (
          targetSpan &&
          (!event.relatedTarget ||
            !UserInterface.tooltipContainerElement?.contains(
              event.relatedTarget
            ))
        ) {
          UserInterface.hideTooltip();
        }
      });
      document.body.addEventListener(
        "focusin",
        (event) => {
          const targetSpan = event.target.closest(
            Config.DOM_SELECTORS.PROCESSED_TIME_SPAN
          );
          if (targetSpan) UserInterface.displayTooltip(targetSpan);
        },
        true
      );
      document.body.addEventListener(
        "focusout",
        (event) => {
          const targetSpan = event.target.closest(
            Config.DOM_SELECTORS.PROCESSED_TIME_SPAN
          );
          if (targetSpan) UserInterface.hideTooltip();
        },
        true
      );
    },

    handleDomMutation(mutations) {
      for (const mutation of mutations) {
        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
          for (const addedNode of mutation.addedNodes) {
            if (addedNode.nodeType === Node.ELEMENT_NODE) {
              if (addedNode.matches(Config.DOM_SELECTORS.RELATIVE_TIME)) {
                TimeConverter.convertElement(addedNode);
              } else if (
                addedNode.querySelector(Config.DOM_SELECTORS.RELATIVE_TIME)
              ) {
                const descendantElements = addedNode.querySelectorAll(
                  Config.DOM_SELECTORS.RELATIVE_TIME
                );
                descendantElements.forEach(
                  TimeConverter.convertElement.bind(TimeConverter)
                );
              }
            }
          }
        }
      }
    },

    startDomObserver() {
      if (this.domMutationObserver) return;
      this.domMutationObserver = new MutationObserver(
        this.handleDomMutation.bind(this)
      );
      const observerConfiguration = { childList: true, subtree: true };

      if (document.body) {
        try {
          this.domMutationObserver.observe(
            document.body,
            observerConfiguration
          );
        } catch (e) {}
      } else {
        document.addEventListener(
          "DOMContentLoaded",
          () => {
            if (document.body) {
              try {
                this.domMutationObserver.observe(
                  document.body,
                  observerConfiguration
                );
              } catch (e) {}
            }
          },
          { once: true }
        );
      }
    },
  };

  const ScriptManager = {
    init() {
      try {
        State.initialize();
        UserInterface.injectStyles();
        UserInterface.ensureTooltipContainer();
        TimeConverter.processAllInNode(
          document.body || document.documentElement
        );
        EventManager.init();
      } catch (error) {}
    },
  };

  if (
    document.readyState === "complete" ||
    (document.readyState !== "loading" && !document.documentElement.doScroll)
  ) {
    ScriptManager.init();
  } else {
    document.addEventListener("DOMContentLoaded", () => ScriptManager.init(), {
      once: true,
    });
  }
})();
欢迎访问Greasy Fork镜像
