43 lines
No EOL
1.2 KiB
JavaScript
43 lines
No EOL
1.2 KiB
JavaScript
Vue.component(
|
|
`artist`,
|
|
{
|
|
props: [ `artist` ],
|
|
data: function () {
|
|
return {
|
|
popularity_tooltip: `Popularity`,
|
|
followers_tooltip: `Followers`,
|
|
};
|
|
},
|
|
computed: {
|
|
genres: function () {
|
|
let genres = [];
|
|
for (var genre of this.artist.genres) {
|
|
genres.push(genre.toTitleCase());
|
|
};
|
|
return genres.join(`, `);
|
|
}
|
|
},
|
|
methods: {
|
|
show_popularity_modal: function () {
|
|
this.$emit(`popularity_click`)
|
|
}
|
|
},
|
|
template: `<div class="card">
|
|
<div class="image">
|
|
<img v-if="artist.image" :src="artist.image.url" :alt="artist.name + 's profile picture'" target="_blank" rel="noopener">
|
|
<div class="missing-image" v-else>
|
|
<music-note colour="#1DB954"></music-note>
|
|
</div>
|
|
</div>
|
|
<div class="info">
|
|
<span class="title">
|
|
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
|
|
</span>
|
|
<br>
|
|
<span class="subtitle">{{genres}}</span>
|
|
</div>
|
|
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip" @click.self="show_popularity_modal()">{{artist.popularity}}</div>
|
|
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count.toLocaleString()}}</div>
|
|
</div>`
|
|
}
|
|
) |