⚡ Refactoring the comments component js scripts.

assets/js/config.js

@@ -1,4 +1,15 @@
-if (!window.NexT) window.NexT = {};
+/* global NexT, boot, CONFIG */
+window.NexT = {};
+NexT.boot = {};
+NexT.comments = {};
+
+NexT.comments.register = function() {
+  if (!NexT.CONFIG.page.comments) return;
+  for(var c in NexT.comments) { 
+    if (c === 'register') continue;
+    eval('NexT.comments.'+c)();
+  };
+};
 
 (function() {
   const className = 'next-config';

assets/js/next-boot.js

@@ -1,11 +1,27 @@
-/* global NexT, CONFIG */
-NexT.boot = {};
+/* boot starup */
+
+(function () {
+  const onPageLoaded = () => document.dispatchEvent(
+    new Event('page:loaded', {
+      bubbles: true
+    })
+  );
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('readystatechange', onPageLoaded, { once: true });
+  } else {
+    onPageLoaded();
+  }
+  document.addEventListener('pjax:success', onPageLoaded);
+})();
 
 NexT.boot.registerEvents = function() {
 
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();
   NexT.utils.registerToolButtons();
+  // Register comment's components
+  NexT.comments.register();
 
   // Mobile top menu bar.
   document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {

assets/js/third-party/comments/artalk.js

@@ -1,13 +1,8 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+NexT.comments.giscus = function() {
   const element = '.artalk-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.artalk
+  if (!NexT.CONFIG.artalk
     || !NexT.utils.checkDOMExist(element)) return; 
 
-  const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css);
-  NexT.utils.getStyle(artalk_css, null);
-
   const artalk_js = NexT.utils.getCDNResource(NexT.CONFIG.artalk.js);
   const {
     site,
@@ -15,10 +10,10 @@ document.addEventListener('DOMContentLoaded', () => {
     server,
   } = NexT.CONFIG.artalk.cfg;
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(artalk_js, {
-    }))
-    .then(() => {
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(artalk_js, function(){
+      const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css);
+      NexT.utils.getStyle(artalk_css);
 
       new Artalk({
         el          : element,
@@ -30,7 +25,8 @@ document.addEventListener('DOMContentLoaded', () => {
         placeholder : placeholder,
         darkMode    : 'auto'
       });      
+    });
 
-      NexT.utils.hiddeLodingCmp(element);
+    NexT.utils.hiddeLodingCmp(element);
   });
-});
+}

assets/js/third-party/comments/giscus.js

@@ -1,5 +1,4 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+NexT.comments.giscus = function() {
   const element = '.giscus-container';
   if (!NexT.CONFIG.page.comments 
     || !NexT.CONFIG.giscus
@@ -17,8 +16,8 @@ document.addEventListener('DOMContentLoaded', () => {
     theme } = NexT.CONFIG.giscus.cfg;
 
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(NexT.CONFIG.giscus.js, {
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(NexT.CONFIG.giscus.js, {
       attributes: {
         'async'                  : true,
         'crossorigin'            : 'anonymous',
@@ -35,7 +34,8 @@ document.addEventListener('DOMContentLoaded', () => {
         'data-loading'           : 'lazy'
       },
       parentNode: document.querySelector(element)
-    }));
+    });   
     
     NexT.utils.hiddeLodingCmp(element);
-});
+  });      
+}

assets/js/third-party/comments/livere.js

@@ -1,11 +1,9 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+NexT.comments.giscus = function() {
   const element = '#lv-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.livere
+  if (!NexT.CONFIG.livere
     || !NexT.utils.checkDOMExist(element)) return; 
 
-  NexT.utils.loadComments(element).then(() => {
+  NexT.utils.lazyLoadComponent(element, function() {
     NexT.utils.getScript(NexT.CONFIG.livere.js, {
       attributes: {
         async: true
@@ -15,4 +13,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
     NexT.utils.hiddeLodingCmp(element);
   });
-});
+}

assets/js/third-party/comments/utterances.js

@@ -1,8 +1,6 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+NexT.comments.giscus = function() {
   const element = '.utterances-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.utterances
+  if (!NexT.CONFIG.utterances
     || !NexT.utils.checkDOMExist(element)) return;
 
   const { 
@@ -11,17 +9,19 @@ document.addEventListener('DOMContentLoaded', () => {
     label, 
     theme } = NexT.CONFIG.utterances.cfg;
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(NexT.CONFIG.utterances.js, {
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(NexT.CONFIG.utterances.js, {
       attributes: {
         'async'       : true,
         'crossorigin' : 'anonymous',
         'repo'        : repo,
         'issue-term'  : issueterm,
+        'label'       : label,
         'theme'       : theme
       },
       parentNode: document.querySelector(element)
-    }));
+    });
 
     NexT.utils.hiddeLodingCmp(element);
-});
+  }); 
+}

assets/js/third-party/comments/waline.js

@@ -1,8 +1,6 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+NexT.comments.waline = function() {
   const element = '.waline-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.waline
+  if (!NexT.CONFIG.waline
     || !NexT.utils.checkDOMExist(element)) return; 
   
   const {
@@ -19,10 +17,6 @@ document.addEventListener('DOMContentLoaded', () => {
     reactiontitle
   } = NexT.CONFIG.waline.cfg;
 
-
-  const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
-  NexT.utils.getStyle(waline_css, null);
-
   const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js);
 
   let locale = {
@@ -35,10 +29,10 @@ document.addEventListener('DOMContentLoaded', () => {
     locale['reaction'+index] = value;
   });
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(waline_js, {
-    }))
-    .then(() => {
+  NexT.utils.lazyLoadComponent(element, function () {    
+    NexT.utils.getScript(waline_js, function(){
+      const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
+      NexT.utils.getStyle(waline_css);
 
       Waline.init({
         locale,
@@ -55,5 +49,6 @@ document.addEventListener('DOMContentLoaded', () => {
       });
 
       NexT.utils.hiddeLodingCmp(element);
+    })
   });
-});
+}

assets/js/utils.js

@@ -1,4 +1,4 @@
-/* global NexT, CONFIG */
+/* util tools */
 
 HTMLElement.prototype.wrap = function (wrapper) {
   this.parentNode.insertBefore(wrapper, this);
@@ -6,21 +6,6 @@ HTMLElement.prototype.wrap = function (wrapper) {
   wrapper.appendChild(this);
 };
 
-(function () {
-  const onPageLoaded = () => document.dispatchEvent(
-    new Event('page:loaded', {
-      bubbles: true
-    })
-  );
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('readystatechange', onPageLoaded, { once: true });
-  } else {
-    onPageLoaded();
-  }
-  document.addEventListener('pjax:success', onPageLoaded);
-})();
-
 NexT.utils = {
   registerToolButtons: function () {
     const buttons = document.querySelector('.tool-buttons');
@@ -32,13 +17,12 @@ NexT.utils = {
         targetId = targetId.substring(5);
       }
       button.addEventListener('click', () => {
-        NexT.utils.slidScrollBarAnime(targetId);
+        this.slidScrollBarAnime(targetId);
       });
     });
 
     buttons.querySelector('div#toggle-theme').addEventListener('click', () => {
       const cur_theme = document.documentElement.getAttribute('data-theme');
-      console.log();
       window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark');
     });
   },
@@ -65,14 +49,14 @@ NexT.utils = {
     const runtimeCount = document.getElementById('runTimes');
     if (runtimeCount) {
       const publishDate = runtimeCount.getAttribute('data-publishDate');
-      const runTimes = NexT.utils.diffDate(publishDate, 2);
+      const runTimes = this.diffDate(publishDate, 2);
       runtimeCount.innerText = runTimes;
     }
 
     const wordsCount = document.getElementById('wordsCount');
     if (wordsCount) {
       const words = wordsCount.getAttribute('data-count');
-      wordsCount.innerText = NexT.utils.numberFormat(words);
+      wordsCount.innerText = this.numberFormat(words);
     }
 
     const readTimes = document.getElementById('readTimes');
@@ -99,7 +83,7 @@ NexT.utils = {
 
     const lastPushDate = document.getElementById('last-push-date');
     if (lastPushDate) {
-      const pushDateVal = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
+      const pushDateVal = this.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
       lastPushDate.innerText = pushDateVal;
     }
 
@@ -108,22 +92,22 @@ NexT.utils = {
       const valIds = [0, 2, 4, 6];
       const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
       for (var i in valIds) {
-        let pv = NexT.utils.numberFormat(statisWidget[valIds[i]].innerText);
+        let pv = this.numberFormat(statisWidget[valIds[i]].innerText);
         document.getElementById(domIds[i]).innerText = pv;
       }
     }
 
-    setTimeout(() => { NexT.utils.fmtBusuanzi(); }, 500);
+    setTimeout(() => { this.fmtBusuanzi(); }, 500);
   },
 
   fmtBusuanzi: function () {
     const bszUV = document.getElementById('busuanzi_value_site_uv');
     if (bszUV) {
-      bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
+      bszUV.innerText = this.numberFormat(bszUV.innerText);
     }
     const bszPV = document.getElementById('busuanzi_value_site_pv');
     if (bszPV) {
-      bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText);
+      bszPV.innerText = this.numberFormat(bszPV.innerText);
     }
   },
 
@@ -594,7 +578,7 @@ NexT.utils = {
 
   lazyLoadComponent: function(selector, legacyCallback) {
     if (legacyCallback) {
-      return this.loadComments(selector).then(legacyCallback);
+      return this.lazyLoadComponent(selector).then(legacyCallback);
     }
     return new Promise(resolve => {
       const element = document.querySelector(selector);

layouts/partials/scripts/global.html

@@ -9,9 +9,8 @@
 <script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
 
 {{- $config := resources.Get "js/config.js" }}
-{{- $motion := resources.Get "js/motion.js" }}
-{{- $boot := resources.Get "js/next-boot.js" }}
 {{- $utils := resources.Get "js/utils.js" }}
+{{- $boot := resources.Get "js/next-boot.js" }}
 {{- $nextjs := (slice $config $utils $boot ) }}
 {{- if .Site.Params.motion.enable }}
 {{ $motionjs := resources.Get "js/motion.js" }}
@@ -40,7 +39,7 @@
 {{- if isset .Site.Params "giscus" }}
 {{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
 {{- $nextjs = $nextjs | append $giscusjs }}
-{{- end }}
+{{- end}}
 {{- if isset .Site.Params "livere" }}
 {{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
 {{- $nextjs = $nextjs | append $liverejs }}