Selected comments hepatopetal

Introduction


Habr me love not only for their posts, but for comments. To some of the topics when there are too many comments, so I quickly scroll through the page in search of the most highly rated. To improve the efficiency of this process, I wrote a bookmarklet is JavaScript stored as a browser bookmark (Wiki). Today I consider it my duty to share it with the community.

Bookmarklet



It's simple. You add to bookmark a page that looks like the following:

JavaScript (569 rows)
javascript:
function tImeit(st)
{
var tim=st.split(" ");
var tima=580320*(parseInt(tim[2])-2000)+1440*(parseInt(tim[0])-1)+60*(parseInt(tim[4].charAt(0))*10+parseInt(tim[4].charAt(1)))+parseInt(tim[4].charAt(3))*10+parseInt(tim[4].charAt(4));
for (var i=0;i<12;i++)
{
if (mOnths[i]!=tim[1])
{
tima+=44640;
}
else
{
i=13;
};
};
return tima;
};
function cLose()
{
$("#ComSort").animate({right:"-410px"},500);
}
fOntlarger function()
{
$(".message.content").animate({fontSize:"+=2"},0);
}
function sOrt(a, b) 
{
if (a.k > b.k) 
{
return -1;
}
else
{
if (a.k < b.k)
{
return 1;
}
else
{
if (a.ind>b.ind)
{
return 1;
}
else
{
return -1;
}
};
};
};
function sOrt2(a, b) 
{
if (a.k > b.k) 
{
return -1;
}
else
{
if (a.k < b.k)
{
return 1;
}
else
{
if (a.k2>b.k2)
{
return 1;
}
else
{
return -1;
}
};
};
};
function bEst()
{
xX=mB[0].ind;
gO();
};
nExtbest function()
{
var i=mA[xX].best;
if ((i<(mA.length-1)) && ($("#bEst").text().length>0))
{
i++;
}
else
{
if ($("#bEst").text().length>0)
{
var obj=$("#wO");
}
else
{
var obj=$("#bE");
}
obj.removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
};
xX=mB[i].ind;
gO();
};
the function wOrst()
{
xX=mB[mA.length-1].ind;
gO();
};
nExtworst function()
{
var i=mA[xX].best;
if ((i>0) && ($("#bEst").text().length>0))
{
i--;
}
else
{
if ($("#bEst").text().length>0)
{
var obj=$("#bE");
}
else
{
var obj=$("#wO");
}
obj.removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
};
xX=mB[i].ind;
gO();
};

function lAst()
{
xX=mN[0].ind;
gO();
};
function nExtlast()
{
var i=mA[xX].newest;
if ((i<(mA.length-1)) && ($("#fIrst").text().length>0))
{
i++;
}
else
{
if ($("#fIrst").text().length>0)
{
var obj=$("#fI");
}
else
{
var obj=$("#lA");
}
obj.removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
};
xX=mN[i].ind;
gO();
};
function fIrst()
{
xX=mN[mA.length-1].ind;
gO();
};
function nExtfirst()
{
var i=mA[xX].newest;
if ((i>0) && ($("#fIrst").text().length>0))
{
i--;
}
else
{
if ($("#fIrst").text().length>0)
{
var obj=$("#lA");
}
else
{
var obj=$("#fI");
}
obj.removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
};
xX=mN[i].ind;
gO();
};

