Tumblr API で投稿内容を取得するその2

前回Tumblr API をつかって最新の投稿（しかもTextのみ）を取得しましたが、今回は様々な投稿タイプに対応させつつ最新20件を取得するように改修してみました。

DEMO

JavaScript

// forked from kimmy's "Tumblr API" http://jsdo.it/kimmy/v6o2
$(function(){
    var domain = "surprisewindow.tumblr.com";

    // https://www.tumblr.com/oauth/apps にて登録
    var api_key = "FfE6jtsNbBS39vl6ObD418bzzSwodZv01PbqV5Veo9EUByDxtv";

    $.ajax({
        url: "http://api.tumblr.com/v2/blog/"+domain+"/posts?api_key="+api_key,
        dataType: "jsonp"
    }).done(function(evt) {
        var img = new Image();
        var ms = 200;
        var $tmpl;
        
        console.log(evt);

        try {
            for (var i = 0, length = evt.response.posts.length; i < length; ++i) {
                console.log(evt.response.posts[i].type);
                switch(evt.response.posts[i].type) {
                    case "text":
                        $tmpl = $("#tmpl-text").clone(false);
                        $tmpl.find(".post-ttl").text(evt.response.posts[i].title);
                        $tmpl.find(".post-body").html(evt.response.posts[i].body);
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                    case "photo":
                        $tmpl = $("#tmpl-photo").clone(false);
                        $tmpl.find(".post-photo").css({
                            backgroundImage: "url(" + evt.response.posts[i].photos[0].alt_sizes[0].url + ")"
                        });
                        $tmpl.find(".post-body").html(evt.response.posts[i].caption);
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                    case "quote":
                        $tmpl = $("#tmpl-quote").clone(false);
                        $tmpl.find(".post-ttl").text(evt.response.posts[i].title);
                        $tmpl.find(".post-body").html(evt.response.posts[i].text);
                        $tmpl.find(".post-src").html(evt.response.posts[i].source);
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                    case "link":
                        $tmpl = $("#tmpl-link").clone(false);
                        $tmpl.find(".post-ttl").text(evt.response.posts[i].title);
                        $tmpl.find(".post-body").html(evt.response.posts[i].description);
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                    case "chat":
                        $tmpl = $("#tmpl-chat").clone(false);
                        $tmpl.find(".post-ttl").text(evt.response.posts[i].title);
                        $tmpl.find(".post-body").html(evt.response.posts[i].body.replace(/\n|\r/g, "<br />"));
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                    case "audio":
                        $tmpl = $("#tmpl-audio").clone(false);
                        $tmpl.find(".post-ttl").text(evt.response.posts[i].source_title);
                        $tmpl.find(".post-body").html(evt.response.posts[i].caption);
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                    case "video":
                        $tmpl = $("#tmpl-video").clone(false);
                        $tmpl.find(".post-ttl").text(evt.response.posts[i].source_title);
                        $tmpl.find(".post-photo").css({
                            backgroundImage: "url(" + evt.response.posts[i].thumbnail_url + ")"
                        });
                        $tmpl.find(".post-body").html(evt.response.posts[i].caption);
                        $tmpl.find(".post-footer").text(evt.response.posts[i].date);
                        break;
                }

                $tmpl.find(".post-link").attr({
                    href: evt.response.posts[i].post_url,
                    target: "_blank"
                });
                
                $tmpl.appendTo($("#news"));
                $tmpl.css({
                    display: "block"
                });
            }
        } catch(err) {
            console.log(err);
        }
    });
});

HTML

<div id="news"></div>

<div id="tmpl-text" class="post">
    <p class="post-ttl"></p>
    <p class="post-body"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

<div id="tmpl-photo" class="post">
    <p class="post-photo"></p>
    <p class="post-body"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

<div id="tmpl-quote" class="post">
    <p class="post-body"></p>
    <p class="post-src"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

<div id="tmpl-link" class="post">
    <p class="post-ttl"></p>
    <p class="post-body"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

<div id="tmpl-chat" class="post">
    <p class="post-ttl"></p>
    <p class="post-body"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

<div id="tmpl-audio" class="post">
    <p class="post-ttl"></p>
    <p class="post-body"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

<div id="tmpl-video" class="post">
    <p class="post-photo"></p>
    <p class="post-body"></p>
    <p class="post-footer" class="footer"></p>
    <a class="post-link"></a>
</div>

SCSS

body {
    word-wrap: break-word;
    background-color: #263238;
}

.post {
    display: none;
    position: relative;
    margin: 5px;
    padding: 10px;
    font-family: "Courier New", Courier, monospace;
    background: #fff;
}

.post-ttl {
    padding: 10px 10px 0 10px;
    color: #494949;
    font-size: 16px;
    font-weight: bold;
}

.post-body, .post-src {
    padding: 10px;
    color: #6e7173;
    line-height: 15px;

    div, p, a {
        color: #6e7173;
        font-size: 13px;
        line-height: 15px;
    }
}

.post-photo {
    margin: auto;
    width: 300px; height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.post-footer {
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    color: #666;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    background: #eaeaea;
}

.post-link {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}