Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(sort): bring up sort features #20

Merged
merged 4 commits into from
Feb 10, 2019
Merged

feat(sort): bring up sort features #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a5d7709
feat(sort): add order elements
SukkaW Feb 10, 2019
4237b73
热factor: use /threads/listPostsThreaded
SukkaW Feb 10, 2019
e4892fe
feat(sort/popular): finished
SukkaW Feb 10, 2019
d624215
feat(sort/switch): bring up
SukkaW Feb 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 84 additions & 10 deletions src/disqus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}`;
}

Expand Down Expand Up @@ -202,7 +202,7 @@
(() => {
// 在 #disqus_thread 中填充 DisqusJS Container
/*
<div id="dsqjs">
<div id="dsqjs">
<section>
<div id="dsqjs-msg"></div>
</section>
Expand All @@ -216,6 +216,14 @@
<span id="dsqjs-site-name"></span>
</li>
</ul>
<div class="dsqjs-order">
<input class="dsqjs-order-radio" id="dsqjs-order-desc" type="radio" name="comment-order" value="desc">
<label class="dsqjs-order-label" for="dsqjs-order-desc" title="按从新到旧">最新</label>
<input class="dsqjs-order-radio" id="dsqjs-order-asc" type="radio" name="comment-order" value="asc">
<label class="dsqjs-order-label" for="dsqjs-order-asc" title="按从旧到新">最早</label>
<input class="dsqjs-order-radio" id="dsqjs-order-popular" type="radio" name="comment-order" value="popular">
<label class="dsqjs-order-label" for="dsqjs-order-popular" title="按评分从高到低">最佳</label>
</div>
</nav>
</header>
<section class="dsqjs-post-container">
Expand All @@ -227,15 +235,15 @@
Powered by <a class="dsqjs-disqus-logo" href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank"></a>&nbsp;&amp;&nbsp;<a href="https://github.com/SukkaW/DisqusJS" target="_blank">DisqusJS</a>
</p>
</footer>
</div>
</div>
*/


$$('disqus_thread').innerHTML = `<div id="dsqjs"><section><div id="dsqjs-msg"></div></section><header class="dsqjs-header dsqjs-hide" id="dsqjs-header"><nav class="dsqjs-nav dsqjs-clearfix"><ul><li class="dsqjs-nav-tab dsqjs-tab-active"><span><span id="dsqjs-comment-num"></span> Comments</span></li><li class="dsqjs-nav-tab"><span id="dsqjs-site-name"></span></li></ul></nav></header><section class="dsqjs-post-container"><ul class="dsqjs-post-list" id="dsqjs-post-container"></ul><a id="dsqjs-load-more" class="dsqjs-load-more dsqjs-hide">加载更多评论</a></section><footer><p class="dsqjs-footer">Powered by <a class="dsqjs-disqus-logo" href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank"></a>&nbsp;&amp;&nbsp;<a href="https://github.com/SukkaW/DisqusJS" target="_blank">DisqusJS</a></p></footer></div>`;
$$('disqus_thread').innerHTML = `<div id="dsqjs"><section><div id="dsqjs-msg"></div></section><header class="dsqjs-header dsqjs-hide" id="dsqjs-header"><nav class="dsqjs-nav dsqjs-clearfix"><ul><li class="dsqjs-nav-tab dsqjs-tab-active"><span><span id="dsqjs-comment-num"></span> Comments</span></li><li class="dsqjs-nav-tab"><span id="dsqjs-site-name"></span></li></ul><div class="dsqjs-order"><input class="dsqjs-order-radio" id="dsqjs-order-desc" type="radio" name="comment-order" value="desc"> <label class="dsqjs-order-label" for="dsqjs-order-desc" title="按从新到旧">最新</label> <input class="dsqjs-order-radio" id="dsqjs-order-asc" type="radio" name="comment-order" value="asc"> <label class="dsqjs-order-label" for="dsqjs-order-asc" title="按从旧到新">最早</label> <input class="dsqjs-order-radio" id="dsqjs-order-popular" type="radio" name="comment-order" value="popular"> <label class="dsqjs-order-label" for="dsqjs-order-popular" title="按评分从高到低">最佳</label></div></nav></header><section class="dsqjs-post-container"><ul class="dsqjs-post-list" id="dsqjs-post-container"></ul><a id="dsqjs-load-more" class="dsqjs-load-more dsqjs-hide">加载更多评论</a></section><footer><p class="dsqjs-footer">Powered by <a class="dsqjs-disqus-logo" href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank"></a>&nbsp;&amp;&nbsp;<a href="https://github.com/SukkaW/DisqusJS" target="_blank">DisqusJS</a></p></footer></div>`;
// DisqusJS 加载中信息
$$('dsqjs-msg').innerHTML = `评论基础模式加载中。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并 <a id="dsqjs-reload-disqus" class="dsqjs-msg-btn">尝试完整 Disqus 模式</a> | <a id="dsqjs-force-disqus" class="dsqjs-msg-btn">强制完整 Disqus 模式</a>。`
$$('dsqjs-reload-disqus').addEventListener('click', checkDisqus);
$$('dsqjs-force-disqus').addEventListener('click', forceDisqus);
$$(`dsqjs-order-${disqusjs.sortType}`).setAttribute('checked', 'true');

/*
* 获取 Thread 信息
Expand Down Expand Up @@ -290,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);
Expand All @@ -311,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 = '<p style="text-align: center">正在切换排序方式...</p>';
// 把 加载更多评论 隐藏起来
$loadMoreBtn.classList.add('dsqjs-hide');
getComment();
}

// 处理传入的 cursor
cursor = (!cursor) ? '' : `&cursor=${cursor}`;

Expand All @@ -324,18 +361,50 @@
*
* 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 的问题在于被嵌套的评论总是降序，看起来很不习惯
*
* 每次加载翻页评论的时候 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 sortComment = {
parseDate: (item) => Date.parse(new Date(item.createdAt)),
parentAsc: (a, b) => {
if (a.parent && b.parent) {
return sortComment.parseDate(a) - sortComment.parseDate(b);
} else {
return 0;
}
}
};

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) {
// 解禁 加载更多评论
$loadMoreBtn.classList.remove('dsqjs-disabled');

// 将获得的评论数据和当前页面已有的评论数据合并
disqusjs.page.comment = disqusjs.page.comment.concat(res.response);
// 将所有的子评论进行降序排列
disqusjs.page.comment.sort(sortComment.parentAsc);

// 用当前页面的所有评论数据进行渲染
renderComment(disqusjs.page.comment)
renderComment(disqusjs.page.comment);

// 为排序按钮们委托事件
for (i of $orderRadio) {
i.addEventListener('change', switchSortType);
}

if (res.cursor.hasNext) {
// 将 cursor.next 存入 disqusjs 变量中供不能传参的不匿名函数使用
Expand Down Expand Up @@ -432,7 +501,7 @@
<a href="${data.comment.author.profileUrl}">
<img src="${data.comment.author.avatar.cache}">
</a>

Author Element
<span class="dsqjs-post-author">
<a href="${data.comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">${data.comment.author.name}</a>
Expand Down Expand Up @@ -615,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') {
Expand Down
35 changes: 32 additions & 3 deletions src/disqusjs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}