Commit 733eb34314b3660a99893f96c8e63547d1928540
- Diff rendering mode:
- inline
- side by side
swtr/static/js/main.js
(45 / 5)
| 735 | 735 | var TagCloudView = Backbone.View.extend({ | |
| 736 | 736 | el: $('#tag-cloud'), | |
| 737 | 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 | 741 | initialize: function() { | |
| 742 | 742 | this.user_tag_el = $('#user-tag-cloud'); | |
| … | … | ||
| 745 | 745 | ||
| 746 | 746 | }, | |
| 747 | 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 | 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 | 780 | render: function() { | |
| 754 | 781 | this.renderUserTagCloud(); | |
| 755 | 782 | this.renderTagsTagCloud(); | |
| … | … | ||
| 849 | 849 | .attr("transform", function(d) { | |
| 850 | 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 | }); | ||
| 854 | 855 | ||
| 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 | }); | |
| 856 | 869 | ||
| 857 | 870 | var AppRouter = Backbone.Router.extend({ |
swtr/templates/index.html
(12 / 2)
| 147 | 147 | <div id="tags-tag-cloud"></div> | |
| 148 | 148 | <div id="user-tag-cloud"></div> | |
| 149 | 149 | </div> | |
| 150 | <div id="gallery"> | ||
| 151 | </div> | ||
| 150 | 152 | </div> | |
| 151 | 153 | <!-- the search page --> | |
| 152 | 154 | <div id="search-page" class="page"></div> | |
| 153 | 155 | ||
| 154 | <div id="linked-data-page" class="page"></div> | ||
| 156 | <!-- <div id="linked-data-page" class="page"></div> <\!-- -\-> --> | ||
| 155 | 157 | ||
| 156 | 158 | </div> | |
| 157 | 159 | <div id="app-overlay"></div> | |
| … | … | ||
| 290 | 290 | <label><%= tag %></label> | |
| 291 | 291 | </ul> | |
| 292 | 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 | 302 | </body> | |
| 295 | 303 | </html> |
