animate isotope! and inject image height in relation to ratio for quicker organization. [ci skip]

app/assets/javascripts/app/views/canvas_view.js

@@ -11,26 +11,17 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     this.stream.items.each(_.bind(function(post){
       this.$el.append(this.createPostView(post).render().el);
     }, this))
-    //needs to be defered so it happens after html rendering finishes
-    _.defer(_.bind(this.mason, this))
 
-    // Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
+    //needs to be deferred so it happens after html rendering finishes
-    // ever little bit for a while after loading
+    _.delay(_.bind(this.mason, this), 0)
-    // gross hax, bro ;-p
+
-    _.delay(_.bind(this.reLayout, this), 200)
+    this.triggerReLayouts()
-    _.delay(_.bind(this.reLayout, this), 500)
-    _.delay(_.bind(this.reLayout, this), 1000)
-    _.delay(_.bind(this.reLayout, this), 2000)
-    _.delay(_.bind(this.reLayout, this), 3000)
-    _.delay(_.bind(this.reLayout, this), 4000)
-    _.delay(_.bind(this.reLayout, this), 5000)
   },
 
   addPostView : function(post) {
     _.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
   },
 
-
   mason : function() {
     this.$el.isotope({
       itemSelector : '.canvas-frame',
@@ -42,5 +33,19 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
 
   reLayout : function(){
     this.$el.isotope("reLayout")
+  },
+
+  triggerReLayouts : function(){
+    // Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
+    // ever little bit for a while after loading
+    // gross hax, bro ;-p
+
+    _.delay(_.bind(this.reLayout, this), 200)
+    _.delay(_.bind(this.reLayout, this), 500)
+    _.delay(_.bind(this.reLayout, this), 1000)
+    _.delay(_.bind(this.reLayout, this), 2000)
+    _.delay(_.bind(this.reLayout, this), 3000)
+    _.delay(_.bind(this.reLayout, this), 4000)
+    _.delay(_.bind(this.reLayout, this), 5000)
   }
 }));

app/assets/javascripts/app/views/small_frame.js

@@ -1,5 +1,8 @@
 app.views.SmallFrame = app.views.Base.extend({
 
+  SINGLE_COLUMN_WIDTH : 265,
+  DOUBLE_COLUMN_WIDTH : 560,
+
   className : "canvas-frame",
 
   templateName : "small-frame",
@@ -20,7 +23,12 @@ app.views.SmallFrame = app.views.Base.extend({
   presenter : function(){
     //todo : we need to have something better for small frame text, probably using the headline() scenario.
     return _.extend(this.defaultPresenter(),
-      {text : this.model && app.helpers.textFormatter(this.model.get("text"), this.model)})
+      {text : this.model && app.helpers.textFormatter(this.model.get("text"), this.model),
+       adjustedImageHeight : this.adjustedImageHeight()})
+  },
+
+  initialize : function() {
+    this.$el.addClass([this.dimensionsClass(), this.colorClass(), this.frameClass()].join(' '))
   },
 
   postRenderTemplate : function() {
@@ -54,11 +62,22 @@ app.views.SmallFrame = app.views.Base.extend({
     return [baseClass, textClass, "sticky-note"].join(" ")
   },
 
-
   dimensionsClass : function() {
     return (this.model.get("favorite")) ?  "x2 width height" : ""
   },
 
+  adjustedImageHeight : function() {
+    if(!this.model.get("photos")[0]) { return }
+
+    var modifiers = [this.dimensionsClass(), this.colorClass()].join(' ')
+
+    var firstPhoto = this.model.get("photos")[0]
+      , width = (modifiers.search("x2") != -1 ? this.DOUBLE_COLUMN_WIDTH : this.SINGLE_COLUMN_WIDTH)
+      , ratio = width / firstPhoto.dimensions.width;
+
+    return(ratio * firstPhoto.dimensions.height)
+  },
+
   favoritePost : function(evt) {
     if(evt) { evt.stopImmediatePropagation(); evt.preventDefault() }
 

app/assets/stylesheets/new-templates.css.scss

@@ -14,5 +14,7 @@
 /* font overrides */
 @import 'new_styles/typography';
 
+/* isotope */
+@import 'new_styles/isotope_transitions';
 
 @include video-overlay();

app/assets/stylesheets/new_styles/_canvas.scss

@@ -259,13 +259,8 @@ body {
   }
 
   &.wallpaper {
-    .content{
-      display: table;
-    }
-
     .image-container {
       background-color: black;
-      display: table-cell;
     }
 
     img { max-height: 100% }

app/assets/stylesheets/new_styles/_isotope_transitions.scss

@@ -0,0 +1,25 @@
+.isotope,
+.isotope .isotope-item {
+/* change duration value to whatever you like */
+  -webkit-transition-duration: 0.4s;
+  -moz-transition-duration:    0.4s;
+  -ms-transition-duration:     0.4s;
+  -o-transition-duration:      0.4s;
+  transition-duration:         0.4s;
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+  -moz-transition-property:    height, width;
+  -ms-transition-property:     height, width;
+  -o-transition-property:      height, width;
+  transition-property:         height, width;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+  -moz-transition-property:    -moz-transform, opacity;
+  -ms-transition-property:     -ms-transform, opacity;
+  -o-transition-property:      top, left, opacity;
+  transition-property:         transform, opacity;
+}

app/assets/templates/small-frame.jst.hbs

@@ -5,7 +5,7 @@
     {{#if photos}}
         <div class="image-container">
             {{#each photos}}
-                <img src="{{sizes.large}}" />
+                <img src="{{sizes.large}}" style="height:{{../adjustedImageHeight}}px;" />
             {{/each}}
         </div>
     {{/if}}

spec/javascripts/app/views/small_frame_view_spec.js

@@ -2,7 +2,13 @@ describe("app.views.SmallFrame", function(){
   beforeEach(function(){
     this.model = factory.post({
       photos : [
-        factory.photoAttrs({sizes : {large : "http://tieguy.org/me.jpg"}}),
+        factory.photoAttrs({sizes : {
+           large : "http://tieguy.org/me.jpg"
+          },
+          dimensions : {
+            width : 100,
+            height : 200 }
+        }),
         factory.photoAttrs({sizes : {large : "http://whatthefuckiselizabethstarkupto.com/none_knows.gif"}}) //SIC
       ],
 
@@ -30,8 +36,17 @@ describe("app.views.SmallFrame", function(){
     })
   })
 
-  describe("photos", function() {
+  context("images", function() {
-    // ratio pending...
+    it("appends the correct dimensions to an image, given a model with an image", function(){
+      var firstPhoto = this.model.get("photos")[0]
+
+      this.view.SINGLE_COLUMN_WIDTH = 100
+      expect(this.view.adjustedImageHeight(firstPhoto)).toBe(200)
+      this.view.SINGLE_COLUMN_WIDTH = 200
+      expect(this.view.adjustedImageHeight(firstPhoto)).toBe(400)
+      this.view.SINGLE_COLUMN_WIDTH = 50
+      expect(this.view.adjustedImageHeight(firstPhoto)).toBe(100)
+    })
   })
 
   describe("redirecting to a post", function(){