simple image viewer; open all image-link in new tab/window

img-link-viewer.let.js

// ==Bookmarklet==
// @name ->*img-link
// @namespace   http://noromanba.flavors.me
// @description simple image viewer; open all image-link in new tab/window
// @include     http://*
// @include     https://*
// @version     2016.6.14.0
// @homepage    https://gist.github.com/noromanba/026e209fd5ee5e41ff6193740368f449
// @contributor os0x        http://let.hatelabo.jp/os0x/let/gYC-xpO93uu1BA
// @contributor noromanba   http://let.hatelabo.jp/noromanba/let/hLHX5oTN2bUh (Fork of)
// @author      noromanba   http://noromanba.flavors.me
// @license     MIT License http://opensource.org/licenses/MIT
// ==/Bookmarklet==

// UserScript-like Metadata c.f.
// https://github.com/mrcoles/bookmarklet

// Devel
// https://gist.github.com/noromanba/026e209fd5ee5e41ff6193740368f449


// for twitter.com
// http://let.hatelabo.jp/noromanba/let/hJmcyb717pBx

(() => {
    'https://gist.github.com/noromanba/026e209fd5ee5e41ff6193740368f449';

    const fit = (page, nodes) => {
        // debounce
        // https://gist.github.com/noromanba/2669793
        let timer;
        const threshold = 100;
        timer = setTimeout(() => {
            page.addEventListener('resize', () => {
                clearTimeout(timer);

                // TODO subtract scrollbar height/width w/o maximize
                Array.from(nodes, node => {
                    node.style.maxHeight = Math.min(
                        page.innerHeight,
                        page.document.documentElement.clientHeight
                    ) + 'px';
                    node.style.maxWidth = Math.min(
                        page.innerWidth,
                        page.document.documentElement.clientWidth
                    ) + 'px';
                });
            });
        }, threshold);
    };

    const open = () => {
        const container = document.createDocumentFragment().appendChild(document.createElement('div'));

        const style = container.style;
        style.marginLeft = 'auto';
        style.marginRight = 'auto';
        style.textAlign = 'center';

        Array.from(document.links, (link, idx) => {
            // TBD new URL()
            if (!/\.(?:jpe?g|png|gif)(?:\?|:|$)/i.test(link)) return;

            const img = document.createElement('img');
            img.src = link;

            img.alt = link.alt || link;
            img.title = idx + 1;
            img.tabIndex = 0;

            // XXX redundant
            img.style.maxHeight = Math.min(
                window.innerHeight,
                document.documentElement.clientHeight
            ) + 'px';
            img.style.maxWidth = '100%';

            container.appendChild(img);
            container.appendChild(document.createElement('br'));
        });
        if (container.children.length < 1) return;

        // TBD 'total' merge into 'img.title'
        const total = document.createElement('div');
        total.style.color = '#EEE';
        const images = container.querySelectorAll('img');
        total.textContent = images.length + ' | ';

        const src = total.appendChild(document.createElement('a'));
        src.href = location.href;
        src.textContent = location.href;
        src.style.color = '#EEE';

        container.insertBefore(total, container.firstChild);

        // TODO Firefox immediately close new window
        const page = window.open('about:blank', '_blank');
        page.document.title = document.title;
        page.document.body.style.backgroundColor = 'black';

        page.document.body.appendChild(container);

        fit(page, images);
    };
    open();
})();

// Bookmarklet
// http://userjs.up.seesaa.net/js/bookmarklet.html
/*
javascript:(()=>{'https://gist.github.com/noromanba/026e209fd5ee5e41ff6193740368f449';const fit=(page,nodes)=>{let timer;const threshold=100;timer=setTimeout(()=>{page.addEventListener('resize',()=>{clearTimeout(timer);Array.from(nodes,node=>{node.style.maxHeight=Math.min(page.innerHeight,page.document.documentElement.clientHeight)+'px';node.style.maxWidth=Math.min(page.innerWidth,page.document.documentElement.clientWidth)+'px';});});},threshold);};const open=()=>{const container=document.createDocumentFragment().appendChild(document.createElement('div'));const style=container.style;style.marginLeft='auto';style.marginRight='auto';style.textAlign='center';Array.from(document.links,(link,idx)=>{if(!/\.(?:jpe?g|png|gif)(?:\?|:|$)/i.test(link))return;const img=document.createElement('img');img.src=link;img.alt=link.alt||link;img.title=idx+1;img.tabIndex=0;img.style.maxHeight=Math.min(window.innerHeight,document.documentElement.clientHeight)+'px';img.style.maxWidth='100%';container.appendChild(img);container.appendChild(document.createElement('br'));});if(container.children.length<1)return;const total=document.createElement('div');total.style.color='#EEE';const images=container.querySelectorAll('img');total.textContent=images.length+'|';const src=total.appendChild(document.createElement('a'));src.href=location.href;src.textContent=location.href;src.style.color='#EEE';container.insertBefore(total,container.firstChild);const page=window.open('about:blank','_blank');page.document.title=document.title;page.document.body.style.backgroundColor='black';page.document.body.appendChild(container);fit(page,images);};open();})();
*/