Make lazyload & PJAX available for all comment systems (#1152)

theme-next · Dec 6, 2019 · a95b750 · a95b750
1 parent b4f1972
commit a95b750
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 105 deletions.
diff --git a/_config.yml b/_config.yml
@@ -576,6 +576,8 @@ comments:
   active:
   # Setting `true` means remembering the comment system selected by the visitor.
   storage: true
+  # Lazyload all comment systems.
+  lazyload: false
   # Modify texts or order for any navs, here are some examples.
   nav:
     #disqus:
@@ -589,7 +591,6 @@ disqus:
   enable: false
   shortname:
   count: true
-  lazyload: false
   #post_meta_order: 0
 
 # DisqusJS
@@ -599,8 +600,7 @@ disqus:
 disqusjs:
   enable: false
   # API Endpoint of Disqus API (https://disqus.com/api/).
-  # Leave api empty if you are able to connect to Disqus API.
-  # Otherwise you need a reverse proxy for Disqus API.
+  # Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.
   # For example:
   # api: https://disqus.skk.moe/disqus/
   api:

diff --git a/layout/_partials/comments.swig b/layout/_partials/comments.swig
@@ -24,15 +24,15 @@
               element.classList.add('active');
               document.querySelectorAll('.comment-position').forEach(rmActive => rmActive.classList.remove('active'));
               document.querySelector(`.comment-position.${commentClass}`).classList.add('active');
-              {%- if theme.comments.storage %}
+              if (CONFIG.comments.storage) {
                 localStorage.setItem('comments_active', commentClass);
-              {%- endif %}
+              }
             });
           });
-          let activeClass = '{{ theme.comments.activeClass }}';
-          {%- if theme.comments.storage %}
+          let activeClass = CONFIG.comments.activeClass;
+          if (CONFIG.comments.storage) {
             activeClass = localStorage.getItem('comments_active') || activeClass;
-          {%- endif %}
+          }
           if (activeClass) {
             let activeButton = document.querySelector(`.comment-button.${activeClass}`);
             if (activeButton) {
@@ -56,26 +56,28 @@
           {%- endfor %}
         </div>
       </div>
-      <script>
-        window.addEventListener('tabs:register', () => {
-          let activeClass = '{{ theme.comments.activeClass }}';
-          {%- if theme.comments.storage %}
-            activeClass = localStorage.getItem('comments_active') || activeClass;
-          {%- endif %}
-          if (activeClass) {
-            let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
-            if (activeTab) {
-              activeTab.click();
-            }
-          }
-        });
-        {%- if theme.comments.storage %}
-        window.addEventListener('tabs:click', event => {
-          let commentClass = event.target.classList[1];
-          localStorage.setItem('comments_active', commentClass);
-        });
-        {%- endif %}
-      </script>
     {%- endif %}
   {%- endif %}
 {%- endif %}
+
+<script>
+  window.addEventListener('tabs:register', () => {
+    let activeClass = CONFIG.comments.activeClass;
+    if (CONFIG.comments.storage) {
+      activeClass = localStorage.getItem('comments_active') || activeClass;
+    }
+    if (activeClass) {
+      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+      if (activeTab) {
+        activeTab.click();
+      }
+    }
+  });
+  if (CONFIG.comments.storage) {
+    window.addEventListener('tabs:click', event => {
+      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+      let commentClass = event.target.classList[1];
+      localStorage.setItem('comments_active', commentClass);
+    });
+  }
+</script>
diff --git a/layout/_partials/head/head-unique.swig b/layout/_partials/head/head-unique.swig
@@ -8,8 +8,6 @@
   CONFIG.page = {
     sidebar: {{ page.sidebar | json }},
     isHome: {{ is_home() }},
-    isPost: {{ is_post() }},
-    isPage: {{ is_page() }},
-    isArchive: {{ is_archive() }}
+    isPost: {{ is_post() }}
   };
 </script>
diff --git a/layout/_partials/head/head.swig b/layout/_partials/head/head.swig
@@ -75,6 +75,7 @@
     mediumzoom: {{ theme.mediumzoom }},
     lazyload: {{ theme.lazyload }},
     pangu: {{ theme.pangu }},
+    comments: {{ theme.comments | json }},
     algolia: {
       appID: '{{ config.algolia.applicationID }}',
       apiKey: '{{ config.algolia.apiKey }}',

diff --git a/layout/_third-party/comments/changyan.swig b/layout/_third-party/comments/changyan.swig
@@ -2,7 +2,7 @@
   <script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId={{ theme.changyan.appid }}"></script>
 {% elif page.comments %}
   <script>
-  (function() {
+  NexT.utils.loadComments(() => {
     var appid = '{{ theme.changyan.appid }}';
     var conf = '{{ theme.changyan.appkey }}';
     var width = window.innerWidth || document.documentElement.clientWidth;
@@ -11,7 +11,7 @@
     } else {
       var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})});
     }
-  })();
+  });
   </script>
   <script src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
 {%- endif %}
