jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Allow loading more of cluster

Browse Source 
Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
This commit is contained in:
James Ketrenos 2020-01-11 17:06:41 -08:00
parent 5e55a845ca
commit 928e15e8ad
1 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
clusters-pre
View File

@ -1,34 +1,72 @@
<html>
<script>'<base href="BASEPATH">';</script>
<script>
function loadMore(index) {
var clusterBlock = document.body.querySelector("[cluster-index='" + index + "']");
if (!clusterBlock) {
return;
}
var faces = clusterBlock.querySelectorAll("div.face").length, i
for (i = faces; i < clusters[index].length; i++) {
if (i - faces > 15) {
return;
}
var tuple = clusters[index][i],
face = createFace(tuple[0], tuple[1]);
clusterBlock.appendChild(face);
}
if (i == clusters[index].length) {
var span = clusterBlock.querySelector("span.more");
if (span) {
span.parentElement.removeChild(span);
}
}
}
function createFace(faceId, photoId) {
var div = document.createElement("div");
div.classList.add("face");
div.setAttribute("photo-id", photoId);
div.style.backgroundImage = "url(face-data/" + (faceId % 100) + "/" + faceId + "-original.png)";
div.addEventListener("click", (event) => {
let photoId = parseInt(event.currentTarget.getAttribute("photo-id"));
if (photoId) {
window.open("face-explorer.html?" + photoId, "photo-" + photoId);
} else {
alert("No photo id mapped to face.");
}
});
return div;
}
document.addEventListener("DOMContentLoaded", (event) => {
var div = document.createElement("div");
div.textContent = "There are " + clusters.length + " clusters.";
document.body.appendChild(div);
clusters.sort((a, b) => { return b.length - a.length });
clusters.forEach((cluster, clusterIndex) => {
var clusterBlock = document.createElement("div");
clusterBlock.setAttribute("cluster-index", clusterIndex);
document.body.appendChild(clusterBlock);
var div = document.createElement("div");
div.textContent = "Cluster " + (clusterIndex + 1) + " has " + cluster.length + " neighbors.";
document.body.appendChild(div);
if (clusterIndex < 20) cluster.forEach((tuple, index) => {
var html = "Cluster " + (clusterIndex + 1) + " has " + cluster.length + " neighbors.";
if (cluster.length > 15) {
html += " <span class='more' onClick='loadMore(" + clusterIndex + ")'>more</a>";
}
div.innerHTML = html;
clusterBlock.appendChild(div);
if (clusterIndex > 20) {
return;
}
cluster.forEach((tuple, index) => {
if (index > 15) {
return;
}
var div = document.createElement("div");
div.classList.add("face");
let faceId = tuple[0],
photoId = tuple[1];
div.setAttribute("photo-id", photoId);
div.style.backgroundImage = "url(face-data/" + (faceId % 100) + "/" + faceId + "-original.png)";
div.addEventListener("click", (event) => {
let photoId = parseInt(event.currentTarget.getAttribute("photo-id"));
if (photoId) {
window.open("face-explorer.html?" + photoId, "photo-" + photoId);
} else {
alert("No photo id mapped to face.");
}
});
document.body.appendChild(div);
var face = createFace(tuple[0], tuple[1]);
clusterBlock.appendChild(face);
});
});
});
@ -39,7 +77,15 @@ body {
margin: 0;
padding: 0;
}
.more {
cursor: pointer;
}
.more:hover {
text-decoration: underline;
}
.face {
width: 128px;
height: 128px;