Reddit exact post time

Create a static copy of exact time of Reddit post time on side with formatted date

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Reddit exact post time
// @namespace    https://rant.li/boson
// @version      1.1
// @description  Create a static copy of exact time of Reddit post time on side with formatted date
// @author       Boson
// @match        *://*.reddit.com/*
// @grant        none
// @license      GNU AGPLv3
// ==/UserScript==

(function() {
    'use strict';

    function formatDate(date) {
        const options = {
            month: 'short',
            day: 'numeric',
            weekday: 'short',
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        };
        return date.toLocaleString('en-US', options);
    }

    function createStaticCopy(originalTimeElement) {
        const datetime = originalTimeElement.getAttribute('datetime');
        const utcDate = new Date(datetime);
        const localDate = new Date(utcDate.getTime());
        const formattedDate = formatDate(localDate);

        const staticTimeElement = document.createElement('time');
        staticTimeElement.setAttribute('class', 'static-timestamp'); // Different class to avoid live update
        staticTimeElement.setAttribute('datetime', datetime);
        staticTimeElement.setAttribute('title', formattedDate);
        staticTimeElement.textContent = ` - ${formattedDate}`;
        return staticTimeElement;
    }

    function processTimeElements() {
        const timeElements = document.querySelectorAll('time.live-timestamp');
        timeElements.forEach(originalTimeElement => {
            const staticCopy = createStaticCopy(originalTimeElement);
            originalTimeElement.parentNode.insertBefore(staticCopy, originalTimeElement.nextSibling);
        });
    }

    function processNewNodes(nodes) {
        nodes.forEach(node => {
            if (node.nodeType === Node.ELEMENT_NODE) {
                const timeElements = node.querySelectorAll ? node.querySelectorAll('time.live-timestamp') : [];
                timeElements.forEach(originalTimeElement => {
                    const staticCopy = createStaticCopy(originalTimeElement);
                    originalTimeElement.parentNode.insertBefore(staticCopy, originalTimeElement.nextSibling);
                });
            }
        });
    }

    function handleMutations(mutationsList, observer) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                processNewNodes(mutation.addedNodes);
            }
        }
    }

    window.addEventListener('load', function() {
        processTimeElements();
        const observer = new MutationObserver(handleMutations);
        const config = { childList: true, subtree: true };
        observer.observe(document.body, config);
    });
})();