First frontend revision

static/js/youp0m.js

@@ -0,0 +1,94 @@
+var picts = null;
+var api_url = "/api/images";
+var img_url = "/images/";
+
+function get_picts(then, then_value) {
+    new Ajax.Request(api_url, {
+	method: 'get',
+	onSuccess: function(transport) {
+	    picts = transport.responseText.evalJSON();
+	    if (then) then(then_value);
+	},
+    });
+}
+
+function show_picture(id) {
+    if (!picts) {
+	get_picts(show_picture, id);
+	return;
+    }
+
+    if (id == null || id == "")
+	id = picts[Math.floor(Math.random() * picts.length)].name;
+
+    var i = parseInt(id);
+    if (!isNaN(i) && i < picts.length) {
+	display_picture(picts[i], (picts.length+i-1)%picts.length);
+    } else {
+	var found = false;
+	picts.forEach(function (pict, index) {
+	    if (pict.name == id)
+	    {
+		found = true;
+		display_picture(pict, picts[(picts.length+index-1)%picts.length].name);
+	    }
+	});
+	if (!found) {
+	    get_picture(id);
+	}
+    }
+}
+
+function get_picture(id) {
+    if (id == null) id = "last";
+    new Ajax.Request(api_url + "/" + id, {
+	method: 'get',
+	onSuccess: function(transport) {
+	    var response = transport.responseText.evalJSON();
+	    display_picture(response);
+	},
+	onFailure: function(transport) {
+	    var response = transport.responseText.evalJSON();
+	    display_error(response["errmsg"]);
+	}
+    });
+}
+
+function display_picture(pict, next) {
+    while (document.body.hasChildNodes()) document.body.removeChild(document.body.lastChild);
+
+    var figure = document.createElement("figure");
+    figure.className = "big";
+    var img = document.createElement("img");
+    img.src = img_url + pict.name;
+    img.alt = pict.name;
+
+    if (next != null) {
+	var link = document.createElement("a");
+	link.onclick = function(e) {
+	    window.history.pushState(null, "YouP0m", link.href);
+	    sync();
+	    return false;
+	};
+	link.href = "/" + next;
+	link.appendChild(img);
+	figure.appendChild(link);
+    } else {
+	figure.appendChild(img);
+    }
+    document.body.appendChild(figure);
+}
+
+function display_error(msg) {
+    $$("body")[0].innerHTML = '<h1>An error occurs</h1><h2>' + msg + '</h2>';
+}
+
+function sync() {
+    show_picture(window.location.pathname.slice(1));
+}
+
+window.onpopstate = sync;
+document.onreadystatechange = function() {
+    if (document.readyState == "complete")
+	sync();
+}