hans362
/
DisqusJS
mirror of https://github.com/hans362/DisqusJS.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: finish renderComment

Browse Source
feat/fix/umd
SukkaW 7 years ago
parent 10e66a97f9
commit 2a4a918259
1 changed files with 91 additions and 62 deletions
Show Stats Download Patch File Download Diff File

153
src/disqus.js
Unescape Escape View File

@ -296,84 +296,113 @@ function DisqusJS(config) {
} }
/* /*
* processData(data) - 处理评论列表 * renderCommentData(data) - 渲染评论列表
* *
* @param {Object} data - 解析后的评论列表 JSON * @param {Object} data - 从 getComment() 获取到的 JSON
*/ */
let processData = (data) => { let renderComment = (data) => {
// 处理 Disqus Profile /*
if (data.comment.author.profileUrl) { * processData(data) - 处理评论列表
/* *
Avatar Element * @param {Object} data - 解析后的评论列表 JSON
<a href="${data.comment.author.profileUrl}"> */
<img src="${data.comment.author.avatar.cache}"> let processData = (data) => {
</a> // 处理 Disqus Profile
if (data.comment.author.profileUrl) {
Author Element /*
<span class="dsqjs-post-author"> Avatar Element
<a href="${data.comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">${data.comment.author.name}</a> <a href="${data.comment.author.profileUrl}">
</span> <img src="${data.comment.author.avatar.cache}">
*/ </a>
data.comment.avatarEl = `<a href="${data.comment.author.profileUrl}"><img src="${data.comment.author.avatar.cache}"></a>`
data.comment.authorEl = `<span class="dsqjs-post-author"><a href="${data.comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">${data.comment.author.name}</a></span>` Author Element
} else { <span class="dsqjs-post-author">
data.comment.avatarEl = `<img src="${data.comment.author.avatar.cache}">` <a href="${data.comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">${data.comment.author.name}</a>
data.comment.authorEl = `<span class="dsqjs-post-author">${data.comment.author.name}</span>` </span>
} */
data.comment.avatarEl = `<a href="${data.comment.author.profileUrl}"><img src="${data.comment.author.avatar.cache}"></a>`
data.comment.authorEl = `<span class="dsqjs-post-author"><a href="${data.comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">${data.comment.author.name}</a></span>`
} else {
data.comment.avatarEl = `<img src="${data.comment.author.avatar.cache}">`
data.comment.authorEl = `<span class="dsqjs-post-author">${data.comment.author.name}</span>`
}
// 处理 Admin Label // 处理 Admin Label
if (data.isPrimary) { if (data.isPrimary) {
data.comment.authorEl += `<span class="dsqjs-admin-badge">${disqusjs.config.adminLabel}</span>`; data.comment.authorEl += `<span class="dsqjs-admin-badge">${disqusjs.config.adminLabel}</span>`;
} }
// 处理评论嵌套级数 // 处理评论嵌套级数
if (data.children) { if (data.children) {
// 如果有子评论，设置当前评论前套数为 1 // 如果有子评论，设置当前评论前套数为 1
data.nesting = 1; data.nesting = 1;
} }
return data; return data;
} }
let renderPostItem = (s) => { let renderPostItem = (s) => {
/* /*
<div class="dsqjs-post-item dsqjs-clearfix"> <div class="dsqjs-post-item dsqjs-clearfix">
<div class="dsqjs-post-avatar"> <div class="dsqjs-post-avatar">
${s.avatarEl} ${s.avatarEl}
</div>
<div class="dsqjs-post-body">
<div class="dsqjs-post-header">
${s.authorEl}
<span class="dsqjs-bullet"></span>
<span class="dsqjs-meta"><time>${dateFormat(new Date(s.createdAt))}</time></span>
</div> </div>
<div class="dsqjs-post-content"> <div class="dsqjs-post-body">
${s.message} <div class="dsqjs-post-header">
${s.authorEl}
<span class="dsqjs-bullet"></span>
<span class="dsqjs-meta"><time>${dateFormat(new Date(s.createdAt))}</time></span>
</div>
<div class="dsqjs-post-content">
${s.message}
</div>
</div> </div>
</div> </div>
</div> */
*/ let html = `<div class="dsqjs-post-item dsqjs-clearfix"><div class="dsqjs-post-avatar">${s.avatarEl}</div><div class="dsqjs-post-body"><div class="dsqjs-post-header">${s.authorEl} <span class="dsqjs-bullet"></span> <span class="dsqjs-meta"><time>${dateFormat(new Date(s.createdAt))}</time></span></div><div class="dsqjs-post-content">${s.message}</div></div></div>`
let html = `<div class="dsqjs-post-item dsqjs-clearfix"><div class="dsqjs-post-avatar">${s.avatarEl}</div><div class="dsqjs-post-body"><div class="dsqjs-post-header">${s.authorEl} <span class="dsqjs-bullet"></span> <span class="dsqjs-meta"><time>${dateFormat(new Date(s.createdAt))}</time></span></div><div class="dsqjs-post-content">${s.message}</div></div></div>`
return html; return html;
} }
let childrenComments = (data) => {
var nesting = data.nesting,
children = (data.children || []);
if (!children) {
return;
}
/* let html = (() => {
* renderCommentData(data) - 渲染评论列表 // 如果当前评论嵌套数大于 4 则不再右移
* if (nesting < 4) {
* @param {Object} data - 从 getComment() 获取到的 JSON return '<ul class="dsqjs-post-list dsqjs-children">';
*/ } else {
let renderComment = (data) => { return '<ul class="dsqjs-post-list">';
var html = ''; }
})();
html += children.map((comment) => {
comment = processData(comment);
comment.nesting = nesting + 1;
return `<li data-id="comment-${comment.comment.id}">${renderPostItem(comment.comment)}${childrenComments(comment)}</li>`;
});
html += '</ul>';
if (html.length !== 0) {
return html;
} else {
return;
}
}
let html = ''
data = parseCommentData(data); data = parseCommentData(data);
data.map((comment) => { html += data.map((comment) => {
comment = processData(comment); comment = processData(comment);
console.log(comment) return `<ul class="dsqjs-post-list"><li data-id="comment-${comment.comment.id}">${renderPostItem(comment.comment)}${childrenComments(comment)}</li></ul>`;
html += `<li data-id="comment-${comment.comment.id}">${renderPostItem(comment.comment)}${childrenComments(s)}</li>`; });
})
console.log(html) console.log(html)
} }

Write Preview
Loading…
Cancel
Save