Document Actions
digg.direc.tor
del.icio.us direc.torにdiggのデータを差し込んでみるテスト。Only Use Yahoo! Pipes & JavaScript.
Size 17.9 kB - File type text/html
Click here to get the file
File contents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>digg.direc.tor</title>
<script type="text/javascript" charset="utf-8">
<!--
/*************************************************************************
* JS prototyperrific object extensions
************************************************************************/
String.prototype.toDOM = function() {
if (document.implementation.createDocument){
var parser = new DOMParser();
return parser.parseFromString(this, "text/xml");
} else if (window.ActiveXObject){
var dom = new ActiveXObject("Msxml2.DOMDocument")
dom.async="false";
dom.loadXML(this);
return dom;
}
}
Array.prototype.indexOf = function(q) {
var i = this.length;
var output = -1;
for(var i=0, x=this.length; i < x; i++) {
if(this[i][0] == q) {
output = i;
break;
}
}
return output;
}
Hash = function() {
}
/*************************************************************************
* XML/XSL utility classes (and no, Safari can't play)
************************************************************************/
jvXmlRequest = function() {
this.adapter = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
this.adapter = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
this.adapter = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
this.adapter = false;
}
}
@end @*/
if (!this.adapter && typeof(XMLHttpRequest) != 'undefined') {
this.adapter = new XMLHttpRequest();
}
}
jvXmlRequest.prototype.adapter = null;
jvXmlRequest.prototype.getDocument = function(sUrl) {
this.adapter.open("GET", sUrl, false);
this.adapter.send(null);
return this.adapter.responseXML;
}
jvXslProcessor = function() {
}
jvXslProcessor.prototype._proc = null;
jvXslProcessor.prototype.importStylesheet = function(sXsl) {
if(document.implementation.createDocument) {
this._proc = new XSLTProcessor();
this._proc.importStylesheet(sXsl.toDOM());
} else {
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
var xslTemplate = new ActiveXObject("Msxml2.XSLTemplate");
xslDoc.async = false;
xslDoc.loadXML(sXsl);
xslTemplate.stylesheet = xslDoc;
this._proc = xslTemplate.createProcessor();
}
}
jvXslProcessor.prototype.transformToFragment = function(xmlSource, domDocument) {
if(xmlSource == null) return "";
if(document.implementation.createDocument) {
var fragment = this._proc.transformToFragment(xmlSource, domDocument);
// create container and insert offline
var tmpBox = document.createElement("div");
tmpBox.appendChild(fragment);
return tmpBox.innerHTML;
} else {
this._proc.input = xmlSource;
this._proc.transform();
var rawXML = this._proc.output;
return rawXML;
}
}
jvXslProcessor.prototype.getParameter = function(paramName, paramValue) {
this._proc.getParameter(paramName, paramValue);
}
jvXslProcessor.prototype.setParameter = function(namespace, paramName, paramValue) {
if(document.implementation.createDocument) {
this._proc.setParameter(namespace, paramName, paramValue);
} else {
this._proc.addParameter(paramName, paramValue);
}
}
/*************************************************************************
* Del.icio.us Direc.tor global super awesom-o class
************************************************************************/
jvDeliciousFinder = function() {
}
jvDeliciousFinder.prototype.tableBody = null;
jvDeliciousFinder.prototype.sortOrder = null;
jvDeliciousFinder.prototype.sortCol = null;
jvDeliciousFinder.prototype.query = null;
jvDeliciousFinder.prototype.xslProc = null;
jvDeliciousFinder.prototype.xmlReq = null;
jvDeliciousFinder.prototype.allPosts = null;
jvDeliciousFinder.prototype.hilite = true;
jvDeliciousFinder.prototype.init = function() {
var start = new Date();
var msg = "";
// init vars
this.tableBody = document.getElementById("ps");
this.sortOrder = "ascending";
this.sortCol = "diggs";
this.xslProc = new jvXslProcessor();
this.xmlReq = new jvXmlRequest();
msg += "Init XML objects: " + ((new Date()) - start) + "\n";
// get posts
this.allPosts = xml_document;
msg += "Get XML doc: " + ((new Date()) - start) + "\n";
// get stylesheet
this.generateXsl("");
msg += "Generate XSL: " + ((new Date()) - start) + "\n";
// apply stylesheet to posts
this.sort("diggs");
msg += "Apply stylesheet: " + ((new Date()) - start) + "\n";
// list tags
this.tagHash1 = this.getTagList();
msg += "Generate tag list: " + ((new Date()) - start) + "\n";
//alert(msg);
}
jvDeliciousFinder.prototype.sort = function(column) {
this.sortCol = column;
this.xslProc.setParameter(null, "sortColumn", column);
if (this.sortOrder == "descending") {
this.xslProc.setParameter(null, "sortOrder", "ascending");
this.sortOrder = "ascending";
} else {
this.xslProc.setParameter(null, "sortOrder", "descending");
this.sortOrder = "descending";
}
// apply transform
var fragment = this.xslProc.transformToFragment(this.allPosts, document);
if(fragment == "") fragment = "<p>Unable to load your bookmarks!</p>";
// hilite terms on offline node
if(this.hilite) this.tableBody.innerHTML = hlTerms(fragment, this.query, false);
else this.tableBody.innerHTML = fragment;
if(document.getElementById("c_" + this.sortCol) != null) {
document.getElementById("c_" + this.sortCol).style.background = "#eec";
}
}
jvDeliciousFinder.prototype.filter = function(q) {
// store current query
this.query = q;
if(this.query.length != -1) {
// create new stylesheet based on query
this.generateXsl(q);
// re-establish stylesheet pararms
this.xslProc.setParameter(null, "sortOrder", this.sortOrder);
this.xslProc.setParameter(null, "sortColumn", this.sortCol);
// apply transform
var fragment = this.xslProc.transformToFragment(this.allPosts, document);
if(fragment == "") fragment = "No bookmarks found.";
if(this.hilite) this.tableBody.innerHTML = hlTerms(fragment, this.query, false);
else this.tableBody.innerHTML = fragment;
if(document.getElementById("c_" + this.sortCol) != null) {
document.getElementById("c_" + this.sortCol).style.background = "#eec";
}
}
}
jvDeliciousFinder.prototype.generateXsl = function(query) {
var terms, xslSelect;
if(query.length > 0) {
terms = query.split(" ");
xslSelect = "";
for(var i=0; i < terms.length; i++) {
if(terms[i].substring(0,1) == "-") {
if(terms[i].length > 1)
xslSelect += " and (not(contains(translate(@tag,$lc,$uc),'" + terms[i].substring(1).toUpperCase() + "')) and not(contains(translate(@title,$lc,$uc),'" + terms[i].substring(1).toUpperCase() + "')))";
} else if(terms[i].substring(0,2) == "t:") {
xslSelect += " and contains(translate(@tag,$lc,$uc),'" + terms[i].substring(2).toUpperCase() + "')";
} else if(terms[i].substring(0,2) == "d:") {
xslSelect += " and contains(translate(@title,$lc,$uc),'" + terms[i].substring(2).toUpperCase() + "')";
} else {
xslSelect += " and (contains(translate(@tag,$lc,$uc),'" + terms[i].toUpperCase() + "') or contains(translate(@title,$lc,$uc),'" + terms[i].toUpperCase() + "'))";
}
}
xslSelect = "post[" + xslSelect.substring(5) + "]";
} else {
xslSelect = "post";
}
var output = '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">';
output += '<xsl:param name="sortOrder" />';
output += '<xsl:param name="sortColumn" />';
output += '<xsl:param name="lc" select="\'abcdefghijklmnopqrstuvwxyz\'" />';
output += '<xsl:param name="uc" select="\'ABCDEFGHIJKLMNOPQRSTUVWXYZ\'" />';
output += '<xsl:template match="posts">';
output += ' <table>';
output += ' <colgroup><col style="width: 1%" /><col style="width: 69%" /><col style="width: 15%" /><col style="width: 15%" /></colgroup>';
output += ' <thead>';
output += ' <tr>';
output += ' <th></th>';
output += ' <th id="c_title" onclick="rd.sort(\'title\')">Title</th>';
output += ' <th id="c_tag" onclick="rd.sort(\'tag\')">Tags</th>';
output += ' <th id="c_diggs" onclick="rd.sort(\'diggs\')">Diggs</th>';
output += ' </tr>';
output += ' </thead>';
output += ' <tbody>';
output += '<xsl:for-each select="' + xslSelect + '">';
output += ' <xsl:sort select="@*[name() = $sortColumn]" order="{$sortOrder}" />';
output += ' <xsl:if test="position() < 100">';
output += ' <tr onmouseover="hl(this)" onmouseout="nl(this)">';
output += ' <td>';
output += ' <a href="{@href_digg}" title="Check digg comment" class="x">digg</a>';
output += ' <br />';
output += ' <a href="http://del.icio.us/url/check?url={@href}" title="Check del.icio.us comment" class="x">del.icio.us</a>';
output += ' </td>';
output += ' <td>';
output += ' <a href="{@href}" title="{@description}" target="_blank"><xsl:value-of select="@title" /></a>';
output += ' <br />';
output += ' <xsl:value-of select="@extended"/>';
output += ' </td>';
output += ' <td><xsl:value-of select="@tag" /></td>';
output += ' <td><xsl:value-of select="@diggs"/></td>';
output += ' </tr>';
output += ' </xsl:if>';
output += '</xsl:for-each>';
output += ' </tbody>';
output += ' </table>';
output += '</xsl:template>';
output += '</xsl:stylesheet>';
this.xslProc.importStylesheet(output);
}
jvDeliciousFinder.prototype.getTagList = function(tagList) {
var xpath = "";
if(tagList) {
var tagArray = tagList.split(" ");
for(var i=0; i < tagArray.length; i++) xpath += " and contains(string(@tag),'" + tagArray[i] + "')";
xpath = "//posts/post[" + xpath.substring(5) + "]";
} else {
xpath = "//posts/post";
}
// get xml nodes
var nodes;
if(document.all) {
this.allPosts.setProperty("SelectionLanguage", "XPath");
nodes = this.allPosts.selectNodes(xpath);
} else {
// var nodeSet = this.allPosts.evaluate(xpath, this.allPosts, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var nodeSet = new XPathEvaluator().evaluate(xpath, this.allPosts, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
nodes = new Array();
for(var i=0, ix=nodeSet.snapshotLength; i < ix; i++) nodes.push(nodeSet.snapshotItem(i));
}
// init new hashtable
var tagHash = new Hash();
// loop through all tag lists
for(var i=0, x = nodes.length; i < x; i++) {
// split the entry tag list
var tags = nodes[i].getAttribute("tag").split(" ");
var len = tags.length;
var j = len - 1;
do {
var tmpHash = null;
if(tagHash[tags[j]]) {
// get the current hash, and update all the tag counts
tmpHash = tagHash[tags[j]];
for(var k=0; k < len; k++) {
if(tmpHash[tags[k]]) tmpHash[tags[k]] = tmpHash[tags[k]] + 1;
else tmpHash[tags[k]] = 1;
}
} else {
// create new subhash of the current tagname
tmpHash = new Hash();
for(var k=0; k < len; k++) tmpHash[tags[k]] = 1;
}
tagHash[tags[j]] = tmpHash;
} while(j--);
}
return tagHash;
}
jvDeliciousFinder.prototype.th = function() {
if(this.hilite) this.hilite = false;
else this.hilite = true;
}
jvDeliciousFinder.prototype.editLink = function(url) {
var userName = document.cookie.match(/_user=(\w+)%20/i);
if(userName == null) {
alert("You must be logged into del.icio.us first.");
} else {
window.open('http://del.icio.us/' + userName[1] + '?noui=yes&jump=close&url='+escape(url), 'delicious', 'toolbar=no,width=700,height=250');
}
return false;
}
/*************************************************************************
* View controller stuff, that really should go somewhere else
************************************************************************/
function hlTerms(bodyText, searchText) {
if(searchText == null || searchText =="" || searchText.length == 1) return bodyText;
searchArray = searchText.split(" ");
for (var i = 0; i < searchArray.length; i++) {
if(searchArray[i].substring(1,2) == ":") searchArray[i] = searchArray[i].substring(2);
if(searchArray[i].length > 1) {
bodyText = hlTerm(bodyText, searchArray[i], i % 5);
}
}
return bodyText;
}
function hlTerm(bodyText, searchTerm, seq) {
var newText = "";
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var stLen = searchTerm.length;
var lcBodyText = bodyText.toLowerCase();
var p = 10000;
do {
i = lcBodyText.indexOf(lcSearchTerm, i+1);
if (i < 0) {
newText += bodyText;
break;
} else {
if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) { // skip anything inside an HTML tag
newText += bodyText.substr(0, i) + "<span class=\"st" + seq + "\">" + bodyText.substr(i, stLen) + "</span>";
bodyText = bodyText.substr(i + stLen);
lcBodyText = lcBodyText.substr(i + stLen);
i = -1;
}
}
} while(--p)
return newText;
}
/* the mouseover highlighting */
function hl(what) { what.style.background = "#eee"; }
function nl(what) { what.style.background = ""; }
/* the tag browser painter */
function paintBrowser(tag, level) {
var tagHash = rd.getTagList(tag);
if(!tag) tag = "";
var output = "";
var ta = new Array();
for(key in tagHash) {
if(tag.indexOf(key) < 0)
ta.push([key, tagHash[key][key]]);
}
ta.sort();
lvl = level + 1;
for(var i=0, x=ta.length; i < x; i++) {
if (ta[i][0].length > 1 && ta[i][1] > 2)
output += '<p onclick="selectTag(this,\'' + (tag?tag+' ':'') + ta[i][0] + '\',' + lvl + ')">'
+ ta[i][0] + ' <span class="c">(' + ta[i][1] + ')</span></p>';
}
document.getElementById('br' + level).innerHTML = output;
}
function selectTag(obj, tags, level) {
var q = "t:" + tags.replace(/( )/g, " t:");
document.getElementById("q").value = q
rd.filter(q, level);
for(var i=level;i<7;i++) {
document.getElementById("br" + i).innerHTML = "";
}
paintBrowser(tags, level);
var nodes = document.getElementById("br" + (level == 1 ? 1 : level - 1)).getElementsByTagName("p");
for(var i=0,ix=nodes.length; i < ix; i++) {
nodes[i].style.backgroundColor = "";
}
obj.style.backgroundColor = "#fd2";
}
/*************************************************************************
* ...and finally, page initialization stuff that has been stuffed to the
* bottom of this page.
************************************************************************/
var rd = new jvDeliciousFinder();
function start() {
rd.init();
paintBrowser(null, 1);
document.getElementById("q").focus();
document.getElementById("h").checked = rd.hilite;
}
function before_start() {
var js = document.createElement("script");
js.language = "javascript";
js.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=ec0884b751eae1000ce98b100cca90d8&_render=json&_callback=json2xml&_container=technology";
document.body.appendChild(js);
}
var xml_document = null;
function json2xml(json) {
xml_document = (document.implementation.createDocument) ? document.implementation.createDocument('', '', null) : new ActiveXObject("Microsoft.XMLDOM");
var posts = xml_document.createElement('posts');
for (var i = 0, len = json.count; i < len; i++) {
var item = json.value.items[i];
var post = xml_document.createElement('post');
post.setAttribute('href', item.link);
post.setAttribute('href_digg', item.href);
post.setAttribute('title', item.title);
post.setAttribute('description', item.description);
post.setAttribute('tag', item.tag[0].content);
while (item.diggs.length < 5) item.diggs = ' '+item.diggs;
post.setAttribute('diggs', item.diggs + ' diggs');
posts.appendChild(post);
}
xml_document.appendChild(posts);
start();
}
window.onload = before_start;
//-->
</script>
<style type="text/css">
<!--
body { font-family: "tahoma","helvetica","arial",sans-serif; margin: 10px; }
table { border-collapse: collapse; width: 100%; }
td { padding: 3px; font-size:.7em; vertical-align: top; border-bottom: 1px dotted #ddd; }
th { text-align: left; background: #ccc; border-right: 1px solid #fff; padding: 3px; font-size: .7em; }
a:link { font-weight: bold; color: #000; }
a:visited { color: #000; }
h2 { background: #999; color: #fff; border: 1px solid #aaa; font: bold .7em tahoma, sans-serif; padding: 3px; margin: 5px 0 0 0; }
label { font-size: .8em; }
a.x { font-weight: normal; color: #555; }
.soOn { background: #dcc; }
.soOff { background: #ccc; }
.st0 { background: #ec6; }
.st1 { background: #ade; }
.st2 { background: #ce6; }
.st3 { background: #e96; }
.st4 { background: #ead; }
.browserPane { position: absolute; font-size: .8em; line-height: 130%; overflow:auto; width:200px; height:190px; padding: 5px 0; border-left: 1px solid #ccc; }
.browserPane a { font-weight: normal; }
.browserPane p { margin: 0; padding: 0 4px; }
.browserPane .c { color: #666; }
#mast { padding: 5px 0 5px 0; }
#mast img { float: left; padding: 2px 10px 0 0; }
#browser { position: relative; overflow: hidden; height: 200px; width: 99% }
#br1 { left: 0; }
#br2 { left: 200px; }
#br3 { left: 400px; }
#br4 { left: 600px; }
#br5 { left: 800px; }
#br6 { left: 1000px; }
#ps { margin-top: 5px; }
#ft { font-size: .7em; color: #666; }
-->
</style>
</head>
<body>
<form onsubmit="return(false)">
<img src="../images/director-log.gif" width="210" height="22" alt="Digg Director" style="float:left;padding:2px 10px 0 0" />
<input id="q" name="q" type="text" size="60" onkeyup="rd.filter(this.value)" autocomplete="off" />
<input type="checkbox" id="h" checked="checked" onchange="rd.th()" /><label for="h">Highlight Terms</label>
</form>
<h2>Tag Browser</h2>
<div id="browser">
<div id="br1" class="browserPane"></div>
<div id="br2" class="browserPane"></div>
<div id="br3" class="browserPane"></div>
<div id="br4" class="browserPane"></div>
<div id="br5" class="browserPane"></div>
<div id="br6" class="browserPane"></div>
</div>
<h2 id="summary">Stories</h2>
<div id="ps"><p>digging popular stories in technology...</p></div>
<p id="ft">© 2005 Johnvey Hwang. <a href="http://johnvey.com/features/deliciousdirector/" target="_blank">del.icio.us direc.tor project page</a>. Released under the <a href="http://www.gnu.org/copyleft/gpl.html" target="_blank">GPL</a>.</p>
</body>
</html>