127 lines
2.9 KiB
JavaScript
127 lines
2.9 KiB
JavaScript
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_mozaic() {
|
|
if (!picts) {
|
|
get_picts(show_mozaic);
|
|
return;
|
|
}
|
|
|
|
while (document.body.hasChildNodes())
|
|
document.body.removeChild(document.body.lastChild);
|
|
|
|
picts.forEach(function (pict) {
|
|
var figure = document.createElement("figure");
|
|
figure.className = "moz";
|
|
var img = document.createElement("img");
|
|
img.src = img_url + pict.name;
|
|
img.alt = pict.name;
|
|
var link = document.createElement("a");
|
|
link.onclick = function(e) {
|
|
window.history.pushState(null, "YouP0m", link.href);
|
|
sync();
|
|
return false;
|
|
};
|
|
link.href = "/" + pict.name;
|
|
link.appendChild(img);
|
|
figure.appendChild(link);
|
|
document.body.appendChild(figure);
|
|
});
|
|
}
|
|
|
|
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() {
|
|
path = window.location.pathname.slice(1);
|
|
if (path == "all")
|
|
show_mozaic();
|
|
else
|
|
show_picture(path);
|
|
}
|
|
|
|
window.onpopstate = sync;
|
|
document.onreadystatechange = function() {
|
|
if (document.readyState == "complete")
|
|
sync();
|
|
}
|