Groted Photo Viewer

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