Activate and place the mouse over the target image.
// ==UserScript==
// @name Image Album Viewer
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @description Activate and place the mouse over the target image.
// @author t.me/CockSource
// @match https://arca.live/*
// @icon https://secure.gravatar.com/avatar/d60d18ef7e5b46d1e5e0d4bc56d3282a?d=retro&f=y
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==
/* globals $ */
(function() {
'use strict';
// Your code here...
console.log('Image Album Viewer init...')
let lockOn = [];
let fitToHeight = true
function startCountdown(element) {
lockOn.push(setTimeout(() => {
startAlbumView(element)
}, 2000))
// console.log('lock on', lockOn)
}
function endCountdown() {
// $('img').unbind('mouseout mouseover');
lockOn.forEach(l => {
clearTimeout(l)
// console.log(l, 'cleared')
})
lockOn = []
}
$('img').mouseover(function(e){
startCountdown($(e.target)[0])
});
$('img').mouseout(function(e){
lockOn.forEach(l => {
clearTimeout(l)
// console.log(l, 'cleared')
})
lockOn = []
});
function startAlbumView (element) {
console.log('fire!', element)
endCountdown()
// find image position
var imagePos = 0
for (let i = 0; i < $('img').length; i++) {
if ($('img')[i].isEqualNode(element)) {
imagePos = i
break
}
}
// Create Background Element on the web
let background = document.createElement('div')
background.style.position = 'fixed'
background.style.top = '0'
background.style.left = '0'
background.style.width = '100%'
background.style.height = '100%'
background.style.zIndex = '99999'
background.style.backgroundColor = 'rgba(0,0,0,0.5)'
document.body.appendChild(background)
// Create Image Container
let imageContainer = document.createElement('div')
imageContainer.style.position = 'absolute'
imageContainer.style.top = '50%'
imageContainer.style.left = '50%'
imageContainer.style.transform = 'translate(-50%, -50%)'
background.appendChild(imageContainer)
// Add image Element into Image Container with fitting image height and keep aspect ratio
let image = new Image()
image.src = $('img')[imagePos].src
image.addEventListener('click', function() {
background.remove()
removeAllEventListener()
})
imageContainer.appendChild(image)
// Add text to background
function setCurrentPosition() {
text.textContent = 'Press ESCAPE to close.\r\n'
text.textContent += `${imagePos + 1}/ ${$('img').length}`
}
let text = document.createElement('p')
text.style.position = 'absolute'
text.style.bottom = '10px'
text.style.top = '10px'
background.appendChild(text)
// Set image size to fit to window dimensions
function maximizeImageSize(image) {
let windowHeight = window.innerHeight
let windowWidth = window.innerWidth
let aspectRatio = image.naturalHeight / image.naturalWidth
let containerHeight = windowWidth * aspectRatio
if (fitToHeight) {
containerHeight = windowHeight
image.style.width = 'auto'
image.style.height = containerHeight + 'px'
} else {
image.style.width = windowWidth + 'px'
image.style.height = 'auto'
}
}
maximizeImageSize(image)
setCurrentPosition()
// Change Image src when type left or right is pressed
// Delete image Container when type ESCAPE is pressed
const keyControl = function(e) {
// console.log('keyboard function', e.key)
if (e.keyCode === 27) {
background.remove()
removeAllEventListener()
} else if (e.keyCode === 37 || e.keyCode === 38) {
e.preventDefault()
imagePos = Math.max(0, imagePos - 1)
image.src = $('img')[imagePos].src
} else if (e.keyCode === 39 || e.keyCode === 40) {
e.preventDefault()
imagePos = Math.min($('img').length - 1, imagePos + 1)
image.src = $('img')[imagePos].src
} else if (e.keyCode === 32) { // spacebar
e.preventDefault()
fitToHeight = !fitToHeight
maximizeImageSize(image)
}
setCurrentPosition()
}
let adjustSize = function(e) {
e.preventDefault()
maximizeImageSize(image)
}
let wheelControl = function(e) {
e.preventDefault()
e.stopPropagation()
/* Check whether the wheel event is supported. */
// let supportsWheel = true
// if (e.type == "wheel") supportsWheel = true;
// else if (supportsWheel) return;
/* Determine the direction of the scroll (< 0 → up, > 0 → down). */
var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
/* ... */
if (delta > 0) {
// scroll up
imagePos = Math.min($('img').length - 1, imagePos + 1)
image.src = $('img')[imagePos].src
maximizeImageSize(image)
setCurrentPosition()
} else if (delta) {
// scroll down
imagePos = Math.max(0, imagePos - 1)
image.src = $('img')[imagePos].src
maximizeImageSize(image)
setCurrentPosition()
}
return false
}
function removeAllEventListener() {
document.removeEventListener('keydown', this)
document.removeEventListener('keyup', adjustSize)
document.removeEventListener('wheel', wheelControl)
document.removeEventListener('mousewheel', wheelControl)
document.removeEventListener('DOMMouseScroll', wheelControl)
window.onresize = null
}
document.addEventListener('keydown', keyControl)
document.addEventListener('keyup', adjustSize)
document.addEventListener('wheel', wheelControl, {passive: false})
document.addEventListener('mousewheel', wheelControl, {passive: false})
document.addEventListener('DOMMouseScroll', wheelControl, {passive: false})
window.onresize = maximizeImageSize(image)
}
})();