☰

ModalImg en rule34

Te crea una galería dentro de los post ;D

当前为 2019-09-30 提交的版本，查看 最新版本。

// ==UserScript==
// @name         ModalImg en rule34
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Te crea una galería dentro de los post ;D
// @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>`
const padre = document.createElement('div');
let images = [];

(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 imgContainer = document.querySelector('.content div:first-of-type');
    Array.from(imgContainer.children).forEach((e,i)=>{
        e.childElements().forEach(child=>{child.addEventListener('click',(event)=>{
            event.preventDefault();
            showModal(i);
        })});
        //images.push(e.children[0].children[0].src);
        images.push(e.children[0].href);
    });
    var closeModal = document.querySelector('#closeModal');
    closeModal.addEventListener('click',()=>{blackCoso.style.display = 'none';currentWeb.pause();});
    blackCoso.addEventListener('click',()=>{blackCoso.style.display = 'none';currentWeb.pause()});
    document.addEventListener('keyup',(e)=>{
        if(blackCoso.style.display == 'flex' && (e.code == 'ArrowRight' || e.code == 'ArrowLeft')){
            var i = parseInt(blackCoso.dataset.position);
            var direction = e.code == 'ArrowRight'? 1: -1;
            if(i >= images.length || i < 0){
                showModal(0);
            }else{
                showModal(i + direction);
            }
        }
    });
})();

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(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:');
    });
};

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();
    })
}