Fix DDG Slideshow
This commit is contained in:
parent
7e045e8759
commit
7371b0fd03
@ -1,228 +1,243 @@
|
||||
// ==UserScript==
|
||||
// @name DuckDuckGo Images Slideshow
|
||||
// @namespace https://bullercodeworks.com
|
||||
// @version 0.3
|
||||
// @description Takes a DuckDuckGo Images page and turns it into a slideshow.
|
||||
// @version 1.0.0
|
||||
// @description Takes a DuckDuckGo Images page and adds a button to run through all of the pictures as a slideshow.
|
||||
// @author brian@bullercodeworks.com
|
||||
// @match https://duckduckgo.com/*
|
||||
// @grant none
|
||||
// ==/UserScript==
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
var init = function() {
|
||||
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);
|
||||
imgCounter.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
|
||||
imgCounter.style.color = 'white';
|
||||
imgCounter.style.position = 'fixed';
|
||||
imgCounter.style.top = '0px';
|
||||
imgCounter.style.left = '0px';
|
||||
lb.append(imgCounter);
|
||||
running = true;
|
||||
showImage(0);
|
||||
}
|
||||
var init = function() {
|
||||
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);
|
||||
imgCounter.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
|
||||
imgCounter.style.color = 'white';
|
||||
imgCounter.style.position = 'fixed';
|
||||
imgCounter.style.top = '0px';
|
||||
imgCounter.style.left = '0px';
|
||||
lb.append(imgCounter);
|
||||
running = true;
|
||||
showImage(0);
|
||||
}
|
||||
|
||||
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 addSlideshowButton = function() {
|
||||
if(document.getElementById('slideshow-button') == null) {
|
||||
var ssBtnDiv = document.createElement('div');
|
||||
var ssBtnA = document.createElement('a');
|
||||
ssBtnDiv.id = 'slideshow-button';
|
||||
ssBtnDiv.classList.add('dropdown');
|
||||
ssBtnA.innerText='Slideshow';
|
||||
ssBtnA.href='#';
|
||||
ssBtnDiv.appendChild(ssBtnA);
|
||||
ssBtnA.onclick = init;
|
||||
document.querySelector('.metabar__dropdowns').appendChild(ssBtnDiv);
|
||||
}
|
||||
}
|
||||
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 allimages = document.querySelectorAll('img.tile--img__img');
|
||||
var timer;
|
||||
var imageTime = 5000;
|
||||
var running = false;
|
||||
var paused = false;
|
||||
var imgcount=allimages.length;
|
||||
var lb = document.createElement('div');
|
||||
var lbimg = document.createElement('img');
|
||||
var imgCounter = document.createElement('span');
|
||||
var lastScroll = 0;
|
||||
var cacheimg = document.createElement('img');
|
||||
var currimg=0;
|
||||
var allimages = document.querySelectorAll('img.tile--img__img');
|
||||
var timer;
|
||||
var imageTime = 5000;
|
||||
var running = false;
|
||||
var paused = false;
|
||||
var imgcount=allimages.length;
|
||||
var lb = document.createElement('div');
|
||||
var lbimg = document.createElement('img');
|
||||
var imgCounter = document.createElement('span');
|
||||
var lastScroll = 0;
|
||||
var cacheimg = document.createElement('img');
|
||||
|
||||
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);
|
||||
function updateImages() {
|
||||
var testimages = document.querySelectorAll('img.tile--img__img');
|
||||
var testcount = testimages.length;
|
||||
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() {
|
||||
var testimages = document.querySelectorAll('img.tile--img__img');
|
||||
var testcount = testimages.length;
|
||||
if(testcount > imgcount) {
|
||||
console.log("Loading more images...");
|
||||
allimages = testimages;
|
||||
imgcount = testcount;
|
||||
}
|
||||
function getImageHDSource(idx) {
|
||||
return allimages[idx].attributes.getNamedItem('data-src').nodeValue.split("&")[0];
|
||||
}
|
||||
function cacheImage(idx) {
|
||||
cacheimg.src = getImageHDSource(idx);
|
||||
}
|
||||
function showImage(idx){
|
||||
if(paused){
|
||||
setTimeout(()=>showImage(idx),500);
|
||||
return;
|
||||
}
|
||||
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');
|
||||
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');
|
||||
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) {
|
||||
return allimages[idx].attributes.getNamedItem('data-src').nodeValue.split("&")[0];
|
||||
}
|
||||
function cacheImage(idx) {
|
||||
cacheimg.src = getImageHDSource(idx);
|
||||
}
|
||||
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() {
|
||||
clearTimeout(timer);
|
||||
var resp = parseFloat(prompt("Image Time (in seconds):", imageTime/1000));
|
||||
imageTime = resp * 1000;
|
||||
showImage(currimg);
|
||||
}
|
||||
|
||||
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);
|
||||
var resp = parseFloat(prompt("Image Time (in seconds):", imageTime/1000));
|
||||
imageTime = resp * 1000;
|
||||
showImage(currimg);
|
||||
running = false;
|
||||
lb.remove();
|
||||
stopProp = true;
|
||||
}
|
||||
|
||||
function goto(){
|
||||
clearTimeout(timer);
|
||||
var resp = parseInt(prompt("GOTO:", currimg));
|
||||
if(resp != NaN) {
|
||||
doGoto(resp)
|
||||
} else {
|
||||
alert("Not a Number: "+resp)
|
||||
}
|
||||
if(stopProp) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
return stopProp;
|
||||
});
|
||||
|
||||
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);
|
||||
running = false;
|
||||
lb.remove();
|
||||
stopProp = true;
|
||||
}
|
||||
if(stopProp) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
return stopProp;
|
||||
});
|
||||
})();
|
||||
var btnChecker = setInterval(checkAndSetSlideshowButton, 500);
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user