Skip to main content

Вывод комментариев в виде дерева на Juick.com

Информация из этой статьи больше не актуальна. Смотрите новую версию скрипта.

Хороший сервис микроблогинга - Juick.com (я там тут вот @gansik), но по разным идеологическим причинам, разработчик не реализовывает всякие полезные фичи, типа вывода комментариев к записи в виде древовидного списка. Это бывает очень удобно, в случае если комментариев много, и не все они одинаково полезны (нормальная ситуация на этом сервисе, когда пару человек пишут комменты "в тему", а куча "петросянов" не в тему).

Для более удобного чтения обсуждений на Жуйк, я сделал букмарклет, который преобразовывает вывод комментов из потокового в иерархический. Всё что нужно это "перетащить" линк, приведёный ниже, в закладки, и находясь на сайте juick.com, выбирать эту закладку из избранного. Более побробно что такое букмарклет и как оно работает, читайте в википедии.

Линк, который надо перетащить в избранное -
Juick.com Древовидные комментарии

Букмарклет работает во всех распостранёных броузерах, но могут быть глюки, всё таки первая версия. Баги присылайте в комментах к посту, который я создам на juick.com. Там же и работу скрипта потестируем.

Вот код скрипта без обфускации, используйте его как хотите на свой страх и риск. Например этот код можно добавить как greasemonkey скрипт в Firefox.

/**
 * Tree view for Juick.com
 * Version 0.0.1
 * Gansik, /
 */
var juick_tree_view = {
IndentStep: 40,
MaxLevel:4,
get_nextsibling: function(n){
x=n.nextSibling;
while (x.nodeType!=1) x=x.nextSibling;
return x;
},
get_lastchild: function(n){
x=n.lastChild;
while (x.nodeType!=1) x=x.previousSibling;
return x;
},
run: function(){
var cmt = document.getElementById("replies");
if (cmt){
var cmts = cmt.getElementsByTagName("LI");
for (var i = 0; i < cmts.length; i++){
var oo = this.get_lastchild(this.get_lastchild(cmts[i]));
if (oo.tagName == "A"){
var oldLi = cmts[i];
var sId = String(oo.innerHTML).substring(1);
var parentLi = document.getElementById(sId);
var otstup = parseInt(parentLi.style.marginLeft);
(isNaN(otstup)) ?
otstup = this.IndentStep :
otstup += this.IndentStep;
if(otstup > this.IndentStep * (this.MaxLevel-1))
otstup = this.IndentStep * (this.MaxLevel-1);
var prevLi = this.get_nextsibling(parentLi);
var newLi = oldLi.cloneNode(1);
newLi.style.marginLeft = otstup + "px";
cmt.insertBefore(newLi,prevLi);
cmt.removeChild(oldLi);
}
}
}
}
};
juick_tree_view.run();

Если скрипт народ заинтересует, я добавлю скрытие веток обсуждения, и конвертацию представления обратно в потоковый вид.