feaTt: support load more comment

src/disqus.js

@@ -177,8 +177,14 @@
      * API URI: /3.0/posts/list.json?forum=[shortname]&thread=[thread id]&api_key=[apikey]
      */
 
-    let getComment = () => {
+    let getComment = (cursor) => {
-        let url = `${disqusjs.config.api}3.0/posts/list.json?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}&api_key=${disqusjs.config.apikey}`;
+        if (!cursor) {
+            cursor = '';
+        } else {
+            cursor = `&cursor=${cursor}`;
+        }
+
+        let url = `${disqusjs.config.api}3.0/posts/list.json?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&api_key=${disqusjs.config.apikey}`;
         xhr.open('GET', url, true);
         xhr.timeout = 4000;
         xhr.send();
@@ -192,6 +198,11 @@
                     document.getElementById('dsqjs-no-comment').classList.remove('dsqjs-hide');
                 }
 
+                if (res.cursor.hasNext) {
+                    document.getElementById('dsqjs-load-more').classList.remove('dsqjs-hide');
+                    document.getElementById('dsqjs-load-more').addEventListener('click', () => {getComment(res.cursor.next)});
+                }
+
             } else {
                 loadError();
             }
@@ -270,6 +281,8 @@
                 s.nesting = 1;
             }
 
+            console.log(s);
+
             return s;
         }
 
@@ -355,14 +368,15 @@
         <div id="dsqjs">
             <section class="dsqjs-action"></section>
             <section class="dsqjs-info">
-                <p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理，或使用<a href="#disqus_thread" id="dsqjs-force-dsqjs">评论基础模式</a></p>
+                <p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理，或使用<a id="dsqjs-force-dsqjs">评论基础模式</a></p>
-                <p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并<a href="#disqus_thread" id="dsqjs-reload-disqus">尝试完整 Disqus 模式</a> | <a href="#disqus_thread" id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p>
+                <p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并<a id="dsqjs-reload-disqus">尝试完整 Disqus 模式</a> | <a id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p>
-                <p id="dsqjs-thread-not-init" class="dsqjs-message dsqjs-hide">该 Thread 并没有初始化，是否 <a href="#disqus_thread" id="dsqjs-init-thread">切换到完整 Disqus 模式</a> 进行初始化？</p>
+                <p id="dsqjs-thread-not-init" class="dsqjs-message dsqjs-hide">该 Thread 并没有初始化，是否 <a id="dsqjs-init-thread">切换到完整 Disqus 模式</a> 进行初始化？</p>
-                <p id="dsqjs-load-error" class="dsqjs-message dsqjs-hide">评论基础模式出现错误，是否<a href="#disqus_thread" id="dsqjs-reload">重载</a>？</p>
+                <p id="dsqjs-load-error" class="dsqjs-message dsqjs-hide">评论基础模式出现错误，是否<a id="dsqjs-reload">重载</a>？</p>
                 <p id="dsqjs-no-comment" class="dsqjs-no-comment dsqjs-hide">这里冷冷清清的，一条评论都没有</p>
             </section>
             <section class="dsqjs-container" id="dsqjs-container">
                 <ul id="dsqjs-list" class="dsqjs-list"></ul>
+                <a href="#" id="dsqjs-load-more" class="dsqjs-load-more dsqjs-hide">加载更多评论</a>
                 <div class="dsqjs-footer">
                     <div class="dsqjs-footer-right">
                         Powered by <a href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank">DISQUS</a> & <a href="https://github.com/SukkaW/DisqusJS">DisqusJS</a>
@@ -371,7 +385,25 @@
             </section>
         </div>
         */
-        var disqusjsBaseTpl = `<div id="dsqjs"><section class="dsqjs-action"></section><section class="dsqjs-info"><p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理，或使用<a href="#disqus_thread" id="dsqjs-force-dsqjs">评论基础模式</a></p><p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并<a href="#disqus_thread" id="dsqjs-reload-disqus">尝试完整 Disqus 模式</a> | <a href="#disqus_thread" id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p><p id="dsqjs-thread-not-init" class="dsqjs-message dsqjs-hide">该 Thread 并没有初始化，是否 <a href="#disqus_thread" id="dsqjs-init-thread">切换到完整 Disqus 模式</a> 进行初始化？</p><p id="dsqjs-load-error" class="dsqjs-message dsqjs-hide">评论基础模式出现错误，是否<a href="#disqus_thread" id="dsqjs-reload">重载</a>？</p><p id="dsqjs-no-comment" class="dsqjs-no-comment dsqjs-hide">这里冷冷清清的，一条评论都没有</p></section><section class="dsqjs-container" id="dsqjs-container"><ul id="dsqjs-list" class="dsqjs-list"></ul><div class="dsqjs-footer"><div class="dsqjs-footer-right">Powered by <a href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank">DISQUS</a> & <a href="https://github.com/SukkaW/DisqusJS">DisqusJS</a></div></div></section></div>`;
+        var disqusjsBaseTpl = `<div id="dsqjs">
+        <section class="dsqjs-action"></section>
+        <section class="dsqjs-info">
+            <p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理，或使用<a id="dsqjs-force-dsqjs">评论基础模式</a></p>
+            <p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并<a id="dsqjs-reload-disqus">尝试完整 Disqus 模式</a> | <a id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p>
+            <p id="dsqjs-thread-not-init" class="dsqjs-message dsqjs-hide">该 Thread 并没有初始化，是否 <a id="dsqjs-init-thread">切换到完整 Disqus 模式</a> 进行初始化？</p>
+            <p id="dsqjs-load-error" class="dsqjs-message dsqjs-hide">评论基础模式出现错误，是否<a id="dsqjs-reload">重载</a>？</p>
+            <p id="dsqjs-no-comment" class="dsqjs-no-comment dsqjs-hide">这里冷冷清清的，一条评论都没有</p>
+        </section>
+        <section class="dsqjs-container" id="dsqjs-container">
+            <ul id="dsqjs-list" class="dsqjs-list"></ul>
+            <a id="dsqjs-load-more" class="dsqjs-load-more">加载更多评论</a>
+            <div class="dsqjs-footer">
+                <div class="dsqjs-footer-right">
+                    Powered by <a href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank">DISQUS</a> & <a href="https://github.com/SukkaW/DisqusJS">DisqusJS</a>
+                </div>
+            </div>
+        </section>
+    </div>`;
         document.getElementById('disqus_thread').innerHTML = disqusjsBaseTpl;
 
         disqusjs.mode = getLS('disqusjs_mode');

src/disqusjs.css

@@ -136,6 +136,23 @@
 #dsqjs .dsqjs-message a {
     margin-left: 2px;
     margin-right: 2px;
+    cursor: pointer;
+}
+
+#dsqjs .dsqjs-load-more {
+    font-size: 14px;
+    font-weight: 400;
+    display: block;
+    text-align: center;
+    padding: 11px 14px;
+    margin: 0 0 24px;
+    background: #687a86;
+    color: #fff;
+    cursor: pointer;
+}
+
+#dsqjs .dsqjs-load-more:hover {
+    opacity: .8;
 }
 
 .dsqjs-hide {
@@ -152,7 +169,6 @@
 
 #dsqjs .dsqjs-footer .dsqjs-footer-right {
     text-align: right;
-    float: right;
     line-height: 1.5;
     padding-right: 6px;
 }