Toonily Manga Loader

Forces Toonily to load all manga images at once and dynamically loads them into a single page strip with a stats window.
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
Wrap lines
// ==UserScript==
// @name         Toonily Manga Loader
// @namespace    github.com/longkidkoolstar
// @version      1.1
// @description  Forces Toonily to load all manga images at once and dynamically loads them into a single page strip with a stats window.
// @author       longkidkoolstar
// @match        https://toonily.com/webtoon/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js
// @grant        GM.setValue
// @grant        GM.getValue
// @grant        GM.deleteValue
// @license      MIT
// ==/UserScript==
 
(function() {
    'use strict';
 
    let imageUrls = [];
    let loadedImages = 0;
    let totalImages = 0;
    let reloadMode = false;
 
    // Function to simulate click on the "Load All Images" switch
    function enableLoadAllImages() {
        const loadAllImagesButton = document.querySelector('#btn-lazyload-controller');
        if (loadAllImagesButton && loadAllImagesButton.querySelector('.fa-toggle-off')) {
            loadAllImagesButton.click(); // Simulate clicking to enable "Load All Images"
            console.log("Forcing 'Load All Images'...");
        }
    }
 
    // Hooking into XMLHttpRequest to capture all image URLs from AJAX responses
    function interceptAjaxRequests() {
        const originalOpen = XMLHttpRequest.prototype.open;
 
        XMLHttpRequest.prototype.open = function(method, url, ...args) {
            this.addEventListener('load', function() {
                if (url.includes('/chapters/manga')) {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(this.responseText, 'text/html');
                    const imgs = doc.querySelectorAll('img.wp-manga-chapter-img');
 
                    imgs.forEach(img => {
                        const imgUrl = img.src.trim();
                        if (!imageUrls.includes(imgUrl)) {
                            imageUrls.push(imgUrl);
                        }
                    });
                }
            });
 
            return originalOpen.apply(this, [method, url, ...args]);
        };
    }
 
    // Function to remove all other HTML elements except for the manga container
    function removeOtherElements() {
        const bodyChildren = Array.from(document.body.children);
        bodyChildren.forEach(child => {
            if (!child.id || child.id !== 'manga-container') {
                child.remove();
            }
        });
    }
 
    // Helper function to create a page container for each image
    function createPageContainer(pageUrl) {
        const container = document.createElement('div');
        container.className = 'manga-page-container';
 
        const img = document.createElement('img');
        img.src = pageUrl;
        img.style.maxWidth = '100%';
        img.style.display = 'block';
        img.style.margin = '0px auto';  //Note: The 0px dictates the space between images and the auto center them
 
        img.onload = function() {
            loadedImages++;
            updateStats(); // Update the stats when an image is fully loaded
        };
 
        addClickEventToImage(img);
 
        container.appendChild(img);
        return container;
    }
 
    // Function to extract already loaded image URLs from the page
    function extractImageUrlsFromPage() {
        const images = document.querySelectorAll('.reading-content img.wp-manga-chapter-img');
        images.forEach(img => {
            const src = img.src.trim();
            if (src.startsWith('https://cdn.toonily.com/chapters/manga') && !imageUrls.includes(src)) {
                imageUrls.push(src);
            }
        });
        totalImages = imageUrls.length;
    }
 
// Helper function to create an exit button
function createExitButton() {
    const exitButton = document.createElement('button');
    exitButton.textContent = 'Exit';
    exitButton.style.backgroundColor = '#e74c3c';
    exitButton.style.color = '#fff';
    exitButton.style.border = 'none';
    exitButton.style.padding = '10px';
    exitButton.style.margin = '10px auto';
    exitButton.style.display = 'block';  // Center the button
    exitButton.style.cursor = 'pointer';
    exitButton.style.borderRadius = '5px';
 
    exitButton.addEventListener('click', function() {
        window.location.reload();  // Reload the page when clicked
    });
 
    return exitButton;
}
 
// Function to load all manga images into a single strip
function loadMangaImages() {
    const mangaContainer = document.createElement('div');
    mangaContainer.id = 'manga-container';
    document.body.appendChild(mangaContainer);
 
    imageUrls.forEach((url, index) => {
        const pageContainer = createPageContainer(url);
 
        // Add exit button to the first loaded page
        if (index === 0) {
            const topExitButton = createExitButton();
            mangaContainer.appendChild(topExitButton);
        }
 
        mangaContainer.appendChild(pageContainer);
 
        // Add exit button to the last loaded page
        if (index === imageUrls.length - 1) {
            const bottomExitButton = createExitButton();
            mangaContainer.appendChild(bottomExitButton);
        }
    });
 
    removeOtherElements(); // Remove all other page elements after loading
}
 
 
    // Function to update the stats window
    function updateStats() {
        const statsPages = document.querySelector('.ml-stats-pages');
        const loadingImages = document.querySelector('.ml-loading-images');
        const totalImagesDisplay = document.querySelector('.ml-total-images');
        if (statsPages) statsPages.textContent = `${loadedImages}/${totalImages} loaded`;
        if (loadingImages) loadingImages.textContent = `${totalImages - loadedImages} images loading`;
        if (totalImagesDisplay) totalImagesDisplay.textContent = `${totalImages} images in chapter`;
    }
 
    // Function to create the stats window
    async function createStatsWindow() {
        const statsWindow = document.createElement('div');
        statsWindow.className = 'ml-stats';
        statsWindow.style.position = 'fixed';
        statsWindow.style.bottom = '10px';
        statsWindow.style.right = '10px';
        statsWindow.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        statsWindow.style.padding = '1px';
        statsWindow.style.color = 'white';
        statsWindow.style.borderRadius = '8px';
        statsWindow.style.zIndex = '9999';
        statsWindow.style.transition = 'opacity 0.3s';
        statsWindow.style.opacity = '0.5';
 
        statsWindow.addEventListener('mouseenter', function() {
            statsWindow.style.opacity = '1';
        });
 
        statsWindow.addEventListener('mouseleave', function() {
            statsWindow.style.opacity = '0.5';
        });
 
        const statsWrapper = document.createElement('div');
        statsWrapper.style.display = 'flex';
        statsWrapper.style.alignItems = 'center'; // Center vertically
        const collapseButton = document.createElement('span');
        collapseButton.className = 'ml-stats-collapse';
        collapseButton.title = 'Hide stats';
        collapseButton.textContent = '>>';
        collapseButton.style.cursor = 'pointer';
        collapseButton.style.marginRight = '10px'; // Space between button and content
        collapseButton.addEventListener('click', async function() {
            contentContainer.style.display = contentContainer.style.display === 'none' ? 'block' : 'none';
            collapseButton.textContent = contentContainer.style.display === 'none' ? '<<' : '>>';
            await GM.setValue('statsCollapsed', contentContainer.style.display === 'none');
        });
        (async () => {
            const isCollapsed = await GM.getValue('statsCollapsed', false);
            contentContainer.style.display = isCollapsed ? 'none' : 'block';
            collapseButton.textContent = isCollapsed ? '<<' : '>>';
        })();
 
        const contentContainer = document.createElement('div');
        contentContainer.className = 'ml-stats-content';
 
        const statsText = document.createElement('span');
        statsText.className = 'ml-stats-pages';
        statsText.textContent = `0/0 loaded`; // Initial stats
 
        const infoButton = document.createElement('i');
        infoButton.innerHTML = '<i class="fas fa-question-circle"></i>';
        infoButton.title = 'See userscript information and help';
        infoButton.style.marginLeft = '5px';
        infoButton.style.marginRight = '5px'; // Add space to the right
        infoButton.addEventListener('click', function() {
            alert('This userscript loads manga pages in a single view. Click on an image to reload.');
        });
 
        const moreStatsButton = document.createElement('i');
        moreStatsButton.innerHTML = '<i class="fas fa-chart-pie"></i>';
        moreStatsButton.title = 'See detailed page stats';
        moreStatsButton.style.marginRight = '5px'; // Add space to the right
        moreStatsButton.addEventListener('click', function() {
            const statsBox = document.querySelector('.ml-floating-msg');
            statsBox.style.display = statsBox.style.display === 'block' ? 'none' : 'block';
        });
 
        const refreshButton = document.createElement('i');
        refreshButton.innerHTML = '<i class="fas fa-sync-alt"></i>';
        refreshButton.title = 'Click an image to reload it.';
        refreshButton.addEventListener('click', function() {
            reloadMode = !reloadMode;
            refreshButton.style.color = reloadMode ? 'orange' : '';
            console.log(`Reload mode is now ${reloadMode ? 'enabled' : 'disabled'}.`);
        });
 
        const miniExitButton = document.createElement('button');
        miniExitButton.innerHTML = '<i class="fas fa-sign-out-alt"></i>';
        miniExitButton.title = 'Exit the Manga Loader';
        miniExitButton.style.marginLeft = '10px'; // Space between other buttons
        miniExitButton.style.backgroundColor = '#e74c3c';  // Red color for the button
        miniExitButton.style.color = '#fff';
        miniExitButton.style.border = 'none';
        miniExitButton.style.padding = '1px 5px';
        miniExitButton.style.borderRadius = '5px';
        miniExitButton.style.cursor = 'pointer';
 
        miniExitButton.addEventListener('click', function() {
            window.location.reload();  // Refresh the page
        });
 
        contentContainer.appendChild(statsText);
        contentContainer.appendChild(infoButton);
        contentContainer.appendChild(moreStatsButton);
        contentContainer.appendChild(refreshButton);
        contentContainer.appendChild(miniExitButton);  // Add mini exit button to the content
 
        statsWrapper.appendChild(collapseButton);
        statsWrapper.appendChild(contentContainer);
        statsWindow.appendChild(statsWrapper);
 
        const statsBox = document.createElement('pre');
        statsBox.className = 'ml-box ml-floating-msg';
        statsBox.innerHTML = `<strong>Stats:</strong><br><span class="ml-loading-images">0 images loading</span><br><span class="ml-total-images">0 images in chapter</span><br><span class="ml-loaded-pages">0 pages parsed</span>`;
        statsBox.style.display = 'none'; // Initially hidden
        statsWindow.appendChild(statsBox);
 
        document.body.appendChild(statsWindow);
    }
 
    // Add the click event to images
    function addClickEventToImage(image) {
        image.addEventListener('click', function() {
            if (reloadMode) {
                const imgSrc = image.dataset.src || image.src;
                image.src = ''; // Clear the src to trigger reload
                setTimeout(() => {
                    image.src = imgSrc; // Retry loading after clearing
                }, 100); // Short delay to ensure proper reload
            }
        });
    }
 
    // Create and add the "Load Manga" button
    const loadMangaButton = document.createElement('button');
    loadMangaButton.textContent = 'Load Manga';
    loadMangaButton.style.position = 'fixed';
    loadMangaButton.style.bottom = '10px';
    loadMangaButton.style.right = '10px';
    loadMangaButton.style.zIndex = '9999';
    loadMangaButton.style.padding = '10px';
    loadMangaButton.style.backgroundColor = '#f39c12';
    loadMangaButton.style.border = 'none';
    loadMangaButton.style.borderRadius = '5px';
    loadMangaButton.style.cursor = 'pointer';
 
    // Add hover effect to the button
    loadMangaButton.addEventListener('mouseover', function() {
        loadMangaButton.style.backgroundColor = '#ff5500';
    });
 
    loadMangaButton.addEventListener('mouseout', function() {
        loadMangaButton.style.backgroundColor = '#f39c12';
    });
 
    const mangaInfo = document.querySelector("body > div.wrap > div > div > div > div.profile-manga.summary-layout-1 > div > div > div > div.tab-summary");
    if (!mangaInfo) {
        document.body.appendChild(loadMangaButton);
 
        loadMangaButton.addEventListener('click', async function() {
            enableLoadAllImages(); // Force the site to load all images
            interceptAjaxRequests(); // Hook into AJAX requests to capture image URLs
            extractImageUrlsFromPage(); // Initially extract image URLs from the page
 
            loadMangaImages(); // Load all collected images
            loadMangaButton.remove(); // Remove the button after loading
            await createStatsWindow(); // Create the stats window
        });
    }
 
    // Wait for the DOM to finish loading before adding the button
    window.addEventListener('DOMContentLoaded', function() {
        if (!mangaInfo) {
            document.body.appendChild(loadMangaButton);
        }
    });
 
})();