JavaScript Snippet - Robtex.com Sorted Lists

Posted at

This nice little code, walks-through the lists on the page,
sort them and rewrite them as plain-text,
making them somewhat more easier to browse, and select/copy content.

icompile.eladkarako.com_robtex_before

icompile.eladkarako.com_robtex_work_in_progress


icompile.eladkarako.com_robtex_work_in_progress_parallel


icompile.eladkarako.com_robtex_done_plus_selection


javascript:(function (body,style,style_text){
NodeList.prototype.forEach = Array.prototype.forEach;
NodeList.prototype.map = Array.prototype.map;

style.appendChild(style_text);
body.appendChild(style);

document.querySelectorAll("ol").forEach(function(ol){
ol.setAttribute('state','work');

/* use element as an object, storing data as variable, while clearing the DOM related data. */
ol.lis = ol.querySelectorAll("li")
.map(function(li){ return li.innerText.toLowerCase() })
.sort()
;
ol.lis = "<li>" + ol.lis.join("</li><li>") + "</li>";

ol.innerHTML = "";

setTimeout(function(){
ol.setAttribute("contentEditable", "true"); /* to support [CTRL]+[A] */
ol.innerHTML = ol.lis;
ol.setAttribute('state','done');
}, 50);
});
}(
document.querySelector("body")
, document.createElement("style")
, document.createTextNode('/*<![CDATA[*/'
+ 'ol[state="work"]:before{content:"working..."; font-size:20pt;}'
+ 'ol[state="work"]{background:none rgba(255,127,137,.6); color:rgba(0,0,0,.1);}'
+ 'ol[state="done"]{background:none rgba(147,255,72,.1); font-size: 12pt; letter-spacing:.5pt; line-height:16pt;}'
+ 'ol[state="done"] li{font-family: "Courier New", monospace;}'
+ '/*]]>*/')
));


and a bookmarklet version:
javascript:(function(body,style,style_text){NodeList.prototype.forEach=Array.prototype.forEach;NodeList.prototype.map=Array.prototype.map;style.appendChild(style_text);body.appendChild(style);document.querySelectorAll("ol").forEach(function(ol){ol.setAttribute("state","work");ol.lis=ol.querySelectorAll("li").map(function(li){return li.innerText.toLowerCase();}).sort();ol.lis="<li>"+ol.lis.join("</li><li>")+"</li>";ol.innerHTML="";setTimeout(function(){ol.setAttribute("contentEditable","true");ol.innerHTML=ol.lis;ol.setAttribute("state","done")},50)})})(document.querySelector("body"),document.createElement("style"),document.createTextNode('/*<![CDATA[*/ol[state="work"]:before{content:"working...";font-size:20pt;}ol[state="work"]{background:none rgba(255,127,137,.6);color:rgba(0,0,0,.1);}ol[state="done"]{background:none rgba(147,255,72,.1);font-size:12pt;letter-spacing:.5pt;line-height:16pt;}ol[state="done"] li{font-family:"Courier New",monospace;}/*]]>*/'));