From 94e06a209ce06d67a6051402442035c0824139a3 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 19 May 2019 18:13:55 +0800 Subject: [PATCH 1/3] feat: add hasMore prop --- src/disqus.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/disqus.js b/src/disqus.js index 1676c94..57d56d7 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -448,7 +448,8 @@ author: comment.author.name, // 如果不设置 admin 会返回 undefined，所以需要嘴一个判断 isPrimary: (disqusjs.config.admin ? (comment.author.username === disqusjs.config.admin) : false), - children: getChildren(+comment.id) + children: getChildren(+comment.id), + hasMore: comment.hasMore } }; From 3b99e35cc0c9559342c964a4171860f5d907c6fa Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 19 May 2019 18:32:26 +0800 Subject: [PATCH 2/3] feat: add hasMore btn and add listener --- src/disqus.js | 37 +++++++++++++++++++++++++++++++++++-- src/disqusjs.css | 15 +++++++++++++++ 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/disqus.js b/src/disqus.js index 57d56d7..f602d58 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -298,6 +298,7 @@ let getComment = (cursor) => { let $loadMoreBtn = $$('dsqjs-load-more'), $orderRadio = d.getElementsByClassName('dsqjs-order-radio'); + $loadHideCommentInDisqus = d.getElementsByClassName('dsqjs-has-more-btn'); let getMoreComment = () => { // 为按钮们取消事件，避免重复绑定 @@ -306,6 +307,9 @@ i.removeEventListener('change', switchSortType); }; $loadMoreBtn.removeEventListener('click', getMoreComment); + for (let i of $loadHideCommentInDisqus) { + i.removeEventListener('click', checkDisqus); + }; // 加载下一页评论 getComment(disqusjs.page.next); } @@ -334,6 +338,10 @@ i.removeEventListener('change', switchSortType); }; $loadMoreBtn.removeEventListener('click', getMoreComment); + for (let i of $loadHideCommentInDisqus) { + i.removeEventListener('click', checkDisqus); + }; + // 清空评论列表和其它参数 disqusjs.page.comment = []; disqusjs.page.next = ''; // 不然切换排序方式以后以后加载更多评论就会重复加载 @@ -404,6 +412,10 @@ i.addEventListener('change', switchSortType); } + for (let i of $loadHideCommentInDisqus) { + i.addEventListener('click', checkDisqus); + }; + if (res.cursor.hasNext) { // 将 cursor.next 存入 disqusjs 变量中供不能传参的不匿名函数使用 disqusjs.page.next = res.cursor.next; @@ -449,6 +461,12 @@ // 如果不设置 admin 会返回 undefined，所以需要嘴一个判断 isPrimary: (disqusjs.config.admin ? (comment.author.username === disqusjs.config.admin) : false), children: getChildren(+comment.id), + /* + * Disqus 改变了 Private API 的行为 + * https://github.com/fooleap/disqus-php-api/issues/44 + * 默认隐藏更多的评论，通过 hasMore 字段判断 + */ + // 将 hasMore 字段提升到上层字段中 hasMore: comment.hasMore } }; @@ -595,7 +613,14 @@ children.map((comment) => { comment = processData(comment); comment.nesting = nesting + 1; - html += `
  • ${renderPostItem(comment.comment)}${childrenComments(comment)}
    • `; + + // 处理可能存在的隐藏回复 + let hasMoreEl = ``; + if (comment.hasMore) { + hasMoreEl = `

    切换到 Disqus 完整模式 显示更多回复

    ` + } + + html += `
  • ${renderPostItem(comment.comment)}${hasMoreEl}${childrenComments(comment)}
    • `; }); html += ''; @@ -617,7 +642,14 @@ comment.nesting = 1; } comment = processData(comment); - html += `
  • ${renderPostItem(comment.comment)}${childrenComments(comment)}
    • `; + + // 处理可能存在的隐藏回复 + let hasMoreEl = ``; + if (comment.hasMore) { + hasMoreEl = `

    切换到 Disqus 完整模式 显示更多回复

    ` + } + + html += `
  • ${renderPostItem(comment.comment)}${hasMoreEl}${childrenComments(comment)}
    • `; }); @@ -627,6 +659,7 @@ $$('dsqjs-post-container').innerHTML = html; + // 为 checkDisqus 和 forceDisqus 按钮添加事件 $$('dsqjs-reload-disqus').addEventListener('click', checkDisqus); $$('dsqjs-force-disqus').addEventListener('click', forceDisqus); } diff --git a/src/disqusjs.css b/src/disqusjs.css index 3cf5b24..f1970b1 100644 --- a/src/disqusjs.css +++ b/src/disqusjs.css @@ -210,9 +210,11 @@ #dsqjs .dsqjs-post-list.dsqjs-children>li { margin-left: 48px; } + #dsqjs .dsqjs-post-list .dsqjs-post-avatar { margin-right: 12px; } + #dsqjs .dsqjs-post-list .dsqjs-post-item { margin-bottom: 20px; } @@ -291,3 +293,16 @@ background-color: #dcdcdc; cursor: pointer; } + +#dsqjs p.dsqjs-has-more { + margin-bottom: 20px; + margin-left: 48px; +} + +#dsqjs p.dsqjs-has-more a.dsqjs-has-more-btn { + font-size: 13px; + line-height: 15px; + color: #656c7a; + text-decoration: underline; + cursor: pointer; +} \ No newline at end of file From 41fdfde9b7dfb6b93307e9e22c6817346a4568ca Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 19 May 2019 18:53:40 +0800 Subject: [PATCH 3/3] fix(hasMore): change btn typo & style --- src/disqus.js | 8 ++++---- src/disqusjs.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/disqus.js b/src/disqus.js index f602d58..5c03395 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -617,10 +617,10 @@ // 处理可能存在的隐藏回复 let hasMoreEl = ``; if (comment.hasMore) { - hasMoreEl = `

    切换到 Disqus 完整模式 显示更多回复

    ` + hasMoreEl = `

    切换到 完整 Disqus 模式 显示更多回复

    ` } - html += `
  • ${renderPostItem(comment.comment)}${hasMoreEl}${childrenComments(comment)}
    • `; + html += `
  • ${renderPostItem(comment.comment)}${childrenComments(comment)}${hasMoreEl}
    • `; }); html += ''; @@ -646,10 +646,10 @@ // 处理可能存在的隐藏回复 let hasMoreEl = ``; if (comment.hasMore) { - hasMoreEl = `

    切换到 Disqus 完整模式 显示更多回复

    ` + hasMoreEl = `

    切换到 完整 Disqus 模式 显示更多回复

    ` } - html += `
  • ${renderPostItem(comment.comment)}${hasMoreEl}${childrenComments(comment)}
    • `; + html += `
  • ${renderPostItem(comment.comment)}${childrenComments(comment)}${hasMoreEl}
    • `; }); diff --git a/src/disqusjs.css b/src/disqusjs.css index f1970b1..f97fcd9 100644 --- a/src/disqusjs.css +++ b/src/disqusjs.css @@ -295,13 +295,13 @@ } #dsqjs p.dsqjs-has-more { - margin-bottom: 20px; + margin-bottom: 24px; margin-left: 48px; + font-size: 13px; + line-height: 15px; } #dsqjs p.dsqjs-has-more a.dsqjs-has-more-btn { - font-size: 13px; - line-height: 15px; color: #656c7a; text-decoration: underline; cursor: pointer;