☰

Save Exhentai's reading status

Add a button that saves Exhentai's reading status by saving the time pressed and highlighting the closest gallery

// ==UserScript==
// @name         Save Exhentai's reading status
// @namespace    http://tampermonkey.net/
// @version      0.7
// @description  Add a button that saves Exhentai's reading status by saving the time pressed and highlighting the closest gallery
// @author       megu10
// @match       https://exhentai.org/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var button = document.createElement("button");
    button.style.backgroundColor = "#34353b"
    button.style.color = "#f1f1f1";
    button.style.fontWeight = 'bold';
    button.style.borderColor = "transparent";
    button.innerHTML = "Save Progress";

    //return system date and time in the pattern of mm-dd hh:mm
    function return_real_date()
    {
        var currentdate = new Date();
        var temp;
        var new_temp;
        var mn_temp;
        var hr_temp;
        var month = (currentdate.getUTCMonth() + 1);
        var date = currentdate.getUTCDate();
        var minutes = currentdate.getMinutes();
        var hours = (currentdate.getUTCHours());
        temp = month.toString();
        new_temp = date.toString();
        hr_temp = hours.toString();
        mn_temp = minutes.toString();

        if (month <10)
        {
            temp = "0" + temp;
        }

        if (date < 10)
        {
            new_temp = "0" +new_temp;
        }

        if (hours < 10)
        {
            hr_temp = "0" +hr_temp;
        }

        if (minutes < 10)
        {
            mn_temp = "0" +mn_temp;
        }

        temp = temp + "-" + new_temp + " " + hr_temp + ":" + mn_temp;
        return temp;
    }


    var time_text = document.createTextNode("No saved time")
    var toppane = document.getElementById("toppane");

    var buttonDiv = document.createElement("div");
    var textDiv = document.createElement("div");
    buttonDiv.style.position = "relative";
    textDiv.style.position = "relative";
    buttonDiv.style.left = "30px";
    textDiv.style.left = "30px";

    buttonDiv.appendChild(button);
    textDiv.appendChild(time_text);

    toppane.appendChild(buttonDiv);
    toppane.appendChild(textDiv);

    textDiv.style.fontSize = "20px"; // Set the font size to 20 pixels
    textDiv.style.fontFamily = "Arial"; // Set the font family to Arial
    button.style.fontFamily = "Arial";
    

    //get saved time
    var saved_time = localStorage.getItem('saved_time_text');
    if (saved_time) {
      time_text.nodeValue = saved_time;
    }

    //find newest gallery that slose to the saved time and color it
    function show_newest_gallery(gallerys)
    {
        var full_saved_time = "2024-" + saved_time;
        var full_saved_time_obj = new Date(full_saved_time);
        for (var i = 0; i < gallerys.length; i++)
        {
            var element = gallerys[i].querySelector('.gl5t div div[id^="posted_"]');
            var gallery_time = element.textContent;
            var gallery_time_obj = new Date(gallery_time);
            if (gallery_time_obj < full_saved_time_obj)
            {
                gallerys[i].style.backgroundColor = '#8e3424';
                break;
            }
        }
    }

    //observe page change. call show_newest_gallery() to color when happens
    var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        show_newest_gallery(document.querySelectorAll('.gl1t'));
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });

    //listen button click event, save system time when clicked to localstorage/
    //and refresh current coloring to new time
    button.addEventListener ("click", function()
    {
        localStorage.setItem('saved_time_text', return_real_date());
        //localStorage.setItem('saved_time_text', "05-07 02:34");//for debug
        time_text.nodeValue = return_real_date();
        saved_time = return_real_date();
        show_newest_gallery(document.querySelectorAll('.gl1t'))
    });


})();