mOot function()
{
xX=mM[0].ind;
gO();
};
nExtmoot function()
{
var i=mA[xX].moot;
if ((i<(mA.length-1)) && ($("#mOot").text().length>0))
{
i++;
}
else
{
if ($("#mOot").text().length>0)
{
var obj=$("#sI");
}
else
{
var obj=$("#mO");
}
obj.removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
};
xX=mM[i].ind;
gO();
};
function sImple()
{
xX=mM[mA.length-1].ind;
gO();
};
function nExtsimple()
{
var i=mA[xX].moot;
if ((i>0) && ($("#mOot").text().length>0))
{
i--;
}
else
{
if ($("#mOot").text().length>0)
{
var obj=$("#mO");
}
else
{
var obj=$("#sI");
}
obj.removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
};
xX=mM[i].ind;
gO();
};
function gO()
{
if (mA[xX]) 
{
document.location.replace(mA[xX].href);
$(mA[xX].href+">.comment_body,"+mA[xX].href+">.comment_body>.message").animate(
{
backgroundColor:"#f0f0e7"
},300,function(){$(this).animate({backgroundColor:"none"},500);});
$("#bEst").text((mA[xX].best+1)+" of "+mA.length);
$("#fIrst").text((mA.length-mA[xX].newest)+" of "+mA.length);
$("#mOot").text((mA[xX].moot+1)+" of "+mA.length);
} 
else 
{
document.location.replace('#');
};
};

if (typeof(PR) == 'undefined')
{
var mA=new Array();
var mB=new Array();
var mN=new Array();
var mM=new Array();
var ind=0;
var mOnths=["anwara","fevrale","Martha","Aprilia","mA","yuna","EULA","Augusta","sentiabria","Oktyabrya","noyabrya","decabre"];
$('#comments span.score').each(function()
{
var str=$(this).attr('title');
var up=parseInt(str.substring(str.indexOf('↑')+1,str.indexOf('and')-1));
var down=parseInt(str.substring(str.indexOf('↓')+1,str.length));
var ti=tImeit($(this).parent().parent().parent().find('time').text());
mA.push({ind:ind,up:up,down:down,href:$(this).parent().parent().parent().find('a.link_to_comment').attr('href'),ttime:ti});
mB.push({ind:ind k:(up-down)});
mN.push({ind:ind k:ti});
var moot=up;
if (up>down)
{
moot=down;
};
mM.push({ind:ind k:moot,k2:(up-down)});
ind++;
});
if (mA.length==0)
{
alert('no Comments');
}
else
{
mB.sort(sOrt);
mN.sort(sOrt);
mM.sort(sOrt2);
var xX=mB[0].ind;
for (i=0;i<mA.length;i++)
{
mA[mB[i].ind].best=i;
mA[mN[i].ind].newest=i;
mA[m[i].ind].moot=i;
};
var table="<style type='text/css'>
#mTable tr{
height: 20px;
}
#mTable td{
vertical-align: middle;
text-align: center;
}
#mTable td.count{
width: 100px;
}
#mTable .bIg{
width: 100px;
font-size: 25px;
line-height: 50px;
}
#mTable .bR{
vertical-align: top;
}
#mTable .bL{
vertical-align: bottom;
}
#mTable .mArker{
width: 5px;
height: 5px;
display: block;
}
#mTable .mL{
margin-right: 5px;
}
#mTable .mR{
margin-left: 5px;
}
#mTable .mK{
margin-top: -5px;

}
#mTable .rEset>td{
border-top: 1px dashed #cccccc;
}
#mTable .rEset#mTable .pRereset{
height: 10px;
}
#mTable .sElect{
box-shadow: 0 0 10px #4d7285;
}
#mTable .sEl{
transition: all 0.3 s;
}
#mTable small{
font-size: 8px;
color: #999999;
}
#mTable td>span>a{
color: #333;
cursor: pointer;
line-height: 30px;
text-decoration: none;
}
#mTable td>span>a:hover{
text-decoration: underline;
}

