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

feat: finish children comment

Browse Source
0.2.5(deprecated)
SukkaW 7 years ago
parent 0165fcb2cd
commit 8e32e501d8
1 changed files with 103 additions and 46 deletions
Show Stats Download Patch File Download Diff File

143
src/disqus.js
Unescape Escape View File

@ -30,7 +30,7 @@ disqusjs.page = [];
disqusjs.mode = 'proxy'; disqusjs.mode = 'proxy';
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var setLS = function (key, value) { setLS = (key, value) => {
try { try {
localStorage.setItem(key, value) localStorage.setItem(key, value)
} catch (o) { } catch (o) {
@ -38,7 +38,7 @@ var setLS = function (key, value) {
} }
} }
var getLS = function (key) { getLS = (key) => {
return localStorage.getItem(key); return localStorage.getItem(key);
} }
@ -80,7 +80,7 @@ Date.prototype.Format = function (fmt) {
*/ */
function getMode() { function getMode() {
var s = getLS('disqusjs_mode'); let s = getLS('disqusjs_mode');
if (!s) { if (!s) {
// Run checkDisqus() when no localStorage item // Run checkDisqus() when no localStorage item
// disqusjs.mode will be set in checkDisqus() // disqusjs.mode will be set in checkDisqus()
@ -109,10 +109,10 @@ function loadDisqus() {
* How it works: check favicons under 2 domains can be loaded or not. * How it works: check favicons under 2 domains can be loaded or not.
*/ */
function checkDisqus() { function checkDisqus() {
var domain = ['disqus.com', disqusjs.config.shortname + '.disqus.com'], let domain = ['disqus.com', disqusjs.config.shortname + '.disqus.com'],
test = 0, test = 0,
success = 0; success = 0;
var setmode = function () { setmode = () => {
if (success = test) { if (success = test) {
disqusjs.mode = 'direct', disqusjs.mode = 'direct',
setLS('disqusjs_mode', 'direct'); setLS('disqusjs_mode', 'direct');
@ -121,19 +121,19 @@ function checkDisqus() {
setLS('disqusjs_mode', 'proxy'); setLS('disqusjs_mode', 'proxy');
} }
}; };
var check = function (domain) { check = (domain) => {
var img = new Image; var img = new Image;
var checker = setTimeout(function () { var checker = setTimeout(() => {
img.onerror = img.onload = null, img.onerror = img.onload = null,
test++ , test++ ,
setmode(); setmode();
}, 2500); }, 3000);
img.onerror = function () { img.onerror = () => {
clearTimeout(checker), clearTimeout(checker),
test++ , test++ ,
setmode(); setmode();
}; };
img.onload = function () { img.onload = () => {
clearTimeout(checker), clearTimeout(checker),
success++ , success++ ,
test++ , test++ ,
@ -141,7 +141,7 @@ function checkDisqus() {
}; };
img.src = 'https://' + domain + '/favicon.ico?' + +(new Date); img.src = 'https://' + domain + '/favicon.ico?' + +(new Date);
}; };
for (var i of domain) { for (let i of domain) {
check(i); check(i);
}; };
} }
@ -161,8 +161,8 @@ function getThreadInfo() {
* API URI: /3.0/posts/list.json?forum=[shortname]&thread=[thread id]&api_key=[apikey] * API URI: /3.0/posts/list.json?forum=[shortname]&thread=[thread id]&api_key=[apikey]
*/ */
var getComment = function () { getComment = () => {
var url = disqusjs.config.api + '3.0/posts/list.json?forum=' + disqusjs.config.shortname + '&thread=' + disqusjs.page.id + '&api_key=' + disqusjs.config.apikey; let url = disqusjs.config.api + '3.0/posts/list.json?forum=' + disqusjs.config.shortname + '&thread=' + disqusjs.page.id + '&api_key=' + disqusjs.config.apikey;
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.timeout = 4000; xhr.timeout = 4000;
xhr.send(); xhr.send();
@ -177,15 +177,15 @@ function getThreadInfo() {
} }
}; };
xhr.ontimeout = function (e) { xhr.ontimeout = (e) => {
console.log(e) console.log(e)
}; };
xhr.onerror = function (e) { xhr.onerror = (e) => {
console.log(e) console.log(e)
}; };
} }
var url = disqusjs.config.api + '3.0/threads/list.json?forum=' + disqusjs.config.shortname + '&thread=ident:' + disqusjs.config.identifier + '&api_key=' + disqusjs.config.apikey; let url = disqusjs.config.api + '3.0/threads/list.json?forum=' + disqusjs.config.shortname + '&thread=ident:' + disqusjs.config.identifier + '&api_key=' + disqusjs.config.apikey;
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.timeout = 4000; xhr.timeout = 4000;
xhr.send(); xhr.send();
@ -201,10 +201,10 @@ function getThreadInfo() {
getComment(); getComment();
} }
}; };
xhr.ontimeout = function (e) { xhr.ontimeout = (e) => {
console.log(e) console.log(e)
}; };
xhr.onerror = function (e) { xhr.onerror = (e) => {
console.log(e) console.log(e)
}; };
} }
@ -218,32 +218,30 @@ function getCommentList(data) {
var topLevelComments = []; var topLevelComments = [];
var childComments = []; var childComments = [];
data.forEach(function (comment) { data.forEach(comment => {
(comment.parent ? childComments : topLevelComments)['push'](comment) (comment.parent ? childComments : topLevelComments)['push'](comment)
}) })
var commentLists = topLevelComments.map(function (comment) { var commentLists = topLevelComments.map(comment => {
return { return {
comment, comment,
author: comment.author.name, author: comment.author.name,
isPrimary: comment.author.username === disqusjs.config.admin, isPrimary: comment.author.username === disqusjs.config.admin,
children: getChildren(Number(comment.id)) children: getChildren(+comment.id)
}; };
}); });
function getChildren(id) { function getChildren(id) {
if (childComments.length === 0) { if (childComments.length === 0) return null;
return null;
}
var list = []; var list = [];
for (var comment of childComments) { for (let comment of childComments) {
if (comment.parent === id) { if (comment.parent === id) {
list.unshift({ list.unshift({
comment, comment,
author: comment.author.name, author: comment.author.name,
isPrimary: comment.author.username === disqusjs.config.admin, isPrimary: comment.author.username === disqusjs.config.admin,
children: getChildren(Number(comment.id)) children: getChildren(+comment.id)
}); });
} }
} }
@ -259,37 +257,96 @@ function getCommentList(data) {
} }
function renderComment(data) { function renderComment(data) {
var disqusjsBaseTpl = '<div id="dsqjs"><section class="dsqjs-action"></section><header></header><section class="dsqjs-container"><ul id="dsqjs-list" class="dsqjs-list"></ul></section></div>'; var disqusjsBaseTpl = `
<div id="dsqjs">
<section class="dsqjs-action"></section>
<header></header>
<section class="dsqjs-container"><ul id="dsqjs-list" class="dsqjs-list"></ul></section>
</div>
`;
document.getElementById('disqus_thread').innerHTML = disqusjsBaseTpl; document.getElementById('disqus_thread').innerHTML = disqusjsBaseTpl;
data.map(function (s) { data.map(s => {
var comment = s.comment; childrenComments = (s) => {
if (typeof comment.author.profileUrl === null) { var children = (s.children || []);
comment.author.profileUrl = "#" if (typeof children === 'null') return;
var html = '<ul class="dsqjs-list dsqjs-children">';
console.log(children)
children.map(s => {
let comment = s.comment
if (comment.author.profileUrl) {
var avatar = `
<a href="${comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">
<img src="${comment.author.avatar.cache}">
</a>
`;
var author = `<a href="${comment.author.profileUrl}">${comment.author.name}</a>`
} else {
var avatar = `<img src="${comment.author.avatar.cache}">`;
var author = `${comment.author.name}`
} }
var html = `
html += `
<li class="dsqjs-item" id="comment-${comment.id}"> <li class="dsqjs-item" id="comment-${comment.id}">
<div class="dsqjs-item-container"> <div class="dsqjs-item-container">
<div class="dsqjs-avater"> <div class="dsqjs-avater">
${avatar}
</div>
<div class="dsqjs-body">
<header class="dsqjs-header">
<span class="dsqjs-author">${author}</span>
<span class="dsqjs-bullet"></span>
<span class="dsqjs-meta"><time>${(new Date(comment.createdAt)).Format("yyyy-MM-dd hh:mm:ss")}</time></span>
</header>
<div class="dsqjs-content">${comment.message}</div>
</div>
</div>
${childrenComments(s)}
</li>
`
})
html += '</ul>';
if (html.length !== 0) {
return html;
} else {
return;
}
};
let comment = s.comment;
if (comment.author.profileUrl) {
var avatar = `
<a href="${comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer"> <a href="${comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">
<img src="${comment.author.avatar.cache}"> <img src="${comment.author.avatar.cache}">
</a> </a>
`;
var author = `<a href="${comment.author.profileUrl}">${comment.author.name}</a>`
} else {
var avatar = `<img src="${comment.author.avatar.cache}">`;
var author = `${comment.author.name}`
}
let html = `
<li class="dsqjs-item" id="comment-${comment.id}">
<div class="dsqjs-item-container">
<div class="dsqjs-avater">
${avatar}
</div> </div>
<div class="dsqjs-body"> <div class="dsqjs-body">
<header class="dsqjs-header"><span class="dsqjs-author"> <header class="dsqjs-header">
<a href="${comment.author.profileUrl}"> <span class="dsqjs-author">${author}</span>
${comment.author.name} <span class="dsqjs-bullet"></span>
</a> <span class="dsqjs-meta"><time>${(new Date(comment.createdAt)).Format("yyyy-MM-dd hh:mm:ss")}</time></span>
</span><span class="dsqjs-bullet"></span>
<span class="dsqjs-meta"><time>
${(new Date(comment.createdAt)).Format("yyyy-MM-dd hh:mm:ss")}</time>
</span>
</header> </header>
<div class="dsqjs-content"> <div class="dsqjs-content">${comment.message}</div>
${comment.message}
</div>
</div> </div>
</div> </div>
${childrenComments(s)}
</li> </li>
`; `;
document.getElementById('dsqjs-list').insertAdjacentHTML('beforeend', html); document.getElementById('dsqjs-list').insertAdjacentHTML('beforeend', html);

Write Preview
Loading…
Cancel
Save