|
|
/*
|
|
|
* DisqusJS | v0.1.4
|
|
|
* Author: SukkaW
|
|
|
* Link: https://github.com/SukkaW/DisqusJS
|
|
|
* License: GPL-3.0
|
|
|
*/
|
|
|
|
|
|
/*
|
|
|
* The variable used in DisqusJS
|
|
|
*
|
|
|
* DisqusJS Mode
|
|
|
* disqusjs.mode = dsqjs | disqus - Set which mode to use, should store and get in localStorage
|
|
|
*
|
|
|
* DisqusJS Config
|
|
|
* disqusjs.config.shortname - The disqus shortname
|
|
|
* disqusjs.config.identifier - The identifier of the page
|
|
|
* disqusjs.config.url - The url of the page
|
|
|
* disqusjs.config.api - Where to get data
|
|
|
* disqusjs.config.apikey - The apikey used to request Disqus API
|
|
|
* disqusjs.config.admin - The disqus forum admin username
|
|
|
* disqusjs.config.adminLabel - The disqus moderator badge text
|
|
|
*
|
|
|
* DisqusJS Info
|
|
|
* disqusjs.page.id = The thread id, used at next API call
|
|
|
* disqusjs.page.title - The thread title
|
|
|
* disqusjs.page.isClosed - Whether the comment is closed
|
|
|
* disqusjs.page.lenfth - How many comment in this thread
|
|
|
*/
|
|
|
|
|
|
(function () {
|
|
|
disqusjs.page = [];
|
|
|
|
|
|
window.disqus_config = function () {
|
|
|
this.page.url = disqusjs.config.url;
|
|
|
this.page.identifier = disqusjs.config.identifier;
|
|
|
};
|
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
|
let setLS = (key, value) => {
|
|
|
try {
|
|
|
localStorage.setItem(key, value);
|
|
|
} catch (o) {
|
|
|
console.log(o + " Failed to set localStorage item");
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getLS = (key) => {
|
|
|
return localStorage.getItem(key);
|
|
|
},
|
|
|
|
|
|
dateFormat = (date) => {
|
|
|
return `${date.getUTCFullYear().toString()}/${(date.getUTCMonth() + 1).toString()}/${date.getUTCDate()} ${date.getUTCHours()}:${date.getUTCMinutes()}:${date.getUTCSeconds()}`
|
|
|
//yyyy-MM-dd hh:mm:ss
|
|
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: loadDisqus()
|
|
|
* Descriptin: load disqus as it should be.
|
|
|
*/
|
|
|
|
|
|
let loadDisqus = () => {
|
|
|
var d = document;
|
|
|
d.getElementById('dsqjs-load-disqus').classList.remove('dsqjs-hide');
|
|
|
d.getElementById('dsqjs-force-dsqjs').addEventListener('click', forceDsqjs);
|
|
|
var s = d.createElement('script');
|
|
|
s.src = 'https://' + disqusjs.config.shortname + '.disqus.com/embed.js';
|
|
|
s.setAttribute('data-timestamp', + new Date());
|
|
|
(d.head || d.body).appendChild(s);
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: checkDisqus()
|
|
|
* Description: Check disqus is avaliable for visitor or not
|
|
|
* How it works: check favicons under 2 domains can be loaded or not.
|
|
|
*/
|
|
|
|
|
|
let checkDisqus = () => {
|
|
|
var img = new Image;
|
|
|
let check1 = setTimeout(() => {
|
|
|
img.onerror = img.onload = null;
|
|
|
setLS('disqusjs_mode', 'dsqjs');
|
|
|
}, 2000);
|
|
|
|
|
|
img.onerror = () => {
|
|
|
clearTimeout(check1);
|
|
|
setLS('disqusjs_mode', 'dsqjs');
|
|
|
main();
|
|
|
};
|
|
|
img.onload = () => {
|
|
|
clearTimeout(check1);
|
|
|
let check2 = setTimeout(() => {
|
|
|
img.onerror = img.onload = null;
|
|
|
setLS('disqusjs_mode', 'dsqjs');
|
|
|
}, 2000);
|
|
|
|
|
|
img.onerror = () => {
|
|
|
clearTimeout(check2);
|
|
|
setLS('disqusjs_mode', 'dsqjs');
|
|
|
main();
|
|
|
};
|
|
|
|
|
|
img.onload = () => {
|
|
|
clearTimeout(check2);
|
|
|
setLS('disqusjs_mode', 'disqus');
|
|
|
main();
|
|
|
};
|
|
|
|
|
|
img.src = 'https://' + disqusjs.config.shortname + '.disqus.com/favicon.ico?' + +(new Date);
|
|
|
};
|
|
|
|
|
|
img.src = 'https://disqus.com/favicon.ico?' + +(new Date);
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: forceDsqjs() forceDisqus()
|
|
|
*/
|
|
|
|
|
|
let forceDsqjs = () => {
|
|
|
setLS('disqusjs_mode', 'dsqjs');
|
|
|
main();
|
|
|
}
|
|
|
|
|
|
let forceDisqus = () => {
|
|
|
setLS('disqusjs_mode', 'disqus');
|
|
|
main();
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: getThreadInfo()
|
|
|
* Description: Disqus API only support get thread list by ID, not identifter. So get Thread ID before get thread list.
|
|
|
* API Docs: https://disqus.com/api/docs/threads/list/
|
|
|
* API URI: /3.0/threads/list.json?forum=[disqus_shortname]&thread=ident:[identifier]&api_key=[apikey]
|
|
|
*/
|
|
|
|
|
|
let getThreadInfo = () => {
|
|
|
document.getElementById('dsqjs-loading-dsqjs').classList.remove('dsqjs-hide');
|
|
|
document.getElementById('dsqjs-load-error').classList.add('dsqjs-hide');
|
|
|
document.getElementById('dsqjs-force-disqus').addEventListener('click', forceDisqus);
|
|
|
document.getElementById('dsqjs-reload-disqus').addEventListener('click', checkDisqus);
|
|
|
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.timeout = 4000;
|
|
|
xhr.send();
|
|
|
xhr.onload = function () {
|
|
|
if (this.status === 200 || this.status === 304) {
|
|
|
let res = JSON.parse(this.responseText).response;
|
|
|
if (res.length === 1) {
|
|
|
var response = res[0];
|
|
|
disqusjs.page = {
|
|
|
id: response.id,
|
|
|
title: response.title,
|
|
|
isClosed: response.isClosed,
|
|
|
length: response.posts
|
|
|
};
|
|
|
getComment();
|
|
|
} else {
|
|
|
document.getElementById('dsqjs-thread-not-init').classList.remove('dsqjs-hide');
|
|
|
document.getElementById('dsqjs-init-thread').addEventListener('click', forceDisqus);
|
|
|
}
|
|
|
} else {
|
|
|
loadError();
|
|
|
}
|
|
|
};
|
|
|
xhr.ontimeout = (e) => {
|
|
|
loadError();
|
|
|
};
|
|
|
xhr.onerror = (e) => {
|
|
|
loadError();
|
|
|
};
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: getComment()
|
|
|
* Description: get the comment content
|
|
|
* API URI: /3.0/posts/list.json?forum=[shortname]&thread=[thread id]&api_key=[apikey]
|
|
|
*/
|
|
|
|
|
|
let getComment = () => {
|
|
|
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.timeout = 4000;
|
|
|
xhr.send();
|
|
|
xhr.onload = function () {
|
|
|
if (this.status === 200 || this.status === 304) {
|
|
|
var res = JSON.parse(this.responseText);
|
|
|
if (res.code === 0 && res.response.length > 0) {
|
|
|
getCommentList(res.response);
|
|
|
} else if (res.code === 0 && res.response.length === 0) {
|
|
|
// Have no comments.
|
|
|
document.getElementById('dsqjs-no-comment').classList.remove('dsqjs-hide');
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
loadError();
|
|
|
}
|
|
|
};
|
|
|
xhr.ontimeout = (e) => {
|
|
|
// Have error when get comments.
|
|
|
loadError();
|
|
|
};
|
|
|
xhr.onerror = (e) => {
|
|
|
// Have error when get comments.
|
|
|
loadError();
|
|
|
};
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: getCommentList(data)
|
|
|
* Description: Render JSON to comment list components
|
|
|
*/
|
|
|
|
|
|
let getCommentList = (data) => {
|
|
|
var topLevelComments = [];
|
|
|
var childComments = [];
|
|
|
|
|
|
data.forEach(comment => {
|
|
|
(comment.parent ? childComments : topLevelComments)['push'](comment)
|
|
|
})
|
|
|
|
|
|
var commentLists = topLevelComments.map(comment => {
|
|
|
return {
|
|
|
comment,
|
|
|
author: comment.author.name,
|
|
|
isPrimary: comment.author.username === disqusjs.config.admin.toLowerCase(),
|
|
|
children: getChildren(+comment.id)
|
|
|
};
|
|
|
});
|
|
|
|
|
|
function getChildren(id) {
|
|
|
if (childComments.length === 0) return null;
|
|
|
|
|
|
var list = [];
|
|
|
for (let comment of childComments) {
|
|
|
if (comment.parent === id) {
|
|
|
list.unshift({
|
|
|
comment,
|
|
|
author: comment.author.name,
|
|
|
isPrimary: comment.author.username === disqusjs.config.admin.toLowerCase(),
|
|
|
children: getChildren(+comment.id)
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (list.length) {
|
|
|
return list;
|
|
|
} else {
|
|
|
return null;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
renderComment(commentLists)
|
|
|
}
|
|
|
|
|
|
let renderComment = (data) => {
|
|
|
let renderCommentItem = (s) => {
|
|
|
/*
|
|
|
<div class="dsqjs-item-container">
|
|
|
<div class="dsqjs-avater">
|
|
|
${s.avatarEl}
|
|
|
</div>
|
|
|
<div class="dsqjs-body">
|
|
|
<header class="dsqjs-header">
|
|
|
<span class="dsqjs-author">${s.authorEl}</span>
|
|
|
<span class="dsqjs-bullet"></span>
|
|
|
<span class="dsqjs-meta"><time>${dateFormat(new Date(s.createdAt))}</time></span>
|
|
|
</header>
|
|
|
<div class="dsqjs-content">${s.message}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
*/
|
|
|
let commentItemTpl = `<div class="dsqjs-item-container"><div class="dsqjs-avater">${s.avatarEl}</div><div class="dsqjs-body"><header class="dsqjs-header"><span class="dsqjs-author">${s.authorEl}</span><span class="dsqjs-bullet"></span><span class="dsqjs-meta"><time>${dateFormat(new Date(s.createdAt))}</time></span></header><div class="dsqjs-content">${s.message}</div></div></div>`
|
|
|
|
|
|
return commentItemTpl
|
|
|
}
|
|
|
|
|
|
|
|
|
data.map(s => {
|
|
|
let childrenComments = (s) => {
|
|
|
var nesting = s.nesting
|
|
|
|
|
|
var children = (s.children || []);
|
|
|
|
|
|
if (typeof children === 'null') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (nesting < 4) {
|
|
|
var html = '<ul class="dsqjs-list dsqjs-children">';
|
|
|
} else {
|
|
|
var html = '<ul class="dsqjs-list">';
|
|
|
}
|
|
|
|
|
|
children.map(s => {
|
|
|
let comment = s.comment
|
|
|
|
|
|
if (comment.author.profileUrl) {
|
|
|
/*
|
|
|
<a href="${comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer">
|
|
|
<img src="${comment.author.avatar.cache}">
|
|
|
</a>
|
|
|
*/
|
|
|
comment.avatarEl = `<a href="${comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer"><img src="${comment.author.avatar.cache}"></a>`;
|
|
|
comment.authorEl = `<a href="${comment.author.profileUrl}">${comment.author.name}</a>`
|
|
|
} else {
|
|
|
comment.avatarEl = `<img src="${comment.author.avatar.cache}">`;
|
|
|
comment.authorEl = `${comment.author.name}`
|
|
|
}
|
|
|
|
|
|
if (s.isPrimary) {
|
|
|
comment.authorEl += `<span class="dsqjs-admin-badge">${disqusjs.config.adminLabel}</span>`
|
|
|
}
|
|
|
|
|
|
s.nesting = nesting + 1
|
|
|
|
|
|
html += `<li class="dsqjs-item" id="comment-${comment.id}">`
|
|
|
|
|
|
html += renderCommentItem(comment)
|
|
|
|
|
|
html += `${childrenComments(s)}</li>`
|
|
|
})
|
|
|
|
|
|
html += '</ul>';
|
|
|
|
|
|
if (html.length !== 0) {
|
|
|
return html;
|
|
|
} else {
|
|
|
return;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
let comment = s.comment;
|
|
|
|
|
|
if (comment.author.profileUrl) {
|
|
|
comment.avatarEl = `<a href="${comment.author.profileUrl}" target="_blank" rel="nofollow noopener noreferrer"><img src="${comment.author.avatar.cache}"></a>`;
|
|
|
comment.authorEl = `<a href="${comment.author.profileUrl}">${comment.author.name}</a>`
|
|
|
} else {
|
|
|
comment.avatarEl = `<img src="${comment.author.avatar.cache}">`;
|
|
|
comment.authorEl = `${comment.author.name}`
|
|
|
}
|
|
|
|
|
|
if (s.isPrimary) {
|
|
|
comment.authorEl += `<span class="dsqjs-admin-badge">${disqusjs.config.adminLabel}</span>`
|
|
|
}
|
|
|
|
|
|
if (s.children) {
|
|
|
s.nesting = 1
|
|
|
}
|
|
|
|
|
|
let html = `<li class="dsqjs-item" id="comment-${comment.id}">`
|
|
|
|
|
|
html += renderCommentItem(comment)
|
|
|
|
|
|
html += `${childrenComments(s)}</li>`;
|
|
|
|
|
|
document.getElementById('dsqjs-list').insertAdjacentHTML('beforeend', html);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Name: loadError()
|
|
|
* Description: When dsqjs mode load error
|
|
|
*/
|
|
|
|
|
|
let loadError = () => {
|
|
|
document.getElementById('dsqjs-load-error').classList.remove('dsqjs-hide');
|
|
|
document.getElementById('dsqjs-loading-dsqjs').classList.add('dsqjs-hide');
|
|
|
document.getElementById('dsqjs-reload').addEventListener('click', getThreadInfo);
|
|
|
}
|
|
|
|
|
|
let main = () => {
|
|
|
// Add dsqjs container element to #disqus_thread
|
|
|
|
|
|
/*
|
|
|
<div id="dsqjs">
|
|
|
<section class="dsqjs-action"></section>
|
|
|
<header></header>
|
|
|
<section class="dsqjs-info">
|
|
|
<p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理，或使用<a href="#disqus_thread" id="dsqjs-force-dsqjs">评论基础模式</a></p>
|
|
|
<p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并<a href="#disqus_thread" id="dsqjs-reload-disqus">尝试完整 Disqus 模式</a> | <a href="#disqus_thread" id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p>
|
|
|
<p id="dsqjs-thread-not-init" class="dsqjs-message dsqjs-hide">该 Thread 并没有初始化，是否 <a href="#disqus_thread" id="dsqjs-init-thread">切换到完整 Disqus 模式</a> 进行初始化？</p>
|
|
|
<p id="dsqjs-load-error" class="dsqjs-message dsqjs-hide">评论基础模式出现错误，是否<a href="#disqus_thread" id="dsqjs-reload">重载</a>？</p>
|
|
|
<p id="dsqjs-no-comment" class="dsqjs-no-comment dsqjs-hide">这里冷冷清清的，一条评论都没有</p>
|
|
|
</section>
|
|
|
<section class="dsqjs-container" id="dsqjs-container">
|
|
|
<ul id="dsqjs-list" class="dsqjs-list"></ul>
|
|
|
<div class="dsqjs-footer">
|
|
|
<div class="dsqjs-footer-right">
|
|
|
Powered by <a href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank">DISQUS</a> & <a href="https://github.com/SukkaW/DisqusJS">DisqusJS</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
*/
|
|
|
var disqusjsBaseTpl = `<div id="dsqjs"><section class="dsqjs-action"></section><header></header><section class="dsqjs-info"><p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理，或使用<a href="#disqus_thread" id="dsqjs-force-dsqjs">评论基础模式</a></p><p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并<a href="#disqus_thread" id="dsqjs-reload-disqus">尝试完整 Disqus 模式</a> | <a href="#disqus_thread" id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p><p id="dsqjs-thread-not-init" class="dsqjs-message dsqjs-hide">该 Thread 并没有初始化，是否 <a href="#disqus_thread" id="dsqjs-init-thread">切换到完整 Disqus 模式</a> 进行初始化？</p><p id="dsqjs-load-error" class="dsqjs-message dsqjs-hide">评论基础模式出现错误，是否<a href="#disqus_thread" id="dsqjs-reload">重载</a>？</p><p id="dsqjs-no-comment" class="dsqjs-no-comment dsqjs-hide">这里冷冷清清的，一条评论都没有</p></section><section class="dsqjs-container" id="dsqjs-container"><ul id="dsqjs-list" class="dsqjs-list"></ul><div class="dsqjs-footer"><div class="dsqjs-footer-right">Powered by <a href="https://disqus.com" rel="nofollow noopener noreferrer" target="_blank">DISQUS</a> & <a href="https://github.com/SukkaW/DisqusJS">DisqusJS</a></div></div></section></div>`;
|
|
|
document.getElementById('disqus_thread').innerHTML = disqusjsBaseTpl;
|
|
|
|
|
|
disqusjs.mode = getLS('disqusjs_mode');
|
|
|
if (disqusjs.mode === 'disqus') {
|
|
|
loadDisqus();
|
|
|
} else if (disqusjs.mode === 'dsqjs') {
|
|
|
getThreadInfo();
|
|
|
} else {
|
|
|
// Run checkDisqus() when no localStorage item
|
|
|
// disqusjs.mode will be set in checkDisqus()
|
|
|
checkDisqus();
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
main();
|
|
|
|
|
|
})(); |