AutoPagerizeをサポートするボタン
目前為
// ==UserScript==
// @name AutoPagerize_Console
// @namespace phodra
// @description AutoPagerizeをサポートするボタン
// @include http://*
// @include https://*
// @version 2.0
// @grant none
// ==/UserScript==
(function (){
var ap;
var $pagenow, $pagemax;
var $pagelist, $pageitem;
var scTop, timer;
// 初期化
var AP_Init = function()
{
ap = {
'page': 0,
'seam': [0]
};
scTop = document.documentElement.scrollTop;
var $header = document.createElement("div");
$header.id = "ap_header";
with( $header.style )
{
position = 'fixed';
top = '50px';
right = '0px';
opacity = '0.8';
fontSize = '14px';
userSelect = 'none';
MozUserSelect = 'none';
WebkitUserSelect = 'none';
}
document.body.appendChild($header);
var $page = document.createElement("div");
$pagenow = document.createElement("span");
$pagemax = document.createElement("span");
$pagenow.innerHTML = $pagemax.innerHTML = "1";
$page.appendChild($pagenow);
$page.appendChild( document.createTextNode(" / "));
$page.appendChild($pagemax);
with( $page.style )
{
cursor = 'pointer';
textAlign = 'right';
backgroundColor = 'white';
padding = '0px 2px';
marginBottom = '5px';
}
$page.addEventListener(
'mouseover' , function()
{
$pagelist.style.display = '';
}
);
$page.addEventListener(
'mouseout' , function()
{
$pagelist.style.display = 'none';
}
);
$header.appendChild($page);
$pagelist = document.createElement("ol");
with( $pagelist.style )
{
backgroundColor = 'white';
listStyleType = 'none';
position = 'absolute';
zIndex = '2';
top = '0px';
right = '0px';
display = 'none';
}
$page.appendChild($pagelist);
$pageitem = document.createElement("li");
$pageitem.className = "ap_pageitem";
$pageitem.innerHTML = "1";
with( $pageitem.style )
{
const MGN = 2;
backgroundColor = 'white';
cursor = 'pointer';
textAlign = 'center';
boxSizing = 'border-box';
border = 'outset 1px white';
margin = MGN +'px';
padding = '0px 5px';
minWidth = $page.offsetWidth-MGN*2 + 'px';
}
PageItem_AddEvent($pageitem);
$pagelist.appendChild($pageitem);
const AP_BTN = 'ap_button';
// 移動ボタンのスタイル
var $mb_style = document.createElement("style");
$mb_style.setAttribute( 'type', "text/css");
$mb_style.innerHTML =
"." + AP_BTN +"{ \
cursor: pointer; \
background-color: white; \
text-align: center; \
position: relative; \
width: 20px; \
margin: 2px 0px 2px auto; \
padding: 2px; \
box-sizing: border-box; \
border: solid 1px white; \
}" +
"." + AP_BTN + ":hover{ \
border: outset 1px gray; \
} " +
"." + AP_BTN + ":active{ \
border: inset 1px gray; \
}";
document.head.appendChild($mb_style);
// 最上部へ移動
var $ptop = document.createElement("div");
$ptop.className = AP_BTN;
$ptop.innerHTML = "↑";
$ptop.setAttribute('alt', "Scroll Top");
$ptop.addEventListener(
'click', function()
{
PageScroll(0);
}
);
// 最下部へ移動
var $pbtm = document.createElement("div");
$pbtm.className = AP_BTN;
$pbtm.innerHTML = "↓";
$pbtm.setAttribute('alt', "Scroll Bottom");
$pbtm.addEventListener(
'click', function()
{
PageScroll( $(document).height() -$(window).height() );
}
);
// AutoPagerizeのページ移動
// 前のページ
var $ap_prev = document.createElement("div");
$ap_prev.className = AP_BTN;
$ap_prev.innerHTML = "△";
$ap_prev.setAttribute( 'alt', "Scroll Prev Page");
$ap_prev.addEventListener(
'click', function()
{
PageScroll( scTop==ap.seam[ap.page]?
ap.seam[ap.page-1]: ap.seam[ap.page]
);
}
);
// 次のページ
var $ap_next = document.createElement("div");
$ap_next.className = AP_BTN;
$ap_next.innerHTML = "▽";
$ap_next.setAttribute( 'alt', "Scroll Next Page");
$ap_next.addEventListener(
'click', function()
{
PageScroll( ap.page+1<ap.seam.length?
ap.seam[ap.page+1]:
$(document).height() -$(window).height()
);
}
);
$header.appendChild($ptop);
$header.appendChild($ap_prev);
$header.appendChild($ap_next);
$header.appendChild($pbtm);
// ウィンドウのスクロールが発生した時
window.addEventListener(
'scroll', function()
{
scTop = document.documentElement.scrollTop;
for( var i=ap.seam.length-1; i>=0; i-- )
{
if( scTop >= ap.seam[i]-1 )
{
if( ap.page != i )
{
ap.page = i;
$pagenow.innerHTML = i+1;
}
break;
}
}
}
);
};
var PageScroll = function(target, bearing)
{
clearTimeout(timer);
if( target==scTop ) return;
if( bearing==null ) bearing = target-scTop;
var y = (target-scTop)/5;
window.scrollBy( 0, y>0? Math.ceil(y): y<0? Math.floor(y): 0);
timer = setTimeout(
function()
{
PageScroll( target, bearing);
}, 10
);
if( (bearing<0 && target>=scTop) ||
(bearing>0 && target<=scTop) )
{
window.scrollTo( 0, target);
clearTimeout(timer);
}
};
var PageItem_AddEvent = function($elm)
{
$elm.addEventListener(
'click', function()
{
var num = this.innerHTML-1;
PageScroll(
num>=0 && num<ap.seam.length?
ap.seam[num]: 0
);
}
);
$elm.addEventListener(
'dblclick', function()
{
var num = this.innerHTML-2;
window.location = num>=0?
document.getElementsByClassName("autopagerize_link")[num].href:
window.location;
}
);
};
// ページを継ぎ足した時、継ぎ目の位置を記録する
var AP_SeamLine = function()
{
var $ap_sep = document.getElementsByClassName("autopagerize_page_separator");
var len = $ap_sep.length;
var offsety = 0, elm = $ap_sep[len-1];
do
{
offsety += elm.offsetTop || 0;
elm = elm.offsetParent;
}while(elm);
ap.seam[len] = offsety;
$pagemax.innerHTML = len+1;
var $new_pageitem = $pageitem.cloneNode(true);
$new_pageitem.innerHTML = len+1;
PageItem_AddEvent($new_pageitem);
$pagelist.appendChild($new_pageitem);
};
if( window.AutoPagerize )
{
console.log( 'window.AutoPagerize' );
// 初期化
AP_Init();
// 継ぎ足した時
AutoPagerize.addFilter(AP_SeamLine);
}else
{
// document.addEventListener(
// 'GM_AutoPagerizeLoaded',
// function()
// {
// AP_Init();
// }
// );
document.addEventListener(
'GM_AutoPagerizeNextPageLoaded',
function()
{
if( ap==null ) AP_Init();
AP_SeamLine();
}
);
}
})();