Knockout Flickr test

by kougiland

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div data-bind="visible: activeView() == 'sets'">User Name:
    <input data-bind="value: user_name, valueUpdate: 'blur'" /> <span data-bind="visible: fid() !==''"> flickr ID: <span data-bind="text: fid"></span></span>
    <br/>
    <ul class="photosets" data-bind="foreach:photosets">
        <li data-bind="attr:{sid:id}, style:{backgroundImage:thumb}, click: $root.setClicked"><span data-bind="text:title"></span> 
        </li>
    </ul>
</div>
<div data-bind="visible: activeView() == 'photos'"> <a href="#" class="back" data-bind="click: $root.back2set">Back</a>

    <ul
    class="photos" data-bind="foreach:photos">
        <li data-bind="attr:{href:img}, style:{backgroundImage:thumb}, click: $root.photoClicked"><span data-bind="text:title"></span> 
        </li>
        </ul>
</div>
<div class="lightbox" data-bind="with:lightbox">
    <div class="wrapper" data-bind="click:$root.closeLbx">
        <div class="image" data-bind="style:{backgroundImage:img}"></div>
        <div data-bind="text:title"></div>
    </div>
</div>
<div class="loading" data-bind="visible:loading"></div>

CSS

body {
    font-family:arial;
}
.loading {
    position:fixed;
    top:0;
    left:0;
    background:rgba(0, 0, 0, 0.7) url(https://dl.dropbox.com/u/7604339/blog/loading48.gif) center center no-repeat;
    width:100%;
    height:100%;
}
.photosets li, .photos li {
    float:left;
    display:inline-block;
    list-style:none;
    width:75px;
    height:90px;
    margin:5px;
    background-repeat:no-repeat;
    background-position:top center;
    cursor:pointer;
    position:relative;
}
.photosets span, .photos span {
    position:absolute;
    display:block;
    width:75px;
    line-height:15px;
    overflow:hidden;
    bottom:0;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:10px;
}
.lightbox .wrapper {
    position:fixed;
    top:0;
    left:0;
    background:rgba(0, 0, 0, 0.7);
    width:100%;
    height:100%;
}
.lightbox .image {
    position:absolute;
    width:80%;
    height:80%;
    top:50%;
    left:50%;
    margin:-40% -40%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size: contain;
}
.lightbox .title {
    font-size: 24px;
    color: #fff;
    padding: 5%;
}

JavaScript

var api = {
    key: "4c552076ed492a770bfe734408f3b5c3",
    url: "http://api.flickr.com/services/rest/?",
    findByUsername: function (name) {
        var dfd = $.Deferred(),
            url = api.url + "method=flickr.people.findByUsername&format=json&api_key=" + api.key + "&username=" + name + "&jsoncallback=?";
        $.getJSON(url, function (data) {
            if (data.stat == 'ok') {
                dfd.resolve(data.user.id);
            } else {
                dfd.reject();
            }
        });
        return dfd;
    },
    getSetList: function (fid) {
        var dfd = $.Deferred(),
            url = api.url + "method=flickr.photosets.getList&format=json&api_key=" + api.key + "&user_id=" + fid + "&jsoncallback=?";
        $.getJSON(url, function (data) {
            if (data.stat == 'ok') {
                console.dir(data);
                dfd.resolve(data.photosets.photoset);
            } else {
                dfd.reject();
            }
        });
        return dfd;
    },
    getSetPhotos: function (sid) {
        var dfd = $.Deferred(),
            url = api.url + "method=flickr.photosets.getPhotos&api_key=" + api.key + "&photoset_id=" + sid + "&extras=url_sq,url_m&media=photos&format=json&jsoncallback=?";
        $.getJSON(url, function (data) {
            if (data.stat == 'ok') {
                console.dir(data);
                dfd.resolve(data.photoset.photo);
            } else {
                dfd.reject();
            }
        });
        return dfd;
    }
},
obj = {
    PhotoSet: function (d) {
        this.id = d.id;
        this.title = d.title._content;
        this.thumb = "url(http://farm" + d.farm + ".static.flickr.com/" + d.server + "/" + d.primary + "_" + d.secret + "_s.jpg)";
    },
    Photo: function (d) {
        this.title = d.title;
        this.thumb = "url(" + d.url_sq + ")";
        this.img = d.url_m;
    }
};

function VM() {
    var self = this;
    self.loading = ko.observable(false);
    self.activeView...