brian/userscripts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix DDG Slideshow

Browse Source
This commit is contained in:
Brian Buller 2024-12-30 08:47:45 -06:00
parent 7e045e8759
commit 7371b0fd03
1 changed files with 220 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

423
DuckDuckGo Images Slideshow.user.js
View File

@ -1,228 +1,243 @@
// ==UserScript== // ==UserScript==
// @name DuckDuckGo Images Slideshow // @name DuckDuckGo Images Slideshow
// @namespace https://bullercodeworks.com // @namespace https://bullercodeworks.com
// @version 0.3 // @version 1.0.0
// @description Takes a DuckDuckGo Images page and turns it into a slideshow. // @description Takes a DuckDuckGo Images page and adds a button to run through all of the pictures as a slideshow.
// @author brian@bullercodeworks.com // @author brian@bullercodeworks.com
// @match https://duckduckgo.com/* // @match https://duckduckgo.com/*
// @grant none // @grant none
// ==/UserScript== // ==/UserScript==
(function() { (function() {
'use strict'; 'use strict';
var init = function() { var init = function() {
lb.style.textAlign = 'center'; lb.style.textAlign = 'center';
lb.style.height = '100%'; lb.style.height = '100%';
lb.style.width = '100%'; lb.style.width = '100%';
lb.style.position = 'fixed'; lb.style.position = 'fixed';
lb.style.top = '0px'; lb.style.top = '0px';
lb.style.left = '0px'; lb.style.left = '0px';
lb.style.zIndex = '99999'; lb.style.zIndex = '99999';
lb.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; lb.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
document.body.prepend(lb); document.body.prepend(lb);
lbimg.style.objectFit = 'cover'; lbimg.style.objectFit = 'cover';
lb.append(lbimg); lb.append(lbimg);
imgCounter.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; imgCounter.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
imgCounter.style.color = 'white'; imgCounter.style.color = 'white';
imgCounter.style.position = 'fixed'; imgCounter.style.position = 'fixed';
imgCounter.style.top = '0px'; imgCounter.style.top = '0px';
imgCounter.style.left = '0px'; imgCounter.style.left = '0px';
lb.append(imgCounter); lb.append(imgCounter);
running = true; running = true;
showImage(0); showImage(0);
} }
var addSlideshowButton = function() { var addSlideshowButton = function() {
if(document.getElementById('slideshow_button') == null) { if(document.getElementById('slideshow-button') == null) {
var slideshowLi = document.createElement('li'); var ssBtnDiv = document.createElement('div');
var slideshowA = document.createElement('a'); var ssBtnA = document.createElement('a');
slideshowLi.id = "slideshow_button"; ssBtnDiv.id = 'slideshow-button';
slideshowLi.classList.add('zcm__item'); ssBtnDiv.classList.add('dropdown');
slideshowA.classList.add('zcm__link'); ssBtnA.innerText='Slideshow';
slideshowA.classList.add('js-zci-link'); ssBtnA.href='#';
slideshowA.innerText="Slideshow"; ssBtnDiv.appendChild(ssBtnA);
slideshowA.href='#'; ssBtnA.onclick = init;
slideshowLi.appendChild(slideshowA); document.querySelector('.metabar__dropdowns').appendChild(ssBtnDiv);
slideshowA.onclick = init;
document.getElementById('duckbar_static').appendChild(slideshowLi);
}
} }
}
var removeSlideshowButton = function() {
var ssBtn = document.getElementById('slideshow-button');
if(ssBtn != null) {
ssBtn.parent.delete(ssBtn);
}
}
var checkAndSetSlideshowButton = function() {
if(window.location.toString().includes('iax=images')) {
addSlideshowButton();
clearInterval(btnChecker);
} else {
removeSlideshowButton();
}
}
//var allImagesCache = []; var currimg=0;
var currimg=0; var allimages = document.querySelectorAll('img.tile--img__img');
var allimages = document.querySelectorAll('img.tile--img__img'); var timer;
var timer; var imageTime = 5000;
var imageTime = 5000; var running = false;
var running = false; var paused = false;
var paused = false; var imgcount=allimages.length;
var imgcount=allimages.length; var lb = document.createElement('div');
var lb = document.createElement('div'); var lbimg = document.createElement('img');
var lbimg = document.createElement('img'); var imgCounter = document.createElement('span');
var imgCounter = document.createElement('span'); var lastScroll = 0;
var lastScroll = 0; var cacheimg = document.createElement('img');
var cacheimg = document.createElement('img');
var tab = document.querySelector('.js-zci-link--images'); function updateImages() {
if(tab == null) { return; } // Need that tab var testimages = document.querySelectorAll('img.tile--img__img');
if(tab.classList.contains('is-active')) { addSlideshowButton(); } var testcount = testimages.length;
tab.addEventListener('click', addSlideshowButton); if(testcount > imgcount) {
console.log("Loading more images...");
allimages = testimages;
imgcount = testcount;
}
}
function loadDetailPaneImage(i) {
var detailPanes = document.querySelectorAll('.detail__pane');
console.log(detailPanes);
var detailPane = detailPanes[1];
if(detailPanes.length == 2) detailPane = detailPanes[0];
console.log(detailPane);
allimages[i] = detailPane.querySelector('img.detail__media__img-highres');
}
function updateImages() { function getImageHDSource(idx) {
var testimages = document.querySelectorAll('img.tile--img__img'); return allimages[idx].attributes.getNamedItem('data-src').nodeValue.split("&")[0];
var testcount = testimages.length; }
if(testcount > imgcount) { function cacheImage(idx) {
console.log("Loading more images..."); cacheimg.src = getImageHDSource(idx);
allimages = testimages; }
imgcount = testcount; function showImage(idx){
} if(paused){
setTimeout(()=>showImage(idx),500);
return;
} }
function loadDetailPaneImage(i) { updateImages();
var detailPanes = document.querySelectorAll('.detail__pane'); currimg = idx;
console.log(detailPanes); if(typeof allimages[idx] == 'undefined' || allimages[idx].src == "") {
var detailPane = detailPanes[1]; timer = setTimeout(() => showImage(++idx), 100);
if(detailPanes.length == 2) detailPane = detailPanes[0]; return;
console.log(detailPane);
allimages[i] = detailPane.querySelector('img.detail__media__img-highres');
} }
allimages[idx].click();
allimages[idx].scrollIntoView();
lbimg.src = allimages[idx].src;
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%'
}
imgCounter.innerText = "Image " + idx + " / " + imgcount;
// Load HD Version
setTimeout(()=>loadOrigImg(idx), 100);
}
function loadOrigImg(idx) {
var detailPanes = document.querySelectorAll('.detail__pane');
if(detailPanes.length == 0) {
console.log('No detail panes');
return;
}
var detailPane = detailPanes[1];
if(detailPanes.length == 2) detailPane = detailPanes[0];
var imgsrc = detailPane.querySelector('img.detail__media__img-highres').src;
var newImg = new Image;
newImg.onload = function() {
lbimg.src = this.src;
timer = setTimeout(() => showImage(++idx), imageTime);
}
newImg.onerror=function() {
timer = setTimeout(() => showImage(++idx), imageTime);
}
newImg.src = imgsrc
}
function getImageHDSource(idx) { function promptTime() {
return allimages[idx].attributes.getNamedItem('data-src').nodeValue.split("&")[0]; clearTimeout(timer);
} var resp = parseFloat(prompt("Image Time (in seconds):", imageTime/1000));
function cacheImage(idx) { imageTime = resp * 1000;
cacheimg.src = getImageHDSource(idx); showImage(currimg);
} }
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].click();
allimages[idx].scrollIntoView();
lbimg.src = allimages[idx].src;
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%'
}
imgCounter.innerText = "Image " + idx + " / " + imgcount;
// Load HD Version
setTimeout(()=>loadOrigImg(idx), 100);
}
function loadOrigImg(idx) {
var detailPanes = document.querySelectorAll('.detail__pane');
var detailPane = detailPanes[1];
if(detailPanes.length == 2) detailPane = detailPanes[0];
var imgsrc = detailPane.querySelector('img.detail__media__img-highres').src;
var newImg = new Image;
newImg.onload = function() {
lbimg.src = this.src;
timer = setTimeout(() => showImage(++idx), imageTime);
}
newImg.src = imgsrc
}
function promptTime() { function goto(){
clearTimeout(timer);
var resp = parseInt(prompt("GOTO:", currimg));
if(resp != NaN) {
doGoto(resp)
} else {
alert("Not a Number: "+resp)
}
}
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("Resuming Slideshow");
showImage(currimg);
} else {
console.log("Pausing Slideshow");
clearTimeout(timer);
}
paused = !paused;
}
function rewind() {
console.log("Rewinding Slideshow");
clearTimeout(timer);
currimg = currimg-1;
showImage(currimg);
}
function fastforward() {
console.log("Fast Forwarding Slideshow");
clearTimeout(timer);
currimg = currimg+1;
showImage(currimg);
}
document.addEventListener('keydown',(e)=>{
if(!running) { return; }
var stopProp = false;
switch(e.code) {
case 'Space':
pause();
stopProp = true;
break;
case 'KeyH':
rewind();
stopProp = true;
break;
case 'KeyL':
fastforward();
stopProp = true;
break;
case 'KeyT':
promptTime();
stopProp = true;
break;
case 'KeyG':
goto();
stopProp = true;
break;
case 'Escape':
clearTimeout(timer); clearTimeout(timer);
var resp = parseFloat(prompt("Image Time (in seconds):", imageTime/1000)); running = false;
imageTime = resp * 1000; lb.remove();
showImage(currimg); stopProp = true;
} }
if(stopProp) {
function goto(){ e.stopPropagation();
clearTimeout(timer);
var resp = parseInt(prompt("GOTO:", currimg));
if(resp != NaN) {
doGoto(resp)
} else {
alert("Not a Number: "+resp)
}
} }
return stopProp;
});
function doGoto(num) { var btnChecker = setInterval(checkAndSetSlideshowButton, 500);
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("Resuming Slideshow");
showImage(currimg);
} else {
console.log("Pausing Slideshow");
clearTimeout(timer);
}
paused = !paused;
}
function rewind() {
console.log("Rewinding Slideshow");
clearTimeout(timer);
currimg = currimg-1;
showImage(currimg);
}
function fastforward() {
console.log("Fast Forwarding Slideshow");
clearTimeout(timer);
currimg = currimg+1;
showImage(currimg);
}
document.addEventListener('keydown',(e)=>{
if(!running) { return; }
var stopProp = false;
switch(e.code) {
case 'Space':
pause();
stopProp = true;
break;
case 'KeyH':
rewind();
stopProp = true;
break;
case 'KeyL':
fastforward();
stopProp = true;
break;
case 'KeyT':
promptTime();
stopProp = true;
break;
case 'KeyG':
goto();
stopProp = true;
break;
case 'Escape':
clearTimeout(timer);
running = false;
lb.remove();
stopProp = true;
}
if(stopProp) {
e.stopPropagation();
}
return stopProp;
});
})(); })();