AutoPagerizeをサポートするボタン
目前為
// ==UserScript==
// @name AutoPagerize_Console
// @namespace phodra
// @description AutoPagerizeをサポートするボタン
// @include http://*
// @include https://*
// @version 3.1
// @grant GM_getResourceText
// @grant GM_getResourceURL
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @resource res_style https://www.dropbox.com/pri/get/greasemonkey/AutoPagerize_Console31/AutoPagerize_Console.css?_subject_uid=458281274&w=AABg6tJ4qGXGSttGjAhKW1Hz1NHD0u2J1U_ghChPzJoeYA
// @resource res_scrAll https://www.dropbox.com/pri/get/greasemonkey/AutoPagerize_Console31/res_scrAll.png?_subject_uid=458281274&w=AAAAezBXOiqhAE4ZoNDge-XOCBciscpYQ5vNmqcAqA5FvA
// @resource res_scrPage https://www.dropbox.com/pri/get/greasemonkey/AutoPagerize_Console31/res_scrPage.png?_subject_uid=458281274&w=AABgYNw_35pHyHSM87srpO0eC7a50hoHf_eogVDgsJ9_HA
// @resource res_tglEnabled https://www.dropbox.com/pri/get/greasemonkey/AutoPagerize_Console31/res_tglEnabled.png?_subject_uid=458281274&w=AADgE11lo7r2Q06jRypOWfQWzKbq0zqYM4cwVIO5mkrBWA
// @resource res_tglDisabled https://www.dropbox.com/pri/get/greasemonkey/AutoPagerize_Console31/res_tglDisabled.png?_subject_uid=458281274&w=AABXFmh_tm9j0xxkVQJ2uS8Z8DsWprjsJZq1MfTpP6HAeA
// @resource res_btnConfig https://www.dropbox.com/pri/get/greasemonkey/AutoPagerize_Console31/res_config.png?_subject_uid=458281274&w=AAAn0Dpdf8O46q18lV_QZa00rbZl0ZxavLmOBdXf0R-LqQ
// ==/UserScript==
(function (){
// リソースの定数化
const RES = {
'style': GM_getResourceText("res_style"),
'scrAll': GM_getResourceURL("res_scrAll"),
'scrPage': GM_getResourceURL("res_scrPage"),
'tglEnabled': GM_getResourceURL("res_tglEnabled"),
'tglDisabled': GM_getResourceURL("res_tglDisabled"),
'btnConfig': GM_getResourceURL("res_btnConfig"),
};
// スタイル追加
var apcStyle = GM_addStyle(RES.style);
// スクロール関数（jquery:animate:swingと違いキビキビした感じ）
// target:目的Y位置 bearing:移動方向
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,
bearing>0? Math.ceil(y):
bearing<0? Math.floor(y): 0
);
timer = setTimeout(
function()
{
PageScroll( target, bearing);
}, 10
);
if( (bearing<0 && (target>=scTop && target<document.body.clientHeight)) ||
(bearing>0 && target<=scTop) )
{
window.scrollTo( 0, target);
clearTimeout(timer);
}
};
// 初期化
var ap = {
'page': 0,
'seam': [0]
};
var scTop = document.documentElement.scrollTop;
var timer;
// コントロール配置
// パネル（最親）
var $panel = document.createElement("div");
$panel.id = "apc_panel";
// $panel.style.display = 'none';
document.body.appendChild($panel);
const APC_BTN = "apc_button";
// コントローラー
var $controller = document.createElement("div");
$controller.id = "apc_controller";
$panel.appendChild($controller);
// enable/disable 切り替え機能
var disp_E = "E", disp_D = "D";
var $ctrToggle = document.createElement("img");
$ctrToggle.id = "apc_ctrToggle";
$ctrToggle.className = APC_BTN + " apc_btnColor";
$ctrToggle.setAttribute('alt', disp_E);
$ctrToggle.setAttribute('title', "Enable");
$ctrToggle.setAttribute('src', RES.tglEnabled);
$controller.appendChild($ctrToggle);
/// トグルイベント
var ap_enable = true;
$ctrToggle.addEventListener(
'click' , function()
{
var e = document.createEvent('Event');
e.initEvent('AutoPagerizeToggleRequest', true, true);
return document.dispatchEvent(e);
}
);
var ApToggle = function(enbl)
{
ap_enable = enbl==null? !ap_enable: enbl;
if( ap_enable )
{
$ctrToggle.setAttribute('src', RES.tglEnabled);
$ctrToggle.setAttribute('alt', disp_E);
$ctrToggle.setAttribute('title', "Enable");
}
else
{
$ctrToggle.setAttribute('src', RES.tglDisabled);
$ctrToggle.setAttribute('alt', disp_D);
$ctrToggle.setAttribute('title', "Disable");
}
console.log(ap_enable);
}
document.addEventListener(
'AutoPagerizeToggleRequest',
function(){
ApToggle();
}
);
document.addEventListener(
'AutoPagerizeDisableRequest',
function(){ ApToggle(false);}
);
document.addEventListener(
'AutoPagerizeEnableRequest',
function(){ ApToggle(true);}
);
// コンフィグボタン
var $ctrConfig = document.createElement("img");
$ctrConfig.id = "apc_ctrConfig";
$ctrConfig.className = APC_BTN;
$ctrConfig.setAttribute('src', RES.btnConfig);
$ctrConfig.setAttribute('alt', "Config");
$ctrConfig.setAttribute('title', "Config");
$ctrConfig.addEventListener(
'click' , function()
{
$cfgBoxOuter.style.display = 'flex';
}
);
$controller.appendChild($ctrConfig);
// コンフィグメニュー包含レイヤー
var $cfgBoxOuter = document.createElement("div");
$cfgBoxOuter.id = "apc_cfgBoxOuter";
$controller.appendChild($cfgBoxOuter);
var CloseConfig = function()
{
var viewmode = $panel.getAttribute('viewmode');
if( viewmode == null ) viewmode = "slim";
GM_setValue('viewmode', viewmode);
$cfgBoxOuter.style.display = 'none';
};
$cfgBoxOuter.addEventListener(
'click' , function()
{
CloseConfig();
}
);
// コンフィグメニュー
var $cfgBox = document.createElement("div");
$cfgBox.id = "apc_cfgBox";
$cfgBoxOuter.appendChild($cfgBox);
$cfgBox.addEventListener(
'click' , function(e)
{
e.stopPropagation();
}
);
// ビューモード
var $lblViewmode = document.createElement("h4");
$lblViewmode.textContent = "View Mode";
$cfgBox.appendChild($lblViewmode);
// ビューモード ダブル
var $cfgVMdouble = document.createElement("input");
$cfgVMdouble.setAttribute( 'type', 'radio');
$cfgVMdouble.setAttribute( 'name', "viewmode");
$cfgVMdouble.id = "apc_cfgVM_double";
$cfgBox.appendChild($cfgVMdouble);
var $cfgVMdouble_lbl = document.createElement("label");
$cfgVMdouble_lbl.setAttribute( 'for', "apc_cfgVM_double");
$cfgVMdouble_lbl.innerText = $cfgVMdouble_lbl.textContent = "double";
$cfgBox.appendChild($cfgVMdouble_lbl);
$cfgVMdouble.addEventListener(
'click' , function()
{
$panel.setAttribute( 'viewmode', "double");
}
);
$cfgBox.appendChild( document.createElement("br") );
// ビューモード スリム
var $cfgVMslim = document.createElement("input");
$cfgVMslim.setAttribute( 'type', 'radio');
$cfgVMslim.setAttribute( 'name', "viewmode");
$cfgVMslim.id = "apc_cfgVM_slim";
$cfgBox.appendChild($cfgVMslim);
var $cfgVMslim_lbl = document.createElement("label");
$cfgVMslim_lbl.setAttribute( 'for', "apc_cfgVM_slim");
$cfgVMslim_lbl.innerText = $cfgVMslim_lbl.textContent = "slim";
$cfgBox.appendChild($cfgVMslim_lbl);
$cfgVMslim.addEventListener(
'click' , function()
{
$panel.setAttribute( 'viewmode', "slim");
}
);
$cfgBox.appendChild( document.createElement("br") );
$cfgBox.appendChild( document.createElement("br") );
// 保存ボタン
var $cfgSave = document.createElement("input");
$cfgSave.id = "apc_cfgSave";
$cfgSave.setAttribute('type', 'button');
$cfgSave.setAttribute('name', "Save");
$cfgSave.setAttribute('value', "Save");
$cfgBox.appendChild($cfgSave);
$cfgSave.addEventListener(
'click' , function()
{
CloseConfig();
}
);
if( GM_getValue('viewmode', null) == "slim" )
{
console.log("slim");
$cfgVMslim.setAttribute('checked', 'checked');
$panel.setAttribute('viewmode', "slim");
}
else
{
console.log("double");
$cfgVMdouble.setAttribute('checked', 'checked');
$panel.setAttribute('viewmode', "double");
}
// スクローラー
var $scroller = document.createElement("div");
$scroller.id = "apc_scroller";
$panel.appendChild($scroller);
// 最上部へ移動
var $scrTop = document.createElement("img");
$scrTop.className = APC_BTN;
$scrTop.id = "apc_scrTop";
$scrTop.setAttribute('src', RES.scrAll);
$scrTop.setAttribute('alt', "↑");
$scrTop.setAttribute('title', "Move to Top");
$scrTop.addEventListener(
'click', function()
{
PageScroll(0);
}
);
$scroller.appendChild($scrTop);
// 最下部へ移動
var $scrBtm = document.createElement("img");
$scrBtm.className = APC_BTN;
$scrBtm.id = "apc_scrBtm";
$scrBtm.setAttribute('src', RES.scrAll);
$scrBtm.setAttribute('alt', "↓");
$scrBtm.setAttribute('title', "Move to Bottom");
$scrBtm.addEventListener(
'click', function()
{
PageScroll( document.body.clientHeight-window.innerHeight );
}
);
$scroller.appendChild($scrBtm);
// 前のページ
var $scrPrv = document.createElement("img");
$scrPrv.className = APC_BTN;
$scrPrv.id = "apc_scrPrv";
$scrPrv.setAttribute('src', RES.scrPage);
$scrPrv.setAttribute('alt', "△");
$scrPrv.setAttribute('title', "Move to Previous");
$scrPrv.addEventListener(
'click', function()
{
PageScroll( scTop==ap.seam[ap.page]?
ap.seam[ap.page-1]: ap.seam[ap.page]
);
}
);
$scroller.appendChild($scrPrv);
// 次のページ
var $scrNxt = document.createElement("img");
$scrNxt.className = APC_BTN;
$scrNxt.id = "apc_scrNxt";
$scrNxt.setAttribute('src', RES.scrPage);
$scrNxt.setAttribute('alt', "▽");
$scrNxt.setAttribute('title', "Move to Next");
$scrNxt.addEventListener(
'click', function()
{
PageScroll( ap.page+1<ap.seam.length?
ap.seam[ap.page+1]:
document.body.clientHeight-window.innerHeight
);
}
);
$scroller.appendChild($scrNxt);
// ページ表示
var $pageInfo = document.createElement("div");
$pageInfo.id = "apc_pageInfo";
var $pageInfo_disp = document.createElement("div");
$pageInfo_disp.id = "apc_pageInfo_disp";
var $pageInfo_dispNow = document.createElement("span");
var $pageInfo_dispMax = document.createElement("span");
$pageInfo_dispNow.innerHTML = $pageInfo_dispMax.innerHTML = "1";
$pageInfo_disp.appendChild($pageInfo_dispNow);
$pageInfo_disp.appendChild( document.createTextNode(" / "));
$pageInfo_disp.appendChild($pageInfo_dispMax);
$pageInfo.appendChild($pageInfo_disp);
// マウスオーバーでリスト表示
$pageInfo.addEventListener(
'mouseover' , function()
{
$pageList.style.display = 'flex';
}
);
// マウス外すと消える
$pageInfo.addEventListener(
'mouseout' , function()
{
$pageList.style.display = 'none';
}
);
$panel.appendChild($pageInfo);
// ページリスト
var $pageList = document.createElement("ol");
$pageList.id = "apc_pageList";
$pageList.style.display = 'none';
$pageInfo.appendChild($pageList);
// ページリストアイテム
var $pageList_item = document.createElement("li");
$pageList_item.className = "apc_pageList_item";
$pageList_item.innerHTML = "1";
$pageList.appendChild($pageList_item);
// 新しいページリストアイテムにイベントを追加
var PageItem_AddEvent = function($elm)
{
// クリックでそのページにスクロール
$elm.addEventListener(
'click', function()
{
var num = this.innerHTML-1;
if( num >= 0 && num < ap.seam.length )
PageScroll(ap.seam[num]);
}
);
// ダブルクリックでページ移動
$elm.addEventListener(
'dblclick', function()
{
var num = this.innerHTML-2;
if( num >= 0 )
document.getElementsByClassName("autopagerize_link")[num].href;
}
);
};
PageItem_AddEvent($pageList_item);
// for( var i = 0; i<5; i++ )
// {
// var $new_pageitem = $pageList_item.cloneNode(true);
// $new_pageitem.innerHTML = i + "t";
// PageItem_AddEvent($new_pageitem);
// $pageList.appendChild($new_pageitem);
// }
// ウィンドウのスクロールが発生した時
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;
$pageInfo_dispNow.innerHTML = i+1;
}
break;
}
}
}
);
// ページを継ぎ足した時、継ぎ目の位置を記録する
var AP_SeamLine = function()
{
// 非表示だった場合表示
$panel.style.display = 'flex';
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;
$pageInfo_dispMax.innerHTML = len+1;
var $new_pageitem = $pageList_item.cloneNode(true);
$new_pageitem.innerHTML = len+1;
PageItem_AddEvent($new_pageitem);
$pageList.appendChild($new_pageitem);
};
if( window.AutoPagerize )
{
console.log( 'window.AutoPagerize' );
// 継ぎ足した時
AutoPagerize.addFilter(AP_SeamLine);
}else
{
document.addEventListener(
'GM_AutoPagerizeNextPageLoaded',
function()
{
AP_SeamLine();
}
);
}
})();