☰

Daymap Translucency

Adds a translucency effect to Daymap

// ==UserScript==
// @name         Daymap Translucency
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Adds a translucency effect to Daymap
// @author       You
// @match        https://lefevrehs.daymap.net/daymap/*
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // Helper function to get a value from local storage
    function getItem(key) {
        return GM_getValue(key);
    }

    // Translucency effect
    if (getItem("translucentMode") && parseFloat(getItem("translucentMode")) < 1) {
        var dark = document.cookie.substr(document.cookie.length - 1, document.cookie.length); // Because dark mode is the only cookie that Daymap Graphics can read, others are HTTP only
        dark = dark == "1" ? 1 : 0;
        var translucentness = parseFloat(getItem("translucentMode")); // Upon rereading the code, this is probably supposed to be spelt "translucency". But I can't be bothered to fix it.

        // Apply translucency to various elements
        applyTranslucency(".card, .msg, .ditm, .Toolbar, #cntDiary, .tabPage", translucentness, dark);
        applyTranslucency(".item-container, .tabList div a, .rgGroupPanel td td", translucentness, 0, "rgba(255, 255, 255, 0)");
        applyTranslucency(".hasDatepicker, #divInbox, .Left", translucentness, dark, null, 0.7);
        applyOutline(".ditm, .Toolbar", translucentness, 0.45);

        // Special handling for calendar and diary buttons
        if (document.querySelector("#bCalendar")) {
            document.querySelector("#bCalendar").style.backgroundColor = `rgba(31, 157, 217, ${translucentness * 1.6})`;
            document.querySelector("#btnDiary").style.backgroundColor = `rgba(31, 157, 217, ${translucentness * 1.6})`;
        }

        // Apply blur if enabled
        if (getItem("blurAmount") && getItem("blurAmount") != 0) {
            applyBlur(".card, .Toolbar", getItem("blurAmount"));
        }

        applyTranslucency(".nav-container, .nav-user-container, .rgGroupPanel td", translucentness, dark, null, 0.7);

        // Delay to ensure elements are loaded
        window.setTimeout(() => {
            applyTranslucency("daymap-header", translucentness, 0, "rgba(255, 255, 255, ", 1.2);
            applyBlur("daymap-header", getItem("blurAmount") * 3);
            applyTranslucency("daymap-header div ul li", translucentness, 0, "rgba(255, 255, 255, ", 0.8);
            applyTranslucency(".diaryEvents, #divDiaryDay, .PlanDay", translucentness, dark);
        }, 500);
    }

    // Helper function to apply translucency to elements
    function applyTranslucency(selector, translucentness, dark, colorOverride = null, opacityMultiplier = 1) {
        for (let i = 0; i < document.querySelectorAll(selector).length; i++) {
            const element = document.querySelectorAll(selector)[i];
            element.style.background = colorOverride || `rgba(${dark ? "37, 37, 37," : "237, 235, 233,"}${translucentness * opacityMultiplier})`;
        }
    }

    // Helper function to apply outline to elements
    function applyOutline(selector, translucentness, opacityMultiplier) {
        for (let i = 0; i < document.querySelectorAll(selector).length; i++) {
            const element = document.querySelectorAll(selector)[i];
            element.style.outline = `3px solid rgba(250, 250, 250, ${translucentness * opacityMultiplier})`;
        }
    }

    // Helper function to apply blur to elements
    function applyBlur(selector, blurAmount) {
        for (let i = 0; i < document.querySelectorAll(selector).length; i++) {
            const element = document.querySelectorAll(selector)[i];
            element.style.backdropFilter = `blur(${blurAmount}px)`;
        }
    }
})();