clean up social code

2020-06-21 00:07:57 -07:00
parent 19dee67f2a
commit 1ecf39c2f1
4 changed files with 153 additions and 152 deletions
--- a/webroot/js/social.js
+++ b/webroot/js/social.js
@@ -0,0 +1,142 @@
+const SOCIAL_PLATFORMS_URLS = {
+  default: {
+    name: "default",
+    urlPrefix: "",
+    imgPos: [0,0], // [row,col]
+  },
+
+  facebook: {
+    name: "Facebook",
+    urlPrefix: "http://www.facebook.com/",
+    imgPos: [0,1],
+  },
+  twitter: {
+    name: "Twitter",
+    urlPrefix: "http://www.twitter.com/",
+    imgPos: [0,2],
+  },
+  instagram: {
+    name: "Instagram",
+    urlPrefix: "http://www.instagram.com/",
+    imgPos: [0,3],
+  },
+  instagram: {
+    name: "Snapchat",
+    urlPrefix: "http://www.snapchat.com/",
+    imgPos: [0,4],
+  },
+  tiktok: {
+    name: "TikTok",
+    urlPrefix: "http://www.tiktok.com/",
+    imgPos: [0,5],
+  },
+  soundcloud: {
+    name: "Soundcloud",
+    urlPrefix: "http://www.soundcloud.com/",
+    imgPos: [0,6],
+  },
+  basecamp: {
+    name: "Base Camp",
+    urlPrefix: "http://www.basecamp.com/",
+    imgPos: [0,7],
+  },
+  patreon: {
+    name: "Patreon",
+    urlPrefix: "http://www.patreon.com/",
+    imgPos: [0,1],
+  },
+  youtube: {
+    name: "YouTube",
+    urlPrefix: "http://www.youtube.com/",
+    imgPos: [0,9 ],
+  },
+  spotify: {
+    name: "Spotify",
+    urlPrefix: "http://www.spotify.com/",
+    imgPos: [0,10],
+  },
+  twitch: {
+    name: "Twitch",
+    urlPrefix: "http://www.twitch.com/",
+    imgPos: [0,11],
+  },
+  paypal: {
+    name: "Paypal",
+    urlPrefix: "http://www.paypal.com/",
+    imgPos: [0,12],
+  },
+  github: {
+    name: "Github",
+    urlPrefix: "http://www.github.com/",
+    imgPos: [0,13],
+  },
+  linkedin: {
+    name: "LinkedIn",
+    urlPrefix: "http://www.linkedin.com/",
+    imgPos: [0,14],
+  },
+  discord: {
+    name: "Discord",
+    urlPrefix: "http://www.discord.com/",
+    imgPos: [0,15],
+  },
+  mastadon: {
+    name: "Mastadon",
+    urlPrefix: "http://www.mastadon.com/",
+    imgPos: [0,16],
+  },
+};
+
+Vue.component('social-list', {
+  props: ['platforms'],
+
+  template: `
+    <div class="social-list flex">
+      <span v-if="this.platforms.length" class="follow-label">Follow me: </span>
+      <user-social-icon 
+        v-for="(item, index) in this.platforms"
+        v-if="item.platform && item.handle"
+        v-bind:key="index"
+        v-bind:platform="item.platform"
+        v-bind:username="item.handle"
+      />
+    </div>
+  `,
+
+});
+
+Vue.component('user-social-icon', {
+  props: ['platform', 'username'],
+  data: function() {
+    const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
+    const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
+    const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
+    const useDefault = platformInfo.name === "default";
+    return {
+      name: platformInfo.name,
+      link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
+      style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
+      itemClass: {
+        "user-social-item": true,
+        "flex": true,
+        "rounded": useDefault,
+        "use-default": useDefault,        
+      },
+      labelClass: {
+        "platform-label": true,
+        "visually-hidden": !useDefault,
+        "text-indigo-800": true,
+      },
+    };
+  },
+  template: `
+    <a
+      v-bind:class="itemClass"
+      target="_blank"
+      :href="link"
+    >
+      <span class="platform-icon rounded-lg" :style="style" />
+      <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
+    </a>
+  `,
+});