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

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>