AutoPagerize_Console

AutoPagerizeをサポートするボタン

当前为 2016-01-01 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        AutoPagerize_Console
// @namespace   phodra
// @description AutoPagerizeをサポートするボタン
// @include     http://*
// @include     https://*
// @version     3.12
// @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();
			}
		);
	}

})();