Benutzer:RobbiRobb/EpisodeGallery.js

// ==UserScript==
// @name         Episode Gallery
// @namespace    https://www.pokewiki.de/Benutzer_Diskussion:RobbiRobb
// @version      1.0
// @description  Allows you to see all images of Pokémon episodes at once without downloading the zip
// @author       RobbiRobb
// @match        https://www.pokewiki.de/images/tv/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pokewiki.de
// @grant        none
// @require      https://code.jquery.com/jquery-3.7.1.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.min.js
// ==/UserScript==

/**
* This script is not a normal wiki script and therefore can't be loaded using the ressource loader
* Instead it requires the user to install the Tampermonkey extension in their browser
* It's possible this script also works with other extension like Violentmonkey, Greasemonkey, FireMonkey, etc
* But this hasn't been tested, so I won't guarantee for anything
* The following installation manual therefore explains the installation process in Tampermonkey
*
* Installation:
* 1. Install Tampermonkey in your browser
* 2. Open Dashboard --> Utilities --> Import from URL
* 3. Insert https://www.pokewiki.de/Benutzer:RobbiRobb/EpisodeGallery.js?action=raw&ctype=text/javascript and click install
* 4. Confirm the installation process of the script
* 5. Open or reload https://www.pokewiki.de/images/tv/
* 6. Done
**/
(function() {
    'use strict';

    $(".list thead tr .n").each((index, el) => {
        $(el).after($("<th></th>", {class: "v", text: "View:"}));
    });

    $(".list tbody tr:first-child .n").each((index, el) => {
        $(el).after($("<td></td>"));
    });

    $(".list tbody tr:not(:first-child) .n").each((index, el) => {
        $(el).after($("<td></td>").append($("<img></img>", {
			src: "https://doc.wikimedia.org/oojs-ui/master/demos/dist/themes/wikimediaui/images/icons/eye.svg",
			alt: "view",
			class: "view"
		}).on("click", () => {
            JSZipUtils.getBinaryContent(location + $(el).find("a").attr("href"), (err, data) => {
                if(err) {
                    console.log(err);
                    return;
                }

                JSZip.loadAsync(data).then((zip) => {
                    var files = Object.values(zip.files).filter((file) => {
                        return !file.dir;
                    });

                    Promise.all(files.map((file) => {
                        return file.async("base64");
                    })).then((data64) => {
                        $("body h2").text("Contents of " + $(el).find("a").attr("href"));
						$("body").append($("<div></div>", {class: "close", text: "×", title: "Close"}).on("click", () => {
							location = location;
						}));
                        $(".list").html($("<div></div>", {class: "gallery"}));
                        data64.forEach((img, id) => {
								$(".gallery").append($("<div></div>").append(
									$("<img></img>", {src: "data:image/jpeg;base64," + img})
								).append(
									$("<div></div>", {text: files[id].name.replace(".jpg", "")})
								)
                            );
                        });
                    }).catch((err) => {
                        console.log(err.message);
                    });
                });
            });
        })));
    });
    
    var style = $("<style></style>").text(`
		.gallery {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			justify-content: center;
		}
		
		.gallery > div {
			background: #F5F5F5;
			border-radius: 0.5em;
			padding: 5px;
		}
		
		.gallery > div > div {
			text-align: center;
		}
		
		.view {
			cursor: pointer;
		}
		
		.close {
			align-items: center;
			background: #EEEEEE;
			border: 2px solid #FF0000;
			border-radius: 0.1em;
			color: #FF0000;
			cursor: pointer;
			display: flex;
			font-size: 200%;
			font-weight: bold;
			height: 40px;
			justify-content: center;
			position: absolute;
			right: 30px;
			text-align: center;
			top: 10px;
			width: 40px;
		}
    `);

    $(document.head).append(style);
})();