add social buttons

OnePlace-media · Mar 14, 2018 · 749a598 · 749a598
1 parent c8469ec
commit 749a598
Show file tree

Hide file tree

Showing 18 changed files with 430 additions and 131 deletions.
diff --git a/client/src/app.js b/client/src/app.js
@@ -16,7 +16,7 @@ import Meta from 'vue-meta'
 import GlobalComponents from './plugins/globalComponents'
 import 'vue2-toast/lib/toast.css'
 import Toast from 'vue2-toast'
-
+import SocialSharing from 'vue-social-sharing'
 
 const CONSTANTS = require('@oneplace/constants')
 
@@ -28,7 +28,7 @@ Vue.use(Toast, {
 })
 
 Vue.use(Chains)
-
+Vue.use(SocialSharing)
 Vue.use(GlobalComponents)
 Vue.use(VueI18n)
 Vue.use(Vue2TouchEvents)

diff --git a/client/src/components/chains/PostModal.vue b/client/src/components/chains/PostModal.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="post-view__overlay" v-if="!processing">
+  <div class="post-view__overlay" v-if="!processing" id="post-overlay">
+    <post-share v-if="post"></post-share>
     <div class="post-view__modal">
       <post-view v-on-click-outside="close" v-if="post" :is-modal="true"></post-view>
       <comments-wrapper :post="post" v-if="post"></comments-wrapper>
@@ -11,12 +12,14 @@
 import PostView from './PostView.vue'
 import { mixin as onClickOutside } from 'vue-on-click-outside'
 import CommentsWrapper from './CommentsWrapper.vue'
+import PostShare from './PostShare.vue'
 const KEY_CODE_ESC = 27
 export default {
   name: 'PostModal',
   components: {
     PostView,
-    CommentsWrapper
+    CommentsWrapper,
+    PostShare
   },
   mixins: [onClickOutside],
   mounted() {

diff --git a/client/src/components/chains/PostShare.vue b/client/src/components/chains/PostShare.vue
@@ -0,0 +1,68 @@
+<template>
+  <social-sharing :url="url" inline-template v-show="isVisible">
+    <div class="share-icons__wrapper share-icons__wrapper--visible">
+      <network network="facebook">
+        <span data-link="#share-facebook">
+          <i class="share-icon share-icon--facebook"></i>
+        </span>
+      </network>
+      <network network="twitter">
+        <span data-link="#share-twitter">
+          <i class="share-icon share-icon--twitter"></i>
+        </span>
+      </network>
+      <network network="googleplus">
+        <span data-link="#share-googleplus">
+          <i class="share-icon share-icon--google-plus"></i>
+        </span>
+      </network>
+      <network network="vk">
+        <span data-link="#share-vk">
+          <i class="share-icon share-icon--vk"></i>
+        </span>
+      </network>
+    </div>
+  </social-sharing>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  name: 'PostShare',
+  data() {
+    return {
+      isVisible: false,
+      url: ''
+    }
+  },
+  mounted() {
+    this.scrollHandler()
+    const target = document.getElementById('post-overlay') || window
+    target.addEventListener('scroll', this.scrollHandler)
+    Vue.nextTick(() => {
+      this.url = window.location.href
+    })
+  },
+  beforeDestroy() {
+    const target = document.getElementById('post-overlay') || window
+    target.removeEventListener('scroll', this.scrollHandler)
+  },
+  methods: {
+    scrollHandler() {
+      const body = document.getElementById('post-body')
+
+      if (body) {
+        const rect = body.getBoundingClientRect()
+        const pageHeight = document.body.getBoundingClientRect().height
+
+        if (rect.height < pageHeight / 2)
+          this.isVisible = rect.bottom > pageHeight / 3
+        else 
+          this.isVisible = rect.top < 0 && rect.bottom > pageHeight / 2
+      }
+    }
+  }
+}
+</script>
+
diff --git a/client/src/components/chains/PostView.vue b/client/src/components/chains/PostView.vue
@@ -44,7 +44,7 @@
       <header class="post-view__post-heading">
         <h1 class="h1 post-view__post-title">{{post.title}}</h1>
       </header>
-      <div class="post-view__post-body markdown" v-html="post.body"></div>
+      <div class="post-view__post-body markdown" v-html="post.body" id="post-body"></div>
       <div class="post-view__post-info post-view__post-info--bottom" v-if="!$store.state.core.params[chain].processing">
         <post-bottom 
             type="post"

diff --git a/client/src/components/chains/PublishDrafts.vue b/client/src/components/chains/PublishDrafts.vue
@@ -6,17 +6,17 @@
         <pulse-loader :color="'#383838'" :size="'10px'"></pulse-loader>
       </center>
 
-      <div class="publish__drafts-new" v-if="!processing">{{$t('publish.createNewDraft')}}</div>
+      <div class="publish__drafts-new" v-if="!processing" @click.stop="createDraft">{{$t('publish.createNewDraft')}}</div>
       <div class="publish__no-drafts" v-if="!processing && drafts && !drafts.length">{{$t('publish.youHaveNoDrafts')}}</div>
       <div class="publish__drafts-list">
-        <div class="publish__drafts-item" v-for="draft in drafts" :key="draft.id">
+        <div class="publish__drafts-item" v-for="draft in drafts" :key="draft.id" @click.stop="selectDraft(draft)">
           <div class="column-wrapper">
             <span class="publish__drafts-name">{{draft.title}}</span>
             <span class="publish__drafts-time">
               <time-ago :time="draft.time.toString()"></time-ago>
             </span>
           </div>
-          <a href="#" title="Delete draft" @click.prevent="deleteDraft(draft)">
+          <a href="#" title="Delete draft" @click.stop="deleteDraft(draft)">
             <svg class="publish__icon">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/img/icons-sprite.svg#delete"></use>
             </svg>
@@ -77,8 +77,20 @@ export default {
     close() {
       this.setIsVisible(false)
     },
+    createDraft() {
+      this.$store.dispatch('publish/createDraft').then(() => {
+        this.$emit('update')
+      })
+    },
     deleteDraft(draft) {
-      this.$store.dispatch('publish/deleteDraft', { draft })
+      this.$store.dispatch('publish/deleteDraft', { draft }).then(() => {
+        this.$emit('update')
+      })
+    },
+    selectDraft(draft) {
+      this.$store.dispatch('publish/selectDraft', { draft })
+      this.isVisible = false
+      this.$emit('update')
     }
   }
 }

