From a5d7709f28b087a89d261409ff79c12dd4837e42 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 10 Feb 2019 17:22:49 +0800 Subject: [PATCH 1/4] feat(sort): add order elements --- src/disqus.js | 20 ++++++++++++++------ src/disqusjs.css | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/src/disqus.js b/src/disqus.js index 466d9cc..cbb759c 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -202,7 +202,11 @@ (() => { // 在 #disqus_thread 中填充 DisqusJS Container /* -
+ + */ + + + $$('disqus_thread').innerHTML = `
@@ -216,6 +220,14 @@ +
+ + + + + + +
@@ -227,11 +239,7 @@ Powered by  & DisqusJS

-
- */ - - - $$('disqus_thread').innerHTML = `
    加载更多评论
    `; +
    `; // DisqusJS 加载中信息 $$('dsqjs-msg').innerHTML = `评论基础模式加载中。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并 尝试完整 Disqus 模式 | 强制完整 Disqus 模式。` $$('dsqjs-reload-disqus').addEventListener('click', checkDisqus); diff --git a/src/disqusjs.css b/src/disqusjs.css index c569d60..c0bdf75 100644 --- a/src/disqusjs.css +++ b/src/disqusjs.css @@ -202,12 +202,12 @@ margin: 0; } -#dsqjs .dsqjs-post-list.dsqjs-children > li { +#dsqjs .dsqjs-post-list.dsqjs-children>li { margin-left: 30px; } @media (min-width: 768px) { - #dsqjs .dsqjs-post-list.dsqjs-children > li { + #dsqjs .dsqjs-post-list.dsqjs-children>li { margin-left: 48px; } #dsqjs .dsqjs-post-list .dsqjs-post-avatar { @@ -219,7 +219,7 @@ } @media (min-width: 1024px) { - #dsqjs .dsqjs-post-list.dsqjs-children > li { + #dsqjs .dsqjs-post-list.dsqjs-children>li { margin-left: 60px; } } @@ -261,4 +261,33 @@ display: inline-block; height: 12px; width: 65.7px; +} + +#dsqjs .dsqjs-order { + display: flex; + float: right; + align-items: center; + margin-top: 10px; + margin-bottom: 12px; +} + +#dsqjs .dsqjs-order-radio { + display: none; +} + +#dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label { + color: #fff; + background-color: #888; +} + +#dsqjs .dsqjs-order-label { + display: block; + height: 20px; + line-height: 20px; + margin-right: 10px; + font-size: 12px; + border-radius: 2px; + padding: 0 5px; + background-color: #dcdcdc; + cursor: pointer; } \ No newline at end of file From 4237b736f55584c71243b53e9916251dafb5fc87 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 10 Feb 2019 18:16:52 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E7=83=ADfactor:=20use=20/threads/listPosts?= =?UTF-8?q?Threaded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ref: https://blog.fooleap.org/disqus-api-comments-order-by-desc.html --- src/disqus.js | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/disqus.js b/src/disqus.js index cbb759c..2c66633 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -201,12 +201,9 @@ function loadDsqjs() { (() => { // 在 #disqus_thread 中填充 DisqusJS Container - /* - - */ - - $$('disqus_thread').innerHTML = `
    + $$('disqus_thread').innerHTML = ` +
    @@ -221,12 +218,12 @@
    - - - - - - + + + + + +
    @@ -332,8 +329,25 @@ * * https://github.com/SukkaW/DisqusJS/issues/6 * 可以使用 include=deleted 来获得已被删除评论列表 + * + * https://blog.fooleap.org/disqus-api-comments-order-by-desc.html + * 处理评论嵌套问题，使用了一个隐藏 API /threads/listPostsThreaded + * 用法和 /threads/listPosts 相似，和 /threads/post 的区别也只有 include 字段不同 + * 这个能够返回已删除评论，所以也不需要 include=deleted 了 + * sort 字段提供三个取值： + * - desc （升序） + * - asc （降序） + * - popular（最热） + * 这个 API 的问题在于被嵌套的评论总是降序，看起来很不习惯 + * + * 只获取一次使用 popular 排序的评论，之后在本地进行排序： + * 1. 将存在 parent 的使用 createdAt 进行降序升序并存放在 disqusjs.comment.popular + * 2. 将全部评论再进行升序排序，存放在 disqusjs.comment.desc + * 3. 将没有 parent 的条目进行升序排列存放在 disqusjs.comment.asc + * 每次加载翻页评论的时候 concat 并进行重排序 + * 用户切换排序方式的时候直接取出进行重新渲染 */ - let url = `${disqusjs.config.api}3.0/posts/list.json?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&include=approved&include=deleted&api_key=${apikey()}`; + let url = `${disqusjs.config.api}3.0/threads/listPostsThreaded?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&api_key=${apikey()}&order=desc`; get(url, (res) => { if (res.code === 0 && res.response.length > 0) { // 解禁 加载更多评论 From e4892fe66b9118f3705b38f1f35892a8beb4ef47 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 10 Feb 2019 18:32:55 +0800 Subject: [PATCH 3/4] feat(sort/popular): finished Also bring up a lot of helpers --- src/disqus.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/disqus.js b/src/disqus.js index 2c66633..9ef741e 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -341,13 +341,32 @@ * 这个 API 的问题在于被嵌套的评论总是降序，看起来很不习惯 * * 只获取一次使用 popular 排序的评论，之后在本地进行排序： - * 1. 将存在 parent 的使用 createdAt 进行降序升序并存放在 disqusjs.comment.popular + * 1. 将存在 parent 的使用 createdAt 进行升序并存放在 disqusjs.comment.popular * 2. 将全部评论再进行升序排序，存放在 disqusjs.comment.desc * 3. 将没有 parent 的条目进行升序排列存放在 disqusjs.comment.asc * 每次加载翻页评论的时候 concat 并进行重排序 * 用户切换排序方式的时候直接取出进行重新渲染 */ - let url = `${disqusjs.config.api}3.0/threads/listPostsThreaded?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&api_key=${apikey()}&order=desc`; + + let sortComment = { + parseDate: (item) => Date.parse(new Date(item.createdAt)), + descHelper: (a, b) => sortComment.parseDate(b) - sortComment.parseDate(a), + ascHelper: (a, b) => sortComment.parseDate(a) - sortComment.parseDate(b), + + popular: (comment) => { + let sortParentAsc = (a, b) => { + if (a.parent && b.parent) { + return sortComment.descHelper(a, b) + } else { + return null; + } + } + + return comment.sort(sortParentAsc); + } + }; + + let url = `${disqusjs.config.api}3.0/threads/listPostsThreaded?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&api_key=${apikey()}&order=popular`; get(url, (res) => { if (res.code === 0 && res.response.length > 0) { // 解禁 加载更多评论 @@ -355,6 +374,8 @@ // 将获得的评论数据和当前页面已有的评论数据合并 disqusjs.page.comment = disqusjs.page.comment.concat(res.response); + + console.log(sortComment.popular(disqusjs.page.comment)); // 用当前页面的所有评论数据进行渲染 renderComment(disqusjs.page.comment) From d62421576cc9cf1c424016f6dea3237d94173320 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 10 Feb 2019 22:48:58 +0800 Subject: [PATCH 4/4] feat(sort/switch): bring up --- src/disqus.js | 95 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 63 insertions(+), 32 deletions(-) diff --git a/src/disqus.js b/src/disqus.js index 9ef741e..75f8310 100644 --- a/src/disqus.js +++ b/src/disqus.js @@ -3,6 +3,7 @@ * * DisqusJS Mode * @param {string} disqusjs.mode = dsqjs | disqus - Set which mode to use, should store and get in localStorage + * @param {string} disqusjs.sortType = popular | asc(oldest first) | desc(latest first) - Set which sort type to use, should store and get in localStorage * * DisqusJS Config * @param {string} disqusjs.config.shortname - The disqus shortname @@ -120,7 +121,6 @@ h = h < 10 ? `0${h}` : h; let minute = date.getMinutes(); minute = minute < 10 ? (`0${minute}`) : minute; - return `${y}-${m}-${d} ${h}:${minute}`; } @@ -201,8 +201,7 @@ function loadDsqjs() { (() => { // 在 #disqus_thread 中填充 DisqusJS Container - - $$('disqus_thread').innerHTML = ` + /*
    @@ -218,12 +217,12 @@
    - - - + - + + +
    @@ -236,11 +235,15 @@ Powered by  & DisqusJS

    -
    `; +
    + */ + + $$('disqus_thread').innerHTML = `
      加载更多评论
      `; // DisqusJS 加载中信息 $$('dsqjs-msg').innerHTML = `评论基础模式加载中。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并 尝试完整 Disqus 模式 | 强制完整 Disqus 模式。` $$('dsqjs-reload-disqus').addEventListener('click', checkDisqus); $$('dsqjs-force-disqus').addEventListener('click', forceDisqus); + $$(`dsqjs-order-${disqusjs.sortType}`).setAttribute('checked', 'true'); /* * 获取 Thread 信息 @@ -295,10 +298,15 @@ * @param {string} cursor - 传入 cursor 用于加载下一页的评论 */ let getComment = (cursor) => { - let $loadMoreBtn = $$('dsqjs-load-more'); + let $loadMoreBtn = $$('dsqjs-load-more'), + $orderRadio = d.getElementsByClassName('dsqjs-order-radio'); let getMoreComment = () => { - // 执行完以后去除当前监听器避免重复调用 + // 为按钮们取消事件，避免重复绑定 + // 重新 getComment() 时会重新绑定 + for (i of $orderRadio) { + i.removeEventListener('change', switchSortType); + }; $loadMoreBtn.removeEventListener('click', getMoreComment); // 加载下一页评论 getComment(disqusjs.page.next); @@ -316,6 +324,30 @@ } }; + // 切换排序方式 + let switchSortType = (evt) => { + // 通过 event.target 获取被选中的按钮 + disqusjs.sortType = evt.target.getAttribute('value'); + // 将结果在 localStorage 中持久化 + setLS('disqus.sort', disqusjs.sortType); + // 为按钮们取消事件，避免重复绑定 + // 重新 getComment() 时会重新绑定 + for (i of $orderRadio) { + i.removeEventListener('change', switchSortType); + }; + $loadMoreBtn.removeEventListener('click', getMoreComment); + // 清空评论列表和其它参数 + disqusjs.page.comment = []; + disqusjs.page.next = ''; // 不然切换排序方式以后以后加载更多评论就会重复加载 + + // 显示加载中提示信息 + // 反正只有评论基础模式已经加载成功了才会看到排序选项，所以无所谓再提示一次 Disqus 不可访问了 + $$('dsqjs-post-container').innerHTML = '

      正在切换排序方式...

      '; + // 把 加载更多评论 隐藏起来 + $loadMoreBtn.classList.add('dsqjs-hide'); + getComment(); + } + // 处理传入的 cursor cursor = (!cursor) ? '' : `&cursor=${cursor}`; @@ -335,38 +367,27 @@ * 用法和 /threads/listPosts 相似，和 /threads/post 的区别也只有 include 字段不同 * 这个能够返回已删除评论，所以也不需要 include=deleted 了 * sort 字段提供三个取值： - * - desc （升序） - * - asc （降序） + * - desc （降序） + * - asc （升序） * - popular（最热） * 这个 API 的问题在于被嵌套的评论总是降序，看起来很不习惯 * - * 只获取一次使用 popular 排序的评论，之后在本地进行排序： - * 1. 将存在 parent 的使用 createdAt 进行升序并存放在 disqusjs.comment.popular - * 2. 将全部评论再进行升序排序，存放在 disqusjs.comment.desc - * 3. 将没有 parent 的条目进行升序排列存放在 disqusjs.comment.asc * 每次加载翻页评论的时候 concat 并进行重排序 * 用户切换排序方式的时候直接取出进行重新渲染 */ let sortComment = { parseDate: (item) => Date.parse(new Date(item.createdAt)), - descHelper: (a, b) => sortComment.parseDate(b) - sortComment.parseDate(a), - ascHelper: (a, b) => sortComment.parseDate(a) - sortComment.parseDate(b), - - popular: (comment) => { - let sortParentAsc = (a, b) => { - if (a.parent && b.parent) { - return sortComment.descHelper(a, b) - } else { - return null; - } + parentAsc: (a, b) => { + if (a.parent && b.parent) { + return sortComment.parseDate(a) - sortComment.parseDate(b); + } else { + return 0; } - - return comment.sort(sortParentAsc); } }; - let url = `${disqusjs.config.api}3.0/threads/listPostsThreaded?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&api_key=${apikey()}&order=popular`; + let url = `${disqusjs.config.api}3.0/threads/listPostsThreaded?forum=${disqusjs.config.shortname}&thread=${disqusjs.page.id}${cursor}&api_key=${apikey()}&order=${disqusjs.sortType}`; get(url, (res) => { if (res.code === 0 && res.response.length > 0) { // 解禁 加载更多评论 @@ -374,11 +395,16 @@ // 将获得的评论数据和当前页面已有的评论数据合并 disqusjs.page.comment = disqusjs.page.comment.concat(res.response); + // 将所有的子评论进行降序排列 + disqusjs.page.comment.sort(sortComment.parentAsc); - console.log(sortComment.popular(disqusjs.page.comment)); // 用当前页面的所有评论数据进行渲染 - renderComment(disqusjs.page.comment) + renderComment(disqusjs.page.comment); + // 为排序按钮们委托事件 + for (i of $orderRadio) { + i.addEventListener('change', switchSortType); + } if (res.cursor.hasNext) { // 将 cursor.next 存入 disqusjs 变量中供不能传参的不匿名函数使用 @@ -475,7 +501,7 @@ - + Author Element ${data.comment.author.name} @@ -658,7 +684,12 @@ disqusjs.mode = localStorage.getItem('dsqjs_mode'); + disqusjs.sortType = localStorage.getItem('disqus.sort'); + if (!disqusjs.sortType) { + setLS('disqus.sort', 'desc'); + disqusjs.sortType = 'desc'; + } if (disqusjs.mode === 'disqus') { loadDisqus(); } else if (disqusjs.mode === 'dsqjs') {