From 733eb34314b3660a99893f96c8e63547d1928540 Mon Sep 17 00:00:00 2001
From: Arvind <arvindkhadri@gmail.com>
Date: Sun, 31 Aug 2014 11:29:18 +0530
Subject: [PATCH] Initial version of gallery view.  Clicking on a tag or a
 username populates the gallery with respective images.

---
 swtr/static/js/main.js    |   50 ++++++++++++++++++++++++++++++++++++++++-----
 swtr/templates/index.html |   14 +++++++++++--
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/swtr/static/js/main.js b/swtr/static/js/main.js
index 60886b3..d686da3 100644
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -735,8 +735,8 @@
   var TagCloudView = Backbone.View.extend({
     el: $('#tag-cloud'),
     events: {
-      "click #user-tag-cloud g": "userTagClicked",
-      "click #tags-tag-cloud g": "tagsTagClicked"
+      "click #user-tag-cloud g text": "userTagClicked",
+      "click #tags-tag-cloud g text": "tagsTagClicked"
     },
     initialize: function() {
       this.user_tag_el = $('#user-tag-cloud');
@@ -745,10 +745,37 @@
 
     },
     userTagClicked: function(e) {
-      console.log(e);
+      var user = $(e.currentTarget).text();
+      var swts = swtr.LDs.filter(function(swt) {
+        if(swt.get('who') == user) {
+          return swt;
+        }
+      });
+      swts = _.uniq(swts,'how'.src);
+      this.setGalleryView(swts);
+      $(this.el).hide();
     },
     tagsTagClicked: function(e) {
-      console.log('tags ',e);
+      var tag = $(e.currentTarget).text();
+      var swts = swtr.LDs.filter(function(swt) {
+        if(swt.get('how').tags){
+          if(_.contains(swt.get('how').tags, tag)) {
+              return swt;
+            }
+        }
+      });
+      this.setGalleryView(swts);
+      $(this.el).hide();
+    },
+    setGalleryView: function(swts) {
+      if(this.galleryView) {
+        //set the collection of galleryView to new set of swts to be displayed.
+        this.galleryView.collection = swts;
+        this.galleryView.render();
+      }
+      else {
+        this.galleryView = new GalleryView({collection: swts});
+      }
     },
     render: function() {
       this.renderUserTagCloud();
@@ -822,9 +849,22 @@
         .attr("transform", function(d) {
           return "translate(" + [d.x, d.y] + ")";
         })
-        .text(function(d) {console.log(d); return d.text; });
+        .text(function(d) { return d.text; });
     }
+  });
 
+  var GalleryView = Backbone.View.extend({
+    el: $("#gallery"),
+    initialize: function() {
+      this.template = _.template($("#gallery-item-template").html());
+      this.render();
+    },
+    render: function() {
+      $(this.el).html('');
+      _.each(this.collection, function(model) {
+        $(this.el).append(this.template(model.toJSON()));
+      }, this);
+    }
   });
 
   var AppRouter = Backbone.Router.extend({
diff --git a/swtr/templates/index.html b/swtr/templates/index.html
index 192f705..173a81f 100644
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -147,11 +147,13 @@
           <div id="tags-tag-cloud"></div>
           <div id="user-tag-cloud"></div>
         </div>
+        <div id="gallery">
+        </div>
       </div>
       <!-- the search page -->
       <div id="search-page" class="page"></div>
 
-      <div id="linked-data-page" class="page"></div>
+      <!-- <div id="linked-data-page" class="page"></div> <\!--  -\-> -->
 
     </div>
     <div id="app-overlay"></div>
@@ -288,6 +290,14 @@
         <label><%= tag %></label>
       </ul>
     </script>
-
+    <script type="text/template" id="gallery-item-template">
+      <div class="col-md-4 col-sm-6 ocd-item">
+        <div class="media">
+          <img src="<%= how.src %>" class="responsive thumb-image">
+        </div>
+        <div class="text">Author: <%= who %> </div>
+        <div class="text">Tags: <%= how.tags %> </div>
+      </div>
+    </script>
   </body>
 </html>
-- 
1.7.10.4