#mTable td>a{
display: block;
-moz-user-select: -moz-none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
height: 100%;
background-color: #eeeeee;
background-image: -webkit-gradient(linear,  left  top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(top, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #333;
text-align: center;
text-shadow: 0 1px 0 #eee;
outline: none;
cursor: pointer;
transition: all 0.3 s;
}
#mTable td>a:hover,#mTable td>a:focus {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #ddd;
transition: all 0.3 s;
}
#mTable td>a:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
transition: all 0.3 s;
}
</style>
<table id='mTable' style='border:none;' cellpadding='0' cellspacing='0'>
<tr>
<td colspan='5'><span><a onclick='cLose()'>Close</a></span></td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #339900'></span> 
</td>
<td>
<a onclick='bEst()' id='bE' class='sEl'>Best</a>
</td>
<td rowspan='4' class='count'>
<span id='bEst'></span>
</td>
<td rowspan='3' class='bIg bR'>
<a onclick='nExtworst()'>↑</a>
</td>
<td><span class='mArker ' mR' style='background-color: #A9A9A9'></span> 
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #339900'></span> 
</td>
<td rowspan='3' class='bIg bL'>
<a onclick='nExtbest()' id='nExtbe'>↓</a>
</td>
<td><span class='mArker ' mR' style='background-color: #BA9B9B'></span>
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #6EA155'></span> 
</td>
<td><span class='mArker ' mR' style='background-color: #CC0000'></span>
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #A9A9A9'></span> 
</td>
<td>
<a onclick='cut()' id='wO' class='sEl'>Worse</a>
</td>
<td><span class='mArker ' mR' style='background-color: #CC0000'></span> 
</td>
</tr>
<tr class='pRereset'>
<td colspan='5'></td>
</tr>
<tr class='rEset'>
<td colspan='5'></td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #FFFFFF'></span> 
</td>
<td>
<a onclick='fIrst()' id='fI' class='sEl'>First</a>
</td>
<td rowspan='4' class='count'>
<span id='fIrst'></span>
</td>
<td rowspan='3' class='bIg bR'>
<a onclick='nExtlast()'>↑</a>
</td>
<td><span class='mArker ' mR' style='background-color: #FFFFFF'></span> 
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #F3F3FF'></span> 
</td>
<td rowspan='3' class='bIg bL'>
<a onclick='nExtfirst()'>↓</a>
</td>
<td><span class='mArker ' mR' style='background-color: #F3F3FF'></span>
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #E8E8FF'></span> 
</td>
<td><span class='mArker ' mR' style='background-color: #E8E8FF'></span>
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #E8E8FF'></span> 
</td>
<td>
<a onclick='lAst()' id='lA' class='sEl'>Latest</a>
</td>
<td><span class='mArker ' mR' style='background-color: #E8E8FF'></span> 
</td>
</tr>
<tr class='pRereset'>
<td colspan='5'></td>
</tr>
<tr class='rEset'>
<td colspan='5'></td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #CC0000'></span><span class='mArker mK' style='background-color: #339900'></span>
</td>
<td>
<a onclick='mOot()' id='mO' class='sEl'>Controversial</a>
</td>
<td rowspan='4' class='count'>
<span id='mOot'></span>
</td>
<td rowspan='3' class='bIg bR'>
<a onclick='nExtsimple()'>↑</a>
</td>
<td><span class='mArker ' mR' style='background-color: #BA9B9B'></span> 
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #CC0000'></span><span class='mArker mK' style='background-color: #339900'></span>
</td>
<td rowspan='3' class='bIg bL'>
<a onclick='nExtmoot()'>↓</a>
</td>
<td><span class='mArker ' mR' style='background-color: #6EA155'></span>
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #BA9B9B'></span><span class='mArker mK' style='background-color: #6EA155'></span> 
</td>
<td><span class='mArker ' mR' style='background-color: #CC0000'></span>
</td>
</tr>
<tr>
<td><span class='mArker ' mL' style='background-color: #A9A9A9'></span> 
</td>
<td>
<a onclick='sImple()' id='sI' class='sEl'>Unequivocal</a>

<td><span class='mArker ' mR' style='background-color: #339900'></span> 
</td>
</tr>
<tr>
<td colspan='5'><span><a onclick='fOntlarger()'>the Font larger</a></span></td>
</tr>
<tr class='pRereset'>
<td colspan='5'><span><a href='http://NikitaPolunin.ru' target='_blank' style='line-height: 10px;'><small>Nikita Polunin</small></a></span></td>
</tr>
</table>";
$("<div id='ComSort' style='position:fixed;right:-410px;z-index:100;top:10px;border:4px solid #cccccc;background-color: #ffffff;box-shadow: 0 4px 10px #666666;padding: 5px 0;'>"+table+"</div>").appendTo("#layout").animate({right:"10px"},500);
};
document.location.replace("#");
}
else
{
if (mA.length>0)
{
$("#nExtbe").removeClass('sElect').addClass('sElect').animate({padding:"0"},400,function(){$(this).removeClass('sElect');});
$("#ComSort").animate({right:"10px"},500);
nExtbest();
}
else
{
document.location.replace("#");
};
};


