How will Habracommentator or a new way to navigate through the comments?

To begin with, the idea somehow came to my mind when I once again read a post on the topic of displaying comments. Naturally, the topic turned to the fact that comments with a tree structure of the arrangement of answers, tend to the right edge, shrink and become unreadable.

Then I decided to move the left edge to the left to make narrow comments wider, what does it look like? Not very clear. And okay! I wrote a bookmarklet for you to see for yourself! It was created specifically for Habr, so you can use it all the time.

Bookmarklet

For those who do not know what a bookmarklet is, we read an article in Wikipedia.

Open the bookmarklet.txt , copy the line, create a new entry in the bookmarks, paste the line in the field "URL"

Javascript

If you are worried about the theft of cookies, you can make a bookmarklet from the code. By the way, it is very convenient to make bookmarklets using JS minifier .

if(!commentsPatched){

var commentsPatched = true;



var comments = $('commentsdiv').getElementsByClassName('comment_item');

var commentsLength = comments.length;

for(var i=0;i<commentsLength; i++){

var margin= parseInt(comments[i].style.marginLeft);

if(margin>0){



var toLeft = document.createElement('img');

toLeft.setAttribute('src','http://habr.rumkin.ru/images/to-left.gif');

toLeft.setAttribute('style','cursor:pointer;cursor:hand;');

toLeft.setAttribute('onclick','commentToLeft(this);');

comments[i].appendChild(toLeft);



var toRight= document.createElement('img');

toRight.setAttribute('src','http://habr.rumkin.ru/images/to-right.gif');

toRight.setAttribute('style','cursor:pointer;cursor:hand;');

toRight.setAttribute('onclick','commentToRight(this);');

comments[i].appendChild(toRight);

}

}



alert('Patched');

}



function commentToLeft(obj){

var boundElement = obj.parentNode.childNodes[1].firstChild;

var bound = getBounds(boundElement);

if(bound.left > 38){

var commentsDiv = $('commentsdiv');

var margin= parseInt(commentsDiv.style.marginLeft);

if(!margin) margin = 0;

var parentMargin = parseInt(obj.parentNode.style.marginLeft);

if(!parentMargin) parentMargin = 0;

commentsDiv.style.marginLeft = (-1*parentMargin)+'px';

}



}



function commentToRight(obj){

var commentsDiv = $('commentsdiv');

var margin= parseInt(commentsDiv.style.marginLeft);

if(!margin) margin = 0;



var parentMargin = parseInt(obj.parentNode.style.marginLeft);

if(!parentMargin) parentMargin = 0;

if(margin<0){

if((-1*parentMargin)>margin){

commentsDiv.style.marginLeft = (margin+30)+'px';

} else {

commentsDiv.style.marginLeft = 0 +'px';

}

}

}

function getBounds(element)

{

var left = element.offsetLeft;

var top = element.offsetTop;

for (var parent = element.offsetParent; parent; parent = parent.offsetParent)

{

left += parent.offsetLeft;

top += parent.offsetTop;

}

return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};

}



Note

• This is the first version, so you have to wait for the page to finish loading before enabling the habra commentator!
• Very good ladder of comments for testing.
• Tested in FF 3.0, Opera 9.5 and Safari
• uses prototype.js version 1.4 installed on Habré