shadofx / KissManga Flex View

// ==UserScript==
// @name         KissManga Flex View
// @namespace    https://openuserjs.org/scripts/shadofx
// @copyright 2018, shadofx (https://openuserjs.org//users/shadofx)
// @license MIT
// @description  View things differently and add shortcuts
// @match        http*://kissmanga.com/Manga/*
// @grant        none
// @updateURL https://openuserjs.org/meta/shadofx/KissManga_Flex_View.meta.js
// @version 1.1
// ==/UserScript==
// ==OpenUserJS==
// @author       shadofx
// ==/OpenUserJS==
var $ = jQuery //reuse jquery 1.7 from site
if ($('select#selectReadType>option[selected]').text() == 'All pages') //only apply in All pages viewing mode
{
  function SetImages(i) {
    let images = $('#divImage>*>img');
    if (i) {
      images.css("height", "95vh");
      $('#divImage>*').css("height", "95vh");
      $('#divImage').css("display", "flex").css("flex-flow", "row-reverse wrap").css("justify-content", "center");
    }
    else {
      images.css("height", "");
      $('#divImage>*').css("height", "");
      $('#divImage').css("display", "").css("flex-flow", "").css("justify-content", "");
    }
  }

  function AttemptImageResize() {
    let images = $('#divImage>*>img');
    let avgAspectRatio = images.map((i, e) => e.width).toArray().reduce((s, p) => s + p) / images.map((i, e) => e.height).toArray().reduce((s, p) => s + p);
    SetImages(avgAspectRatio > 0.5);
    return avgAspectRatio;
  }

  function scrollPage(i) {
    window.scrollBy({
      'behavior': 'smooth',
      'top': ((window.innerHeight * 0.95) + 24) * i
    })
  }
  var CurrentViewingPage = 0;
  var ViewingPageTotal = $('#divImage>*>img').length;

  function ToCurrentViewingPage() {
    if (CurrentViewingPage >= ViewingPageTotal) CurrentViewingPage = ViewingPageTotal;
    if (CurrentViewingPage <= -1) CurrentViewingPage = -1;
    let tgt = $('#divImage>*>img')[CurrentViewingPage];
    if (tgt == undefined) return;
    tgt.scrollIntoView({
      behavior: 'smooth'
    });
    $(tgt).fadeTo(70, 0.5).delay(70).fadeTo(120, 1);
  }
  $('#divImage').click(() => scrollPage(1));
  $(window).keypress((e) => {
    switch (e.key) {
      case 'f':
      case 'j':
        scrollPage(1);
        break;
      case 'r':
      case 'u':
        scrollPage(-1);
        break;
      case 'g':
      case 'h':
        scrollPage(0.03);
        break;
      case 't':
      case 'y':
        scrollPage(-0.03);
        break;
      case 'e':
      case 'i':
        CurrentViewingPage = 0;
        ToCurrentViewingPage();
        break;
      case 'd':
      case 'k':
        CurrentViewingPage = ViewingPageTotal - 1;
        ToCurrentViewingPage();
        break;
      case 'F':
      case 'J':
      case 'N':
        $('img.btnNext').first().click();
        break;
      case 'R':
      case 'U':
      case 'B':
        $('img.btnPrevious').first().click()();
        break;
      case 'b':
        CurrentViewingPage--;
        ToCurrentViewingPage();
        break;
      case 'n':
        CurrentViewingPage++;
        ToCurrentViewingPage();
        break;
      default:
    }
  });
  AttemptImageResize();
  $(window).on('load', AttemptImageResize); //in case the image dimensions drastically changed as a result of slow loading
}