diff --git a/client/src/components/chains/PublishHeader.vue b/client/src/components/chains/PublishHeader.vue
@@ -12,11 +12,11 @@
           >
             {{account.username}}
           </router-link>
-          <span>New post</span>
+          <span>{{$t(`publish.${mode}`)}}</span>
         </div>
       </div>
       <div>
-        <publish-drafts></publish-drafts>
+        <publish-drafts @update="$emit('update')"></publish-drafts>
         <publish-options :chain="chain" :account="account"></publish-options>
       </div>
     </div>
@@ -55,6 +55,12 @@ export default {
   computed: {
     DEFAULT_AVATAR() {
       return CONSTANTS.DEFAULT.AVATAR_IMAGE
+    },
+    mode() {
+      let mode = 'newPost'
+      if (this.$store.state.publish.drafts.loadFromDraft) mode = 'draft'
+      if (this.$store.state.publish.form.permlink) mode = 'edit'
+      return mode
     }
   },
   methods: {

diff --git a/client/src/containers/chains/Post.vue b/client/src/containers/chains/Post.vue
@@ -1,6 +1,7 @@
 <template>
   <section class="main-content">
     <section class="post-page__wrapper">
+      <post-share></post-share>
       <div class="container">
         <center><pulse-loader :loading="!post" :color="'#383838'" :size="'10px'"></pulse-loader></center>
         <post-view v-if="post" :is-modal="false"></post-view>
@@ -17,15 +18,20 @@
 <script>
 import PostView from '../../components/chains/PostView.vue'
 import CommentsWrapper from '../../components/chains/CommentsWrapper.vue'
+import PostShare from '../../components/chains/PostShare.vue'
 
 export default {
   name: 'Post',
   components: {
     PostView,
-    CommentsWrapper
+    CommentsWrapper,
+    PostShare
   },
   asyncData({ store, route, router }) {
-    if (!store.state.postView.post || store.state.postView.post.permlink !== route.params.permlink) {
+    if (
+      !store.state.postView.post ||
+      store.state.postView.post.permlink !== route.params.permlink
+    ) {
       return store
         .dispatch('fetchPostByPermlink', {
           chain: route.params.chain,

diff --git a/client/src/containers/chains/Publish.vue b/client/src/containers/chains/Publish.vue
@@ -5,10 +5,11 @@
       :accounts-by-chain="accountsByChain"
       :account="account" 
       :chain="chain"
+      @update="onUpdate"
     ></publish-header>
 
-    <section class="publish__post-editor">
-      <textarea class="publish__input-title input" :placeholder="$t('publish.enterPostTitle')" v-model="title"></textarea>
+    <section class="publish__post-editor" v-on:drop="onDrop">
+      <textarea class="publish__input-title input" :placeholder="$t('publish.enterPostTitle')" v-model="title" ref="title" maxlength="256"></textarea>
       <textarea :placeholder="$t('publish.typeYourStoryHere')" ref="area"></textarea>
     </section>
   </div>
@@ -44,6 +45,19 @@ export default {
   components: {
     PublishHeader
   },
+  methods: {
+    onDrop($event) {
+      for (let i = 0; i < $event.dataTransfer.items.length; i++) {
+        if ($event.dataTransfer.items[i].kind === 'file') {
+          const file = $event.dataTransfer.items[i].getAsFile()
+          console.log('... file[' + i + '].name = ' + file.name)
+        }
+      }
+    },
+    onUpdate() {
+      this.mde.value(this.body)
+    }
+  },
   mounted() {
     const SimpleMDE = require('simplemde')
 
@@ -57,80 +71,20 @@ export default {
       },
       element: this.$refs.area,
       toolbar: [
-        {
-          name: 'bold',
-          action: SimpleMDE.toggleBold,
-          className: 'fa fa-bold',
-          title: 'Bold'
-        },
-        {
-          name: 'italic',
-          action: SimpleMDE.toggleItalic,
-          className: 'fa fa-italic',
-          title: 'Italic'
-        },
-        {
-          name: 'heading',
-          action: SimpleMDE.toggleHeadingSmaller,
-          className: 'fa fa-header',
-          title: 'Heading'
-        },
-        {
-          name: 'heading-smaller',
-          action: SimpleMDE.toggleHeadingSmaller,
-          className: 'fa fa-header fa-header-x fa-header-smaller',
-          title: 'Smaller Heading'
-        },
-        {
-          name: 'heading-bigger',
-          action: SimpleMDE.toggleHeadingBigger,
-          className: 'fa fa-header fa-header-x fa-header-bigger',
-          title: 'Bigger Heading'
-        },
-        '|', // Separator
-        {
-          name: 'code',
-          action: SimpleMDE.toggleCodeBlock,
-          className: 'fa fa-code',
-          title: 'Code'
-        },
-        {
-          name: 'quote',
-          action: SimpleMDE.toggleBlockquote,
-          className: 'fa fa-quote-left',
-          title: 'Quote'
-        },
-        {
-          name: 'unordered-list',
-          action: SimpleMDE.toggleUnorderedList,
-          className: 'fa fa-list-ul',
-          title: 'Generic List'
-        },
-        {
-          name: 'ordered-list',
-          action: SimpleMDE.toggleOrderedList,
-          className: 'fa fa-list-ol',
-          title: 'Numbered List'
-        },
-        '|', // Separator
-        {
-          name: 'link',
-          action: SimpleMDE.drawLink,
-          className: 'fa fa-link',
-          title: 'Create Link'
-        },
-        {
-          name: 'image',
-          action: SimpleMDE.drawImage,
-          className: 'fa fa-picture-o',
-          title: 'Insert Image'
-        },
-        {
-          name: 'horizontal-rule',
-          action: SimpleMDE.drawHorizontalRule,
-          className: 'fa fa-minus',
-          title: 'Insert Horizontal Line'
-        },
+        'bold',
+        'italic',
+        'heading',
+        'heading-smaller',
+        'heading-bigger',
+        '|',
+        'code',
+        'quote',
+        'unordered-list',
+        'ordered-list',
+        '|',
+        'link',
+        'image',
+        'horizontal-rule',
         '|',
         {
           name: 'side-by-side',
@@ -149,24 +103,29 @@ export default {
           title: 'Toggle Fullscreen'
         },
         '|',
-        {
-          name: 'guide',
-          action: "https://simplemde.com/markdown-guide",
-          className: 'fa fa-question-circle',
-          title: 'Markdown Guide'
-        }
+        'guide'
       ],
       promptURLs: true,
       spellChecker: false,
       status: false,
       styleSelectedText: false
     })
 
-    this.mde.value(this.value)
+    this.mde.value(this.body)
     this.mde.codemirror.on('change', () => {
       this.body = this.mde.value()
     })
   },
+  watch: {
+    title(to, from) {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      context.font = "bold 32px 'Noto Sans', sans-serif"
+      const metrics = context.measureText(to)
+      const q = Math.floor(metrics.width / 830) + 1
+      this.$refs.title.style.height = q * 48 + 'px'
+    }
+  },
   computed: {
     body: stateModel('body'),
     title: stateModel('title'),

diff --git a/client/src/i18n/en.js b/client/src/i18n/en.js
@@ -178,7 +178,9 @@ module.exports = {
     upVotePost: 'Upvote post',
     enterPostTitle: 'Enter post title',
     typeYourStoryHere:'Type your story here...',
-
+    newPost: 'New post',
+    draft: 'Draft',
+    edit: 'Edit',
     drafts: 'Drafts',
     youHaveNoDrafts: 'You have no drafts.',
     createNewDraft: 'Create new draft'