topo’s corner

blinklist 的升级令人失望，决定用 Greasemonkey 把 delicious 改进一下，让它至少看上去和旧版的 blinklist 有些相像。

改造之处：

1、点击 delicious 显示的书签时让它在新的 tab 里面显示；

2、显示书签网站的缩略图和 favicon。

Yamamaya 的脚本已经完成了2，我就在此基础上增加了1。

脚本代码如下：

// ==UserScript==
// @name Delicious Thumbnail & Favicon
// @namespace Yamamaya
// @include http://delicious.com/*
// @version 2.00
// ==/UserScript==

(function(){
var insertEle = document.getElementById(”sidebar”);
var toggle = document.createElement(”div”);
toggle.id = “toggleBox”;
toggle.style.cursor = “pointer”;
var h3 = document.createElement(”h3″);
toggle.appendChild(h3);
var span = document.createElement(”span”);
span.className = “toggle-button”;
span.innerHTML = “Thumbnail Size”;
h3.appendChild(span);

var setBox = document.createElement(”div”);
setBox.id = “sizeSetBox”;
setBox.style.display = GM_getValue(”display”);

var sele = document.createElement(”a”);
sele.href=”#”;
sele.innerHTML = “Small”;
setBox.appendChild(sele);

var seleM = document.createElement(”a”);
seleM.href=”#”;
seleM.innerHTML = “Medium”;
setBox.appendChild(seleM);

var seleL = document.createElement(”a”);
seleL.href=”#”;
seleL.innerHTML = “Large”;
setBox.appendChild(seleL);

if(setBox.style.display == “none”) span.style.backgroundPosition = “3px -359px”;

h3.addEventListener(”click”,function(){
setBox.style.display == “” ? setBox.style.display = “none”: setBox.style.display = “”;
setBox.style.display == “” ? span.style.backgroundPosition = “” : span.style.backgroundPosition = “3px -359px”;
GM_setValue(”display”,setBox.style.display);
},false);
var addImg = function(link){
if(link.parentNode.nodeName.toLowerCase() != “h4″) return;
// favicon
var fBox = document.createElement(”div”);
var fStyle = fBox.style;
fStyle.cssFloat = “left”;
fStyle.minWidth = “16px”;
fStyle.minHeight = “16px”;
fStyle.margin = “0px 7px”;
fStyle.backgroundImage = ‘url(”chrome://global/skin/icons/folder-item.png”)’;
var favi = document.createElement(”img”);
favi.src=”http://” + link.hostname + “/favicon.ico”;
favi.width = “16″;

// No favicon
favi.removeEventListener(’error’, revertIcon, false);
favi.addEventListener(’error’, revertIcon, false);

var parent = link.parentNode;
fBox.appendChild(favi);
parent.insertBefore(fBox,link);

// Thumbnail
if (parent.parentNode.parentNode.firstChild.nextSibling.nodeName.toLowerCase() != “a”) {
var tBox = document.createElement(”div”);
tBox.style.cssFloat = “left”;
tBox.style.margin = “0px 3px 3px 0px”;
var a = document.createElement(”a”);
a.href = link.href;
a.target = “_blank”;
var thumb = document.createElement(”img”);
thumb.src=”http://open.thumbshots.org/image.pxf?url=” + link.href;
thumb.alt = “thumb”;
thumb.width = GM_getValue(”width”, 90);
thumb.height = GM_getValue(”height”, 70);
thumb.style.border = “1px solid #c4c4c4″;
a.appendChild(thumb);
tBox.appendChild(a);
parent.parentNode.insertBefore(tBox, parent);

insertEle.insertBefore(toggle, insertEle.firstChild);
insertEle.insertBefore(setBox, insertEle.firstChild.nextSibling);

switch(thumb.width){
case 70:
sele.style.color = “#fff”;
sele.style.backgroundColor = “#6C6C6C”;
break;
case 90:
seleM.style.color = “#fff”;
seleM.style.backgroundColor = “#6C6C6C”;
break;
case 120:
seleL.style.color = “#fff”;
seleL.style.backgroundColor = “#6C6C6C”;
break;
};
};

link.style.display = “block”;
link.style.paddingLeft = “5px”;
var linkContainer = document.createElement(”div”);
linkContainer.style.marginLeft = “30px”;
parent.insertBefore(linkContainer,link.nextSibling);
linkContainer.appendChild(link);

sele.addEventListener(”click”,function(e){
thumb.width = “70″;
thumb.height = “60″;
this.style.color = “#fff”;
this.style.backgroundColor = “#6C6C6C”;
seleM.style.color = “#666666″;
seleM.style.backgroundColor = “#fff”;
seleL.style.color = “#666666″;
seleL.style.backgroundColor = “#fff”;
set(thumb);
e.preventDefault();
},false);

seleM.addEventListener(”click”,function(e){
thumb.width = “90″;
thumb.height = “70″;
this.style.color = “#fff”;
this.style.backgroundColor = “#6C6C6C”;
sele.style.color = “#666666″;
sele.style.backgroundColor = “#fff”;
seleL.style.color = “#666666″;
seleL.style.backgroundColor = “#fff”;
set(thumb);
e.preventDefault();
},false);

seleL.addEventListener(”click”,function(e){
thumb.width = “120″;
thumb.height = “90″;
this.style.color = “#fff”;
this.style.backgroundColor = “#6C6C6C”;
sele.style.color = “#666666″;
sele.style.backgroundColor = “#fff”;
seleM.style.color = “#666666″;
seleM.style.backgroundColor = “#fff”;
set(thumb);
e.preventDefault();
},false);

// lxl added: open link in a new tab
link.target = “_blank”;
// lxl added: open link in a new tab

};

var addStyle = (function(){
var style = “ul.bookmarks li.post h4 a {background-color: #EFF5FB;}”;
style += “ul.bookmarks li.post h4 a:hover {color: #fff; text-decoration: none; background-color: #3472D0;}”;
style += “ul.bookmarks li.post .description {margin-left: 130px; width: 84%;}”;
style += “.main #popular ul.bookmarks li.post .bookmark {padding-left:80px;}”;
style += “ul li.post .bookmark .full-url {margin: 5px 3px;}”;
style += “ul.bookmarks li.post .TITLEONLY h4 a.taggedlink, ul.bookmarks li.post .TITLEONLY h4 .editdel {float: none;}”;
style += “ul.bookmarks li.post h4 .editdel a.action {padding: 0px 5px;}”;
style += “ul li.post .bookmark .full-url {margin: 5px 5px 5px 110px;}”;
style += “#sidenav-title {margin-top:20px;}”;
style += “#toggleBox h3 {width:190px; margin:0px 0px 10px 30px;}”;
style += “#sizeSetBox {margin:0px 0px 5px 30px;}”;
style += “#sizeSetBox a {color:#666666; margin:0px 3px 0px 0px; padding:2px 0px 2px 16px; display:block; border-bottom:1px solid #E3E3E3;}”;
GM_addStyle(style);
})();

var faviThumb = function(){
var path = [
'.//h4/a[@class="inlinesave action" or @class="action" or @class="inlinesave"]‘,
‘.//span[@class="saved"]‘,
‘.//h4/div[@class="editdel"]‘,
].join(” | “);
forEachMatch(’.//a[@class="taggedlink"]‘, addImg);
forEachMatch(path,addSave);
};
faviThumb();

window.AutoPagerize&&window.AutoPagerize.addFilter(
function(docs){
docs.forEach(faviThumb);
});

function revertIcon(event) {
this.src=”http://media.aruko.net/favicon/m/file.gif”;
};

function set(t){
GM_setValue(”width”,t.width);
GM_setValue(”height”,t.height);
};

function addSave(links){
if (!links) return;
if (links.parentNode.nodeName.toLowerCase() == ‘div’) return;
var saveBox = document.createElement(”div”);
saveBox.style.marginTop = “5px”;
saveBox.style.marginLeft = “30px”;
var boxParent = links.parentNode;
saveBox.appendChild(links);
boxParent.appendChild(saveBox);
};

function forEachMatch(path, f, root) {
var el;
var root = (root == null) ? document : root;
var matches = root.evaluate(
path, root, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i=0;el=matches.snapshotItem(i);i++)
f(el);
};

})();