Sleazy Fork is available in English.

ModalImg en rule34

Te crea una galería dentro de los post ;D. Agrega zoom e infinity scroll

Устаревшая версия на 07.07.2020. Перейти к последней версии.

// ==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';
    }
}