If there is no desire to allocate code and paste it into a bookmark, you can drag specially prepared a link to the bookmark. Because here its impossible to install, I had to create a separate page. In short, the link code is this link.
When you click a bookmark bookmarklet buttons will appear, the meaning of which is the following:
the
    the
  • from the comment with the highest rating to the others in descending order of rating (and Vice versa).
    • the
  • From first date to last (and Vice versa).
    • the
  • From the most "controversial" of the least controversial (and Vice versa).
    the more pluses (minuses) have negative (positive) comment, the more controversial it is. With equal value of "recessive" votes more controversial is the review with a lower rating.

Also you can continue to click on the tab, going through comments from the best (under rated) the worst.

cross browser compatibility


Of course, Internet Explorer had objections to my ideas — he is against too long links in the bookmarks. You can negotiate with them if the bookmark only add code to load and insert into the page of the whole script (from a third party site). It usually made these bookmarklets, but the script may suddenly disappear from a third party site or even go to the evil side... Another thing, when the code you have in the tab. In General, I'm just saying hi users of IE.
Chrome, Safari, and Firefox can cope, Opera I failed to bring the bookmark to check.

Opinion


The script may stop working after changing layout reviews Habra, etc., but since I myself use it, I will try to update. In the end, the code is open.

What do you say?
Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Performance comparison of hierarchical models, Django and PostgreSQL

Изображение
Good day, dear readers. Today's article will be devoted to the comparison of models of working with hierarchical data in PostgreSQL via Django app. In the article I specifically do not use a clean implementation in the database, because I'm interested in is performance in an environment close to combat. All tests were performed on my data and results are relevant for this data on your data the result may differ from that obtained in the article. Model implementation of the hierarchical structures in the database For working with such structures in PostgreSQL you can use the following modely : the Adjacency model (AM) — model, when the column is stored parent; the Nested Sets (NS) model when paired column stores the range of all sub-elements; the Materialised Path model (MP) model, when the column is stored the full path to the element. Also details about the implementation of hierarchical structures in a relational database, you can read here . To imp...
Далее...

google life search

Изображение
Yesterday Google announced the Live search So, what is it and how to use it? Did it make your search more relevant and convenient for users? How to get it, where to enter a query to see live results? The algorithm is still driven around and while fully works only for English queries. You enter the query and see the results of the search in the middle of the page in the section Latest result for “your request”. Can try enter your query here . For example, a request Obama. About the middle of the page is visible to block the Latest results that are updated in real-time. New results on request Obama constantly updated and added to the search results. If this text is annoying, you can pause by clicking "Pause", but completely remove the "live search" from the results it is impossible. Adam Smith, a Google employee, guiding the development of new search system in real time, says that not all queries can be seen regularly updated information: ...
Далее...

Transport Tycoon Deluxe / Emscripten part 2

Изображение
Transport Tycoon (Transport tycoon) is pretty old, but still enjoyable, especially the maniacs, the game is in the genre of RTS. /.../ There is also OpenTTD, outdoor product manyatta iPhoto, resulting from the game can not be distracted even in the toilet and underground, setting her on the Communicator or PDA. lurkmore I can honestly say: I killed a huge amount of time playing Transport Tycoon Deluxe. I'm just a fan of this game. So when on Habre the article appeared about how the guys from mozilla have ported Doom, I hit on the idea – to migrate one of my favorite games here on the Internet. By the way, the article was scarce, but I learned the main thing – the porting can be done using emscripten . Since the inception of the thought of the possibility of such a project was not less than a year (my first attempt crashed on the rocks of misunderstanding). And now I'm in a hurry to please you all: I did it! Now to sit ass playing TTD you can be located anywhere con...
Далее...