Te crea una galería dentro de los post ;D. Agrega zoom e infinity scroll
Tính đến
// ==UserScript==
// @name ModalImg en rule34
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Te crea una galería dentro de los post ;D. Agrega zoom e infinity scroll
// @author You
// @match http*://rule34.xxx/index.php?page=post&s=list*
// @grant none
// ==/UserScript==
const css =`<style>
#blackCoso{
width: 100%;
background-color: rgb(0,0,0,0.5);
position: fixed;
height: 100%;
z-index: 999999;
display:none;
transition: display 2s;
}
#closeContainer{
background-color: rgb(0,0,0,0.6);
color: white;width: 48px;height: 48px;
border-radius: 24px;cursor: pointer;
text-align: center;margin-right: 10px;font-size: 34px;margin-left: auto;margin-top: 10px;
}
#currentImg,#currentWeb{
height: 100%;
max-height: calc(937px - 140px);
width: auto;
padding: 70px;
position: fixed;
display: none;
margin: 0;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#closeModal:hover {
color: red;
}
</style>`
const modal = `
<div id="closeContainer"><a id="closeModal">X</a><div></div></div>
<img id="currentImg" src="">
<video id="currentWeb" loop autoplay controls>
<source src="" type="video/webm">
</video>`
/* Credits to Sam https://twitter.com/sherb */
const loadingSVG = "https://samherbert.net/svg-loaders/svg-loaders/puff.svg"
const padre = document.createElement('div');
window.images = {};
let infinitySended = false;
let next = document.querySelector('a[alt="next"]');
let paginator = document.querySelector('#paginator');
(function() {
padre.id = "blackCoso";
padre.innerHTML = modal + css;
padre.dataset.position = 0;
var header = document.querySelector('#header');
document.body.appendChild(padre);
document.body.insertBefore(padre,document.body.firstChild);
var currentImg = document.querySelector('#currentImg');
var blackCoso = document.querySelector('#blackCoso');
currentImg.dataset.zoomed == 'false'
var imgContainer = document.querySelector('.content div:first-of-type');
addModalToImages(imgContainer);
var closeModal = document.querySelector('#closeModal');
closeModal.addEventListener('click',()=>{blackCoso.style.display = 'none';currentWeb.pause();zoomed(false);});
blackCoso.addEventListener('click',()=>{blackCoso.style.display = 'none';currentWeb.pause();zoomed(false)});
document.addEventListener('keyup',(e)=>{
if(blackCoso.style.display == 'flex' && (e.code == 'ArrowRight' || e.code == 'ArrowLeft')){
var current = Object.keys(window.images).indexOf(blackCoso.dataset.position);
var direction = e.code == 'ArrowRight'? 1: -1;
if(current >= window.images.length || current < 0){
showModal(Object.keys(window.images)[0]);
}else{
showModal(Object.keys(window.images)[current+ direction]);
}
}
});
/*Add zoom when click the image*/
currentImg.addEventListener('click',e=>{
e.stopPropagation();
zoomed();
});
/* Move the zoomed Image*/
currentImg.addEventListener('mousemove',e=>{
if(currentImg.dataset.zoomed == 'true'){
console.log({w:currentImg.offsetWidth,iw:window.innerWidth});
var calcX = currentImg.getBoundingClientRect().width>window.innerWidth?(e.clientX/2 - (currentImg.width/2 -20)) +'px,':'-20px,';
var calcY = currentImg.offsetHeight>=window.innerHeight?(e.clientY - (currentImg.height/2+30)) +'px':'0px';
console.log({calcX,calcY});
currentImg.style.transform = 'scale(5.5) translate(' + calcX + calcY + ')';
}
});
/*Inifinity Scroll*/
paginator.style.display= 'none'
window.addEventListener('scroll',(e)=>{
if(scrollY>=paginator.getBoundingClientRect().top - 100 && !infinitySended ){
infinityScroll();
}
});
})();
var regxImg = /(?<=src=")(.*)(?=("\s*id="image"))/gm;
var regxWebM= /(?<=source src=")(.*)(?="\stype\=\"video\/webm\")/gm;
function showModal(position=0){
blackCoso.style.display = 'flex';
padre.dataset.position = position;
currentWeb.pause();
imageExists(window.images[position]).then((resp)=>{
if(resp.type=='img'){
currentWeb.style.display='none';
currentImg.style.display='block';
currentImg.src = resp.content;
}else{
currentWeb.style.display='block';
currentImg.style.display='none';
currentWeb.children[0].src = resp.content;
currentWeb.load();
currentWeb.play();
}
}).catch((reject)=>{
console.log('no existe D:');
});
currentImg.src = loadingSVG;
};
function imageExists(image_url){
return new Promise((result, reject)=>{
var http = new XMLHttpRequest();
http.open('GET', image_url);
http.onload = ()=>{
if (http.status === 200){
var bodi = http.response;
if(bodi.match(regxImg)){
return result({type:'img', content: bodi.match(regxImg)});
}else if(bodi.match(regxWebM)){
return result({type:'webm', content:bodi.match(regxWebM)});
}else{
return reject('null');
}
}
}
http.send();
})
}
function infinityScroll(){
console.log('reach');
infinitySended = true;
if(next){
fetch(next.href).then(response=>{return response.text();})
.then(text=>{
var domP = new DOMParser();
var documentNext = domP.parseFromString(text,'text/html');
next = documentNext.querySelector('a[alt="next"]');
var contentViews = documentNext.querySelector('.content div:first-of-type');
addModalToImages(contentViews);
document.querySelector('.content').insertBefore(contentViews, paginator);
infinitySended = false;
});;
}
}
function addModalToImages(imgArray){
Array.from(imgArray.children).forEach((e,i)=>{
e.childElements().forEach(child=>{child.addEventListener('click',(event)=>{
event.preventDefault();
showModal(e.id);
})});
//images.push(e.children[0].children[0].src);
window.images[e.id] = (e.children[0].href);
});
}
function zoomed(zoomed = -1){
console.log(currentImg.dataset.zoomed);
if(zoomed == -1 && currentImg.dataset.zoomed == 'false'){
currentImg.style.transform = 'scale(5.5) translate(-20px, 230px)';
currentImg.dataset.zoomed = 'true';
currentImg.style.maxHeight= 'none';
}else{
currentImg.style.transform = '';;
currentImg.style.maxHeight= '';
currentImg.dataset.zoomed = 'false';
}
}