From a4bf4a40f2e76807f2ce0595ed780ae02e303321 Mon Sep 17 00:00:00 2001
From: Maxwell Salzberg <maxwell@joindiaspora.com>
Date: Sat, 28 Apr 2012 17:26:11 -0700
Subject: [PATCH] slay reLayout suckage by reading

---
 .../javascripts/app/views/canvas_view.js      | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/app/views/canvas_view.js b/app/assets/javascripts/app/views/canvas_view.js
index e613781da..db86eda74 100644
--- a/app/assets/javascripts/app/views/canvas_view.js
+++ b/app/assets/javascripts/app/views/canvas_view.js
@@ -5,6 +5,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     this.postClass = app.views.SmallFrame
     this.setupInfiniteScroll()
     this.stream.bind("reLayout", this.reLayout, this)
+    this.stream.bind("fetched", this.triggerRelayoutAfterImagesLoaded, this)
   },
 
   renderTemplate : function() {
@@ -16,7 +17,6 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     //needs to be deferred so it happens after html rendering finishes
     _.delay(_.bind(this.mason, this), 0)
 
-    this.triggerReLayouts()
   },
 
   addPostView : function(post) {
@@ -24,29 +24,27 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
   },
 
   mason : function() {
-    this.$el.isotope({
-      itemSelector : '.canvas-frame',
-      visibleStyle : {scale : 1},
-      hiddenStyle : {scale : 0.001},
-      masonry : {
-        columnWidth : 292.5
-      }
+    var el = this.$el;
+    el.imagesLoaded(function(){
+      el.isotope({
+        itemSelector : '.canvas-frame',
+        visibleStyle : {scale : 1},
+        hiddenStyle : {scale : 0.001},
+        masonry : {
+          columnWidth : 292.5
+        }
+      })
+    })
+  },
+
+  triggerRelayoutAfterImagesLoaded : function(){
+    var self = this;
+    self.$el.imagesLoaded(function(){
+      self.reLayout()
     })
   },
 
   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), 3000)
-    _.delay(_.bind(this.reLayout, this), 5000)
   }
 }));