UNPKG

vue3-disqus

Version:

Vue component to integrate Disqus comments in your application, with support for SPA

2 lines (1 loc) 4.04 kB
(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.Vue3Disqus={},a.Vue))})(this,function(a,t){"use strict";const y="Disqus shortname is required",w=["api_key","author_s3","category_id","identifier","integration","language","remote_auth_s3","slug","title","url"],D=["name","button","icon","url","logout","profile_url","width","height"],E=["preData","preInit","afterRender","onInit","onReady","onIdentify","onPaginate","onNewComment","beforeComment","preReset"],h=Symbol("disqus"),O=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase().replace("on-",""),S=e=>requestAnimationFrame(()=>requestAnimationFrame(e)),I=t.defineComponent({name:"DisqusComments",props:{url:String,shortname:String,class:String,identifier:{type:String,required:!0},pageConfig:{type:Object,validator:e=>Object.keys(e).every(o=>w.includes(o))},ssoConfig:{type:Object,validator:e=>Object.keys(e).every(o=>D.includes(o))},language:{type:String,default:"en"},lazy:{type:Boolean,default:!0},lazyConfig:{type:Object,default:()=>({root:null,rootMargin:"300px",threshold:.5})}},setup(e,{emit:o}){const s=t.inject(h,{}),c=t.getCurrentInstance(),u=t.ref(null),m=t.computed(()=>{const n=e.shortname||s.shortname;if(!n)throw new Error(y);return n});t.watch(()=>e.language,l),t.onMounted(()=>{if(e.lazy)return _();g()});function g(){if(s&&(s.reset=l),window.DISQUS)return l();window.disqus_config=function(){b(this)},f(),t.watch(()=>e.url,l)}function l(){window.DISQUS.reset({reload:!0,config:function(){b(this)}})}function _(){var n;if("IntersectionObserver"in window)return u.value=new IntersectionObserver(d,e.lazyConfig),u.value.observe((n=c==null?void 0:c.proxy)==null?void 0:n.$el);g()}function d(n){n.forEach(r=>{var i;r.isIntersecting&&((i=u.value)==null||i.disconnect(),g())})}function f(){const n=+new Date,r=document,i=r.createElement("script");i.setAttribute("id","embed-disqus-script"),i.setAttribute("data-timestamp",n.toString()),i.type="text/javascript",i.async=!0,i.src=`//${m.value}.disqus.com/embed.js`,(r.body||r.head).appendChild(i)}function b(n){R(n),B(n),e.ssoConfig&&Object.keys(e.ssoConfig).length&&Object.assign(n.sso,e.ssoConfig),n.language=e.language}function R(n){const r={url:e.url,identifier:e.identifier};Object.assign(n.page,r),e.pageConfig&&Object.keys(e.pageConfig).length&&Object.assign(n.page,e.pageConfig)}function B(n){E.forEach(r=>{n.callbacks[r]=[i=>{o(O(r),i)}]})}}}),U="",C=(e,o)=>{const s=e.__vccOpts||e;for(const[c,u]of o)s[c]=u;return s},$={id:"disqus_thread"};function j(e,o,s,c,u,m){return t.openBlock(),t.createElementBlock("div",$)}const q=C(I,[["render",j]]),k=t.defineComponent({name:"DisqusCount",props:{url:String,shortname:String,identifier:{type:String,required:!0},tag:{type:String,default:"span"}},setup(e){const o=t.inject(h,{}),s=t.computed(()=>e.tag==="a"?`${e.url}#disqus_thread`:"#"),c=t.computed(()=>e.tag==="span"?e.url:null),u=t.computed(()=>{const d=e.shortname||o.shortname;if(!d)throw new Error(y);return d}),m={href:s.value,"data-disqus-url":c.value,"data-disqus-identifier":e.identifier};t.onMounted(g);function g(){if("DISQUSWIDGETS"in window)return S(()=>l());_(),t.watch(()=>e.url,()=>S(()=>l()))}function l(){window.DISQUSWIDGETS.getCount({reset:!0})}function _(){if(document.getElementById("dsq-count-scr"))return;const d=document,f=d.createElement("script");f.async=!0,f.id="dsq-count-scr",f.src=`//${u.value}.disqus.com/count.js`,(d.head||d.body).appendChild(f)}return{disqusAttrs:m}}});function A(e,o,s,c,u,m){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),t.mergeProps({class:"disqus-comment-count"},e.disqusAttrs),null,16)}const p=C(k,[["render",A]]);function v(e,o={}){e.component("DisqusComments",q),e.component("DisqusCount",p);const s={shortname:o.shortname,reset:null};e.provide(h,s)}a.DisqusComments=q,a.DisqusCount=p,a.default=v,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});