EGW Writings - Destacar parágrafos

Script que permite destacar um trecho de parágrafos no site EGW Writings

// ==UserScript==
// @name         EGW Writings - Destacar parágrafos
// @namespace    http://tampermonkey.net/
// @version      20250813
// @description  Script que permite destacar um trecho de parágrafos no site EGW Writings
// @author       André Sousa
// @match        https://egwwritings.org/read*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=egwwritings.org
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @grant        none
// @license      MIT
// ==/UserScript==

let temaCSS = $("head").find("link[class=theme-link]").attr("href").split("styles/")[1].split(".css?")[0];
let destaqueBG = (temaCSS == "dm") ? "#0b121e" : ((temaCSS == "dw") ? "#ecece8" : ((temaCSS == "dk") ? "#6a6a6a" : ((temaCSS == "adm") ? "#2d2d2d" : "#ededed")));
let telacheiaBG = (temaCSS == "dm") ? "#181e29" : ((temaCSS == "dw") ? "#fafaf5" : ((temaCSS == "dk") ? "#565657" : ((temaCSS == "adm") ? "#000000" : "#ffffff")));
let relogioCO = (temaCSS == "dm") ? "#d8d8d8" : ((temaCSS == "dw") ? "#151814" : ((temaCSS == "dk") ? "#d8d8d8" : ((temaCSS == "adm") ? "#d8d8d8" : "#151814")));

