Te crea una galería dentro de los post ;D
// ==UserScript==
// @name ModalImg en rule34
// @namespace http://tampermonkey.net/
// @version 1.0
// @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();
})
}