feat: Emit callback events

ktquez · Jun 6, 2020 · f511016 · f511016
1 parent ac70f97
commit f511016
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 34 deletions.
diff --git a/demo/src/views/Post.vue b/demo/src/views/Post.vue
@@ -52,7 +52,7 @@
     <hr>
 
     <section>
-      <VueDisqus shortname="ktquez" :lang="lang" />
+      <VueDisqus shortname="ktquez" :lang="lang" @new-comment="newComment" />
     </section>
   </article>
 </template>
@@ -71,6 +71,12 @@ export default {
 
   data: () => ({
     lang: 'en'
-  })
+  }),
+
+  methods: {
+    newComment (e) {
+      console.log(e)
+    }
+  }
 }
 </script>
diff --git a/src/VueDisqus.vue b/src/VueDisqus.vue
@@ -3,7 +3,12 @@
 </template>
 
 <script>
-import { allowedPageConfigKeys, allowedSSOKeys } from './utils'
+import {
+  callbacks,
+  getEmitName,
+  allowedSSOKeys,
+  allowedPageConfigKeys
+} from './utils'
 
 export default {
   name: 'VueDisqus',
@@ -34,7 +39,7 @@ export default {
       type: Object,
       default: () => ({
         root: null,
-        rootMargin: '200px',
+        rootMargin: '300px',
         threshold: 0.5
       })
     }
@@ -56,16 +61,6 @@ export default {
   },
 
   methods: {
-    reset (dsq = window.DISQUS) {
-      const setBaseConfig = this.setBaseConfig
-      dsq.reset({
-        reload: true,
-        config: function () {
-          setBaseConfig(this)
-        }
-      })
-    },
-
     init () {
       if (window.DISQUS) return this.reset()
       const setBaseConfig = this.setBaseConfig
@@ -76,6 +71,16 @@ export default {
       if (this.$route) this.$watch('$route.path', () => this.reset())
     },
 
+    reset (dsq = window.DISQUS) {
+      const setBaseConfig = this.setBaseConfig
+      dsq.reset({
+        reload: true,
+        config: function () {
+          setBaseConfig(this)
+        }
+      })
+    },
+
     observerDisqus () {
       if ('IntersectionObserver' in window) {
         this.observer = new IntersectionObserver(this.handleObserver, this.lazyConfig)
@@ -106,6 +111,19 @@ export default {
       }, 0)
     },
 
+    setBaseConfig (disqusConfig) {
+      this.setPageConfig(disqusConfig)
+      this.cbDisqus(disqusConfig)
+
+      if (this.ssoConfig && Object.keys(this.ssoConfig).length) {
+        Object.assign(disqusConfig.sso, this.ssoConfig)
+      }
+
+      if (this.lang) {
+        disqusConfig.language = this.lang
+      }
+    },
+
     setPageConfig (disqusConfig) {
       const defaultConfig = {
         url: this.$el.baseURI,
@@ -120,26 +138,11 @@ export default {
     },
 
     cbDisqus (disqusConfig) {
-      disqusConfig.callbacks.onReady = [() => {
-        this.$emit('ready')
-      }]
-
-      disqusConfig.callbacks.onNewComment = [(comment) => {
-        this.$emit('new-comment', comment)
-      }]
-    },
-
-    setBaseConfig (disqusConfig) {
-      this.setPageConfig(disqusConfig)
-      this.cbDisqus(disqusConfig)
-
-      if (this.ssoConfig && Object.keys(this.ssoConfig).length) {
-        Object.assign(disqusConfig.sso, this.ssoConfig)
-      }
-
-      if (this.lang) {
-        disqusConfig.language = this.lang
-      }
+      callbacks.forEach(cb => {
+        disqusConfig.callbacks[cb] = [e => {
+          this.$emit(getEmitName(cb), e)
+        }]
+      })
     }
   }
 }

diff --git a/src/utils.js b/src/utils.js
@@ -1,2 +1,5 @@
 export const allowedPageConfigKeys = ['api_key', 'author_s3', 'category_id', 'identifier', 'integration', 'language', 'remote_auth_s3', 'slug', 'title', 'url']
 export const allowedSSOKeys = ['name', 'button', 'icon', 'url', 'logout', 'width', 'height']
+export const callbacks = ['afterRender', 'onInit', 'onIdentify', 'beforeComment', 'onNewComment', 'onPaginate', 'onReady', 'preData', 'preInit', 'preReset']
+
+export const getEmitName = str => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase().replace('on-', '')