Commit c788cbd487b4d61e9f55304560057ee1d41144ab

  • avatar
  • arvind
  • Wed Sep 03 17:50:19 IST 2014
Updates to linked data page.
        - Images related to tag or user are shown below the tags/user
        count.
        - Scroll to the image after the image is loaded.
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/swtmaker.css

149}149}
150#tag-cloud {150#tag-cloud {
151 display: none;151 display: none;
152 height:768px;
152}
153#gallery {
154 margin-top: 10em;
153}155}
154#tags-tag-cloud svg {156#tags-tag-cloud svg {
155 position: absolute;157 position: absolute;

swtr/static/js/main.js

718 },718 },
719 userTagClicked: function(e) {719 userTagClicked: function(e) {
720 var user = $(e.currentTarget).text();720 var user = $(e.currentTarget).text();
721 console.log(user);
722 var swts = swtr.LDs.filter(function(swt) {721 var swts = swtr.LDs.filter(function(swt) {
723 if(swt.get('who') == user) {722 if(swt.get('who') == user) {
724 return swt;723 return swt;
……
725 });725 });
726 swts = _.uniq(swts,'how'.src);726 swts = _.uniq(swts,'how'.src);
727 this.setGalleryView(swts);727 this.setGalleryView(swts);
728 $(this.el).hide();
728 // $(this.el).hide();
729 },729 },
730 tagsTagClicked: function(e) {730 tagsTagClicked: function(e) {
731 var tag = $(e.currentTarget).text();731 var tag = $(e.currentTarget).text();
……
737 }737 }
738 });738 });
739 this.setGalleryView(swts);739 this.setGalleryView(swts);
740 $(this.el).hide();
740 // $(this.el).hide();
741 },741 },
742 setGalleryView: function(swts) {742 setGalleryView: function(swts) {
743 if(this.galleryView) {743 if(this.galleryView) {
……
760 _.each(weights, function(weight, who) {760 _.each(weights, function(weight, who) {
761 $(this.user_tag_el).append(this.template({weight: weight, who: who}));761 $(this.user_tag_el).append(this.template({weight: weight, who: who}));
762 }, this);762 }, this);
763 // d3.layout.cloud().size([1000, 1000])
764 // .words(words.map(function(d) {
765 // return {text: d, size: 5};
766 // }))
767 // .padding(5)
768 // .font("Impact")
769 // .fontSize(function(d) { return d.size; })
770 // .on("end", this.draw)
771 // .start();
772 },763 },
773 draw: function (words) {
774 var fill = d3.scale.category20();
775 d3.select("#user-tag-cloud").append("svg")
776 .append("g")
777 .attr("transform", "translate(370,180)")
778 .selectAll("text")
779 .data(words)
780 .enter().append("text")
781 .style("font-size", function(d) { return "16px"; })
782 .style("font-family", "Impact")
783 .style("fill", function(d, i) { return fill(i); })
784 .attr("text-anchor", "middle")
785 .attr("transform", function(d) {
786 return "translate(" + [d.x, d.y] + ")";})
787 .text(function(d) { return d.text; });
788 },
789 renderTagsTagCloud: function() {764 renderTagsTagCloud: function() {
790 var sweetsWithTags = swtr.LDs.filter(function(k) {765 var sweetsWithTags = swtr.LDs.filter(function(k) {
791 if(k.get('how').tags) {766 if(k.get('how').tags) {
……
776 $(this.tags_tag_el).append(this.template({weight: weight, who: who}));776 $(this.tags_tag_el).append(this.template({weight: weight, who: who}));
777 }, this);777 }, this);
778778
779 },
780 drawTags: function(words) {
781 var fill = d3.scale.category20();
782 d3.select("#tags-tag-cloud").append("svg")
783 .append("g")
784 .attr("transform", "translate(700,300)")
785 .selectAll("text")
786 .data(words)
787 .enter().append("text")
788 .style("font-size", function(d) { return "20px"; })
789 .style("font-family", "Impact")
790 .style("fill", function(d, i) { return fill(i); })
791 .attr("text-anchor", "middle")
792 .attr("transform", function(d) {
793 return "translate(" + [d.x, d.y] + ")";
794 })
795 .text(function(d) { return d.text; });
796 }779 }
797 });780 });
798781
……
790 _.each(this.collection, function(model) {790 _.each(this.collection, function(model) {
791 $(this.el).append(this.template(model.toJSON()));791 $(this.el).append(this.template(model.toJSON()));
792 }, this);792 }, this);
793 $('html, body').animate({
794 scrollTop: $("#gallery").offset().top
795 }, 1000);
793 },796 },
794 setUp: function() {797 setUp: function() {
795 if(!$(this.el).is(':visible')) {798 if(!$(this.el).is(':visible')) {

swtr/templates/index.html

162 <div id="search-page" class="page"></div>162 <div id="search-page" class="page"></div>
163163
164 <div id="linked-data-page" class="page">164 <div id="linked-data-page" class="page">
165 <div id="tag-cloud" class="col-md-4">
165 <div id="tag-cloud" class="row">
166 <div class="panel-group" id="accordion">166 <div class="panel-group" id="accordion">
167 <div class="panel panel-default">
168 <div class="panel-heading">
169 <h4 class="panel-title">
167 <div class="col-md-6">
168 <div class="panel panel-default">
169 <div class="panel-heading">
170 <a data-toggle="collapse" data-parent="#accordion" href="#tag-list">170 <a data-toggle="collapse" data-parent="#accordion" href="#tag-list">
171 Tags
171 <h4 class="panel-title">
172 Tags
173 </h4>
172 </a>174 </a>
173 </h4>
174 </div>
175 <div id="tag-list" class="panel-collapse collapse in">
176 <div class="panel-body">
177 <ul class="list-group" id="tags-tag-cloud"></ul>
178 </div>175 </div>
176 <div id="tag-list" class="panel-collapse collapse in">
177 <div class="panel-body">
178 <ul class="list-group" id="tags-tag-cloud"></ul>
179 </div>
180 </div>
179 </div>181 </div>
180 </div>182 </div>
181 <div class="panel panel-default">
182 <div class="panel-heading">
183 <h4 class="panel-title">
183 <div class="col-md-6">
184 <div class="panel panel-default">
185 <div class="panel-heading">
184 <a data-toggle="collapse" data-parent="#accordion" href="#user-list">186 <a data-toggle="collapse" data-parent="#accordion" href="#user-list">
185 User
187 <h4 class="panel-title">
188 User
189 </h4>
186 </a>190 </a>
187 </h4>
188 </div>
189 <div id="user-list" class="panel-collapse collapse in">
190 <div class="panel-body">
191 <ul class="list-group" id="user-tag-cloud"></ul>
192 </div>191 </div>
192 <div id="user-list" class="panel-collapse collapse in">
193 <div class="panel-body">
194 <ul class="list-group" id="user-tag-cloud"></ul>
195 </div>
196 </div>
193 </div>197 </div>
194 </div>198 </div>
195 </div>199 </div>
196 </div>200 </div>
197 <div id="gallery">
201 <div id="gallery" class="row">
198 </div>202 </div>
199 </div>203 </div>
200204