Mouse over images to view full size
目前為
// ==UserScript==
// @name Image onMouseHover arch.b4k
// @namespace Zero_G@4d7d460c-0424-11eb-adc1-0242ac120002
// @description Mouse over images to view full size
// @include *://arch.b4k.co/*/thread/*
// @version 1.3
// @grant none
// ==/UserScript==
(function(){
// Set this const to false if you don't want to change the place of the image file name.
const changePlaceOfImageFilename = true;
// Create image-video containers and append them
var imageContainer = document.createElement('div');
var videoContainer = document.createElement('div');
var videoTag = document.createElement('video');
document.body.appendChild(imageContainer);
document.body.appendChild(videoContainer);
videoContainer.appendChild(videoTag);
// Possition them a top right of current scroll
imageContainer.style.position = 'fixed';
imageContainer.style.top = '0em';
imageContainer.style.right = '0em';
videoContainer.style.position = 'fixed';
videoContainer.style.top = '0em';
videoContainer.style.right = '0em';
// Hide containters
imageContainer.style.visibility = 'hidden';
videoContainer.style.visibility = 'hidden';
// Prevent image-video from being bigger than screen
imageContainer.style.height = '100%';
videoContainer.style.height = '100%';
videoTag.style.maxHeight = '100%';
// Wait for document to load
document.addEventListener("DOMContentLoaded", function(){
// Create event listeners
const imageLinks = document.getElementsByClassName('thread_image_link');
Array.from(imageLinks).forEach(function(element) {
element.addEventListener('mouseover', enlargeImage, false);
// Hide image container
element.addEventListener('mouseout', clear, false);
});
// Change position of image name to atop of image thumb
if(changePlaceOfImageFilename){
const imageNameList = document.getElementsByClassName('post_file_filename');
Array.from(imageNameList).forEach(function(element) {
// Add inside image div (not used)
//element.parentNode.parentNode.childNodes[3].prepend(element);
//element.style.display = 'block';
// Create div and add it before image div
let div = document.createElement('div');
let span = document.createElement('span');
let wrapper = element.parentNode.parentNode;
div.className = 'post_file';
span.textContent = 'File: ';
span.style.paddingLeft = '0.5em';
div.appendChild(span);
div.appendChild(element);
wrapper.insertBefore(div, wrapper.getElementsByClassName('thread_image_box')[0])
});
}
// Attach mutation observers
Array.from(postToObserve).forEach(function(element) {
observer.observe(element, {childList: true, attributes: false, subtree: true});
});
});
function enlargeImage(event){
if(/\.webm$/.test(event.currentTarget.href)){
// If it's a video
if (videoTag.src !== event.currentTarget.href){
videoTag.src = '';
videoTag.src = event.currentTarget.href;
}
videoContainer.style.visibility = 'visible';
videoTag.play();
}else{
// If it's an image
// Get post Id
let id = event.currentTarget.parentNode.parentNode.parentNode.id;
// Get image tag if exists
let imgTag = imageContainer.querySelector('#i'+id);
if(imgTag){
imgTag.style.display = 'block';
} else {
imgTag = createImgTag(id, event.currentTarget.href);
imageContainer.appendChild(imgTag);
}
imageContainer.style.visibility = 'visible';
}
}
function clear(event){
imageContainer.style.visibility = 'hidden';
videoContainer.style.visibility = 'hidden';
// Hide imgTag
let id = event.currentTarget.parentNode.parentNode.parentNode.id;
imageContainer.querySelector('#i'+id).style.display = 'none';
// Stop video
videoTag.pause();
videoTag.currentTime = 0;
}
function createImgTag(id, src){
var imgTag = document.createElement('img');
imgTag.style.maxHeight = '100%';
imgTag.style.display = 'block';
imgTag.id = 'i' + id;
imgTag.src = src;
return imgTag;
}
// Support for inline quotes (https://greasyfork.org/en/scripts/424112-inline-quote-links-arch-b4k-co)
// Add mutation observers to all posts, then when an inline is detected add event listeners to image link
var postToObserve = document.getElementsByClassName('text');
const observer = new MutationObserver(function(mutationsList, observer){
for(const mutation of mutationsList) {
if(typeof(mutation.addedNodes[0]) != "undefined" && typeof(mutation.addedNodes[0].id) != "undefined"){
if(mutation.addedNodes[0].id.includes('inline')){
let imageLink = mutation.addedNodes[0].querySelector('.thread_image_link');
if (imageLink){
imageLink.addEventListener('mouseover', enlargeImage, false);
imageLink.addEventListener('mouseout', clear, false);
}
}
}
}
});
})()