Commit 448213b28cb69b58135042c8d20e0c19da2850e0

  • avatar
  • arvind
  • Tue Sep 02 14:51:38 IST 2014
Changing the UI of linked-data page. Using group list and badge to show
the data of tags and users.
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/js/main.js

703 var TagCloudView = Backbone.View.extend({703 var TagCloudView = Backbone.View.extend({
704 el: $('#tag-cloud'),704 el: $('#tag-cloud'),
705 events: {705 events: {
706 "click #user-tag-cloud g text": "userTagClicked",
707 "click #tags-tag-cloud g text": "tagsTagClicked"
706 "click #user-tag-cloud li p": "userTagClicked",
707 "click #tags-tag-cloud li p": "tagsTagClicked"
708 },708 },
709 initialize: function() {709 initialize: function() {
710 this.user_tag_el = $('#user-tag-cloud');710 this.user_tag_el = $('#user-tag-cloud');
711 this.tags_tag_el = $('#tags-tag-cloud');711 this.tags_tag_el = $('#tags-tag-cloud');
712 this.template = _.template($("#linked-data-list-template").html());
712 this.render();713 this.render();
713 },714 },
714 userTagClicked: function(e) {715 userTagClicked: function(e) {
715 var user = $(e.currentTarget).text();716 var user = $(e.currentTarget).text();
717 console.log(user);
716 var swts = swtr.LDs.filter(function(swt) {718 var swts = swtr.LDs.filter(function(swt) {
717 if(swt.get('who') == user) {719 if(swt.get('who') == user) {
718 return swt;720 return swt;
……
751 this.renderTagsTagCloud();751 this.renderTagsTagCloud();
752 },752 },
753 renderUserTagCloud: function() {753 renderUserTagCloud: function() {
754 var words = _.uniq(swtr.LDs.pluck('who'));
755 var weight = swtr.LDs.countBy('who');
756 d3.layout.cloud().size([1000, 1000])
757 .words(words.map(function(d) {
758 return {text: d, size: 5};
759 }))
760 .padding(5)
761 .font("Impact")
762 .fontSize(function(d) { return d.size; })
763 .on("end", this.draw)
764 .start();
754 // var words = _.uniq(swtr.LDs.pluck('who'));
755 var weights = swtr.LDs.countBy('who');
756 _.each(weights, function(weight, who) {
757 $(this.user_tag_el).append(this.template({weight: weight, who: who}));
758 }, this);
759 // d3.layout.cloud().size([1000, 1000])
760 // .words(words.map(function(d) {
761 // return {text: d, size: 5};
762 // }))
763 // .padding(5)
764 // .font("Impact")
765 // .fontSize(function(d) { return d.size; })
766 // .on("end", this.draw)
767 // .start();
765 },768 },
766 draw: function (words) {769 draw: function (words) {
767 var fill = d3.scale.category20();770 var fill = d3.scale.category20();
……
792 _.each(sweetsWithTags, function(sweet) {792 _.each(sweetsWithTags, function(sweet) {
793 tags.push(sweet.get('how').tags);793 tags.push(sweet.get('how').tags);
794 });794 });
795 tags = _.uniq(_.flatten(tags));
796 d3.layout.cloud().size([500, 500])
797 .words(tags.map(function(d) {
798 return {text: d, size: 10};
799 }))
800 .padding(7)
801 .font("Impact")
802 .fontSize(function(d) { return d.size; })
803 .on("end", this.drawTags)
804 .start();
795 tags = _.countBy(_.flatten(tags));
796 _.each(tags, function(weight, who) {
797 $(this.tags_tag_el).append(this.template({weight: weight, who: who}));
798 }, this);
799
805 },800 },
806 drawTags: function(words) {801 drawTags: function(words) {
807 var fill = d3.scale.category20();802 var fill = d3.scale.category20();

swtr/templates/index.html

163163
164 <div id="linked-data-page" class="page">164 <div id="linked-data-page" class="page">
165 <div id="tag-cloud">165 <div id="tag-cloud">
166 <div id="tags-tag-cloud"></div>
167 <div id="user-tag-cloud"></div>
166 <div class="col-md-5">
167 <label>Tags:</label>
168 <ul class="list-group" id="tags-tag-cloud"></ul>
169 </div>
170 <div class="col-md-5">
171 <label>Users:</label>
172 <ul class="list-group" id="user-tag-cloud"></ul>
173 </div>
168 </div>174 </div>
169 <div id="gallery">175 <div id="gallery">
170 </div>176 </div>
……
374 <div class="text">Author: <%= who %> </div>374 <div class="text">Author: <%= who %> </div>
375 <div class="text">Tags: <%= how.tags %> </div>375 <div class="text">Tags: <%= how.tags %> </div>
376 </div>376 </div>
377 </script>
378 <script type="text/template" id="linked-data-list-template">
379 <li class="list-group-item">
380 <span class="badge"> <%= weight %> </span>
381 <p><%= who %></p>
382 </li>
377 </script>383 </script>
378 </body>384 </body>
379</html>385</html>