Add social sharing buttons back

public/src/app.vue

@@ -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>

public/src/components/social.vue

@@ -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>

public/src/style/style.css

@@ -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;
+}

public/src/views/share.vue

@@ -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: {},