Gansik's Blog > Online > Javascript > 2009 10 20 Juick.Xhtml

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

Publish Date Tue, 20 Oct 2009
Tags Blog, Hacks, Bookmarklet
Category online/javascript
Link http://gansik.tagv.com/online/javascript/2009-10-20-juick.xhtml

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

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

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

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

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

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

/**
 * Tree view for Juick.com
 * Version 0.0.1
 * Gansik, http://gansik.tagv.com/
 */

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();

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

При добавлении комментария вы можете использовать весь набор HTML тегов, который знаете. Даже те которые deprecated в XHTML. Пишите любой JavaScript. Добавляйте ссылки на что хотите и куда хотите. Конечно же разрешенна вставка картинок любого содержания, на какой бы помойке вы их не нашли. Оскорбления владельца блога или комментаторов - не проблема. Не сдерживайте себя, пишите что хотите...

Другой вопрос опубликую ли я ваш комментарий ;) Но вы попробуйте, а вдруг повезет.

Аргументированное мнение не совпадающее с моим, будет опубликованно в объязательном порядке. Реплики типа "Добавил в закладки", "Спасибо, очень полезно" публиковаться не будут. Не надо тешить мое тщеславие, оно и так непомерное.

Gansik's Blog

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

Комментарии