Added masonry for layouting

dam5s · Jul 13, 2013 · 114b901 · 114b901
1 parent 8363af0
commit 114b901
Show file tree

Hide file tree

Showing 6 changed files with 3,320 additions and 3 deletions.
diff --git a/app/assets/article.scss b/app/assets/article.scss
@@ -3,7 +3,7 @@
 article {
   padding-bottom: 1em;
   padding-left: 1em;
-  @include column(6);
+  width: 50%;
   @include box-sizing(border-box);
 
   &.hidden {
@@ -65,6 +65,14 @@ article {
       margin-bottom: 1em;
     }
 
+    pre {
+      word-wrap: nowrap;
+      white-space: pre;
+      background-color: $darker_brown;
+      color: #fff;
+      overflow-x: auto;
+    }
+
     code {
       font-size: 95%;
       font-family: 'Source Code Pro' Sans-Serif;

diff --git a/app/views/aggregator/index.html.haml b/app/views/aggregator/index.html.haml
@@ -1,6 +1,6 @@
 %script{type: 'text/html', id: 'article_tmpl'}
   :plain
-    <article class="<%=feed_type%>">
+    <article class="<%=feed_type%>" style="opacity: 0">
       <header>
         <h1>
           <a href="<%=link%>"><%=title%></a>

diff --git a/config/jammit.yml b/config/jammit.yml
@@ -7,6 +7,8 @@ javascripts:
   aggregator:
     - public/js/jquery-1.8.1.js
     - public/js/underscore.js
+    - public/js/masonry.js
+    - public/js/images_loaded.js
     - public/js/aggregator/article.js
     - public/js/aggregator/feed.js
     - public/js/aggregator/service.js

diff --git a/public/js/aggregator/articles_view.js b/public/js/aggregator/articles_view.js
@@ -3,16 +3,32 @@ var SMF = SMF || {};
 SMF.ArticlesView = function() {
   this.$el = $('#articles');
   this.template = $('#article_tmpl').html();
+  this.masonry = new Masonry(document.querySelector("#articles"), {itemSelecotr: "article"});
+  this.articleElements = null;
 };
 
 SMF.ArticlesView.prototype = {
   render: function() {
     var self = this;
-    this.$el.html('');
+
+    var $articles = $("article", self.$el);
+    if ($articles.length > 0) {
+      this.masonry.remove($articles);
+      $articles.remove();
+    }
 
     _(this.articles).each(function(article) {
       var renderedArticle = _.template(self.template, article);
       self.$el.append(renderedArticle);
     });
+
+    var $articles = $("article", self.$el);
+
+    this.$el.imagesLoaded(function() {
+      setTimeout(function() {
+        self.masonry.appended($articles);
+        self.masonry.layout();
+      }, 800);
+    });
   }
 };