// ==UserScript==
// @name         SOSAKA IMAGES
// @version      1
// @match        https://2ch.hk/*
// @match        https://2ch.life/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
#thread-images {
    display: flex;
    flex-wrap: wrap;
}
#thread-images > .post__image {
    min-width: 180px;
}
`);

const container = createElement(`
    <div id='thread-images' style='display: none;'></div>
`);

const button = createElement(`
    <div style="width: 16px; height: 16px; cursor: pointer;">
         <svg viewBox="0 0 24 24">
             <path d="M22,16V4A2,2 0 0,0 20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16M11,12L13.03,14.71L16,11L20,16H8M2,6V20A2,2 0 0,0 4,22H18V20H4V6"
                   fill="#F5F5F5"/>
         </svg>
    </div>
    `,
    { onclick: toggleImages }
);

function init() {
    document.querySelector('div.tn').appendChild(button);
    document.querySelector('div[de-form], div#js-posts').prepend(container);
} if (/^https?:\/\/2ch\.(hk|life)\/\w+\/res\/\d+\.html[\?#]*/.test(document.location.href)) init();

function toggleImages() {
    container.style.display = container.style.display ? '' : 'none';

    if (!container.childNodes.length) {
        document.querySelectorAll('.post__image').forEach(addImage);

        const observer = new MutationObserver(ml => {
            ml.forEach(m => m.addedNodes.forEach(n => { n.dispatchEvent(new MouseEvent('mouseover')); n.querySelectorAll('.post__image').forEach(addImage) } ));
        });

        observer.observe(document.querySelector('.thread'), { childList: true });
        document.querySelectorAll('.post').forEach(p => p.dispatchEvent(new MouseEvent('mouseover')));
    }
}

function addImage(i) {
    const el = i.cloneNode(true);
    const originalPrev = i.querySelector('.post__file-preview');
    const prev = el.querySelector('.post__file-preview');
    const link = el.querySelector('.post__image-link');
    prev.id = '';
    prev.onclick = () => { originalPrev.click(); return false; };
    link.href = '';
    container.appendChild(el);
}

function createElement(html, assign, attributes) {
    const container = document.createElement('div');
    container.innerHTML = html.trim();
    const element = container.childNodes[0];
    element.remove();
    if (assign) Object.assign(element, assign);
    if (attributes) Object.keys(attributes).forEach(k => element.setAttribute(k, attributes[k]));
    return element;
}