initial photo page functionality is back, featuring backbone and handlebars

app/controllers/photos_controller.rb

@@ -29,9 +29,12 @@ class PhotosController < ApplicationController
         @contacts_of_contact_count = 0
       end
 
-      @posts = current_user.photos_from(@person).paginate(:page => params[:page])
+      @posts = current_user.photos_from(@person)
       
-      render 'people/show'
+      respond_to do |format|
+        format.all { render 'people/show' }
+        format.json{ render_for_api :backbone, :json => @posts, :root => :photos }
+      end
 
     else
       flash[:error] = I18n.t 'people.show.does_not_exist'

public/javascripts/app/collections/photos.js

@@ -0,0 +1,12 @@
+app.collections.Photos = Backbone.Collection.extend({
+  url : "/photos",
+
+  model: function(attrs, options) {
+    var modelClass = app.models.Photo
+    return new modelClass(attrs, options);
+  },
+
+  parse: function(resp){
+    return resp.photos;
+  }
+});

public/javascripts/app/models/photo.js

@@ -0,0 +1,14 @@
+app.models.Photo = Backbone.Model.extend({
+  urlRoot : "/photos",
+
+  initialize : function() {},
+
+  createdAt : function() {
+    return this.timeOf("created_at");
+  },
+
+  timeOf: function(field) {
+    return new Date(this.get(field)) /1000;
+  },
+
+});

public/javascripts/app/models/photos.js

@@ -0,0 +1,65 @@
+app.models.Photos = Backbone.Model.extend({
+  initialize : function(){
+    this.photos = new app.collections.Photos([], this.photoOptions());
+  },
+
+  photoOptions :function(){
+      var order = this.sortOrder();
+      return {
+          comparator : function(photo) { return -photo[order](); }
+      }
+  },
+
+  url : function() {
+    return _.any(this.photos.models) ? this.timeFilteredPath() : this.basePath()
+  },
+
+  _fetching : false,
+
+  fetch : function(){
+    if(this._fetching) { return false; }
+    var self = this;
+
+    // we're fetching the collection... there is probably a better way to do this
+    self._fetching = true;
+
+    this.photos
+      .fetch({
+        add : true,
+        url : self.url()
+      })
+      .done(
+        function(resp){
+          // we're done fetching... there is probably a better way to handle this
+          self._fetching = false;
+
+          self.trigger("fetched", self);
+
+          // all loaded?
+          if(resp.photos && resp.photos.length == 0) {
+            self.trigger("allPostsLoaded", self);
+          }
+        }
+      );
+      
+    return this;
+  },
+  
+  basePath : function(){
+    return document.location.pathname;
+  },
+
+  timeFilteredPath : function(){
+   return this.basePath() + "?max_time=" + this.maxTime();
+  },
+
+  maxTime: function(){
+    var lastPost = _.last(this.photos.models);
+    return lastPost[this.sortOrder()]()
+  },
+
+  sortOrder : function() {
+    return "createdAt";
+  },
+
+});

public/javascripts/app/router.js

@@ -7,6 +7,7 @@ app.Router = Backbone.Router.extend({
     "liked": "stream",
     "mentions": "stream",
     "people/:id": "stream",
+    "people/:id/photos": "photos",
     "u/:name": "stream",
     "followed_tags": "stream",
     "tags/:name": "stream",
@@ -15,7 +16,7 @@ app.Router = Backbone.Router.extend({
   },
 
   stream : function() {
-    app.stream = new app.models.Stream()
+    app.stream = new app.models.Stream();
     app.page = new app.views.Stream({model : app.stream}).render();
     app.publisher = app.publisher || new app.views.Publisher({collection : app.stream.posts});
 
@@ -23,6 +24,13 @@ app.Router = Backbone.Router.extend({
 
     $("#main_stream").html(app.page.el);
     $('#selected_aspect_contacts .content').html(streamFacesView.el);
+  },
+
+  photos : function() {
+    app.photos = new app.models.Photos();
+    app.page = new app.views.Photos({model : app.photos}).render();
+
+    $("#main_stream").html(app.page.el);
   }
 });
 

public/javascripts/app/templates/photo.handlebars

@@ -0,0 +1,3 @@
+<a href="#" class="photo-link">
+  <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+</a>

public/javascripts/app/views/photo_view.js

@@ -0,0 +1,13 @@
+app.views.Photo = app.views.StreamObject.extend({
+
+  templateName: "photo",
+
+  className : "photo loaded",
+
+  initialize : function() {
+    $(this.el).attr("id", this.model.get("guid"));
+    this.model.bind('remove', this.remove, this);
+    return this;
+  }
+  
+});

public/javascripts/app/views/photos_view.js

@@ -0,0 +1,56 @@
+app.views.Photos = Backbone.View.extend({
+
+  events : {},
+
+  initialize : function(options) {
+    this.photos = this.model;
+    this.collection = this.model.photos;
+
+    this.setupEvents();
+    //this.setupLightbox(); ERROR: "imageThumb is undefined" ...
+  },
+
+  setupEvents : function(){
+    this.photos.bind("fetched", this.removeLoader, this)
+    this.collection.bind("add", this.addPhoto, this);
+  },
+
+  addPhoto : function(photo) {
+    var photoView = new app.views.Photo({ model: photo });
+
+    $(this.el)[
+      (this.collection.at(0).id == photo.id)
+        ? "prepend"
+        : "append"
+    ](photoView.render().el);
+
+    return this;
+  },
+
+  render : function(evt) {
+    if(evt) {evt.preventDefault(); }
+
+    if(this.model.fetch()) {
+      this.appendLoader();
+    };
+    
+    return this;
+  },
+
+  appendLoader: function(){
+    $("#paginate").html($("<img>", {
+      src : "/images/static-loader.png",
+      "class" : "loader"
+    }));
+  },
+
+  removeLoader: function() {
+    $("#paginate").empty();
+  },
+
+  setupLightbox : function(){
+    this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
+    $(this.el).delegate("a.photo-link", "click", this.lightbox.lightboxImageClicked);
+  },
+
+});