Skip to content

Instantly share code, notes, and snippets.

@BubuInc

BubuInc/GrotedPhotoViewer.user.js

Last active November 10, 2019 05:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BubuInc/7413bcdf94a71cb3fe1b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BubuInc/7413bcdf94a71cb3fe1b to your computer and use it in GitHub Desktop.
Download ZIP
Groted Photo Viewer
Raw
GrotedPhotoViewer.user.js
// ==UserScript==
// @name Groted Visor de fotos
// @namespace MangaReader
// @description Ve las fotos de los posts como en el escritorio
// @author http://www.groted.com/perfil/Putencio
// @include http://www.groted.com/posts/*
// @include http://www.groted.com/post/*
// @exclude http://www.groted.com/agregar/
// @icon http://i.imgur.com/LqccTgB.png
// @version 4.0
// @grant none
// ==/UserScript==
// Insertar estilo
var styleText = 'body.noScroll{padding-top:0px;min-height:100vh;min-width:0px}.post-content img[onclick]{cursor:pointer}#phOverlay{position:fixed;top:0px;left:0px;bottom:0px;right:0px;background-color:#222;z-index:100001;cursor:pointer;background-image:url("http://i.imgur.com/RzAYhrB.png")}#phImg{position:absolute;z-index:100002;top:0;left:0;right:0;margin:auto;cursor:pointer}#phImg.phH{max-height:100vh}#phImg.phW{max-width:100%}#phTextoWr{z-index:100003;position:fixed;left:0px;right:0px;margin:auto;max-width:64%;bottom:16px;text-align:center}#phTexto{color:#FFF;margin:0 auto;bottom:16px;border-radius:10px;padding:8px;text-shadow:0px 0px 4px #000;background-color:rgba(0,0,0,0.27);font-size:1.2rem;display:inline-block;max-height:90vh;overflow-y:auto}#phBtns{position:fixed;opacity:1;transition:opacity .7s;z-index:100004}.phBtn{position:fixed;bottom:7px;right:7px;width:35px;height:35px;padding:10px;background-color:#000;cursor:pointer;border-radius:4px;opacity:0.4;transition:opacity .3s}.phBtn > div{height:100%;background-image:url("http://i.imgur.com/a8fyLKQ.png");background-size:70px}.phBtn:hover{opacity:0.7}.phBtn:active{opacity:1}#Wbtn{right:66px}#Wbtn > div{background-position:0px 70px}#Hbtn > div{background-position:35px 70px}#Xbtn{top:8px;right:8px}#Xbtn > div{background-position:0px 35px}#Tbtn{left:5px;bottom:66px}#Tbtn > div{background-position:-35px -70px}#Pbtn{left:7px}#Pbtn.phPause > div{background-position:35px 0px}#phSpeed{display:none;position:fixed;bottom:12px;left:70px;width:120px}#PbtnWr.showSpeed #phSpeed{display:block}.pressed{opacity:0.7;background-color:#555}#txtSpeed{display:none;position:absolute;left:70px;color:#FFF;font-size:1.2rem;position:fixed;bottom:39px}#PbtnWr.showSpeed #phSpeed:hover~#txtSpeed{display:block}';
var style = document.createElement('style');
style.textContent = styleText;
document.head.appendChild(style);
// Estructura
var div = document.createElement('div');
div.id = 'phWrapper';
div.style.display = 'none';
div.innerHTML = '<div id="phOverlay" onclick="phNext()"></div>'+
'<img id="phImg" class="phH" onclick="phNext()">'+
'<div id="phTextoWr">'+
'<div id="phTexto" style="display:none"></div>'+
'</div>'+
'<div id="phBtns">'+
'<div id="Wbtn" class="phBtn" onclick="setW()"><div></div></div>'+
'<div id="Hbtn" class="phBtn pressed" onclick="setH()"><div></div></div>'+
'<div id="Xbtn" class="phBtn" onclick="closeVisor()"><div></div></div>'+
'<div id="Tbtn" class="phBtn pressed" onclick="showText()"><div></div></div>'+
'<div id="PbtnWr">'+
'<div id="Pbtn" class="phBtn" onclick="phPlay()"><div></div></div>'+
'<input type="range" id="phSpeed" value="5" min="1" max="15" step="1">'+
'<div id="txtSpeed">5 segundos</div>'+
'</div>'+
'</div>';
document.body.appendChild(div);
// Buscar imagenes y textos
var nodes = document.querySelectorAll('.relato-p img');
var content2 = document.querySelector('.relato-p').cloneNode(true);
var nodes2 = content2.getElementsByTagName('img');
window.imgs = [];
//Encontrar barra separadora si hay, y quitarla
var i, counts = {}, node;
for (i = 0; i < nodes.length; i++) { //Contar cuanto se repiten las fotos
node = nodes[i];
if (counts[node.src] !== undefined) {counts[node.src]++;}
else {counts[node.src] = 1;}
}
for (i = 0; i < nodes.length; i++) { //Agregar las que se repiten maximo 2 veces
if (counts[nodes[i].src]<3) {
imgs.push(nodes[i]);
var textSep = document.createTextNode('@img@');
nodes2[i].parentNode.insertBefore(textSep, nodes2[i]);
}
}
var textos = content2.textContent;
textos = textos.split('@img@');
// Variables y elementos
window.nPh = 0;
window.phSpeed = 5;
window.modoFit = 2; //0: ninguno | 1: width | 2: height
window.textoMostrado = 1;
window.intervalPlay = null;
window.tmoutHideMouse = null;
window.tmout2 = null;
window.closeFromPrevNext = 0;
window.isPlaying = 0;
window.phOverlay = document.getElementById('phOverlay');
window.phImg = document.getElementById('phImg');
window.phTexto = document.getElementById('phTexto');
window.phBtnsEl = document.getElementById("phBtns");
window.TbtnEl = document.getElementById("Tbtn");
window.WbtnEl = document.getElementById("Wbtn");
window.HbtnEl = document.getElementById("Hbtn");
window.XbtnEl = document.getElementById("Xbtn");
window.PbtnWrEl = document.getElementById("PbtnWr");
window.PbtnEl = document.getElementById("Pbtn");
window.speedEl = document.getElementById('phSpeed');
window.openVisor = function (n) {
if (imgs[n].naturalHeight > 30) {
window.nPh = n;
document.getElementById('phWrapper').style.display = '';
if(document.getElementById('page')){document.getElementById('page').style.display = 'none';}
else{
document.getElementById('header').style.display = 'none';
document.getElementById('nav').style.display = 'none';
document.getElementById('main').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.getElementById('footer-links').style.display = 'none';
}
document.body.classList.add('noScroll');
window.scrollTo(0, 0);
fixH();
window.phImg.src = imgs[window.nPh].src;
if(textoMostrado){phTexto.textContent = setText();}
window.document.body.onkeydown = function (event){ phKeyListener(event);};
}
};
window.phKeyListener = function (event) {
var k = event.keyCode;
if (k==37||k==39||k==33||k==34||k==27||k==32||k==87||k==72||k==80||k==84||k==13||k==36||k==35||k==8) {
event.preventDefault();
switch(k){
case 37: phPrev(); break; // right arrow
case 39: phNext(); break; // left arrow
case 33: phPrev(); break; // Page Up
case 34: phSpace(); break; // Page Down
case 27: closeVisor(); break; // Esc
case 32: phSpace(); break;// SpaceBar
case 87: setW(); break; // W
case 72: setH(); break; // H
case 80: phPlay(); break; // P
case 84: showText(); break; // T
case 13: closeVisor(); break; // Enter
case 36: goFirst(); break; // Home
case 35: goLast(); break; // End
case 8: phPrev(); break; // Backspace
}
}
};
window.phMouseMoveListener = function () {
clearTimeout(tmoutHideMouse);
phShowMouse();
tmoutHideMouse = setTimeout(phHideMouse,3000);
};
window.closeVisor = function () {
stopPlaying();
clearTimeout(tmout2);
window.document.body.onkeydown = null;
document.body.onmousemove = null;
if(document.getElementById('page')){document.getElementById('page').style.display = '';}
else{
document.getElementById('header').style.display = '';
document.getElementById('nav').style.display = '';
document.getElementById('main').style.display = '';
document.getElementById('footer').style.display = '';
document.getElementById('footer-links').style.display = '';
}
document.getElementById('phWrapper').style.display = 'none';
document.body.classList.remove('noScroll');
var dif = Math.floor((window.innerHeight - imgs[nPh].offsetHeight)/2);
var newPosY = imgs[nPh].offsetTop - (dif<0?0:dif);
if(closeFromPrevNext){
closeFromPrevNext = 0;
if (nPh===0) {newPosY -= window.innerHeight*0.8;}
if (nPh==imgs.length-1) {newPosY += imgs[nPh].offsetHeight - 150;}
}
window.scrollTo(window.pageXOffset, newPosY);
};
window.showText = function () {
if (textoMostrado == 1) { //apagar
phTexto.style.display = 'none';
TbtnEl.classList.remove('pressed');
textoMostrado = 0;
}else{ //encender
TbtnEl.classList.add('pressed');
phTexto.textContent = setText();
textoMostrado = 1;
}
};
window.setText = function () {
var txt = textos[nPh].trim();
if (txt==='') {phTexto.style.display = 'none';}
else{phTexto.style.display = '';}
return txt;
};
window.phSpace = function () {
var T = window.document.documentElement.scrollHeight, //document height
pos = window.pageYOffset, //scrollY
h = window.innerHeight, //viewport height
a = h-40; //avance
if (T>h+pos+2) {
if (pos+a+200>T) {a+=200;}
if (isPlaying && modoFit!=2) {unsetMouseMoveListener();}
window.scrollBy(0, a);
if (isPlaying && modoFit!=2) {tmout2 = setTimeout(setMouseMoveListener,1000);}
}else{
if (isPlaying && modoFit!=2) {unsetMouseMoveListener();}
phNext();
if (isPlaying && modoFit!=2) {tmout2 = setTimeout(setMouseMoveListener,1000);}
}
};
window.phNext = function () {
window.scrollTo(window.pageXOffset, 0);
if (findNextImg()) {
fixH();
phImg.src = imgs[nPh].src;
if(textoMostrado){phTexto.textContent = setText();}
}else{
closeFromPrevNext = 1;
closeVisor();
}
};
window.findNextImg = function () {
for (var i = nPh+1; i < imgs.length; i++) {
if (imgs[i].naturalHeight > 30) {nPh = i; return true;}
}
if (i == imgs.length) {return false;} //No hay mas imagenes adelante
};
window.findPrevImg = function () {
for (var i = nPh-1; i >= 0; i--) {
if (imgs[i].naturalHeight > 30) {nPh = i; return true;}
}
if (i == -1) {return false;} //No hay mas imagenes atras
};
window.phPrev = function () {
window.scrollTo(window.pageXOffset, 0);
if (findPrevImg()) {
fixH();
phImg.src = imgs[nPh].src;
if(textoMostrado){phTexto.textContent = setText();}
}else{
closeFromPrevNext = 1;
closeVisor();
}
};
window.phPlay = function () {
if (isPlaying) {stopPlaying();}
else {startPlaying();}
};
window.startPlaying = function () {
PbtnWrEl.classList.add('showSpeed');
PbtnEl.classList.add('phPause');
intervalPlay = setInterval(phSpace, phSpeed*1000);
tmoutHideMouse = setTimeout(phHideMouse,2000);
setMouseMoveListener();
isPlaying = 1;
};
window.setMouseMoveListener = function () {
window.document.body.onmousemove = phMouseMoveListener;
};
window.unsetMouseMoveListener = function () {
window.document.body.onmousemove = null;
};
window.stopPlaying = function () {
unsetMouseMoveListener();
clearInterval(intervalPlay);
clearTimeout(tmoutHideMouse);
PbtnWrEl.classList.remove('showSpeed');
PbtnEl.classList.remove('phPause');
phShowMouse();
isPlaying = 0;
};
window.goFirst = function () {
window.scrollTo(window.pageXOffset, 0);
window.nPh=0;
fixH();
phImg.src = imgs[nPh].src;
if(textoMostrado){phTexto.textContent = setText();}
};
window.goLast= function () {
window.scrollTo(window.pageXOffset, 0);
window.nPh=imgs.length-1;
fixH();
phImg.src = imgs[nPh].src;
if(textoMostrado){phTexto.textContent = setText();}
};
window.fixH = function () {
var T = imgs[nPh].height, //image height
h = window.innerHeight; //viewport height
if(T>h){
phImg.style.bottom = '';
if (T<h+200) {phImg.style.height='100vh';}
else{phImg.style.height='';}
}else{
phImg.style.bottom = 0;
phImg.style.height='';}
};
window.setW = function (){
if (modoFit == 1) { //apagar
WbtnEl.classList.remove('pressed');
phImg.classList.remove('phW');
modoFit = 0;
}else{ //encender
HbtnEl.classList.remove('pressed');
phImg.classList.remove('phH');
WbtnEl.classList.add('pressed');
phImg.classList.add('phW');
modoFit = 1;
}
};
window.setH = function (){
if (modoFit == 2) { //apagar
HbtnEl.classList.remove('pressed');
phImg.classList.remove('phH');
modoFit = 0;
}else{ //encender
WbtnEl.classList.remove('pressed');
phImg.classList.remove('phW');
HbtnEl.classList.add('pressed');
phImg.classList.add('phH');
modoFit = 2;
}
};
speedEl.onchange=function () {
window.phSpeed = speedEl.value;
if (PbtnEl.classList.contains('phPause')) {
clearInterval(intervalPlay);
intervalPlay = setInterval(phNext, phSpeed*1000);
}
};
speedEl.oninput = function () {
document.getElementById('txtSpeed').textContent = speedEl.value+' segundos';
};
window.document.documentElement.style.height = "100%";
window.removeClick = function (n) {imgs[n].removeAttribute('onclick');};
//Agregar escuchadores
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute('onclick', 'openVisor('+i+')');
imgs[i].setAttribute('onerror', 'removeClick('+i+')');
}
window.phHideMouse = function () {
phOverlay.style.cursor = 'none';
phImg.style.cursor = 'none';
phBtnsEl.style.opacity = 0;
};
window.phShowMouse = function () {
phOverlay.style.cursor = '';
phImg.style.cursor = '';
phBtnsEl.style.opacity = '';
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment