MediaWiki:Common.js: Difference between revisions

Latest revision as of 20:03, 16 November 2024

/* Any JavaScript here will be loaded for all users on every page load. */

// Crear y agregar el botón flotante al cargar la página
document.addEventListener("DOMContentLoaded", function () {
    const backToTopButton = document.createElement("div");
    backToTopButton.id = "backToTop";
    backToTopButton.textContent = "↑"; // Flecha hacia arriba
    backToTopButton.onclick = scrollToTop;
    document.body.appendChild(backToTopButton);
});

// Función para volver al inicio
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: "smooth" // Desplazamiento suave
    });
}

// Mostrar el botón al hacer scroll hacia abajo
window.addEventListener("scroll", function () {
    const backToTopButton = document.getElementById("backToTop");
    if (window.scrollY > 200) {
        backToTopButton.classList.add("show");
    } else {
        backToTopButton.classList.remove("show");
    }
});

document.addEventListener('DOMContentLoaded', function () {
    // Crear los elementos de la barra de lectura
    const progressBarContainer = document.createElement('div');
    progressBarContainer.className = 'reading-progress-bar-container';

    const progressBar = document.createElement('div');
    progressBar.className = 'reading-progress-bar';
    progressBarContainer.appendChild(progressBar);

    // Añadir la barra al cuerpo del documento
    document.body.appendChild(progressBarContainer);

    // Actualizar la barra en función del scroll
    window.addEventListener('scroll', function () {
        const article = document.querySelector('.mw-parser-output'); // Selector principal del contenido
        if (!article) return;

        const articleHeight = article.offsetHeight;
        const articleTop = article.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;

        const maxScroll = articleHeight - windowHeight;
        const scroll = Math.min(Math.max(-articleTop, 0), maxScroll);

        const progress = (scroll / maxScroll) * 100;
        progressBar.style.width = progress + '%';
    });
});