jonathan/combine.fm
jonathan/combine.fm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add social sharing buttons back

Browse source
This commit is contained in:
Jonathan Cremin 2016-10-23 23:36:47 +01:00
parent 0a9ea15b58
commit 1684e8c555
4 changed files with 81 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/src/app.vue
View file

@ -8,7 +8,7 @@
</div>
<footer class="footer">
<div class="container has-text-right">
<a href='https://twitter.com/MatchAudio'>Tweet</a> or <a href='https://github.com/kudos/match.audio'>Fork</a>. A work in progress by <a href='http://crem.in'>this guy</a>.
<a href='https://twitter.com/MatchAudio'>Tweet</a> or <a href='https://gitlab.com/kudos/match.audio'>Fork</a>. A work in progress by <a href='http://crem.in'>this guy</a>.
</div>
</footer>
</div>

63
public/src/components/social.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<ul class='social'>
<li>Share this</li>
<li>
<a v-bind:href="`http://twitter.com/intent/tweet/?text=${encodeURIComponent(name)} by ${ encodeURIComponent(artist)}&via=MatchAudio&url=${url}`" class='share-dialog'>
<img src='/assets/images/twitter.png' alt='Twitter' height="20" width="20" />
</a>
</li>
<li>
<a v-bind:href="`http://www.facebook.com/sharer/sharer.php?p[url]=${url}`" class='share-dialog'>
<img src='/assets/images/facebook.png' alt='Facebook' height="20" width="20" />
</a>
</li>
<li>
<a v-bind:href="`https://plus.google.com/share?url=${url}`" class='share-dialog'>
<img src='/assets/images/googleplus.png' alt='Google+' height="20" width="20" />
</a>
</li>
</ul>
</template>
<script>
export default {
name: 'social-view',
props: ['name', 'artist', 'url'],
mounted() {
// Some hacks to pop open the Twitter/Facebook/Google Plus sharing dialogs without using their code.
Array.prototype.forEach.call(document.querySelectorAll('.share-dialog'), function(dialog){
dialog.addEventListener('click', function(e) {
e.preventDefault();
const w = 845;
const h = 670;
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
const left = ((width / 2) - (w / 2)) + dualScreenLeft;
const top = ((height / 2) - (h / 2)) + dualScreenTop;
const newWindow = window.open(dialog.href, 'Share Music', 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
if (window.focus) {
newWindow.focus();
}
});
});
},
}
</script>
<style>
.social {
text-align: center;
font-weight: 300;
float: right;
}
.social li {
display: inline;
list-style-type: none;
padding-right: 10px;
float: left;
}
</style>

14
public/src/style/style.css
View file

@ -147,3 +147,17 @@ img {
left: 40%;
width: 20%;
}
/* social.vue */
.social {
text-align: center;
font-weight: 300;
float: right;
}
.social li {
display: inline;
list-style-type: none;
padding-right: 10px;
float: left;
}

3
public/src/views/share.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="container" v-if="item.name">
<social v-bind:name="item.name" v-bind:artist="item.artist.name" v-bind:url="`https://match.audio/${item.service}/${item.type}/${item.externalId}`"></social>
<div class="share-heading">
<h3 class="title is-3">Matched {{ item.albumName ? 'tracks' : 'albums' }} for</h3>
<h2 class="title is-2"><strong>{{ item.name }}</strong> - {{ item.artist.name }}</h2>
@ -39,10 +40,12 @@
</template>
<script>
import social from '../components/social.vue';
import { fetchItem } from '../store/api';
export default {
name: 'share-view',
components: { social },
data() {
return {
item: {},