Commit 733eb34314b3660a99893f96c8e63547d1928540

  • avatar
  • arvind
  • Sun Aug 31 11:29:18 IST 2014
Initial version of gallery view.  Clicking on a tag or a username
populates the gallery with respective images.
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/js/main.js

735 var TagCloudView = Backbone.View.extend({735 var TagCloudView = Backbone.View.extend({
736 el: $('#tag-cloud'),736 el: $('#tag-cloud'),
737 events: {737 events: {
738 "click #user-tag-cloud g": "userTagClicked",
739 "click #tags-tag-cloud g": "tagsTagClicked"
738 "click #user-tag-cloud g text": "userTagClicked",
739 "click #tags-tag-cloud g text": "tagsTagClicked"
740 },740 },
741 initialize: function() {741 initialize: function() {
742 this.user_tag_el = $('#user-tag-cloud');742 this.user_tag_el = $('#user-tag-cloud');
……
745745
746 },746 },
747 userTagClicked: function(e) {747 userTagClicked: function(e) {
748 console.log(e);
748 var user = $(e.currentTarget).text();
749 var swts = swtr.LDs.filter(function(swt) {
750 if(swt.get('who') == user) {
751 return swt;
752 }
753 });
754 swts = _.uniq(swts,'how'.src);
755 this.setGalleryView(swts);
756 $(this.el).hide();
749 },757 },
750 tagsTagClicked: function(e) {758 tagsTagClicked: function(e) {
751 console.log('tags ',e);
759 var tag = $(e.currentTarget).text();
760 var swts = swtr.LDs.filter(function(swt) {
761 if(swt.get('how').tags){
762 if(_.contains(swt.get('how').tags, tag)) {
763 return swt;
764 }
765 }
766 });
767 this.setGalleryView(swts);
768 $(this.el).hide();
752 },769 },
770 setGalleryView: function(swts) {
771 if(this.galleryView) {
772 //set the collection of galleryView to new set of swts to be displayed.
773 this.galleryView.collection = swts;
774 this.galleryView.render();
775 }
776 else {
777 this.galleryView = new GalleryView({collection: swts});
778 }
779 },
753 render: function() {780 render: function() {
754 this.renderUserTagCloud();781 this.renderUserTagCloud();
755 this.renderTagsTagCloud();782 this.renderTagsTagCloud();
……
849 .attr("transform", function(d) {849 .attr("transform", function(d) {
850 return "translate(" + [d.x, d.y] + ")";850 return "translate(" + [d.x, d.y] + ")";
851 })851 })
852 .text(function(d) {console.log(d); return d.text; });
852 .text(function(d) { return d.text; });
853 }853 }
854 });
854855
856 var GalleryView = Backbone.View.extend({
857 el: $("#gallery"),
858 initialize: function() {
859 this.template = _.template($("#gallery-item-template").html());
860 this.render();
861 },
862 render: function() {
863 $(this.el).html('');
864 _.each(this.collection, function(model) {
865 $(this.el).append(this.template(model.toJSON()));
866 }, this);
867 }
855 });868 });
856869
857 var AppRouter = Backbone.Router.extend({870 var AppRouter = Backbone.Router.extend({

swtr/templates/index.html

147 <div id="tags-tag-cloud"></div>147 <div id="tags-tag-cloud"></div>
148 <div id="user-tag-cloud"></div>148 <div id="user-tag-cloud"></div>
149 </div>149 </div>
150 <div id="gallery">
151 </div>
150 </div>152 </div>
151 <!-- the search page -->153 <!-- the search page -->
152 <div id="search-page" class="page"></div>154 <div id="search-page" class="page"></div>
153155
154 <div id="linked-data-page" class="page"></div>
156 <!-- <div id="linked-data-page" class="page"></div> <\!-- -\-> -->
155157
156 </div>158 </div>
157 <div id="app-overlay"></div>159 <div id="app-overlay"></div>
……
290 <label><%= tag %></label>290 <label><%= tag %></label>
291 </ul>291 </ul>
292 </script>292 </script>
293
293 <script type="text/template" id="gallery-item-template">
294 <div class="col-md-4 col-sm-6 ocd-item">
295 <div class="media">
296 <img src="<%= how.src %>" class="responsive thumb-image">
297 </div>
298 <div class="text">Author: <%= who %> </div>
299 <div class="text">Tags: <%= how.tags %> </div>
300 </div>
301 </script>
294 </body>302 </body>
295</html>303</html>