D3 Examples - Facebook Photo Selector with Knockout.js

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title>Knockout Demo</title>
        <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="jquery.tmpl.js"></script>
        <script type="text/javascript" src="knockout.js"></script>
        <style type="text/css">
            .selected { 
                border: #FFFF00 3px solid;
            }
        </style>
    </head>
    <body>
    <div id="fb-root"></div>
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '248684061845315', // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          oauth      : true, // enable OAuth 2.0
          xfbml      : true  // parse XFBML
        });
        
        FB.login(function(response) {
            if (response.authResponse) {
                FB.api('/me', function(response) {
                    $(document).ready(function() { initApp(response) });
                });
            }
        }, {scope: 'user_photos'});
​
        
      };
​
      // Load the SDK Asynchronously
      (function(d){
         var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "https://connect.facebook.net/en_US/all.js";
         d.getElementsByTagName('head')[0].appendChild(js);
       }(document));
    </script>
    
    <div id="resultPane" style="display: none">
        <img id="resultImage" />
        <button onclick="location.reload()">Refresh</button>
    </div>
    
    <div id="container">
        <div id="title">
            Photos of <span class="name" data-bind="text: userName"></span>
            <select data-bind="options: albums, optionsCaption: 'Tagged Photos', optionsText: 'name',  value: currentAlbum"></select>
        </div>
        <div id="body">
            <div data-bind="visible: photos().length === 0">There are no photos in this album</div>
            <ul data-bind="template: {name: 'photosTemplate', foreach: photos, templateOptions: { viewModel: _self }}">
            </ul>
            <div data-bind="visible: loadingPhotos">Loading...</div>
            <button data-bind="click: function() { currentPage(currentPage()-1); }, enable: currentPage() > 0">&lt;</button>
            <button data-bind="click: function() { currentPage(currentPage()+1); }, enable: nextPage">&gt;</button>
        </div>
        <button data-bind="click: submitImage, enable: currentPhoto">Submit</button>
    </div>
    <script type="text/html" id="photosTemplate">
        <li data-bind="click: function() { $item.viewModel.selectPhoto($data); }"><img data-bind="css: { selected: $item.viewModel.currentPhoto() === $data }" src="${picture}"/></li>
    </script>
    
    <script type="text/javascript">
    function initApp(user){     
    
        var viewModel = {
            userId: user.id,
            userName: user.name,
            loadingPhotos: ko.observable(true),
            albums: ko.observableArray(),
            photos: ko.observableArray(),
            currentPage: ko.observable(0),
            nextPage: ko.observable(false),
            currentPhoto: ko.observable(undefined),
            currentAlbum: ko.observable(undefined),
            
            selectPhoto: function(photo) {
                viewModel.currentPhoto(photo);
            },
            
            submitImage: function() {
                if (viewModel.currentPhoto()) {
                    $('#resultPane').show();
                    $('#resultImage').attr('src', viewModel.currentPhoto().source);
                    $('#container').hide();
                }
            },
        };
        
        viewModel._self = viewModel; //Hack for template foreach
        
        ko.dependentObservable(function() {
            var id = 'me';
            
            if (viewModel.currentAlbum()) {
                id = viewModel.currentAlbum().id;
            }
            
            viewModel.loadingPhotos(true);
            FB.api(id + '/photos', {limit: 11, offset: viewModel.currentPage() * 10}, function(response) {
                var truncatedResponse = response.data;
            
                if (truncatedResponse.length > 10) {
                    truncatedResponse.pop(); //remove the excess item
                    viewModel.nextPage(true);
                } else {
                    viewModel.nextPage(false);
                }
                
                viewModel.photos(response.data);
                viewModel.loadingPhotos(false);
            });
            
        }, viewModel);
        
        ko.dependentObservable(function() {
            viewModel.currentAlbum(); //on currentalbum changed
            
            viewModel.currentPage(0);
        }, viewModel);
        
        FB.api('me/albums', function(response) {
            viewModel.albums(response.data);
        });
        
        ko.applyBindings(viewModel, $('#container')[0]);
    }
    </script>
    
    </body>
</html>
    