Skip to content

Commit

Permalink
Implement hiding tags (closes #6)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheTeaCat
TheTeaCat committed Jan 20, 2020
1 parent 683d438 commit 3a44531
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 42 deletions.
24 changes: 3 additions & 21 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,30 +101,12 @@
var response = await this.generator.generate(this.username,
this.period.selected,
this.max_artists.selected)
this.result = response.result
this.error = response.error
if (this.result.artists.length > 0) {
var minScore = Infinity
var maxScore = -Infinity
for (var tag of this.result.tags) {
if (this.result.scores[tag] < minScore) {
minScore = this.result.scores[tag]
}
if (this.result.scores[tag] > maxScore) {
maxScore = this.result.scores[tag]
}
}
this.cloudWords = []
for (tag of this.result.tags) {
/**Biggest should be 200, smallest should be 25.
* Logarithmic scaling is pretty arbritrary, just what I found looks decent.
*/
this.cloudWords.push([tag,Math.log10((this.result.scores[tag]-minScore)*99/maxScore+1)/2*175+25])
}
this.$refs["results"].createTagCloud(this.cloudWords)
this.$refs["results"].createTagCloud(this.result)
}
}
}
Expand Down
62 changes: 46 additions & 16 deletions src/components/Results.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@

<button class="cloud-button"
v-bind:disabled="cloudState!='generated'"
v-on:click="reshuffleTagCloud">Reshuffle</button>
v-on:click="generateTagCloud">Reshuffle</button>

<a ref="download-link" class="cloud-button"
download="tag-cloud.png">
Expand Down Expand Up @@ -93,17 +93,56 @@
data: function(){
return {
cloudState:undefined,
words:undefined,
cloudWords:undefined,
}
},
methods: {
clear(){
this.cloudState = undefined
},
async createTagCloud(words) {
this.words = words
async createTagCloud(newResult) {
this.result = newResult
// eslint-disable-next-line no-console
console.log(this)
// eslint-disable-next-line no-console
console.log(this.result)
var minScore = Infinity
var maxScore = -Infinity
for (var tag of this.result.tags) {
if (this.result.scores[tag] < minScore) {
minScore = this.result.scores[tag]
}
if (this.result.scores[tag] > maxScore) {
maxScore = this.result.scores[tag]
}
}
this.cloudWords = []
for (tag of this.result.tags) {
/**Biggest should be 200, smallest should be 25.
* Logarithmic scaling is pretty arbritrary, just what I found looks decent.
*/
this.cloudWords.push([tag,Math.log10((this.result.scores[tag]-minScore)*99/maxScore+1)/2*175+25])
/**By default, every tag is shown. */
this.result.tag_meta[tag].shown = true;
}
this.generateTagCloud()
},
generateTagCloud(){
this.cloudState = "generating"
var shownTags = []
for (var tag of this.cloudWords) {
if (this.result.tag_meta[tag[0]].shown) {
shownTags.push(tag)
}
}
this.$refs["tag-cloud-canvas"].addEventListener(
"wordcloudstop",
function(){
Expand All @@ -113,28 +152,19 @@
var style = getComputedStyle(this.$refs["tag-cloud-canvas"]);
WordCloud(this.$refs["tag-cloud-canvas"],{
list:words,
fontFamily:"Courier",
shrinkToFit:true,
color:style['color'],
backgroundColor:style['background-color'],
})
},
reshuffleTagCloud(){
this.cloudState = "generating"
var style = getComputedStyle(this.$refs["tag-cloud-canvas"]);
WordCloud(this.$refs["tag-cloud-canvas"],{
list:this.words,
list:shownTags,
fontFamily:"Courier",
shrinkToFit:true,
color:style['color'],
backgroundColor:style['background-color'],
shuffle:true,
})
},
downloadTagCloud() {
this.$refs["download-link"].href = this.$refs["tag-cloud-canvas"].toDataURL()
},
copyShareLink() {
this.$refs["share-link"].select()
this.$refs["share-link"].setSelectionRange(0,99999)
Expand Down
36 changes: 31 additions & 5 deletions src/components/TagsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@
<div>
<collapse-button v-bind:collapsed="collapsed" @collapse="collapse"/>
<h2>Tags:</h2>
<span>//Don't like a tag? Uncheck it here & reshuffle!</span>
<ol id="tag-list" v-if="!collapsed">
<li v-for='tag in tags' v-bind:key='tag' v-bind:tag='tag'>
<span class="tag"><a v-bind:href="tag_meta[tag].url">
{{ tag }}</a></span>:
<taggings-list class="artist-list" v-bind:taggings="taggings[tag]"/>
<li class="tag" v-for='tag in tags' v-bind:key='tag' v-bind:tag='tag'>
<input type="checkbox" v-model="tag_meta[tag].shown"/>
<div>
<a v-bind:href="tag_meta[tag].url">{{ tag }}</a>:
<taggings-list class="artist-list" v-bind:taggings="taggings[tag]"/>
</div>
</li>
</ol>
</div>
Expand Down Expand Up @@ -38,7 +41,18 @@
<style scoped>
h2 { display:inline; }
span {
margin: 0 0 0 1vw;
color:var(--highlight-colour);
}
@media(orientation:portrait) {
span {
margin: 0 0 0 2vw;
}
}
#tag-list {
list-style:none;
flex-basis:100%;
margin: 0.5vw 0 0 0;
padding: 1vw 0 1vw 2vw;
Expand All @@ -47,5 +61,17 @@
border-color:var(--list-border-colour);
background-color:var(--list-colour);
}
.tag { font-weight:bold; }
.tag {
display:flex;
align-items:start;
margin: 0.5vw 0 0.5vw 0;
}
@media(orientation:portrait) {
.tag {
margin: 1vw 0 1vw 0;
}
}
input {
margin: 0 0.5vw 0 0;
}
</style>

0 comments on commit 3a44531

Please sign in to comment.