/all display a mozaic
This commit is contained in:
parent
192548e38b
commit
9fc22e4972
|
@ -19,11 +19,25 @@ figure.big {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
figure.moz {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 190px;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.big img {
|
||||
max-height: calc(100vh - 5px);
|
||||
max-width: calc(100vw - 5px);
|
||||
}
|
||||
|
||||
.moz img {
|
||||
max-height: 190px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
@ -12,6 +12,34 @@ function get_picts(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);
|
||||
|
@ -84,7 +112,11 @@ function display_error(msg) {
|
|||
}
|
||||
|
||||
function sync() {
|
||||
show_picture(window.location.pathname.slice(1));
|
||||
path = window.location.pathname.slice(1);
|
||||
if (path == "all")
|
||||
show_mozaic();
|
||||
else
|
||||
show_picture(path);
|
||||
}
|
||||
|
||||
window.onpopstate = sync;
|
||||
|
|
Loading…
Reference in New Issue