astro/caveman
astro/caveman
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

gatherer/tag_images.js: add images control

Browse Source
This commit is contained in:
Astro 2023-03-02 00:30:40 +01:00
parent a6404e16ce
commit b277ea5e80
2 changed files with 143 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gatherer/assets/style.css
View File

@ -59,6 +59,11 @@ nav ul li {
list-style-type: none; list-style-type: none;
margin: 0 0.15rem; margin: 0 0.15rem;
} }
nav form {
margin: 0 0.5rem;
padding: 0.2rem;
padding-bottom: 0.5rem;
}
main { main {
display: flex; display: flex;

210
gatherer/assets/tag_images.js
View File

@ -1,82 +1,148 @@
(function() { (function() {
var articleEls = document.getElementsByTagName("article"); var enableImages = false;
for(var i = 0; i < articleEls.length; i++) {
var articleEl = articleEls[i]; function startImages() {
(function(articleEl) { enableImages = true;
var images = articleEl.getAttribute("data-images").split(" ").filter(function(image) { return !!image; }); var articleEls = document.getElementsByTagName("article");
if (images.length > 0) { for(var i = 0; i < articleEls.length; i++) {
var imageContainer = document.createElement("div"); var articleEl = articleEls[i];
imageContainer.className = "images"; (function(articleEl) {
if (images.length == 1) { var images = articleEl.getAttribute("data-images").split(" ").filter(function(image) { return !!image; });
/* Show a single image */ if (images.length > 0) {
var img = document.createElement("p"); var imageContainer = document.createElement("div");
img.className = "image"; imageContainer.className = "images";
img.style.backgroundImage = "url('" + images[0] + "')"; if (images.length == 1) {
imageContainer.appendChild(img); /* Show a single image */
} else { var img = document.createElement("p");
/* Show slideshow */ img.className = "image";
/* url */ img.style.backgroundImage = "url('" + images[0] + "')";
var currentImage = null; imageContainer.appendChild(img);
/* <img> element */ } else {
var currentImg = null; /* Show slideshow */
function show() { /* url */
var oldImage = currentImage; var currentImage = null;
var oldImg = currentImg; /* <img> element */
var nextImage = null; var currentImg = null;
while(!currentImage || currentImage == oldImage) { function show() {
currentImage = images[Math.floor(images.length * Math.random())]; if (!enableImages) {
} /* stop the recursion if control just disabled images */
var retryTimeout; return;
let image = new Image(); }
image.src = currentImage;
image.onload = function() { var oldImage = currentImage;
if (retryTimeout) { var oldImg = currentImg;
clearTimeout(retryTimeout); var nextImage = null;
while(!currentImage || currentImage == oldImage) {
currentImage = images[Math.floor(images.length * Math.random())];
} }
currentImg = document.createElement("p"); var retryTimeout;
currentImg.className = "image"; let image = new Image();
currentImg.alt = "Preview image from dubious source"; image.src = currentImage;
currentImg.style.backgroundImage = "url('" + currentImage + "')"; image.onload = function() {
currentImg.style.left = oldImg ? "100%" : "0"; if (retryTimeout) {
imageContainer.appendChild(currentImg); clearTimeout(retryTimeout);
}
requestAnimationFrame(function() { currentImg = document.createElement("p");
setTimeout(function() { currentImg.className = "image";
// slide currentImg.alt = "Preview image from dubious source";
if (oldImg) { currentImg.style.backgroundImage = "url('" + currentImage + "')";
oldImg.style.left = "-100%"; currentImg.style.left = oldImg ? "100%" : "0";
} imageContainer.appendChild(currentImg);
currentImg.style.left = "0";
requestAnimationFrame(function() {
setTimeout(function() { setTimeout(function() {
if (oldImg) { /* slide */
imageContainer.removeChild(oldImg); if (oldImg) {
} oldImg.style.left = "-100%";
// loop }
show(); currentImg.style.left = "0";
}, 5000 + Math.ceil(10000 * Math.random()));
}, 100);
});
};
retryTimeout = setTimeout(function() { setTimeout(function() {
// img didn't load, cancel and retry if (oldImg) {
image.onload = null; imageContainer.removeChild(oldImg);
show(); }
}, 5000); /* loop */
show();
}, 5000 + Math.ceil(10000 * Math.random()));
}, 100);
});
};
retryTimeout = setTimeout(function() {
/* img didn't load, cancel and retry */
image.onload = null;
show();
}, 5000);
}
show()
} }
show()
}
articleEl.style.backgroundPosition = "center";
articleEl.style.backgroundSize = "cover";
articleEl.className = "with-image";
var titleEl = articleEl.getElementsByClassName("title")[0]; articleEl.style.backgroundPosition = "center";
if (titleEl) { articleEl.style.backgroundSize = "cover";
titleEl.insertBefore(imageContainer, titleEl.firstChild); articleEl.className = "with-image";
}
} var titleEl = articleEl.getElementsByClassName("title")[0];
})(articleEl); if (titleEl && enableImages) {
titleEl.insertBefore(imageContainer, titleEl.firstChild);
}
}
})(articleEl);
}
} }
var controlForm = document.createElement("form");
var controlFormLabel = document.createElement("label");
controlFormLabel.innerText = "Safety and Privacy:";
controlForm.appendChild(controlFormLabel);
function addInputToControlForm(id, text, title) {
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("name", "image_control");
input.setAttribute("type", "radio");
input.setAttribute("title", title);
controlForm.appendChild(input);
var label = document.createElement("label");
label.innerText = text;
label.setAttribute("for", id);
label.setAttribute("title", title);
controlForm.appendChild(label);
return {
get: function() {
return input.checked;
},
set: function() {
input.setAttribute("checked", true);
},
onChange: function(cb) {
input.addEventListener("change", cb);
},
};
}
var controlImagesOff = addInputToControlForm(
"images_off", "On",
"Keep #FediBuzz a plain text website."
);
var controlImagesOn = addInputToControlForm(
"images_on", "Off",
"Load preview images from random servers, wildly depicting offensive indecencies. You have been warned!"
);
function onImageControlChange() {
var state = controlImagesOn.get();
if (state) {
startImages();
} else {
/* Remove images */
var imageContainers = document.getElementsByClassName("images");
for(var i = imageContainers.length - 1; i >= 0; i--) {
imageContainers[i].parentNode.removeChild(imageContainers[i]);
}
/* Disable slideshows */
enableImages = false;
}
}
controlImagesOff.set();
controlImagesOff.onChange(onImageControlChange);
controlImagesOn.onChange(onImageControlChange);
document.getElementsByTagName("nav")[0].appendChild(controlForm);
})() })()