☰

E-hentai Image-Viewer

view image conveniently

// ==UserScript==
// @name         E-hentai Image-Viewer
// @namespace    http://tampermonkey.net/
// @version      20240519
// @description  view image conveniently
// @author       You
// @match        https://e-hentai.org/g/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=e-hentai.org
// @grant        unsafeWindow
// @grant        GM_download
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    let arrDoms = document.querySelectorAll(".gdtm");

    // create menu
    let id_menu = "menu";
    let id_new_tab = "new_tab";
    let id_show_directly = "show_directly";
    let id_download = "download";
    let menu_width = 0;
    let menu_height = 0;
    {
        let rect = arrDoms[1].getBoundingClientRect();
        menu_width = rect.width;
        menu_height = rect.height;

        // let menu_style = `style = "width: ${width}px; height: ${height}px;"`;
        let button_sytle = ` style = "display:block; width:${menu_width}px; height:${
        menu_height / 3
        }px;line-height:${menu_height / 3}px;font-size: 12px; "`;

        document.querySelector("body").insertAdjacentHTML(
            "beforeend",
            `
        <div class="menu" id=${id_menu}>
            <div><button id="${id_new_tab}" ${button_sytle}>新标签页中打开</a></div>
            <div><button id="${id_show_directly}" ${button_sytle}>直接显示</a></div>
            <div><button id="${id_download}" ${button_sytle}>下载</a></div>
    </div>
        `
        );
    }

    let menu = document.querySelector("#" + id_menu);

    let menu_new_tab = document.querySelector("#" + id_new_tab);
    let menu_show_directly = document.querySelector("#" + id_show_directly);
    let menu_download = document.querySelector("#" + id_download);

    menu.style.display = "none";
    menu.style.position = "absolute";
    menu.style.top = 0;
    menu.style.left = 0;
    menu.style.width = String(menu_width) + "px";
    menu.style.height = String(menu_height) + "px";
    menu.style.backgroundColor = "gainsboro";
    menu.style.opacity = 0.7;

    async function SetSrc() {
        let parent = menu.parentNode;
        if (!parent.getAttribute("src")) {
            let url = parent.querySelector("a").href;

            let img_url = await fetchImageSrc(url);
            parent.setAttribute("src", String(img_url));

            return img_url;
        }

        return parent.getAttribute("src");
    }

    menu_new_tab.onclick = async function () {
        let img_url = await SetSrc();
        if (img_url) {
            // console.log("menu_new_tab" + img_url);
            window.open(img_url);
        }
    };

    // create hint
    let idHint = "hintEle";
    {
        let maxHeight = parseInt(window.innerHeight * 0.7);
        let maxWidth = window.innerWidth;
        let url = "";

        // ‘beforeend’：插入元素内部的最后一个子节点之后。
        document.querySelector("body").insertAdjacentHTML(
            "beforeend",
            `
        <img src="${url}";
        id = "${idHint}";
        style="
            max-width: ${maxWidth}px;
            max-height: ${maxHeight}px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 999;
            display: none;
        ">
        `
        );
    }

    let hintEle = document.querySelector("#" + idHint);
    hintEle.onload = function()
    {
         hintEle.style.display = "block";
         let left = parseInt(hintEle.style.left);
         let offset = window.innerWidth < hintEle.offsetWidth + left ? -(hintEle.offsetWidth + left - window.innerWidth): 0;
        //console.log(`hintEle.style.width: ${hintEle.style.width}, window.innerWidth: ${window.innerWidth}`);
       // console.log(`left: ${left}, offset: ${offset}, left+= offset: ${left + offset}`);
         left += offset;

         hintEle.style.left = String(left) + "px";
    }

    menu_show_directly.onclick = async function () {
        let img_url = await SetSrc();

        show_hint();
    };

    function show_hint() {
        if (menu.parentNode.getAttribute("src")) {
            hintEle.src = menu.parentNode.getAttribute("src");
        }
    }

    // add handlers
    for (let dom of arrDoms) {
            dom.onmouseover = function () {
            dom.style.backgroundColor = "black";

            let rect = this.getBoundingClientRect();
            hintEle.style.top = String(rect.bottom + window.scrollY) + "px";
            hintEle.style.left = String(rect.left + window.scrollX ) + "px";

            dom.style.position = "relative";
            dom.appendChild(menu);
            menu.style.display = "block";

            if (dom.getAttribute("src")) {
                /*hintEle.style.display = "block";
      hintEle.src = dom.getAttribute("src");*/
                show_hint();
            }
        }; // if (!menu.src)

        dom.onmouseout = function () {
            dom.style.backgroundColor = "";
            hintEle.style.display = "none";
            menu.style.display = "none";
        };
    }

    // 创建一个异步函数来获取网页内容
    async function fetchImageSrc(url) {
        try {
            // 使用 Fetch API 发起请求
            const response = await fetch(url);

            // 确认响应状态为成功
            if (!response.ok) {
                throw new Error("请求图片失败");
            }

            // 解析响应的 HTML 内容
            const html = await response.text();

            // 创建一个虚拟 DOM 对象
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");

            // 获取指定元素的内容
            const imgUrl = doc.querySelector("#i3 img").src;

            // 返回获取到的图片 URL
            console.log("fetchImageSrc: 获取图片地址成功");
            return imgUrl;
        } catch (error) {
            console.error("在进行获取页面的时候, 发生了这样的问题:", error);
            return null;
        }
    }

    /*
// 调用函数并处理结果
fetchImageSrc()
  .then((imgUrl) => {
    if (imgUrl) {
      console.log("The image URL is:", imgUrl);
    } else {
      console.log("Failed to retrieve image URL.");
    }
  })
  .catch((err) => {
    console.error("Error occurred:", err);
  });
*/


    menu_download.onclick = async function () {
        let img_url = await SetSrc();
        GM_download(img_url, "pic"+String(Math.ceil(Math.random()*10000)));
    };

})();