pixivのdiscoveryをより快適に楽しむ。このコードを使うときは連絡をください。

enlarging-pixiv-discovery.js

let backgroundImageToUrl = bgImage => {
    const url = bgImage.replace('url(', '').replace(')','').replace(';','').replace('"','').replace('"','');

    return url.replace(/c\/[^/]+\//,'');
}

let setupEnlarging = (btn, panel) => {
    document.getElementsByTagName('figure').forEach(figureElement => {
        let imageContainer = Array.from(figureElement.getElementsByTagName('div')).filter(e => e.classList.length > 0 && e.style.backgroundImage)[0];
        if (imageContainer) {
            btnContainer = imageContainer.parentElement.parentElement;
            if (btnContainer.getElementsByClassName('enlarge-pic').length == 0) {
                const with_url = btn.cloneNode(true);
                with_url.dataset.imageUrl = backgroundImageToUrl(imageContainer.style.backgroundImage);
                btnContainer.appendChild(with_url);
            }
        }
    });

    document.getElementsByClassName('enlarge-pic').forEach(elm => {
        if (!elm.dataset.eventSet) {
            elm.dataset.eventSet = true;
            elm.addEventListener('click', evt => {
                evt.preventDefault();
                evt.stopPropagation();
                panel.show(evt.target.dataset.imageUrl);
            });
        }
    });
}
let createImagePanel = () => {
    let z = document.createElement('img');
    z.style.display = 'none';
    z.style.objectFit = 'contain';
    z.width = window.innerWidth;
    z.height = window.innerHeight;
    z.style.position = "fixed";
    z.style.top = 0;
    z.style.left = 0;
    z.id = 'image-panel';
    z.style.zIndex = 10000;
    z.style.backgroundColor = "gray";
    z.addEventListener('click', e => {e.target.style.display = "none";});
    z.show = url => {
        z.src = url;
        z.style.display = "block";
    }
    return z;
}

let setupImagePanel = imagePanel =>{
    document.body.appendChild(imagePanel);
}

let createEnlargingButton = () => {
    let btn = document.createElement('button');
    btn.style.padding = "8px";
    btn.form = "";
    btn.type = "button";
    btn.classList.add('enlarge-pic');
    btn.style.position = "absolute";
    btn.style.top = 0;
    btn.style.left = 0;
    btn.textContent = "拡大";
    return btn;
}

(() => {
    const imagePanel = createImagePanel();
    setupImagePanel(imagePanel);
    const btn = createEnlargingButton();
    setInterval(setupEnlarging, 500, btn, imagePanel);
})();