ヤングエースUPの漫画を見開きで表示する
目前为
// ==UserScript==
// @name Younge Ace UP Comic Viewer
// @namespace phodra
// @description ヤングエースUPの漫画を見開きで表示する
// @include https://web-ace.jp/youngaceup/contents/*
// @version 0.1
// @grant none
// ==/UserScript==
(function (){
//親コンテナの幅制限を解除
$(".containerMain").css('max-width', "none");
$(".col-viewer").width("auto");
$(".inner-delivery-contents").css( 'padding', "10px 0 0 0");
// 構築ボタン
var $reconst = $("<div id='re_constraction' />").css(
{
'position': "fixed",
'left': 0,
'top': 0,
'width': "100%",
'height': "20px",
'background-color': "darkgray",
'opacity': 0
}
);
$reconst.text("Construction");
$reconst.on(
{
'click': function()
{
$("div.page").remove();
if( IMAGE_LIST == null )
{
GetAndConstruction();
}
else
{
Construction();
}
},
'mouseenter': function()
{
$(this).stop()
$(this).animate(
{
'opacity': 0.8
},"fast"
);
},
'mouseleave': function()
{
$(this).stop()
$(this).animate(
{
'opacity': 0
},"fast"
);
},
}
);
$("body").append($reconst);
//スクロールをアニメーションする標準動作を再現
var Smooth = function(e, target)
{
e.stopPropagation();
$('html,body').stop();
$('html,body').animate({
scrollTop: target
},300);
};
let $IMAGE_CONTAINER = $(".lazy-container").css(
{
'display': "flex",
'flex-flow': "row-reverse wrap",
'justify-content': "center",
}
);
let IMAGE_LIST_URL = $IMAGE_CONTAINER.data("url");
let IMAGE_LIST;
let IMAGE_NUM = {
str: "",
first: 1,
len: 0
}
// 画像URLを取得し、ページを構築する
var GetAndConstruction = function()
{
$.getJSON(
IMAGE_LIST_URL, function(data)
{
IMAGE_LIST = data;
$IMAGE_CONTAINER.children("div[id^=img]").hide();
if( IMAGE_LIST.length>1 )
{
var num_s, num_e;
var img0 = IMAGE_LIST[0];
var img1 = IMAGE_LIST[1];
for( var i=img0.length-1; i>=0; i--)
{
if( num_e == null )
{
if( img0[i] != img1[i] &&
(/\d/).test(img0[i]) )
num_e = i+1;
}
else
{
if( (/\D/).test(img0[i]) )
{
num_s = i+1;
break;
}
}
}
var org_num = img0.substring(num_s, num_e);
IMAGE_NUM.str = org_num;
IMAGE_NUM.first = parseInt(org_num);
IMAGE_NUM.len = org_num.length;
}
Construction(IMAGE_NUM.first%2!=0);
$reconst.text("Re Construction");
}
);
};
var single = 0;
var $page = $("<div class='page'/>").css(
{
'margin': 0,
'margin-bottom': "10px",
}
);
// ページを構築する
var Construction = function(_single)
{
if( IMAGE_LIST == null ||
IMAGE_LIST.length < 1 )
{ return; }
// 最初のページを単ページで表示するか
single = _single != null? _single: !single;
if( single )
{
$IMAGE_CONTAINER.append( $page.clone() );
}
// ページを追加していく
for( var i=0; i<IMAGE_LIST.length; i++ )
{
var $img = $("<img/>");
$img.attr('src', IMAGE_LIST[i]);
$IMAGE_CONTAINER.append(
$page.clone().append($img)
);
}
if( (IMAGE_LIST.length+single)%2!=0 )
{
$IMAGE_CONTAINER.append( $page.clone() );
}
// 各ページに属性とスクロール関数を追加
var $pages = $(".page");
$pages.each(
function(i)
{
// 属性とimgスタイル
var odd = i%2==0;
$(this).attr( 'LR', odd? "R": "L");
$(this).children("img").css( 'float', (odd? "left": "right") );
// スクロール関数
$(this).click(
function(e)
{
Smooth( e,
i==0 ? $(this).offset().top // １ページ目（最上段右ページ）は自分自身にあわせる
:i==$pages.length-1 ? $(this).offset().top + $(this).outerHeight() //最後のページは自分の下へ
:$(this).attr('LR')=="R" ? $(this).prev().offset().top //右ページなら戻る
:$(this).next().offset().top //左ページなら進む
);
}
);
}
);
// サイズ調整
Resize();
};
const sqt = Math.sqrt(2);
var Resize = function()
{
var wh = $(window).height();
var ww = $(window).width();
$IMAGE_CONTAINER.css( 'width', ww );
$("div.page").css(
{
'height': wh,
'width': ww/2,
}
);
if( wh*sqt<ww ) //横長
{
$("div.page>*").css(
{
'height': "100%",
'width': "auto",
'margin': 0
}
);
}
else //縦長
{
$("div.page>*").css(
{
'height': "auto",
'width': "100%",
'margin-top': ((wh-ww/2*sqt) / 2)
}
);
}
};
$(window).on(
'load', function()
{
GetAndConstruction();
}
);
//ロード、リサイズ時に画像サイズを調整
$(window).on(
'resize', function()
{
Resize();
}
);
})();