Mastodon - Lightbox for public pages

mastodon-lightbox.user.js

// ==UserScript==
// @name         Mastodon - Lightbox for public pages
// @namespace    https://github.com/unarist/
// @version      0.1
// @author       unarist
// @downloadURL  https://gist.github.com/unarist/c2ffb91bc7157110653dfd8246c15cd7/raw/mastodon-lightbox.user.js
// @include      https://*/@*
// @include      https://*/users/*/statuses/*
// @include      https://*/users/*/updates/*
// @grant        none
// ==/UserScript==

(function() {

    const tag = (name, props = {}, children = []) => {
        const e = Object.assign(document.createElement(name), props);
        if (typeof e.style === "object") Object.assign(e.style, props.style);
        (children.forEach ? children : [children]).forEach(c => e.appendChild(c));
        return e;
    };
    function here(code) {
        return code.toString().match(/\/\*([^]*)\*\//)[1];
    }

    const action = {
        show: (elem) => Object.assign(elem.style, { display: 'block', opacity: 1 }),
        hide: (elem) => (elem.addEventListener('transitionend', () => elem.style.display = 'none', { once: 1 }), elem.style.opacity = 0)
    };

    const container = tag('div', {
        style: "position:fixed; top:0; width:100%; height:100%; background: rgba(0,0,0,0.8); display:none; z-index: 999; transition: 100ms",
        onclick: e => action.hide(container),
        onkeydown: e => e.keyCode === 27 && action.hide(container)
    }, [
        tag('div', { style: "height:100%; border:1em solid transparent; box-sizing:border-box;" })
    ]);

    document.body.appendChild(container);

    links = document.querySelectorAll('.media-item > .u-photo, .media-gallery__item-thumbnail');
    for (const link of links) {
        link.addEventListener('click', (e) => {
            const img = new Image();
            img.src = link.href;
            img.onload = () => {
                var scale = (window.innerWidth < img.naturalWidth || window.innerHeight < img.naturalHeight) ? 'contain' : 'auto';
                container.firstChild.style.background = `url("${link.href}") center/${scale} no-repeat`;
                action.show(container);
            };

            e.preventDefault();
        });
    }
})();