commit js client sketch

2010-11-04 23:05:20 -07:00 · 2010-11-04 23:05:20 -07:00 · 4ac587df07
parent 680d496b5c
commit 4ac587df07
5 changed files with 132 additions and 0 deletions
--- a/clients/js/README
+++ b/clients/js/README
@ -0,0 +1,6 @@
+This is a sketch of a client written in JavaScript.
+
+The idea is twofold:
+1) any working server can drop in this directory to get a blobstore
+   browser UI, while simultaneously testing their API implementation
+2) provide an easy library to plug into node.js if needed
--- a/clients/js/camel.jpg
+++ b/clients/js/camel.jpg
--- a/clients/js/client.js
+++ b/clients/js/client.js
@ -0,0 +1,38 @@
+var Camli = {
+
+BlobStore: function() {
+}
+
+};
+
+Camli.BlobStore.prototype.blobURL = function(ref) {
+  return '/camli/' + ref;
+};
+
+Camli.BlobStore.prototype.xhr = function(url, cb) {
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if (xhr.status == 200) {
+        cb(xhr.responseText);
+      }
+    }
+    // XXX handle error
+  };
+  xhr.open('GET', url, true);
+  xhr.send(null);
+};
+
+Camli.BlobStore.prototype.xhrJSON = function(url, cb) {
+  this.xhr('/camli/enumerate-blobs', function(data) {
+    cb(JSON.parse(data));
+  });
+};
+
+Camli.BlobStore.prototype.enumerate = function(cb) {
+  this.xhrJSON('/camli/enumerate-blobs', cb);
+};
+
+Camli.BlobStore.prototype.getBlob = function(ref, cb) {
+  this.xhr(this.blobURL(ref), cb);
+};
--- a/clients/js/index.html
+++ b/clients/js/index.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel=stylesheet href=style.css>
+<script src=client.js></script>
+</head>
+
+<body>
+
+<div id=logo>CAMLI</div>
+
+<table id=bloblist cellspacing=0>
+<tr><th>ref</th><th>size</th></tr>
+</table>
+
+<script>
+var bs = new Camli.BlobStore();
+
+function enumerate() {
+  var list = document.getElementById('bloblist');
+
+  bs.enumerate(function(data) {
+    for (var i = 0, blob; blob = data.blobs[i]; ++i) {
+      var tr = document.createElement('tr');
+      var td = document.createElement('td');
+      td.className = 'blobref';
+      var a = document.createElement('a');
+      a.href = '#' + blob.blobRef;
+      a.innerText = blob.blobRef;
+      td.appendChild(a);
+      tr.appendChild(td);
+      td = document.createElement('td');
+      td.align = 'right';
+      td.innerText = blob.size;
+      tr.appendChild(td);
+      list.appendChild(tr);
+    }
+  });
+}
+
+function blob(ref) {
+  bs.getBlob(ref, function(content) {
+    console.log('got ' + content);
+  });
+}
+
+function load() {
+  var hash = document.location.hash;
+  if (hash) {
+    blob(hash.substr(1));
+  } else {
+    enumerate();
+  }
+}
+
+window.addEventListener('hashchange', load, false);
+load();
+</script>
+
+</body>
+</html>
--- a/clients/js/style.css
+++ b/clients/js/style.css
@ -0,0 +1,27 @@
+body {
+  font-family: sans-serif;
+  font-size: 0.8em;
+}
+#logo {
+  background: url(camel.jpg);
+  width: 320px;
+  height: 302px;
+  color: white;
+  font-size: 400%;
+  text-align: center;
+  vertical-align: bottom;
+  text-shadow: 0 0 10px black;
+}
+#bloblist {
+  border: solid 1px gray;
+}
+#bloblist th {
+  background: #eee;
+  padding: 2px 4px;
+}
+#bloblist td {
+  padding-right: 1ex;
+}
+.blobref {
+  font-family: WebKitWorkaround, monospace;
+}