diff --git a/layout/_third-party/comments/disqus.swig b/layout/_third-party/comments/disqus.swig
@@ -12,7 +12,7 @@
 {%- endif %}
 {%- if page.comments %}
 <script>
-  function loadComments() {
+  NexT.utils.loadComments(() => {
     if (window.DISQUS) {
       DISQUS.reset({
         reload: true,
@@ -33,30 +33,6 @@
       s.setAttribute('data-timestamp', '' + +new Date());
       (d.head || d.body).appendChild(s);
     }
-  }
-  {%- if theme.disqus.lazyload %}
-    (function() {
-      var offsetTop = document.getElementById('comments').offsetTop - window.innerHeight;
-      if (offsetTop <= 0) {
-        // load directly when there's no a scrollbar
-        window.addEventListener('load', loadComments, false);
-      } else {
-        var disqus_scroll = () => {
-          // offsetTop may changes because of manually resizing browser window or lazy loading images.
-          var offsetTop = document.getElementById('comments').offsetTop - window.innerHeight;
-          var scrollTop = window.scrollY;
-
-          // pre-load comments a bit? (margin or anything else)
-          if (offsetTop - scrollTop < 60) {
-            window.removeEventListener('scroll', disqus_scroll);
-            loadComments();
-          }
-        };
-        window.addEventListener('scroll', disqus_scroll);
-      }
-    })();
-  {% else %}
-    window.addEventListener('load', loadComments, false);
-  {%- endif %}
+  });
 </script>
 {%- endif %}
diff --git a/layout/_third-party/comments/disqusjs.swig b/layout/_third-party/comments/disqusjs.swig
@@ -5,6 +5,7 @@
 {%- set disqusjs_js_uri = theme.vendors.disqusjs_js or '//cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js' %}
 
 <script>
+NexT.utils.loadComments(() => {
   NexT.utils.getScript('{{ disqusjs_js_uri }}', () => {
     window.dsqjs = new DisqusJS({
       api: '{{ theme.disqusjs.api }}' || 'https://disqus.com/api/',
@@ -15,5 +16,6 @@
       title: {{ page.title | json }},
     });
   }, window.DisqusJS);
+});
 </script>
 {%- endif %}
diff --git a/layout/_third-party/comments/gitalk.swig b/layout/_third-party/comments/gitalk.swig
@@ -5,6 +5,7 @@
 {%- set gitalk_js_uri = theme.vendors.gitalk_js or '//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js' %}
 
 <script>
+NexT.utils.loadComments(() => {
   NexT.utils.getScript('{{ gitalk_js_uri }}', () => {
     var gitalk = new Gitalk({
       clientID: '{{ theme.gitalk.client_id }}',
@@ -22,5 +23,6 @@
     });
     gitalk.render('gitalk-container');
   }, window.Gitalk);
+});
 </script>
 {%- endif %}
diff --git a/layout/_third-party/comments/livere.swig b/layout/_third-party/comments/livere.swig
@@ -1,5 +1,6 @@
 {%- if page.comments %}
 <script>
+NexT.utils.loadComments(() => {
   window.livereOptions = {
     refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
   };
@@ -11,5 +12,6 @@
     j.async = true;
     e.parentNode.insertBefore(j, e);
   })(document, 'script');
+});
 </script>
 {%- endif %}
diff --git a/layout/_third-party/comments/valine.swig b/layout/_third-party/comments/valine.swig
@@ -1,27 +1,29 @@
 {%- set valine_uri = theme.vendors.valine or '//unpkg.com/valine/dist/Valine.min.js' %}
 
 <script>
-NexT.utils.getScript('{{ valine_uri }}', () => {
-  var GUEST = ['nick', 'mail', 'link'];
-  var guest = '{{ theme.valine.guest_info }}';
-  guest = guest.split(',').filter(item => {
-    return GUEST.includes(item);
-  });
-  new Valine({
-    el: '#comments',
-    verify: {{ theme.valine.verify }},
-    notify: {{ theme.valine.notify }},
-    appId: '{{ theme.valine.appid }}',
-    appKey: '{{ theme.valine.appkey }}',
-    placeholder: {{ theme.valine.placeholder | json }},
-    avatar: '{{ theme.valine.avatar }}',
-    meta: guest,
-    pageSize: '{{ theme.valine.pageSize }}' || 10,
-    visitor: {{ theme.valine.visitor }},
-    lang: '{{ theme.valine.language }}' || 'zh-cn',
-    path: location.pathname,
-    recordIP: {{ theme.valine.recordIP }},
-    serverURLs: '{{ theme.valine.serverURLs }}'
-  });
-}, window.Valine);
+NexT.utils.loadComments(() => {
+  NexT.utils.getScript('{{ valine_uri }}', () => {
+    var GUEST = ['nick', 'mail', 'link'];
+    var guest = '{{ theme.valine.guest_info }}';
+    guest = guest.split(',').filter(item => {
+      return GUEST.includes(item);
+    });
+    new Valine({
+      el: '#comments',
+      verify: {{ theme.valine.verify }},
+      notify: {{ theme.valine.notify }},
+      appId: '{{ theme.valine.appid }}',
+      appKey: '{{ theme.valine.appkey }}',
+      placeholder: {{ theme.valine.placeholder | json }},
+      avatar: '{{ theme.valine.avatar }}',
+      meta: guest,
+      pageSize: '{{ theme.valine.pageSize }}' || 10,
+      visitor: {{ theme.valine.visitor }},
+      lang: '{{ theme.valine.language }}' || 'zh-cn',
+      path: location.pathname,
+      recordIP: {{ theme.valine.recordIP }},
+      serverURLs: '{{ theme.valine.serverURLs }}'
+    });
+  }, window.Valine);
+});
 </script>
