twitter_photo_grid.js

twitter_photo_grid.js

(function(doc, $, console){
    var images_wanted = window.prompt('現在の画面に表示される画像をグリッドでまとめます。（バグ報告は @cocoamatic まで）\n\n画像を何枚まで表示しますか？', '100');
    images_wanted = parseInt(images_wanted); 
    if(! images_wanted) return;

    var get_imgs = function(){ return $(".stream-item .AdaptiveMedia-photoContainer img") },
        keep_scrolling = function(get_imgs, wanted_img_count, then_what, wait1, wait2) {
        var img_len = get_imgs().length;
        if (! wait1) wait1 = 5000;
        if (! wait2) wait2 = 5000;
        var ok = true,
            go_on = true, 
            orig_scroll = [window.scrollX, window.scrollY],
            timer = setInterval(function(){
                    var prev_len = get_imgs().length;
                    if (ok) {
                        window.scrollTo(0,doc.body.scrollHeight); 
                        ok = false;
                        setTimeout(function(){
                            var imgs = get_imgs();
                            if (prev_len === imgs.length /* no more images to load */
                                || imgs.length > wanted_img_count /* satisfied requirement */
                            ) {
                                // stop
                                window.scrollTo(orig_scroll[0], orig_scroll[1]);
                                clearInterval(timer);
                                if ("function" === typeof then_what) 
                                    then_what.apply(doc, []);
                            }
                            else {
                                $(document).trigger("uiShowMessage", {message: imgs.length + "/" + wanted_img_count +" 枚の画像が見つかりました...お待ち下さい( ˇωˇ )"});
                            }
                            ok = true; 
                        }, wait2);
                    }
                }, wait1); 
        },
        open_grid = function(get_imgs){
            var w = window.open(),
                d = w.document,
                imgs = get_imgs();

            if (!w) {
                alert("pop up ウィンドウは開けませんでした");
                return;
            }
            /* CSSを挿入 */
            (function(rules, doc) {
                    var s = doc.createElement("style");
                    doc.head.appendChild(s);
                    for (var i = 0; i < rules.length; ++i) s.sheet.insertRule(rules[i], i);
            })([
                "ul#grid_main { list-style: none; margin: 0; padding: 0 }",
                "ul#grid_main > li { display:inline-block; width:9em; height:9em; overflow:hidden; margin:.15em; padding:0; border-radius:.2em; position:relative }",
                "ul#grid_main > li a.thumbnail { display: inline-block; height: 100%; width: 100% }",
                "ul#grid_main > li a.thumbnail:hover { opacity: .9 }",
                "ul#grid_main > li a.thumbnail img { object-fit: cover; height: 100%; width: 100% }",
                "body { background: rgba(0,0,0,.8) }",
                "a.permalink {position: absolute; right: 0; bottom: 0; text-decoration: none; padding: .2em .2em .1em .4em; background-color: silver; color: #000; text-align: center; border-radius: .3em 0 0 0 }",
                "a.permalink:hover {background-color: #000; color: silver}"
            ], d);

            /* list を作成 */
            var grid_main = $("<ul></ul>").attr({id: "grid_main"});

            for (var j = 0; j < imgs.length; ++j) {
                var tweet_href= document.location.origin + $(imgs[j]).closest(".content").find("a.js-permalink").attr("href"),
                    tweet_text= $(imgs[j]).closest(".content").find(".tweet-text").text();

                /* <li><a href=...><img/></a></li> を作成*/
                var thumbnail_url = $(imgs[j]).attr("src"),
                    mat = thumbnail_url.match(/^(.*?)\.(jpg|png)$/),
                    orig_url = mat ? mat[1] + "." + mat[2] + ":orig" : thumbnail_url,
                    li = $("<li></li>"),
                    a = $("<a></a>").addClass('thumbnail').attr({target: "_blank", href: orig_url, title: tweet_text}).appendTo(li),
                    img = $("<img />").attr({src: thumbnail_url, alt: ""}).appendTo(a),
                    a2 = $("<a></a>").addClass("permalink").attr({target:"_blank", href: tweet_href}).text("▶").appendTo(li);

                li.appendTo(grid_main);
            }

            /* list を新規Windowに書き出す */ 
            $(d.body).html(grid_main);    
        } 

    keep_scrolling(get_imgs, images_wanted, function(){open_grid(get_imgs)});

})(document, jQuery, console);