Add DDG Images Slideshow

2021-01-21 07:06:12 -06:00 · 2021-01-21 07:06:12 -06:00 · 7739520347
commit 7739520347
1 changed files with 153 additions and 0 deletions
--- a/Slideshow.user.js
+++ b/Slideshow.user.js
@ -0,0 +1,153 @@
+// ==UserScript==
+// @name         DuckDuckGo Images Slideshow
+// @namespace    https://bullercodeworks.com
+// @version      0.1
+// @description  Takes a DuckDuckGo Images page and turns it into a slideshow.
+// @author       You
+// @match        https://duckduckgo.com/*
+// @grant        none
+// ==/UserScript==
+
+(function() {
+    'use strict';
+    var init = function() {
+        var tab = document.querySelector('.js-zci-link--images');
+        if(!tab.classList.contains('is-active')) {
+            tab.click();
+        }
+        lb.style.textAlign = 'center';
+        lb.style.height = '100%';
+        lb.style.width = '100%';
+        lb.style.position = 'fixed';
+        lb.style.top = '0px';
+        lb.style.left = '0px';
+        lb.style.zIndex = '99999';
+        lb.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
+        document.body.prepend(lb);
+        lbimg.style.objectFit = 'cover';
+        lb.append(lbimg);
+        running = true;
+        showImage(0);
+    }
+    var allimages = document.querySelectorAll('img');
+    var timer;
+    var running = false;
+    var paused = false;
+    var lb = document.createElement('div');
+    var lbimg = document.createElement('img');
+    var imgcount=allimages.length;
+    var currimg=0;
+    var slideshowLi = document.createElement('li');
+    slideshowLi.classList.add('zcm__item');
+    var slideshowA = document.createElement('a');
+    slideshowA.classList.add('zcm__link');
+    slideshowA.classList.add('js-zci-link');
+    slideshowA.innerText="Slideshow";
+    slideshowA.href='#';
+    slideshowLi.appendChild(slideshowA);
+    slideshowA.onclick = init;
+    document.getElementById('duckbar_static').appendChild(slideshowLi);
+
+    function updateImages() {
+        var testimages = document.querySelectorAll('img');
+        var testcount = testimages.length;
+        if(testcount > imgcount) {
+            console.log("Image Count Changed:"+testcount+" > "+imgcount);
+            imgcount = testcount;
+            allimages = testimages;
+        }
+    }
+    function showImage(idx){
+        if(paused){
+            setTimeout(()=>showImage(idx),500);
+            return;
+        }
+        updateImages();
+        currimg = idx;
+        if(typeof allimages[idx] == 'undefined' || allimages[idx].src == "") {
+            timer = setTimeout(() => showImage(++idx), 100);
+            return;
+        }
+        allimages[idx].scrollIntoView();
+        console.log("Showing Image "+idx+" :: "+allimages[idx]);
+        var useHeight=allimages[idx].height > allimages[idx].width;
+        if(useHeight){
+            lbimg.style.height = '100%';
+            lbimg.style.width = '';
+        } else {
+            lbimg.style.height = '';
+            lbimg.style.width = '100%'
+        }
+        lbimg.src = allimages[idx].src;
+        timer = setTimeout(() => showImage(++idx), 3000);
+    }
+    function goto(){
+        clearTimeout(timer);
+        var resp = parseInt(prompt("GOTO:", currimg));
+        if(resp != NaN) {
+            doGoto(resp)
+        } else {
+            alert("Not a Number: "+resp)
+        }
+    }
+    var lastScroll = 0;
+    function doGoto(num) {
+        updateImages();
+        if(num > imgcount) {
+            if(window.scrollY == lastScroll) {
+                alert("Looks like there aren't that many images.");
+                return;
+            } else {
+                window.scrollTo(0,document.body.scrollHeight);
+                lastScroll = window.scrollY;
+                setTimeout(()=>doGoto(num), 2000)
+            }
+        }
+        if(num != NaN) {
+            showImage(num);
+        }
+    }
+    function pause(){
+        if(paused){
+            console.log("resume");
+            showImage(currimg);
+        } else {
+            console.log("pause");
+            clearTimeout(timer);
+        }
+        paused = !paused;
+    }
+    function rewind() {
+        console.log("rewind");
+        clearTimeout(timer);
+        currimg = currimg-1;
+        showImage(currimg);
+    }
+    function fastforward() {
+        console.log("fast forward");
+        clearTimeout(timer);
+        currimg = currimg+1;
+        showImage(currimg);
+    }
+    document.addEventListener('keyup',(e)=>{
+        if(!running) { return; }
+        switch(e.code) {
+            case 'Space':
+                pause();
+                return true;
+            case 'ArrowLeft':
+                rewind();
+                return true;
+            case 'ArrowRight':
+                fastforward();
+                return true;
+            case 'KeyG':
+                goto();
+                return true;
+            case 'Escape':
+                clearTimeout(timer);
+                running = false;
+                lb.remove();
+        }
+    });
+})();