From b277ea5e809914f1c181d288c44c51f093b1e819 Mon Sep 17 00:00:00 2001 From: Astro Date: Thu, 2 Mar 2023 00:30:40 +0100 Subject: [PATCH] gatherer/tag_images.js: add images control --- gatherer/assets/style.css | 5 + gatherer/assets/tag_images.js | 210 ++++++++++++++++++++++------------ 2 files changed, 143 insertions(+), 72 deletions(-) diff --git a/gatherer/assets/style.css b/gatherer/assets/style.css index 36b46c9..7f7fa59 100644 --- a/gatherer/assets/style.css +++ b/gatherer/assets/style.css @@ -59,6 +59,11 @@ nav ul li { list-style-type: none; margin: 0 0.15rem; } +nav form { + margin: 0 0.5rem; + padding: 0.2rem; + padding-bottom: 0.5rem; +} main { display: flex; diff --git a/gatherer/assets/tag_images.js b/gatherer/assets/tag_images.js index 515fcd3..dfb50f0 100644 --- a/gatherer/assets/tag_images.js +++ b/gatherer/assets/tag_images.js @@ -1,82 +1,148 @@ (function() { - var articleEls = document.getElementsByTagName("article"); - for(var i = 0; i < articleEls.length; i++) { - var articleEl = articleEls[i]; - (function(articleEl) { - var images = articleEl.getAttribute("data-images").split(" ").filter(function(image) { return !!image; }); - if (images.length > 0) { - var imageContainer = document.createElement("div"); - imageContainer.className = "images"; - if (images.length == 1) { - /* Show a single image */ - var img = document.createElement("p"); - img.className = "image"; - img.style.backgroundImage = "url('" + images[0] + "')"; - imageContainer.appendChild(img); - } else { - /* Show slideshow */ - /* url */ - var currentImage = null; - /* element */ - var currentImg = null; - function show() { - var oldImage = currentImage; - var oldImg = currentImg; - var nextImage = null; - while(!currentImage || currentImage == oldImage) { - currentImage = images[Math.floor(images.length * Math.random())]; - } - var retryTimeout; - let image = new Image(); - image.src = currentImage; - image.onload = function() { - if (retryTimeout) { - clearTimeout(retryTimeout); + var enableImages = false; + + function startImages() { + enableImages = true; + var articleEls = document.getElementsByTagName("article"); + for(var i = 0; i < articleEls.length; i++) { + var articleEl = articleEls[i]; + (function(articleEl) { + var images = articleEl.getAttribute("data-images").split(" ").filter(function(image) { return !!image; }); + if (images.length > 0) { + var imageContainer = document.createElement("div"); + imageContainer.className = "images"; + if (images.length == 1) { + /* Show a single image */ + var img = document.createElement("p"); + img.className = "image"; + img.style.backgroundImage = "url('" + images[0] + "')"; + imageContainer.appendChild(img); + } else { + /* Show slideshow */ + /* url */ + var currentImage = null; + /* element */ + var currentImg = null; + function show() { + if (!enableImages) { + /* stop the recursion if control just disabled images */ + return; + } + + var oldImage = currentImage; + var oldImg = currentImg; + var nextImage = null; + while(!currentImage || currentImage == oldImage) { + currentImage = images[Math.floor(images.length * Math.random())]; } - currentImg = document.createElement("p"); - currentImg.className = "image"; - currentImg.alt = "Preview image from dubious source"; - currentImg.style.backgroundImage = "url('" + currentImage + "')"; - currentImg.style.left = oldImg ? "100%" : "0"; - imageContainer.appendChild(currentImg); + var retryTimeout; + let image = new Image(); + image.src = currentImage; + image.onload = function() { + if (retryTimeout) { + clearTimeout(retryTimeout); + } - requestAnimationFrame(function() { - setTimeout(function() { - // slide - if (oldImg) { - oldImg.style.left = "-100%"; - } - currentImg.style.left = "0"; + currentImg = document.createElement("p"); + currentImg.className = "image"; + currentImg.alt = "Preview image from dubious source"; + currentImg.style.backgroundImage = "url('" + currentImage + "')"; + currentImg.style.left = oldImg ? "100%" : "0"; + imageContainer.appendChild(currentImg); + requestAnimationFrame(function() { setTimeout(function() { - if (oldImg) { - imageContainer.removeChild(oldImg); - } - // loop - show(); - }, 5000 + Math.ceil(10000 * Math.random())); - }, 100); - }); - }; + /* slide */ + if (oldImg) { + oldImg.style.left = "-100%"; + } + currentImg.style.left = "0"; - retryTimeout = setTimeout(function() { - // img didn't load, cancel and retry - image.onload = null; - show(); - }, 5000); + setTimeout(function() { + if (oldImg) { + imageContainer.removeChild(oldImg); + } + /* 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]; - if (titleEl) { - titleEl.insertBefore(imageContainer, titleEl.firstChild); - } - } - })(articleEl); + articleEl.style.backgroundPosition = "center"; + articleEl.style.backgroundSize = "cover"; + articleEl.className = "with-image"; + + var titleEl = articleEl.getElementsByClassName("title")[0]; + 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); })()