Only show 'Slideshow' link on 'Images' page.

Fill in Readme

DuckDuckGo Images Slideshow.user.js

@@ -10,11 +10,41 @@
 
 (function() {
     'use strict';
-    var init = function() {
-        var tab = document.querySelector('.js-zci-link--images');
-        if(!tab.classList.contains('is-active')) {
-            tab.click();
+    var addSlideshowButton = function() {
+        if(document.getElementById('slideshow_button') == null) {
+            var slideshowLi = document.createElement('li');
+            var slideshowA = document.createElement('a');
+            slideshowLi.id = "slideshow_button";
+            slideshowLi.classList.add('zcm__item');
+            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);
         }
+    }
+
+    var currimg=0;
+    var allimages = document.querySelectorAll('img');
+    var timer;
+    var imageTime = 3000;
+    var running = false;
+    var paused = false;
+    var imgcount=allimages.length;
+    var lb = document.createElement('div');
+    var lbimg = document.createElement('img');
+    var lastScroll = 0;
+
+
+    var tab = document.querySelector('.js-zci-link--images');
+    if(tab == null) { return; } // Need that tab
+    if(tab.classList.contains('is-active')) { addSlideshowButton(); }
+    tab.addEventListener('click', addSlideshowButton);
+
+    var init = function() {
+        console.log("Starting Slideshow");
         lb.style.textAlign = 'center';
         lb.style.height = '100%';
         lb.style.width = '100%';
@@ -29,24 +59,6 @@
         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');
@@ -57,6 +69,8 @@
             allimages = testimages;
         }
     }
+
+
     function showImage(idx){
         if(paused){
             setTimeout(()=>showImage(idx),500);
@@ -79,8 +93,18 @@
             lbimg.style.width = '100%'
         }
         lbimg.src = allimages[idx].src;
-        timer = setTimeout(() => showImage(++idx), 3000);
+        timer = setTimeout(() => showImage(++idx), imageTime);
     }
+
+
+    function promptTime() {
+        clearTimeout(timer);
+        var resp = parseFloat(prompt("Image Time (in seconds):", imageTime/1000));
+        imageTime = resp * 1000;
+        showImage(currimg);
+    }
+
+
     function goto(){
         clearTimeout(timer);
         var resp = parseInt(prompt("GOTO:", currimg));
@@ -90,7 +114,8 @@
             alert("Not a Number: "+resp)
         }
     }
-    var lastScroll = 0;
+
+
     function doGoto(num) {
         updateImages();
         if(num > imgcount) {
@@ -107,6 +132,8 @@
             showImage(num);
         }
     }
+
+
     function pause(){
         if(paused){
             console.log("resume");
@@ -117,18 +144,24 @@
         }
         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) {
@@ -141,6 +174,9 @@
             case 'ArrowRight':
                 fastforward();
                 return true;
+            case 'KeyT':
+                promptTime();
+                return true;
             case 'KeyG':
                 goto();
                 return true;

README.md

@@ -1,2 +1,12 @@
 # userscripts
 
+## DuckDuckGo Images Slideshow
+Adds a 'Slideshow' button to the duckbar (right under the search bar) when you're on the 'Images' page.
+
+Commands:
+* Space: Pause/Resume Slideshow
+* Left Arrow: Previous Image
+* Right Arrow: Next Image
+* 'T': Set the time each image is displayed
+* 'G': Goto a specific image (by number).
+* Escape: Stop Slideshow