- From: Robin Berjon via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 11 Feb 2010 15:03:19 +0000
- To: public-dap-commits@w3.org
Update of /sources/public/2009/dap/docs/lrest
In directory hutz:/tmp/cvs-serv16337
Added Files:
gallery-lrest.html gallery-lrest.js test.txt
Log Message:
LREST toying
--- NEW FILE: gallery-lrest.html ---
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>A Quick and Dirty Hack to Support LREST Gallery</title>
<script src='gallery-lrest.js' type='text/javascript' charset='utf-8'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript' charset='utf-8'></script>
</head>
<body>
<p>
A normal XHR request still works: <button onclick='normal()'>Do it!</button>. Result:
</p>
<div id='normal' style='border: 1px solid orange; min-height: 20px;'></div>
<hr/>
<p>
List the galleries that your browser knows about: <button onclick='listGals()'>Do it!</button>.
</p>
<table>
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody id='gals'></tbody>
</table>
<hr/>
<div id='gal'>
<h3>Gallery: <span id='galName'></span></h3>
<table id='pics'></table>
</div>
<div id='big' style='text-align: center'><img/></div>
<hr/>
<pre id='log'></pre>
<script type='text/javascript'>
$("#gal").hide();
$("#big").hide();
$("#gals").parent().hide();
// normal XHR request
function normal () {
try { $.get("test.txt", function (data) { $("#normal").html(data) }); }
catch (e) { log("ERROR:", e); }
}
// list the gallery sources
function listGals () {
var $tb = $("#gals");
$tb.parent().show();
$tb.empty();
$.each(navigator.services.galleries, function (i, it) {
$tb.append("<tr><td></td><td></td></tr>")
.find("tr:last td:first")
.text(it.name)
.end()
.find("td:last")
.html("<button>Show</button>")
.find("button")
.click(function () { showGal(it); });
});
}
// show gallery
function showGal (gal) {
log("showGal", gal.uri);
try { $.getJSON(gal.uri, function (data) { displayGal(gal.name, data); }); }
catch (e) { log("ERROR:", e); }
}
function displayGal (name, data) {
log("name", name);
log("dump", JSON.stringify(data));
$("#gal").show();
$("#galName").text(name);
var $t = $("#pics");
$t.empty();
var $tr;
$.each(data.items, function (i, it) {
if ((i%5) == 0) {
$t.append("<tr></tr>");
$tr = $t.find("tr:last");
}
$tr.append("<td><img/><br/><span></span></td>")
.find("img:last")
.attr({ src: it.thumb })
.click(function () { showPic(it.uri) })
.end()
.find("span:last")
.css({fontSize: "0.8em"})
.text(it.title + " (" + it.date + ")");
});
}
function showPic (uri) {
var $g = $("#gal");
$g.hide();
var $b = $("#big");
$b.find("img").attr({ src: uri })
.click(function () {
$b.hide();
$g.show();
});
$b.show();
}
// for each:
// GET all
// GET one
// DELETE one
</script>
</body>
</html>
--- NEW FILE: gallery-lrest.js ---
function log () {
var args = Array.prototype.slice.call(arguments);
document.getElementById("log").textContent += args.join(" ") + "\n";
}
(function (GLOBAL) {
// create the gallery services
GLOBAL.navigator.services = {
galleries: [
{
name: "Robin's Stream",
uri: "unicorn:flickr/person/14384224@N00",
},
{
name: "Unicorns",
uri: "unicorn:flickr/tag/werewolf",
},
{
name: "More Robin Than You Can Take",
uri: "unicorn:flickr/tag/robinberjon",
},
],
};
// wrap the XHR
var XHR = function () {
// log("XHR constructed");
};
XHR.prototype = {
oldXHR: GLOBAL.XMLHttpRequest,
isMagic: false,
open: function (meth, uri) {
// log("open called with", meth, uri);
if (/^unicorn:/.test(uri)) {
this.isMagic = true;
uri = uri.replace(/^unicorn:/, "");
var tmp = uri.split(/\//);
this.service = tmp[0];
this.type = tmp[1];
this.param = tmp[2];
this.method = meth;
this.aborted = false;
if (arguments.length > 2 && !arguments[2]) throw("No support for synchronous requests in this hack");
}
else {
this.isMagic = false;
this.xhr = new this.oldXHR();
this.xhr.open.apply(this.xhr, arguments);
}
// log("xhr, magic:", this.xhr, this.isMagic);
},
send: function (data) {
try {
// log("send called with", data, this.isMagic);
if (!this.isMagic) return this.xhr.send.apply(this.xhr, arguments);
var obj = this;
GLOBAL.jsonFlickrFeed = function (o) {
if (!obj.cb) return;
var res = [];
for (var i = 0; i < o.items.length; i++) {
var it = o.items[i];
var pic = {
title: it.title,
date: it.date_taken,
tags: it.tags.split(/\s+/),
// uri: it.media.m.replace(/_m\./, "_b."),
uri: it.media.m,
thumb: it.media.m.replace(/_m\./, "_t."),
};
res.push(pic);
}
obj._status = 200;
obj._statusText = "OK";
obj._readyState = 4;
obj._responseText = JSON.stringify({ items: res });
obj.cb(obj);
};
if (this.service != "flickr") throw("Unknown service: " + this.service);
var src = "http://api.flickr.com/services/feeds/photos_public.gne?";
if (this.type == "person") src += "id=";
else if (this.type == "tag") src += "tags=";
else throw("Unknown type for service: " + this.type);
src += this.param + "&lang=en-us&format=json";
// log("req uri", src);
$.getScript(src, function () {});
}
catch (e) { log("boom", e); }
},
abort: function () {
// log("send called with", data);
if (!this.isMagic) return this.oldXHR.prototype.abort.apply(this.xhr, arguments);
this.aborted = true;
},
getResponseHeader: function (header) {
// log("getResponseHeader called with", header);
if (!this.isMagic) return this.oldXHR.prototype.getResponseHeader.apply(this.xhr, arguments);
return "";
},
getAllResponseHeaders: function () {
// log("getAllResponseHeaders called");
if (!this.isMagic) return this.oldXHR.prototype.getAllResponseHeaders.apply(this.xhr, arguments);
return "";
},
setRequestHeader: function (header, value) {
// log("setRequestHeader called with", header, value);
if (!this.isMagic) return this.oldXHR.prototype.setRequestHeader.apply(this.xhr, arguments);
// noop
},
get status () {
// log("status got");
if (!this.isMagic) return this.xhr.status;
return this._status;
},
get statusText () {
// log("statusText got");
if (!this.isMagic) return this.xhr.statusText;
return this._statusText;
},
get responseText () {
// log("responseText got");
if (!this.isMagic) return this.xhr.responseText;
return this._responseText;
},
get responseXML () {
// log("responseXML got");
if (!this.isMagic) return this.xhr.responseXML;
return null;
},
get readyState () {
// log("readyState got");
if (!this.isMagic) return this.xhr.readyState;
return this._readyState ? this._readyState : 1;
},
get onreadystatechange () {
// log("onreadystatechange got");
if (!this.isMagic) return this.xhr.onreadystatechange;
return this.cb;
},
set onreadystatechange (cb) {
// log("onreadystatechange set to ", cb);
if (!this.isMagic) return this.xhr.onreadystatechange = cb;
return this.cb = cb;
},
};
GLOBAL.XMLHttpRequest = XHR;
// XXX create the Infauxbox!
})(this);
--- NEW FILE: test.txt ---
Hi! I'm the result of a perfectly normal XHR request.
Received on Thursday, 11 February 2010 15:03:21 UTC