18h Image Viewer

Image viewer for content pages, RIGHT or SPACE for the next image, LEFT for previous image.
Verze ze dne 06. 02. 2023. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name     18h Image Viewer
// @version  2
// @grant    none
// @match https://18h.mm-cg.com/en/*
// @match https://18h.mm-cg.com/zh/*
// @namespace http://xorcerer.github.io/
// @description Image viewer for content pages, RIGHT or SPACE for the next image, LEFT for previous image.
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle(`
 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100vh;
  width: 100vw;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
}

/* The navigation links inside the overlay */
.overlay-content img {
  height: 100vh;
  width: 100vw;
	object-fit:contain;
}
`);

var origTitle = document.title;
var markup = document.documentElement.innerHTML;
var urlRe = /Large_cgurl\[\d+\] = "(.+)";/g;
var pics = [];
var cache = [];

function updateTitle(index, count) {
  var prefix = `${index + 1}/${count} `;
  document.title = prefix + origTitle;
}

function catchImage(i) {
  if (i >= pics.length)
    return;
  
	var i = new Image();
  var src = pics[i];
  i.src = src;
  cache.push(i);
}

for (const match of markup.matchAll(urlRe)) {
  var src = match[1];
  pics.push(src);
}


var d = document.createElement('div');
d.classList.add('overlay');

dc = document.createElement('div');
dc.classList.add('overlay-content');
d.appendChild(dc);

var i = document.createElement('img');
updateTitle(0, pics.length);
i.src = pics[0];
dc.appendChild(i);
catchImage(2);
catchImage(3);

document.body.innerHTML = '';
document.body.append(d);

var index = 0;
document.addEventListener('keyup', (e) => {
	var left = -1, right = 1;
		if (e.keyCode == 37) {
  			index -= 1;
				if (index == -1) index = pics.length - 1;
      	updateTitle(index, pics.length);
	      i.src = pics[index];
    } else if (e.keyCode == 39 || e.keyCode == 32) {
  			index += 1;
				if (index >= pics.length) index = 0;
      	updateTitle(index, pics.length);
	      i.src = pics[index];
      	catchImage(i + 1);
      	catchImage(i + 2);
    }
	return false;
});