function exibirParagrafosDesejados() {

    $("head").append(`
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:[email protected]&display=swap" rel="stylesheet">
    `);

    let inicio = parseFloat($("#inicio").val().replace(",",".")); if(inicio == parseInt(inicio)) inicio = parseFloat(inicio) + 0.1;
    let fim = parseFloat($("#fim").val().replace(",",".")); if(fim == parseInt(fim)) fim = parseFloat(fim) + 0.99;

    if(parseFloat(inicio) <= parseFloat(fim)) {
        let podeColorir = false;
        let contador = 0;
        $("#layout-wrap .js-para.para-wrap").each(function(index) {
            $(this).css("background","none");
            $(this).css("opacity","0.4");

            let esteParagrafo = parseFloat($(this).find("span.refCode").text().split(" ")[1]);

            if(esteParagrafo >= inicio && esteParagrafo <= fim) {
                podeColorir = true;
                contador++;
                $(this).css("background",destaqueBG);
                $(this).css("opacity","1");
                if(contador > 0) {
                    $(this).prevAll(".js-para.para-wrap.header:has(h3)").first().css("background",destaqueBG).css("opacity","1");
                    $(this).prevAll(".js-para.para-wrap.header:has(h4)").first().css("background",destaqueBG).css("opacity","1");
                    $(this).prevAll(".js-para.para-wrap.header:has(h5)").first().css("background",destaqueBG).css("opacity","1");
                }
            }
        });
        contador = 0;
    } else {
        $("#layout-wrap .js-para.para-wrap").css("background","none").css("opacity","1");
    }
}


        function carregarCoisas() {
            $("#reader-control-panel > *").each(function(index) {
                if((["",""].indexOf($(this).text().trim()) < 0) && !($(this).is(".ReaderNavigationPanel_root__kWWqN"))) {
                    $(this).hide();
                }
            });

            $("head").append(`
                <style>
                    header.header-main {
                        display: none;
                    }
                    .ReaderNavigationPanel_root__kWWqN {
                        margin-left: 0;
                        margin-right: auto;
                    }
                    .IconButton_root__ygpsp {
                        margin-right: 0;
                        margin-left: auto;
                    }
                    .telacheia #root .reader-page-wrap {
                        /*position: fixed;*/
                        /*left: 0;*/
                        /*top: 0;*/
                        /*width: 100%;*/
                        /*height: 100%;*/
                        /*z-index: 10;*/
                        background: ${telacheiaBG};
                    }
                    .telacheia #root #leftMiddleDrag,
                    .telacheia #root #rightMainDrag,
                    .telacheia #root .left-menu,
                    .telacheia #root .mainPart .topBar,
                    .telacheia #root .mainPart .cart-side-panel,
                    .telacheia #root .resizer-right-panel.shown,
                    .telacheia #root #rightMiddleDrag {
                        display: none !important;
                    }
                    [class*="ReaderControlPanel_dd-3dots"] {
                        display: none;
                    }
                    .telacheia #root .mainPart .mainContent {
                        padding: 0 !important;
                        width: 100% !important;
                    }
                    .bitcount-<uniquifier> {
                      font-family: "Bitcount", system-ui;
                      font-optical-sizing: auto;
                      font-weight: <weight>;
                      font-style: normal;
                      font-variation-settings:
                        "slnt" 0,
                        "CRSV" 0.5,
                        "ELSH" 0,
                        "ELXP" 0;
                    }
                    #relogio {
                        /*border: 1px solid #808379;*/
                        text-align: center;
                        border-radius: 5px;
                        /*background: #a4a89b;*/
                        color: ${relogioCO};
                        pointer-events: none;
                        font-family: "Bitcount Grid Single";
                        width: 70px;
                        height: 24px;
                        font-size: 16px;
                        padding-top: 4px !important;
                        box-sizing: border-box;
                    }
                </style>
            `);

            $("#reader-control-panel").prepend(`
                <div class="ReaderNavigationPanel_root__kWWqN">
                    <div class="ReaderNavigationPanel_wrap-inputs__qUVo5">
                        <div class="Input_root__T9Ljb Input_oneWord__MDa76 Input_sm__xb1Ul">
                            <input type="text" id="inicio" class="Input_input__o3nl9 ReaderNavigationPanel_input__ZWQq4" tabindex="0" value="" placeholder="Início">
                        </div>
                        <div class="Input_root__T9Ljb Input_oneWord__MDa76 Input_sm__xb1Ul">
                            <input type="text" id="fim" class="Input_input__o3nl9 ReaderNavigationPanel_input__ZWQq4" tabindex="0" value="" placeholder="Fim">
                        </div>
                        <i tabindex="0" id="limparTrecho" aria-label="Limpar trecho" role="button" class="icon-button-base IconButton_root__ygpsp" style="font-family: cursive !important;background: #0c6b8f;padding-left: 7px;padding-right: 7px;font-size: 12px;color: white;margin-left: 0;margin-right: auto;height: 28px;">X<div id="" class="Ripple_root__lmfsr Ripple_dark__KJV9U"><span class="Ripple_ripple__O6Zr1"></span></div></i>
                    </div>
                </div>
            `);
            $("#reader-control-panel").append(`
                <input type="text" id="relogio" class="Input_input__o3nl9 ReaderNavigationPanel_input__ZWQq4 bitcount-300" tabindex="0" value="" placeholder="Relogio">
                <i id="telacheia" class="icon-button-base IconButton_root__ygpsp egw-font-icon"></i>
            `);

            let rodarRelogio = setInterval(function() {
                console.log("Rodando Relogio")
                let data = new Date();
                let hora = String(data.getHours()).padStart(2, "0");
                let minuto = String(data.getMinutes()).padStart(2, "0");
                let segundo = data.getSeconds();

                $("#relogio").val(hora + (segundo % 2 == 0 ? ":" : " ") + minuto);
            }, 1000);

            $("#telacheia").click(function() {
                if(!($("body").is(".telacheia"))) {
                    abrirTelaCheia();
                    $("body").addClass("telacheia");
                } else {
                    fecharTelaCheia();
                    $("body").removeClass("telacheia");
                }
            });

            $("#limparTrecho").click(function() {
                $("#inicio, #fim").val('');
                $("#layout-wrap .js-para.para-wrap").css("background","none").css("opacity","1")
            });

            $(".scrollbars-render-view").on("scroll", function() {
                exibirParagrafosDesejados();
            });

            $("#inicio, #fim").on("keyup", function() {
                exibirParagrafosDesejados();
            });
        }

    function abrirTelaCheia() {
      const elem = document.querySelector("#root");

      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) { /* Safari */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE11 */
        elem.msRequestFullscreen();
      }
    }
    function fecharTelaCheia() {
      document.exitFullscreen();
    }

    document.addEventListener("fullscreenchange", () => {
        if (!document.fullscreenElement) {
            console.log("Saiu do modo tela cheia");
            $("body").removeClass("telacheia");
        } else {
            console.log("Entrou no modo tela cheia");
            $("body").addClass("telacheia");
        }
    });

const target = document.querySelector('body');
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'class') {
      if (target.classList.contains('is-reader-page') && !document.getElementById('inicio')) {
        console.log('Classe adicionada!');
        carregarCoisas();
      }
    }
  });
});

observer.observe(target, { attributes: true });