// ==UserScript==
// @name Mangajp.top Double Page
// @namespace http://tampermonkey.net/
// @version 2024-01-15
// @description Double Page Mode for Mangajp.top
// @author YellowPlus
// @license MIT
// @match https://mangajp.top/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=mangajp.top
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_getResourceText
// @grant GM_addStyle
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js
// @resource MATERIAL_ICONS https://fonts.googleapis.com/icon?family=Material+Icons
// ==/UserScript==
(function() {
'use strict';
var $ = unsafeWindow.jQuery
const materialIcons = GM_getResourceText('MATERIAL_ICONS')
GM_addStyle(materialIcons)
GM_addStyle(`
.icon-btn {
z-index: 3;
cursor: pointer;
padding: 3px;
border-radius: 20px;
background-color: #666;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.control-panel-btn {
position: fixed;
bottom: 5px;
right: 5px;
}
.offset-spreads-btn {
position: fixed;
bottom: 5px;
right: 40px;
}
`)
let currentPage = 1
function showOverlay() {
$('#readarea-overlay').css('display', 'flex')
GM_setValue('autoStart', true)
}
function hideOverlay() {
$('#readarea-overlay').hide()
GM_setValue('autoStart', false)
}
function changePage(i) {
if (i < 1 || i > $('#readerarea img').length) {
if (i < 1) {
GM_setValue('startAtLast', true)
$('a.ch-prev-btn')[0].click()
}
if (i > $('#readerarea img').length) {
$('a.ch-next-btn')[0].click()
}
return
}
$('#readarea-overlay img:nth-child(1)').attr('src', $('#readerarea img:nth-child(' + (i + 1) + ')').attr('src'))
$('#readarea-overlay img:nth-child(3)').attr('src', $('#readerarea img:nth-child(' + i + ')').attr('src'))
if (i == 1) {
$('#readarea-overlay img:nth-child(3)').css('filter', 'brightness(0) invert(1)')
} else {
$('#readarea-overlay img:nth-child(3)').css('filter', 'unset')
}
if (i >= $('#readerarea img').length) {
$('#readarea-overlay img:nth-child(1)').css('filter', 'brightness(0) invert(1)')
} else {
$('#readarea-overlay img:nth-child(1)').css('filter', 'unset')
}
$('#pageNum').html(`${i - 1}-${i}/${$('#readerarea img').length - 1}`)
currentPage = i
}
function offsetToggle() {
if (currentPage % 2 == 1) {
currentPage++
if (currentPage > $('#readerarea img').length) {
currentPage = currentPage - 2
}
$('.offset-spreads-btn').css('box-shadow', '#c77911 0px 0px 0px 20px inset')
GM_setValue('offsetSpreads', true)
} else {
currentPage--
$('.offset-spreads-btn').css('box-shadow', 'unset')
GM_setValue('offsetSpreads', false)
}
changePage(currentPage)
}
function nextPage() {
changePage(currentPage + 2)
}
function prevPage() {
changePage(currentPage - 2)
}
function controlPanelToggle() {
if ($('#controlPanel').css('display') == 'flex') {
$('#controlPanel').css('display', 'none')
$('#readarea-overlay img:nth-child(1)').css('height', '100vh')
$('#readarea-overlay img:nth-child(3)').css('height', '100vh')
GM_setValue('controlPanel', true)
} else {
$('#controlPanel').css('display', 'flex')
$('#readarea-overlay img:nth-child(1)').css('height', 'calc(100vh - 40px)')
$('#readarea-overlay img:nth-child(3)').css('height', 'calc(100vh - 40px)')
GM_setValue('controlPanel', false)
}
}
let overlay = $('<div id="readarea-overlay"></div>').css('display', 'none').css('position', 'fixed').css('width', '100%').css('height', '100%').css('background-color', 'rgba(0,0,0,0.8)').css('z-index', 2).css('justify-content', 'center')
overlay.click((e) => { if (e.target === e.currentTarget) hideOverlay() }).prependTo('body')
$('#readerarea img:first-child').clone().prependTo('#readerarea')
$('#readerarea img:first-child').css('filter', 'brightness(0) invert(1)')
$('<a href="#" style="float: left; margin-right:10px;">Double Page Mode</a>').click(()=> { showOverlay() }).prependTo('.npv > .nextprev')
unsafeWindow.document.addEventListener('keydown', (e) => {
if (overlay.css('display') == 'flex') {
e.stopImmediatePropagation();
e.preventDefault();
// 37 left 39 right 32 spacebar 27 esc
if (e.keyCode == 39) {
prevPage()
}
if (e.keyCode == 37) {
nextPage()
}
if (e.keyCode == 32) {
offsetToggle()
}
if (e.keyCode == 27) {
hideOverlay()
}
}
})
if (GM_getValue('autoStart')) {
showOverlay()
}
$('#readerarea img:first-child').one('load', () => {
$('<div id="pageShadow"></div>').css('box-shadow', '#000000 0px 0px 25px 6px, #a6a6a6 0px 0px 6px 1px').css('z-index', 2).prependTo(overlay)
$('#readerarea img:nth-child(1)').clone().css('height', 'calc(100vh - 40px)').css('cursor', 'url(/wp-content/themes/mangastream/assets/img/arrow-right-circle.svg),auto').click(() => { prevPage() }).appendTo(overlay)
$('#readerarea img:nth-child(2)').clone().css('height', 'calc(100vh - 40px)').css('cursor', 'url(/wp-content/themes/mangastream/assets/img/arrow-left-circle.svg),auto').click(() => { nextPage() }).prependTo(overlay)
$('<div id="controlPanel"></div>').css('width', '100%').css('height', '40px').css('bottom', '0px').css('position', 'fixed').css('background-color', '#1b3a6f').css('z-index', 3)
.css('display', 'flex').css('justify-content', 'center').css('align-items', 'center').appendTo(overlay)
$('<span class="material-icons control-panel-btn icon-btn" title="Toggle Control Panel">menu</span>').click(() => { controlPanelToggle() }).appendTo(overlay)
$(`<div id="pageNum">0-1/${$('#readerarea img').length - 1}</div>`).css('color', '#fff').css('background-color', '#0e1726').css('padding', '3px').css('text-align', 'center').css('width', '80px').appendTo($('#controlPanel'))
$('<span class="material-icons offset-spreads-btn icon-btn" title="Double Page Offset Spreads">import_contacts</span>').click(()=> { offsetToggle() }).appendTo($('#controlPanel'))
$('#readerarea img:first-child').css('display', 'none')
$('#readarea-overlay img').on('dragstart', (e) => { e.preventDefault() })
if (GM_getValue('startAtLast')) {
GM_setValue('startAtLast', false)
changePage(($('#readerarea img').length % 2 == 1) ? $('#readerarea img').length : $('#readerarea img').length - 1)
}
if (GM_getValue('offsetSpreads')) {
offsetToggle()
}
if (GM_getValue('controlPanel')) {
controlPanelToggle()
}
// $('#readerarea').css('display', 'flex').css('flex-wrap', 'wrap').css('flex-direction', 'row-reverse').css('justify-content', 'center').css('max-width', 'unset').css('width', $('#readerarea img:first-child').width() * 2)
// $('#readerarea img').css('margin', '0 0 30px')
})
})();