diff --git a/source/js/motion.js b/source/js/motion.js
@@ -61,13 +61,13 @@ NexT.motion.middleWares = {
       });
     }
 
-    NexT.utils.isMist() && logoLineTop && logoLineBottom
+    CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom
     && sequence.push(
       getMistLineSettings(logoLineTop, '100%'),
       getMistLineSettings(logoLineBottom, '-100%')
     );
 
-    NexT.utils.isMuse() && image && pushImageToSequence();
+    CONFIG.scheme === 'Muse' && image && pushImageToSequence();
 
     title && sequence.push({
       e: title,
@@ -81,7 +81,7 @@ NexT.motion.middleWares = {
       o: {duration: 200}
     });
 
-    (NexT.utils.isPisces() || NexT.utils.isGemini()) && image && pushImageToSequence();
+    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushImageToSequence();
 
     if (sequence.length > 0) {
       sequence[sequence.length - 1].o.complete = function() {
@@ -146,7 +146,7 @@ NexT.motion.middleWares = {
         Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
       }
     }
-    if (NexT.utils.isPisces() || NexT.utils.isGemini()) {
+    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') {
       integrator.next();
     }
   },
@@ -155,7 +155,7 @@ NexT.motion.middleWares = {
     var sidebarAffix = document.querySelector('.sidebar-inner');
     var sidebarAffixTransition = CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
-    if (sidebarAffixTransition && (NexT.utils.isPisces() || NexT.utils.isGemini())) {
+    if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
       Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
         display : null,
         duration: 200,

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -317,22 +317,6 @@ NexT.utils = {
     return !this.isTablet() && !this.isMobile();
   },
 
-  isMuse: function() {
-    return CONFIG.scheme === 'Muse';
-  },
-
-  isMist: function() {
-    return CONFIG.scheme === 'Mist';
-  },
-
-  isPisces: function() {
-    return CONFIG.scheme === 'Pisces';
-  },
-
-  isGemini: function() {
-    return CONFIG.scheme === 'Gemini';
-  },
-
   /**
    * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
    * Need for Sidebar/TOC inner scrolling if content taller then viewport.
@@ -344,7 +328,7 @@ NexT.utils = {
     var sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
     var sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
     // Margin of sidebar b2t: 8px -10px -20px, brings a different of 12px.
-    if (NexT.utils.isPisces() || NexT.utils.isGemini()) sidebarSchemePadding += (sidebarOffset * 2) - 12;
+    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += (sidebarOffset * 2) - 12;
     // Initialize Sidebar & TOC Height.
     var sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
     document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight;
@@ -364,7 +348,7 @@ NexT.utils = {
       document.querySelector('.sidebar-nav-overview').click();
     }
     NexT.utils.initSidebarDimension();
-    if (!this.isDesktop() || this.isPisces() || this.isGemini()) return;
+    if (!this.isDesktop() || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     var display = CONFIG.page.sidebar;
     if (typeof display !== 'boolean') {
@@ -391,5 +375,32 @@ NexT.utils = {
       script.src = url;
       document.head.appendChild(script);
     }
+  },
+
+  loadComments: function(callback) {
+    if (!CONFIG.comments.lazyload || !document.getElementById('comments')) {
+      return callback();
+    }
+    var offsetTop = document.getElementById('comments').offsetTop - window.innerHeight;
+    if (offsetTop <= 0) {
+      // load directly when there's no a scrollbar
+      callback();
+    } else {
+      var scrollListener = () => {
+        // offsetTop may changes because of manually resizing browser window or lazy loading images.
+        var offsetTop = document.getElementById('comments').offsetTop - window.innerHeight;
+        var scrollTop = window.scrollY;
+
+        // pre-load comments a bit? (margin or anything else)
+        if (offsetTop - scrollTop < 60) {
+          window.removeEventListener('scroll', scrollListener);
+          callback();
+        }
+      };
+      window.addEventListener('scroll', scrollListener);
+      window.addEventListener('pjax:send', () => {
+        window.removeEventListener('scroll', scrollListener);
+      });
+    }
   }
 };