☰

AutoPagerize_Console

AutoPagerizeの操作系を拡張します。

当前为 2018-05-20 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        AutoPagerize_Console
  3. // @namespace   phodra
  4. // @description AutoPagerizeの操作系を拡張します。
  5. // @include     *
  6. // @version     5.00
  7. // @noframes
  8. // @grant       GM_getValue
  9. // @grant       GM_setValue
  10. // @grant       GM.getValue
  11. // @grant       GM.setValue
  12. // ==/UserScript==
  13.  
  14. (()=>{
  15. 	// Greasemonkey 4.0未満バージョン対応
  16. 	if( this.GM == null ){
  17. 		this.GM = {};
  18. 		this.GM.getValue = async (name, defaultValue) => {
  19. 			return GM_getValue(name, defaultValue);
  20. 		};
  21. 		this.GM.setValue = async (name, value) => {
  22. 			return GM_setValue(name, value);
  23. 		};
  24. 	}
  25. 	// 拡張
  26. 	Array.prototype.first = function(){ return this[0]; };
  27. 	Array.prototype.last = function(){ return this[this.length-1]; };
  28. 	Array.prototype.round = function(i){ return this[i<0? 0: i>=this.length? this.length-1: i]; };
  29. 	Node.prototype.prependChild = function(elm){ this.insertBefore(elm,this.firstChild); };
  30. 	Element.prototype.css = function(arg1, arg2){
  31. 		if( arg2 == null){
  32. 			for( let key in arg1 ){
  33. 				this.style[key] = arg1[key];
  34. 			}
  35. 		}else{
  36. 			this.style[arg1] = arg2;
  37. 		}
  38. 	};
  39. 	Element.prototype.attr = function(arg1, arg2){
  40. 		if( arg2 == null){
  41. 			for( let key in arg1 ){
  42. 				this.setAttribute(key, arg1[key]);
  43. 			}
  44. 		}else{
  45. 			this.setAttribute(arg1, arg2);
  46. 		}
  47. 	};
  48. 	// 任意のイベントを発火
  49. 	const FireEvent = ename => {
  50. 		const e = document.createEvent('Event');
  51. 		e.initEvent( ename, true, false);
  52. 		return document.dispatchEvent(e);
  53. 	};
  54.  
  55. 	
  56.  
  57. 	// 画像をひとまとめにしておく
  58. 	const RES = {
  59. 		'config':   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC5SURBVCiRrZI9DsIwDIVfKsQIxyjlBNwC7lFWBq4AKyMrB0C9AGzcBlDFAAh9DE2rNKQoSDzJcvxsyz+x9C8ACTBy7AxIYhILKuRWAAo/rhfIHVi9CXANjK1iJO0lDSVNJPW9uIekk6SrpKkxhrq9MW3cgDWwBV6eL/Nnyx3nwuF3Dp/XfNe27h3vNgKtnoElsAKeoVZ/Xc5F0qxZjlf9wCeOflxoxtLquRWp+obvsCeXOnYadXKxeAMXu9O375dXpAAAAABJRU5ErkJggg==",
  60. 		'scrAll':   "data:image/png;base64,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6LY0xzroyiAbWQ7nyDd+ePiDFuKl3SBW3f8B8fP2P2is2c4AAABielRYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAAeNo9icENwDAMAv+eoiPY4KrpOrU//eXR/VUnUgJCAk7e/oUcUw5hc/jtqV7esrRQ8KraCCqNZwUkbZIo8tS28YwIck1V+QEwdRTPIeQRVwAACWppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wLUV4aXYyIj4KIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgZGM6Rm9ybWF0PSJpbWFnZS9wbmciLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PgD/gEAAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQffDB8MHyAdGHmgAAABB0lEQVQ4y72VLUuEQRRGz6wLKot/QBDNIghazDZBMAsGs2AxWv0V/gPDVvOCxaprsoomYVGLCMKxDDIOr/N+oPvALZd7mDv3YyYgndSDKYP93CFuARetQWAOWP63VENeVXEFOGwNdi5OncQBcATS2NQZ9VK1LXhuVBvo1ERNoQN/6q0JtK1+ZKB10Jr6YoVK0KL6kMQ+1YLqgnqTxD2qJynYq2hwHxgC69H1CuwAk7rJWQVG0QBGgXAnbhbBQBgD48q57rhW+/mlmvTyuFUfI7SrfuZgcR/FDeAKGETXBHgupqouZU0ffh8klAbgNoGu1fk05rcX4AyYBe5jenuB8P4nb870v4AvLySHS1xd+RoAAAAASUVORK5CYII=",
  61. 		'scrPage':  "data:image/png;base64,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CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIGRjOkZvcm1hdD0iaW1hZ2UvcG5nIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz4A/4BAAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wwfDB8brBOQhAAAAPhJREFUOMvl1LEuREEUh/FvNisiSCRCIqGytQdR06oUFAqF91Do0NJrvIBaK6p9AZWEhGx8miXHdWfvzHbiJNPcO7/8586cuQmZqnrwV2C/FoibwC5I1VCvVGvRQB1NAy8cVw3aUN+/YM2ungAzcZtK0lbVV0OVJh4Dc82D6UpbUp9tVEniEbDY1gqT0ubVJ1uqK/EAWG57kXL3UZwFhsDa+NElcNa5VPUwrOxFXfkxJ4P66jDA01/zMnAvoDd1vROqPfUhwPPWz2mBOwGN1EEpvA/wOnvODbQd0Ie6VQrvAryZ1FXfDSAuAPuhB24T6THXUukf/Mk/Ac1knVlDqEQOAAAAAElFTkSuQmCC",
  62. 		'disabled': "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADpSURBVCiRnZIxCsJAEEXfBo0IilhYWIgogo1W1mLnHTyFjVXOEkif1kKvYGsr2NhoaaVo8S2WsGoikiwss/NnHjvsfiMhCqxSctjvYbNxBd+HTgdmM2i1MkgJSSgMEaDBAE0mqN22ue+j1Qo9n7Yv2SlwvXbFywUtFlYPghyghB4P1O+jahVdr073/j1CuQzzOdxusNs5/S8I0O3aeD7nBI2xsVLJCR6PNg6HOcD7HbZb6PVgPHZ66TcChwMsl3A6QRyD935NlgFGI9Ro2LzZRFH0+UUSMolXvy1Xr9vxplOo1dLTmKImfwFplKHHjazaRQAAAABJRU5ErkJggg==",
  63. 		'enabled':  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACESURBVCiRzdIxDkFREIXh74lWh9BolBagYhU2o1CrWYtF2IyK/mokzPPmvRCFmWpOzp+592QqRfFF9cN0xDVxrrDOwD1uWDSA4zbQAzp3vlSv2/JjsAqpTnHBqOba4BCl9z/OsKtp86ad5aUnimVQ0v6HcLIDGOL0HGM4W/nJDdo2flB3ti8tcnms5h0AAAAASUVORK5CYII=",
  64. 	};
  65.  
  66.  
  67.  
  68. 	// スタイル
  69. 	const $style = document.createElement("style");
  70. 	$style.setAttribute("type", "text/css");
  71. 	$style.textContent = `
  72. 	#apc-panel *,
  73. 	#apc-config * {
  74. 	    color: #eee;
  75. 	    border-color: #666;
  76. 	}
  77. 	.apc-box,
  78. 	#apc-pageList,
  79. 	#apc-config {
  80. 	    background-color: #1c1c1c !important;
  81. 	}
  82. 	.apc-button {
  83. 	    filter: brightness(100%) contrast(150%);
  84. 	}
  85. 	#apc-enabler {
  86. 	    filter: grayscale(100%);
  87. 	}
  88. 	#apc-panel[valid] #apc-enabler {
  89. 	    filter: grayscale(60%);
  90. 	}
  91.  
  92.  
  93. 	/* コンソールパネル */
  94. 	#apc-panel {
  95. 	    opacity: 0.6;
  96. 	    background-color: transparent !important;
  97.  
  98. 	    position: fixed;
  99. 	    z-index: 9999999990;
  100. 	    right: 0;
  101. 	    /*top: 48px;*/
  102. 		margin: 0;
  103.  
  104. 		display: inline-flex;
  105. 		flex-direction: column;
  106. 		align-items: flex-end;
  107.  
  108. 	}
  109. 	#apc-panel[display_rule=valid]:not([valid]) {
  110. 	    visibility: hidden;
  111. 	}
  112.  
  113. 	#apc-panel *,
  114. 	#apc-config * {
  115. 	    font-family: arial, sans-serif;
  116. 	    font-size: 14px;
  117. 	    font-weight: normal;
  118. 	    letter-spacing: normal;
  119. 	    vertical-align: baseline;
  120. 	    line-height: normal;
  121. 	}
  122. 	.apc-box {
  123. 	    padding: 1px;
  124. 	    box-sizing: content-box;
  125. 	    min-width: 18px;
  126. 		/*position: relative;*/
  127. 		pointer-events: auto;
  128. 	}
  129. 	#apc-panel[non_hover='transparent']:not(:hover):not([config]) .apc-box {
  130. 		background-color: transparent !important;
  131. 	}
  132. 	#apc-panel[non_hover='stealth']:not(:hover):not([config]) .apc-box {
  133. 	    visibility: hidden;
  134. 	}
  135.  
  136. 	/* ボタンのスタイル */
  137. 	.apc-button {
  138. 	    border: solid 1px;
  139. 	    box-sizing: border-box;
  140. 	    cursor: pointer;
  141. 	    margin: 1px;
  142. 	    padding: 0;
  143. 	    position: relative;
  144. 	    
  145. 	    opacity: 0.5;
  146. 		width: 16px;
  147. 	}
  148. 	.apc-button:hover {
  149. 	    opacity: 0.8;
  150. 	}
  151. 	.apc-button:active {
  152. 	    opacity: 0.3;
  153. 	}
  154. 	/* ボタンの大きさ */
  155. 	#apc-optionBox .apc-button {
  156. 	    height: 16px;
  157. 	}
  158. 	#apc-scrollerBox .apc-button {
  159. 	    height: 32px;
  160. 	}
  161.  
  162.  
  163. 	/* オプションボックス */
  164. 	#apc-optionBox {
  165. 	    display: flex;
  166. 	    z-index: 9999999991;
  167. 	}
  168. 	#apc-enabler[state="enable"] {
  169. 		background-image: url(${RES.enabled});
  170. 	}
  171. 	#apc-enabler[state="disable"] {
  172. 		background-image: url(${RES.disabled});
  173. 	}
  174. 	#apc-setting {
  175. 		background-image: url(${RES.config});
  176. 	}
  177. 	/* optionBox配置形状： */
  178. 	#apc-panel[valid] #apc-optionBox[option_dir_valid='Left'],
  179. 	#apc-panel:not([valid]) #apc-optionBox[option_dir_invalid='Left'] {
  180. 	    flex-direction: row-reverse;
  181. 	}
  182. 	#apc-panel[valid] #apc-optionBox[option_dir_valid='Right'],
  183. 	#apc-panel:not([valid]) #apc-optionBox[option_dir_invalid='Right'] {
  184. 	    flex-direction: row;
  185. 	}
  186. 	#apc-panel[valid] #apc-optionBox[option_dir_valid^='Up'],
  187. 	#apc-panel:not([valid]) #apc-optionBox[option_dir_invalid^='Up'] {
  188. 	    flex-direction: column-reverse;
  189. 	}
  190. 	#apc-panel[valid] #apc-optionBox[option_dir_valid^='Down'],
  191. 	#apc-panel:not([valid]) #apc-optionBox[option_dir_invalid^='Down'] {
  192. 	    flex-direction: column;
  193. 	}
  194. 	#apc-panel[valid] #apc-optionBox[option_dir_valid='Up_protrude'],
  195. 	#apc-panel:not([valid]) #apc-optionBox[option_dir_invalid='Up_protrude'] {
  196. 	    margin-top: -18px;
  197. 	}
  198. 	#apc-panel[valid] #apc-optionBox[option_dir_valid='Down_protrude'],
  199. 	#apc-panel:not([valid]) #apc-optionBox[option_dir_invalid='Down_protrude'] {
  200. 		margin-bottom: -18px;
  201. 	}
  202.  
  203.  
  204. 	/* スクローラーボックス */
  205. 	#apc-scrollerBox {
  206. 	    z-index: 9999999992;
  207. 	}
  208. 	#apc-scrollTop,
  209. 	#apc-scrollBottom {
  210. 		background-image: url(${RES.scrAll});
  211. 	}
  212. 	#apc-scrollPrev,
  213. 	#apc-scrollNext {
  214. 		background-image: url(${RES.scrPage});
  215. 	}
  216. 	/* scrollerBox配置形状：スリム */
  217. 	#apc-scrollerBox[scroller_form='Slim'] {
  218. 		display: flex;
  219. 	    flex-flow: column wrap-reverse;
  220. 	}
  221. 	#apc-scrollerBox[scroller_form='Slim'] #apc-scrollTop {
  222. 	    order: 1;
  223. 	}
  224. 	#apc-scrollerBox[scroller_form='Slim'] #apc-scrollPrev {
  225. 	    order: 2;
  226. 	}
  227. 	#apc-scrollerBox[scroller_form='Slim'] #apc-scrollNext {
  228. 	    order: 3;
  229. 	    transform: scale(1, -1);
  230. 	}
  231. 	#apc-scrollerBox[scroller_form='Slim'] #apc-scrollBottom,
  232. 	#apc-panel:not([valid]) #apc-scrollBottom {
  233. 	    order: 4;
  234. 	    transform: scale(1, -1);
  235. 	}
  236. 	/* scrollerBox配置形状：スクエア */
  237. 	#apc-panel[valid] #apc-scrollerBox[scroller_form='Square'] {
  238. 		display: grid;
  239. 	}
  240. 	#apc-panel[valid] #apc-scrollerBox[scroller_form='Square'] #apc-scrollTop {
  241. 		grid-row: 1/2;
  242. 		grid-column: 2/3;
  243. 	    transform: scale(-1, 1);
  244. 	}
  245. 	#apc-panel[valid] #apc-scrollerBox[scroller_form='Square'] #apc-scrollBottom {
  246. 		grid-row: 2/3;
  247. 		grid-column: 2/3;
  248. 	    transform: scale(-1, -1);
  249. 	}
  250. 	#apc-panel[valid] #apc-scrollerBox[scroller_form='Square'] #apc-scrollNext {
  251. 		grid-row: 2/3;
  252. 		grid-column: 1/2;
  253. 	    transform: scale(1, -1);
  254. 	}
  255. 	#apc-panel[valid] #apc-scrollerBox[scroller_form='Square'] #apc-scrollPrev {
  256. 		grid-row: 1/2;
  257. 		grid-column: 1/2;
  258. 	}
  259.  
  260.  
  261. 	/* ページボックス */
  262. 	#apc-pageIndexBox {
  263. 	    cursor: pointer;
  264. 	    z-index: 9999999993;
  265. 	    min-height: 17px;
  266. 		position: relative;
  267. 	}
  268. 	/* ページ表示 */
  269. 	#apc-sequencer {
  270. 	    margin: 0px 1px;
  271. 	    padding: 0px;
  272. 	    text-align: center;
  273. 	}
  274. 	/* pageIndexBox配置形状：縦置き */
  275. 	#apc-pageIndexBox[page_index_form$='Pile'] #apc-sequencer {
  276. 	    display: flex;
  277. 	    flex-direction: column;
  278. 	}
  279. 	#apc-pageIndexBox[page_index_form$='Pile'] span:first-child{
  280. 		border-bottom: solid 1px #eee !important;
  281. 	}
  282. 	/* pageIndexBox配置形状：横置き */
  283. 	#apc-pageIndexBox[page_index_form='Strip'],
  284. 	#apc-pageIndexBox[page_index_form='Growed Pile']{
  285. 		box-sizing: border-box;
  286. 		width: 100%;
  287. 	}
  288. 	
  289. 	#apc-pageIndexBox[page_index_form$='Strip'] span:first-child::after{
  290. 	    content: " / ";
  291. 	}
  292.  
  293. 	/* ページ一覧 */
  294. 	#apc-pageList {
  295. 		position: absolute;
  296. 		min-width: 38px;
  297. 		
  298. 	    margin: 0;
  299. 	    padding: 0px;
  300. 	    list-style-type: none;
  301.  
  302. 	    display: none;
  303. 	    flex-flow: column wrap-reverse;
  304. 		max-height: 50vh;
  305. 	}
  306. 	#apc-pageIndexBox:hover #apc-pageList {
  307. 		display: flex;
  308. 	}
  309. 	#apc-pageIndexBox[page_list_expand^="Left"] #apc-pageList {
  310. 		right: 100%;
  311. 	}
  312. 	#apc-pageIndexBox[page_list_expand^="Right"] #apc-pageList {
  313. 		left: 100%;
  314. 	    flex-wrap: wrap;
  315. 	}
  316. 	#apc-pageIndexBox[page_list_expand$="upper"] #apc-pageList {
  317. 		bottom: 0;
  318. 	}
  319. 	#apc-pageIndexBox[page_list_expand$="lower"] #apc-pageList {
  320. 		top: 0;
  321. 	}
  322. 	#apc-pageIndexBox[page_list_expand="Upper"] #apc-pageList {
  323. 		right: 0;
  324. 		bottom: 100%;
  325. 	}
  326. 	#apc-pageIndexBox[page_list_expand="Lower"] #apc-pageList {
  327. 		right: 0;
  328. 		top: 100%;
  329. 	}
  330. 	
  331. 	.apc-pageListItem {
  332. 	    border-style: outset;
  333. 	    border-width: 1px;
  334. 	    box-sizing: border-box;
  335. 	    cursor: pointer;
  336. 	    margin: 1px;
  337. 	    padding: 0px;
  338. 	    text-align: center;
  339. 	}
  340.  
  341. 	#apc-panel:not([valid]) #apc-scrollPrev,
  342. 	#apc-panel:not([valid]) #apc-scrollNext,
  343. 	#apc-panel:not([valid]) #apc-pageIndexBox {
  344. 	    display: none;
  345. 	}
  346.  
  347. 	#apc-panel[config]+#apc-configDialog {
  348. 		display: flex;
  349. 	}
  350. 	/* コンフィグメニューダイアログ */
  351. 	#apc-configDialog {
  352.     background-color: transparent !important;
  353. 	    position: fixed;
  354. 	    z-index: 9999999999;
  355. 		
  356. 	    top: 0px;
  357. 	    left: 0px;
  358. 	    width: 100%;
  359. 	    height: 100%;
  360. 		
  361. 	    display: none;
  362. 	    flex-direction: column;
  363. 	    justify-content: center;
  364. 	    align-items: center;
  365. 	}
  366. 	#apc-config {
  367. 	opacity: 1.0;
  368. 	    border: outset 3px white;
  369. 	    display: inline-block;
  370.  
  371.     text-align: left;
  372. 	    padding: 5px 15px;
  373. 		max-height: 90vh;
  374. 		overflow: scroll;
  375.  
  376. 		user-select: none;
  377. 		-moz-user-select: none;
  378. 		-webkit-user-select: none;
  379. 		-ms-user-select: none;
  380. 	}
  381. 	#apc-config h4 {
  382. 	display: block;
  383.     background-color: transparent;
  384. 		padding: 0;
  385. 		padding-bottom: 1px;
  386.         margin: 5px 0 2px -5px;
  387. 	    border: solid 0;
  388. 		border-bottom-width: 1px;
  389.     font-weight: bold !important;
  390. 	}
  391. 	#apc-config .apc-group {
  392. 		border: solid 1px;
  393.     /*position: relative;*/
  394. 	    margin: 0;
  395. 		margin-top: 10px;
  396. 	    padding: 5px;
  397.     font-size: 0;
  398. 	}
  399. 	#apc-config .apc-group h5 {
  400.     /*position: relative;*/
  401. 	    display: inline-block;
  402. 	    margin: 0;
  403. 	    margin-top: -1em;
  404. 	    padding: 0 3px;
  405. 	    background-color: #1c1c1c;
  406. 	    font-weight: bold !important;
  407. 	}
  408. 	#apc-config .apc-mItem {
  409.     display: block;
  410. 	    margin: 5px 2px 0 2px;
  411. 	}
  412. 	#apc-config label {
  413.     display: block;
  414.     margin: 2px;
  415. 	    cursor: pointer;
  416. 	}
  417. 	#apc-config input,
  418. 	#apc-config select {
  419. 		/*color: white;*/
  420.     background-image: none;
  421. 	    background-color: #000;
  422. 	    border: 2px inset #666;
  423. 	    margin: auto 2px;
  424. 	    cursor: pointer;
  425.     border-radius: initial;
  426.     padding: initial;
  427. 	}
  428. 	#apc-config option {
  429. 		color: black;
  430. 		background-color: white;
  431. 	}
  432. 	#apc-config input {
  433. 	    width: auto;
  434. 	    height: auto;
  435.     padding: 0;
  436.     cursor: pointer;
  437. 	}
  438. 	#apc-config select,
  439. 	#apc-config input[type='number'] {
  440. 	    box-sizing: content-box;
  441. 	    height: 19px;
  442. 	}
  443. 	#apc-config input[type='number'] {
  444. 	    max-width: 60px;
  445. 	-webkit-appearance: ;
  446. 	}
  447. 	#apc-config select {
  448. 		max-width: 80px;
  449. 	}
  450. 	#apc-config input[type='checkbox'] {
  451. 	    vertical-align: middle;
  452. 	}
  453. 	#apc-config #apc-mButtons {
  454. 		display: flex;
  455. 		justify-content: stretch;
  456. 	    margin: 10px 0 5px 0;
  457. 	}
  458. 	#apc-config .apc-config_button {
  459. 	    border: outset 2px;
  460. 		margin: 0 5px;
  461. 	    width: 100%;
  462. 	}
  463. 	#apc-config .apc-config_button:first-child {
  464. 		margin-left: 0;
  465. 	}
  466. 	#apc-config .apc-config_button:last-child {
  467. 		margin-right: 0;
  468. 	}
  469. 	`;
  470. 	document.head.appendChild($style);
  471.  
  472.  
  473.  
  474. 	// APが有効なページであるのか
  475. 	const apValid = {
  476. 		name: "valid",
  477. 		flag: null,
  478. 	};
  479. 	/// APメッセージバー（アドオン版）かAPアイコン（スクリプト版）が
  480. 	/// 挿入されると、APが有効なページであるとみなす。
  481. 	const checkApValid = $elm => {
  482. 		if( apValid.flag == null ){
  483. 			// AutoPagerize有効なページでのみ行う処理
  484. 			if( $elm.id == "autopagerize_message_bar" ||
  485. 				$elm.id == "autopagerize_icon" )
  486. 			{
  487. 				apValid.flag = $elm.id;
  488. 				$panel.attr( apValid.name, true);
  489. 				return true;
  490. 			}
  491. 		}
  492. 		return false;
  493. 	};
  494. 	const apObject = document.getElementById("autopagerize_message_bar") ||
  495. 	  document.getElementById("autopagerize_icon");
  496. 	if( apObject != null ){
  497. 		checkApValid(apObject);
  498. 	}else{
  499. 		const mo = new MutationObserver(
  500. 			mRecs => {
  501. 				for( let rec of mRecs ){
  502. 					for( let added of rec.addedNodes ){
  503. 						if( checkApValid(added) ){
  504. 							mo.disconnect();
  505. 						}
  506. 					}
  507. 				}
  508. 			}
  509. 		);
  510. 		mo.observe( document.body, {'childList': true});
  511. 		document.addEventListener(
  512. 			'GM_AutoPagerizeNextPageLoaded',
  513. 			() => mo.disconnect()
  514. 		);
  515. 	}
  516.  
  517. 	let scrTop = document.documentElement.scrollTop;
  518. 	let oldPage = null;
  519. 	// ウィンドウのスクロールが発生した時
  520. 	window.addEventListener(
  521. 		'scroll',
  522. 		() => {
  523. 			scrTop = document.documentElement.scrollTop;
  524. 			// 現在のページを更新
  525. 			const np = getNowPage();
  526. 			if( np != oldPage ){
  527. 				$sequencerNow.textContent = np+1;
  528. 				oldPage = np;
  529. 			}
  530. 		}
  531. 	);
  532. 	// 各ページを管理する配列
  533. 	let pageBounds = [0];
  534. 	// 現在のページを取得（境界線上を前ページとみなす場合false）
  535. 	const getNowPage = (notLess=true) => {
  536. 		const breakOver = notLess ?
  537. 		(st, bound) => st >= bound :
  538. 		(st, bound) => st > bound ;
  539. 		let i;
  540. 		for( i = pageBounds.length-1; i >= 0; i-- ){
  541. 			if( breakOver( scrTop, pageBounds[i]) ) break;
  542. 		}
  543. 		return i;
  544. 	};
  545. 	const getBottomPos = () => {
  546. 		return Math.max(
  547. 			document.body.clientHeight,
  548. 			document.body.scrollHeight,
  549. 			document.documentElement.scrollHeight,
  550. 			document.documentElement.clientHeight) -
  551. 		window.innerHeight;
  552. 	};
  553.  
  554. 	// ページを継ぎ足した時、継ぎ目の位置を記録する
  555. 	const apPageAppended = () => {
  556. 		// セパレーターの絶対位置を取得
  557. 		const $apSep = document.getElementsByClassName("autopagerize_page_separator");
  558. 		const len = $apSep.length;
  559.  
  560. 		let sepPos = $apSep.item(len-1).getBoundingClientRect().top + window.pageYOffset;
  561. 		sepPos = Math.round(sepPos);
  562. 		if( !pageBounds.includes(sepPos) ){
  563. 			pageBounds.push(sepPos);
  564. 		}
  565. 		$sequencerMax.textContent = len+1;
  566.  
  567. 		// ページリストアイテムを追加
  568. 		$pageList.appendChild( $createPageListItem(len+1) );
  569. 	};
  570.  
  571. 	document.addEventListener(
  572. 		'GM_AutoPagerizeNextPageLoaded',
  573. 		() => apPageAppended()
  574. 	);
  575.  
  576. 	let scrTick = null;
  577. 	// 任意の位置にスクロール
  578. 	const smoothScrollTo = targetY => {
  579. 		// 続けてスクロールさせるとキャンセルして新たなスクロール
  580. 		if( scrTick != null ){
  581. 			clearTimeout(scrTick);
  582. 			scrTick = null;
  583. 		}
  584. 		// 再帰処理部分
  585. 		const smoothScrollTick = (_targetY) => {
  586. 			// 常に最新の位置をターゲットにしたい場合、引数に関数を渡す
  587. 			// （最下部へのスクロール用。
  588. 			// 　なぜかスクロール途中にページの高さが変わる場合がある）
  589. 			let targetY = (typeof(_targetY) == "function" ?
  590. 				_targetY() :
  591. 				_targetY);
  592. 			// 移動量
  593. 			let moveY = (targetY-scrTop)/10;
  594. 			// 終了条件
  595. 			let endOver;
  596. 			// 下方向の移動量調整と終了条件
  597. 			if( moveY>0 ){
  598. 				moveY = Math.ceil(moveY); //切り上げ
  599. 				endOver = scrTop+moveY>=targetY; //ターゲットを越えていれば
  600. 			}
  601. 			// 上方向の移動量調整と終了条件
  602. 			else{
  603. 				moveY = Math.floor(moveY); //切り下げ
  604. 				endOver = scrTop+moveY<=targetY; //ターゲットを下回っていれば
  605. 			}
  606. 			// 条件を満たしていれば終了
  607. 			if( endOver ){
  608. 				window.scrollTo( 0, targetY);
  609. 				clearTimeout(scrTick);
  610. 				scrTick = null;
  611. 			}else{
  612. 				window.scrollBy( 0, moveY);
  613. 				scrTick = setTimeout(
  614. 					() => smoothScrollTick(targetY),
  615. 					10
  616. 				);
  617. 			}
  618. 		};
  619. 		smoothScrollTick(targetY);
  620. 	};
  621.  
  622.  
  623.  
  624. 	// コントロール配置
  625. 	/// パネル（最親）
  626. 	const $panel = document.createElement("div");
  627. 	$panel.id = "apc-panel";
  628. 	document.body.appendChild($panel);
  629.  
  630. 	// ボックスを作成
  631. 	const $createBox = () => {
  632. 		const $box = document.createElement("div");
  633. 		$box.className = "apc-box";
  634. 		return $box;
  635. 	};
  636. 	// ボタンを作成
  637. 	const $createButton = (attr) => {
  638. 		const $button = document.createElement("div");
  639. 		$button.className = "apc-button";
  640. 		$button.attr(attr);
  641. 		return $button;
  642. 	};
  643.  
  644. 	///panel/ オプションボックス
  645. 	const $optionBox = $createBox();
  646. 	$optionBox.id = "apc-optionBox";
  647. 	$panel.appendChild($optionBox);
  648.  
  649. 	///panel/optionBox/ オンオフボタン (enable/disable)
  650. 	const $enabler = $createButton(
  651. 		{ 'id': "apc-enabler" }
  652. 	);
  653. 	const apEnable = {
  654. 		name: "enable",
  655. 		state: true,
  656. 	};
  657. 	const changeToggle = (toggle = null) => {
  658. 		apEnable.state = toggle != null ? toggle : !apEnable.state;
  659. 		$enabler.attr(
  660. 			apEnable.state ?
  661. 			{
  662. 				'state': "enable",
  663. 				'alt': "E",
  664. 				'title': "AutePagerize OFF (Now:Enable)"
  665. 			} :
  666. 			{
  667. 				'state': "disable",
  668. 				'alt': "D",
  669. 				'title': "AutePagerize ON (Now:Disable)"
  670. 			}
  671. 		);
  672. 		GM.setValue( apEnable.name, apEnable.state);
  673. 	};
  674. 	///panel/optionBox// APイベントをキャプチャー
  675. 	document.addEventListener(
  676. 		'AutoPagerizeToggleRequest',  () => changeToggle()
  677. 	);
  678. 	document.addEventListener(
  679. 		'AutoPagerizeEnableRequest',  () => changeToggle(true)
  680. 	);
  681. 	document.addEventListener(
  682. 		'AutoPagerizeDisableRequest', () => changeToggle(false)
  683. 	);
  684. 	///panel/optionBox// トグルボタン クリックでリクエストイベント発火
  685. 	$enabler.addEventListener(
  686. 		'click', () => FireEvent('AutoPagerizeToggleRequest')
  687. 	);
  688. 	$optionBox.appendChild($enabler);
  689.  
  690. 	// コンフィグメニューを開いているか
  691. 	///panel/optionBox/ 設定ボタン
  692. 	const $setting = $createButton(
  693. 		{
  694. 			'id': "apc-setting",
  695. 			'title': "Open Config",
  696. 			'alt': "c",
  697. 		}
  698. 	);
  699. 	$optionBox.appendChild($setting);
  700. 	$setting.addEventListener(
  701. 		'click', () => config.open()
  702. 	);
  703. 	/// ボタンが見えなくなった時のため、ショートカットで開けるようにする。
  704. 	/// Alt + Ctrl + p
  705. 	document.addEventListener(
  706. 		'keydown', e => {
  707. 			if( e.altKey && e.ctrlKey && e.keyCode == 80 ){
  708. 				config.open();
  709. 			}
  710. 		}
  711. 	);
  712.  
  713. 	const $spacingBox12 = document.createElement("div");
  714. 	$spacingBox12.className = "apc-spacing";
  715. 	$spacingBox12.style.order = 2;
  716. 	$panel.appendChild($spacingBox12);
  717.  
  718. 	///panel/ スクロールボックス
  719. 	const $scrollerBox = $createBox();
  720. 	$scrollerBox.id = "apc-scrollerBox";
  721. 	$panel.appendChild($scrollerBox);
  722.  
  723. 	///panel/scr/ 最上部へ移動
  724. 	const $scrollTop = $createButton(
  725. 		{
  726. 			'id': "apc-scrollTop",
  727. 			'alt': "↑",
  728. 			'title': "Move to Top",
  729. 		}
  730. 	);
  731. 	$scrollerBox.appendChild($scrollTop);
  732. 	///panel/scr/ 最下部へ移動
  733. 	const $scrollBottom = $createButton(
  734. 		{
  735. 			'id': "apc-scrollBottom",
  736. 			'alt': "↓",
  737. 			'title': "Move to Bottom",
  738. 		}
  739. 	);
  740. 	$scrollerBox.appendChild($scrollBottom);
  741. 	///panel/scr/ 前のページ
  742. 	const $scrollPrev = $createButton(
  743. 		{
  744. 			'id': "apc-scrollPrev",
  745. 			'alt': "△",
  746. 			'title': "Move to Previous",
  747. 		}
  748. 	);
  749. 	$scrollerBox.appendChild($scrollPrev);
  750. 	///panel/scr/ 次のページ
  751. 	const $scrollNext = $createButton(
  752. 		{
  753. 			'id': "apc-scrollNext",
  754. 			'alt': "▽",
  755. 			'title': "Move to Next",
  756. 		}
  757. 	);
  758. 	$scrollerBox.appendChild($scrollNext);
  759.  
  760. 	///panel/scr/ 最上部へ移動
  761. 	$scrollTop.addEventListener(
  762. 		'click', () => smoothScrollTo(0)
  763. 	);
  764. 	///panel/scr/ 最下部へ移動
  765. 	$scrollBottom.addEventListener(
  766. 		'click', () => smoothScrollTo(getBottomPos)
  767. 	);
  768. 	///panel/scr/ 前のページ
  769. 	$scrollPrev.addEventListener(
  770. 		'click', () => {
  771. 			smoothScrollTo( pageBounds.round( getNowPage(false) ) );
  772. 		}
  773. 	);
  774. 	///panel/scr/ 次のページ
  775. 	$scrollNext.addEventListener(
  776. 		'click', () => {
  777. 			const targetPage = getNowPage()+1;
  778. 			smoothScrollTo(
  779. 				targetPage < pageBounds.length ?
  780. 				pageBounds.round(targetPage) :
  781. 				getBottomPos
  782. 			);
  783. 		}
  784. 	);
  785.  
  786. 	const $spacingBox23 = document.createElement("div");
  787. 	$spacingBox23.className = "apc-spacing"
  788. 	$spacingBox23.style.order = 4;
  789. 	$panel.appendChild($spacingBox23);
  790.  
  791. 	///panel/ ページボックス
  792. 	const $pageIndexBox = $createBox();
  793. 	$pageIndexBox.id = "apc-pageIndexBox";
  794.  
  795. 	///panel/pageIndexBox/ ページ数表示
  796. 	const $sequencer = document.createElement("div");
  797. 	$sequencer.id = "apc-sequencer";
  798. 	const $sequencerNow = document.createElement("span");
  799. 	const $sequencerMax = document.createElement("span");
  800. 	$sequencerNow.textContent = $sequencerMax.textContent = "1";
  801. 	$sequencer.appendChild($sequencerNow);
  802. 	$sequencer.appendChild($sequencerMax);
  803. 	$pageIndexBox.appendChild($sequencer);
  804. 	$panel.appendChild($pageIndexBox);
  805.  
  806. 	///panel/pageIndexBox/ ページリスト
  807. 	const $pageList = document.createElement("ol");
  808. 	$pageList.id = "apc-pageList";
  809. 	$pageIndexBox.appendChild($pageList);
  810. 	// 新しいページリストアイテムにイベントを追加
  811. 	const $createPageListItem = num => {
  812. 		const $elm = document.createElement("li");
  813. 		$elm.className = "apc-pageListItem";
  814. 		$elm.textContent = num;
  815. 		// クリックでそのページにスクロール
  816. 		$elm.addEventListener(
  817. 			'click', function(){
  818. 				const targetNum = this.textContent-1;
  819. 				smoothScrollTo( pageBounds.round(targetNum) );
  820. 			}
  821. 		);
  822. //		// ダブルクリックでページ移動
  823. //		$elm.addEventListener(
  824. //			'dblclick', function(){
  825. //				const num = this.textContent-2;
  826. //				if( num >= 0 )
  827. //					document.getElementsByClassName("autopagerize_link")[num].href;
  828. //			}
  829. //		);
  830. 		return $elm;
  831. 	};
  832. 	$pageList.appendChild( $createPageListItem(1) );
  833.  
  834.  
  835.  
  836.  
  837.  
  838.  
  839. 	/// コンフィグメニューを作成
  840. 	// コンフィグコントロール管理クラス
  841. 	// 基底クラス
  842. 	class ConfigControl {
  843. 		constructor(name, options){
  844. 			this.name = name;
  845. 			this.defaultValue = options.defaultValue || 0;
  846. 			this.onchange_ = options.onchange || null;
  847. 		}
  848.  
  849. 		get state(){
  850. 			return this.value;
  851. 		}
  852. 		set state(val){
  853. 			this.value = val;
  854. 			this.onchange();
  855. 		}
  856. 		onchange(){
  857. 			if( typeof(this.onchange_) == "function" ) this.onchange_();
  858. 		}
  859. 		getInitial(){
  860. 			return this.defaultValue || 0;
  861. 		}
  862. 		setDefault(){
  863. 			this.state = this.defaultValue;
  864. 		}
  865. 		restoreState(params){
  866. 			const val = params[this.name];
  867. 			if( val == null ){
  868. 				this.setDefault();
  869. 			}else{
  870. 				this.state = val;
  871. 			}
  872. 		}
  873. 		/* 仮想関数
  874. 		 * 継承先のクラスでこれらをオーバーライドする
  875. 		 * オーバーライドされていなければバグなのでwarn
  876. 		 */
  877. 		/* virtual */get value(){
  878. 			console.warn("virtual get value", this.name);
  879. 			return null;
  880. 		}
  881. 		/* virtual */set value(val){
  882. 			console.warn("virtual set value", this.name);
  883. 		}
  884. 		/* virtual */appendTo($to){
  885. 			console.warn("virtual appendTo", this.name);
  886. 		}
  887. 	}
  888. 	// NumericUpDown管理クラス
  889. 	class NumericSet extends ConfigControl {
  890. 		constructor(name, options, attr){
  891. 			super(name, options);
  892.  
  893. 			this.$numeric = document.createElement("input");
  894. 			this.$numeric.type = 'number';
  895. 			this.$numeric.name = name;
  896. 			this.$numeric.value = this.getInitial();
  897. 			this.$numeric.attr(attr);
  898. 			
  899. 			this.$numeric.addEventListener(
  900. 				'change', () => this.onchange()
  901. 			);
  902. 		}
  903. 		get value(){
  904. 			if( isNaN(this.$numeric.value) ){
  905. 				this.$numeric.value = this.defaultValue;
  906. 			}
  907. 			return this.$numeric.value;
  908. 		}
  909. 		set value(val){
  910. 			this.$numeric.value = parseInt(val, 10) || this.defaultValue;
  911. 		}
  912. 		appendTo($to){
  913. 			$to.appendChild(this.$numeric);
  914. 		}
  915. 	}
  916. 	// コンボボックス管理クラス
  917. 	class ComboSet extends ConfigControl{
  918. 		constructor(name, options){
  919. 			super(name, options);
  920.  
  921. 			this.$combo = document.createElement("select");
  922. 			this.$combo.attr("name", name);
  923. 			this.$combo.addEventListener(
  924. 				'change', () => this.onchange()
  925. 			);
  926.  
  927. 			if( options.items != null ){
  928. 				this.addItems(options.items, this.getInitial());
  929. 			}
  930.  
  931. 		}
  932. 		get value(){
  933. 			return this.$combo.value;
  934. 		}
  935. 		set value(val){
  936. 			this.selectItem(val);
  937. 		}
  938. 		addItems(itemParams, sel = null){
  939. 			itemParams.forEach(
  940. 				(elm, i) => {
  941. 					let value, text;
  942. 					if( typeof(elm) == "string" ){
  943. 						value = text = elm;
  944. 					}else{
  945. 						value = elm.value;
  946. 						text = elm.text || value;
  947. 					}
  948. 					const $item = document.createElement("option");
  949. 					$item.value = value || "option"+i;
  950. 					$item.textContent = text || $item.value;
  951. 					this.$combo.appendChild($item);
  952. 				}
  953. 			);
  954. 			if( sel != null ) this.selectItem(sel);
  955. 		}
  956. 		selectItem(target){
  957. 			if( typeof target == "number" ){
  958. 				this.$combo.selectedIndex = target;
  959. 			}else if( typeof target == "string" ){
  960. 				this.$combo.value = target;
  961. 			}
  962. 		}
  963. 		appendTo($to){
  964. 			$to.appendChild(this.$combo);
  965. 		}
  966. //		isDefault(){
  967. //			if( typeof this.defaultValue == "number" ){
  968. //				return this.$combo.selectedIndex == this.defaultValue;
  969. //			}else if( typeof this.defaultValue == "string" ){
  970. //				return this.$combo.value == this.defaultValue;
  971. //			}
  972. //			return false;
  973. //		}
  974. 	}
  975. 	// ラジオボタン管理クラス
  976. 	class RadioSet extends ConfigControl {
  977. 		constructor(name, options){
  978. 			super(name, options);
  979. 			this.selected_ = null;
  980. 			this.items = [];
  981.  
  982. 			if( options.items != null ){
  983. 				this.addItems( options.items, this.getInitial() );
  984. 			}
  985. 		}
  986. 		get state(){
  987. 			return this.selected_;
  988. 		}
  989. 		set state(val){
  990. 			if( val >= 0 && val < this.items.length ){
  991. 				this.selected_ = val;
  992. 				this.items[val].$radio.checked = true;
  993. 				this.onchange();
  994. 			}
  995. 		}
  996. 		selectedIndex(){
  997. 			return this.selected_;
  998. 		}
  999. 		selectedItem(){
  1000. 			let i = this.selectedIndex();
  1001. 			if( i < 0 || i >= this.items.length ){
  1002. 				i = this.defaultValue;
  1003. 			}
  1004. 			return this.items[i];
  1005. 		}
  1006. //		isDefault(){
  1007. //			return this.selectedIndex() == this.defaultValue;
  1008. //		}
  1009.  
  1010. 		addItems(itemParams, sel = null){
  1011. 			itemParams.forEach(
  1012. 				(elm, i) => {
  1013. 					const nameItem = `${this.name}-item-${i}`;
  1014. 					const forId = elm.id    || nameItem;
  1015. 					const value = elm.value || nameItem;
  1016. 					const title = elm.title || nameItem;
  1017. 					const text  = elm.text  || nameItem;
  1018.  
  1019. 					const $label = document.createElement("label");
  1020. 					$label.attr(
  1021. 						{
  1022. 							'for':   forId,
  1023. 							'title': title,
  1024. 						}
  1025. 					);
  1026. 					const $radio = document.createElement("input");
  1027. 					$radio.attr(
  1028. 						{
  1029. 							'type': "radio",
  1030. 							'name': this.name,
  1031. 							'id':   forId,
  1032. 						}
  1033. 					);
  1034. 					$radio.addEventListener(
  1035. 						'change', () => {
  1036. 							this.selected_ = i;
  1037. 							this.onchange();
  1038. 						}
  1039. 					);
  1040. 					$label.appendChild( $radio );
  1041. 					$label.appendChild( document.createTextNode(text) );
  1042.  
  1043. 					this.items.push(
  1044. 						{
  1045. 							'value':  value,
  1046. 							'$radio': $radio,
  1047. 							'$label': $label
  1048. 						}
  1049. 					);
  1050. 				}
  1051. 			);
  1052.  
  1053. 			if( sel != null ) this.state = sel;
  1054. 		}
  1055. 		appendTo($to){
  1056. 			this.items.forEach(
  1057. 				elm => $to.appendChild( elm.$label )
  1058. 			);
  1059. 		}
  1060. 	}
  1061.  
  1062. 	
  1063. 	// コンフィグダイアログ
  1064. 	const $configDialog = document.createElement("div");
  1065. 	$configDialog.id = "apc-configDialog";
  1066. 	$configDialog.addEventListener(
  1067. 		'click', () => config.close()
  1068. 	);
  1069. 	document.body.appendChild($configDialog);
  1070.  
  1071. 	/// コンフィグメニュー
  1072. 	const $config = document.createElement("div");
  1073. 	$config.id = "apc-config";
  1074. 	// バブリングストップ
  1075. 	$config.addEventListener(
  1076. 		'click', e => e.stopPropagation()
  1077. 	);
  1078. 	$configDialog.appendChild($config);
  1079.  
  1080.  
  1081. 	const $createH4 = (title, text) => {
  1082. 		const $h4 = document.createElement("h4");
  1083. 		$h4.title = title;
  1084. 		$h4.textContent = text;
  1085. 		return $h4;
  1086. 	};
  1087. 	///config/ 表示する条件
  1088. 	$config.appendChild( $createH4( "コンソールパネルが表示されるページ", "Page where APC-panel exists") );
  1089. 	const radioDisplayRule = new RadioSet(
  1090. 		"display_rule",
  1091. 		{
  1092. 			'onchange': function(){
  1093. 				$panel.attr(this.name, this.selectedItem().value);
  1094. 			},
  1095. 			'items': [
  1096. 			{
  1097. 				'id': "apc-mdAlways",
  1098. 				'value': "always",
  1099. 				'text': "always",
  1100. 				'title': "常に表示",
  1101. 			},
  1102. 			{
  1103. 				'id': "apc-mdValid",
  1104. 				'value': "valid",
  1105. 				'text': "only when \"AutoPagerize\" is valid",
  1106. 				'title': "AutoPagerizeが有効なページであれば表示\n（Alt+Ctrl+pで設定画面を表示）",
  1107. 			}
  1108. 			]
  1109. 		}
  1110. 	);
  1111. //	radioDisplayRule.isAlways = function(){
  1112. //		return this.selectedItem() == 0;
  1113. //	};
  1114. //	radioDisplayRule.isValid = function(){
  1115. //		return this.selectedItem() == 1;
  1116. //	};
  1117. 	radioDisplayRule.appendTo($config);
  1118.  
  1119. 	///config/position/ マウスが外れている時の表示
  1120. 	$config.appendChild(
  1121. 		$createH4(
  1122. 			"マウスが外れている時の表示",
  1123. 			"Appearance when non-hover"
  1124. 		)
  1125. 	);
  1126. 	const radioNonHover = new RadioSet(
  1127. 		"non_hover",
  1128. 		{
  1129. 			'onchange': function(){
  1130. 				$panel.attr(this.name, this.selectedItem().value);
  1131. 			},
  1132. 			'items': [
  1133. 			{
  1134. 				'id': "apc-no_change",
  1135. 				'value': "no_change",
  1136. 				'text': "No change",
  1137. 				'title': "変更しない",
  1138. 			},
  1139. 			{
  1140. 				'id': "apc-transparent",
  1141. 				'value': "transparent",
  1142. 				'text': "Transparent",
  1143. 				'title': "背景を透過",
  1144. 			},
  1145. 			{
  1146. 				'id': "apc-stealth",
  1147. 				'value': "stealth",
  1148. 				'text': "Stealth",
  1149. 				'title': "隠れる",
  1150. 			}
  1151. 			]
  1152. 		}
  1153. 	);
  1154. 	radioNonHover.appendTo($config);
  1155.  
  1156. 	const $createInputRow = (title, text) => {
  1157. 		const $row = document.createElement("div");
  1158. 		$row.className = "apc-mItem";
  1159. 		$row.title = title;
  1160. 		$row.textContent = text;
  1161. 		return $row;
  1162. 	};
  1163. 	const $createGroupBox = subject => {
  1164. 		const $box = document.createElement("div");
  1165. 		$box.className = "apc-group";
  1166. 		const $subject = document.createElement("h5");
  1167. 		$subject.textContent = subject;
  1168. 		$box.appendChild($subject);
  1169. 		return $box;
  1170. 	};
  1171. 	/// 位置設定
  1172. 	const UpdatePanelPos = () => {
  1173. 		$panel.style[comboPanelPosY.value] =
  1174. 		  numericPanelPosValue.value + comboPanelPosUnit.value;
  1175. 	};
  1176. 	const UpdateBoxPos = ($elm, val) => {
  1177. 		$elm.style.height = val+"px";
  1178. 	};
  1179. 	const UpdateAllPositon = () => {
  1180. 		UpdatePanelPos();
  1181. 		UpdateBoxPos( $spacingBox12, numericSpecing12.value);
  1182. 		UpdateBoxPos( $spacingBox23, numericSpecing23.value);
  1183. 	};
  1184. 	///config/ 位置
  1185. 	$config.appendChild( $createH4( "位置設定", "Expression style") );
  1186.  
  1187. 	//config/position/ パネル位置
  1188. 	const $panelPos = $createInputRow(
  1189. 		"パネル位置",
  1190. 		"panel position Y:"
  1191. 	);
  1192. 	$config.appendChild($panelPos);
  1193.  
  1194. 	///config/position/panelPos/ 使用単位
  1195. 	const comboPanelPosY = new ComboSet(
  1196. 		"panel_position_y", {
  1197. 			'items': [
  1198. 			{ 'value': "top",    'text': "Top"},
  1199. 			{ 'value': "bottom", 'text': "Bottom"} ],
  1200. 			'onchange': () => {
  1201. 				$panel.style.removeProperty("top");
  1202. 				$panel.style.removeProperty("bottom");
  1203. 				UpdatePanelPos();
  1204. 			}
  1205. 		}
  1206. 	);
  1207. 	comboPanelPosY.appendTo($panelPos);
  1208. 	///config/position/panelPos/ 座標
  1209. 	const numericPanelPosValue = new NumericSet(
  1210. 		"panel_position_value", {
  1211. 			'defaultValue': 48,
  1212. 			'onchange': UpdatePanelPos,
  1213. 		}
  1214. 	);
  1215. 	numericPanelPosValue.appendTo($panelPos);
  1216. 	///config/position/panelPos/ 使用単位
  1217. 	const comboPanelPosUnit = new ComboSet(
  1218. 		"panel_position_unit", {
  1219. 			'items': ["px","%"],
  1220. 			'onchange': UpdatePanelPos,
  1221. 		}
  1222. 	);
  1223. 	comboPanelPosUnit.appendTo($panelPos);
  1224. 	
  1225. 	///config/position/ オプションボックス
  1226. 	const $optionGroup = $createGroupBox("Option box");
  1227. 	$config.appendChild($optionGroup);
  1228. 	///config/position/optionBox/ 並び順
  1229. 	const $optionOrder = $createInputRow( "並び順", "Order:");
  1230. 	$config.appendChild($optionOrder);
  1231. 	const numericOptionOrder = new NumericSet(
  1232. 		"option_order",
  1233. 		{
  1234. 			'defaultValue': 1,
  1235. 			'onchange': function(){
  1236. 				$optionBox.style.order = this.value*2-1;
  1237. 			},
  1238. 		},
  1239. 		{ 'min': 1, 'max': 3}
  1240. 	);
  1241. 	numericOptionOrder.appendTo($optionOrder);
  1242. 	$optionGroup.appendChild($optionOrder);
  1243. 	/// 展開方向
  1244. 	const optionDirOptions = {
  1245. 		'items':
  1246. 		[ "Left", "Right", "Up", "Down",
  1247. 		{value: "Up_protrude", text: "Up (protrude)"},
  1248. 		{value: "Down_protrude", text: "Down (protrude)"} ],
  1249. 		'onchange': function(){
  1250. 			$optionBox.attr(this.name, this.value);
  1251. 		}
  1252. 	};
  1253. 	///config/position/optionBox/ 有効ページでの展開方向
  1254. 	const $optionValidForm = $createInputRow(
  1255. 		"Autopagerizeが有効なページでの展開方向",
  1256. 		"Direction when AP is valid:"
  1257. 	);
  1258. 	const comboOptionDirValid = new ComboSet(
  1259. 		"option_dir_valid", optionDirOptions
  1260. 	);
  1261. 	comboOptionDirValid.appendTo($optionValidForm);
  1262. 	$optionGroup.appendChild($optionValidForm);
  1263. 	///config/position/optionBox/ 対象外ページの展開方向
  1264. 	const $optionInvalidForm = $createInputRow(
  1265. 		"Autopagerizeが有効でないページでの展開方向",
  1266. 		"Direction when AP is invalid:"
  1267. 	);
  1268. 	const comboOptionDirInvalid = new ComboSet(
  1269. 		"option_dir_invalid", optionDirOptions
  1270. 	);
  1271. 	comboOptionDirInvalid.appendTo($optionInvalidForm);
  1272. 	$optionGroup.appendChild($optionInvalidForm);
  1273.  
  1274. 	///config/position/scrollerBox/ BOX1とBOX2の間隔
  1275. 	const $specing12 = $createInputRow(
  1276. 		"BOX1とBOX2の間隔",
  1277. 		"Specing between to BOX1 and BOX2:"
  1278. 	);
  1279. 	const numericSpecing12 = new NumericSet(
  1280. 		"spacing_12",
  1281. 		{
  1282. 			'onchange': function(){
  1283. 				UpdateBoxPos( $spacingBox12, this.value);
  1284. 			}
  1285. 		}
  1286. 	);
  1287. 	numericSpecing12.appendTo($specing12);
  1288. 	$specing12.appendChild(document.createTextNode(" px"));
  1289. 	$config.appendChild($specing12);
  1290.  
  1291. 	///config/position/ スクローラーボックス
  1292. 	const $scrollerGroup = $createGroupBox("Scroller box");
  1293. 	$config.appendChild($scrollerGroup);
  1294. 	///config/position/scrollerBox/ 並び順
  1295. 	const $scrollerOrder = $createInputRow( "並び順", "Order:");
  1296. 	$config.appendChild($scrollerOrder);
  1297. 	const numericScrollerOrder = new NumericSet(
  1298. 		"scroller_order",
  1299. 		{
  1300. 			'defaultValue': 2,
  1301. 			'onchange': function(){
  1302. 				$scrollerBox.style.order = this.value*2-1;
  1303. 			}
  1304. 		},
  1305. 		{ 'min': 1, 'max': 3}
  1306. 	);
  1307. 	numericScrollerOrder.appendTo($scrollerOrder);
  1308. 	$scrollerGroup.appendChild($scrollerOrder);
  1309. 	///config/position/scrollerBox/ 配置形状
  1310. 	const $scrollerForm = $createInputRow(
  1311. 		"配置形状\n（AP対象外ページでは自動的にボタンが２つになるので無視される）",
  1312. 		"Form when AP is valid:"
  1313. 	);
  1314. 	const comboScrollerForm = new ComboSet(
  1315. 		"scroller_form", {
  1316. 			'items': ["Slim","Square"],
  1317. 			'onchange': function(){
  1318. 				$scrollerBox.attr( this.name, this.value);
  1319. 			}
  1320. 		}
  1321. 	);
  1322. 	comboScrollerForm.appendTo($scrollerForm);
  1323. 	$scrollerGroup.appendChild($scrollerForm);
  1324.  
  1325. 	///config/position/pageIndexBox/ BOX2とBOX3の間隔
  1326. 	const $specing23 = $createInputRow(
  1327. 		" BOX2とBOX3の間隔",
  1328. 		"Specing between to BOX2 and BOX3:"
  1329. 	);
  1330. 	const numericSpecing23 = new NumericSet(
  1331. 		"spacing_23",
  1332. 		{
  1333. 			'onchange': function(){
  1334. 				UpdateBoxPos( $spacingBox23, this.value);
  1335. 			}
  1336. 		}
  1337. 	);
  1338. 	numericSpecing23.appendTo($specing23);
  1339. 	$specing23.appendChild(document.createTextNode(" px"));
  1340. 	$config.appendChild($specing23);
  1341. 	
  1342. 	///config/position/ ページインデックスボックス
  1343. 	const $pageIndexGroup = $createGroupBox("PageIndex box");
  1344. 	$config.appendChild($pageIndexGroup);
  1345. 	///config/position/pageIndexBox/ 並び順
  1346. 	const $pageIndexOrder = $createInputRow( "並び順", "Order:");
  1347. 	$config.appendChild($pageIndexOrder);
  1348. 	const numericPageIndexOrder = new NumericSet(
  1349. 		"pageindex_order",
  1350. 		{
  1351. 			'defaultValue': 3,
  1352. 			'onchange': function(){
  1353. 				$pageIndexBox.style.order = this.value*2-1;
  1354. 			}
  1355. 		},
  1356. 		{ 'min': 1, 'max': 3}
  1357. 	);
  1358. 	numericPageIndexOrder.appendTo($pageIndexOrder);
  1359. 	$pageIndexGroup.appendChild($pageIndexOrder);
  1360. 	///config/position/pageIndexBox/ 配置形状
  1361. 	const $pageIndexForm = $createInputRow(
  1362. 		"配置形状\n（AP対象外ページでは自動的に非表示となるので無視される）",
  1363. 		"Form when AP is valid:"
  1364. 	);
  1365. 	const comboPageIndexForm = new ComboSet(
  1366. 		"page_index_form",
  1367. 		{
  1368. 			'items': ["Pile", "Strip", "Growed Pile"],
  1369. 			'onchange': function(){
  1370. 				$pageIndexBox.attr( this.name, this.value);
  1371. 			}
  1372. 		}
  1373. 	);
  1374. 	comboPageIndexForm.appendTo($pageIndexForm);
  1375. 	$pageIndexGroup.appendChild($pageIndexForm);
  1376. 	///config/position/pageIndexBox/ 展開方向
  1377. 	const $pageListExpand = $createInputRow(
  1378. 		"展開方向",
  1379. 		"Page-list expand direction:"
  1380. 	);
  1381. 	const comboPageListExpand = new ComboSet(
  1382. 		"page_list_expand",
  1383. 		{
  1384. 			'items': [
  1385. 			"Upper", "Lower",
  1386. 			"Left-upper", "Left-lower",
  1387. 			"Right-upper", "Right-lower"
  1388. 			],
  1389. 			'defaultValue': "Lower",
  1390. 			'onchange': function(){
  1391. 				$pageIndexBox.attr( this.name, this.value);
  1392. 			}
  1393. 		}
  1394. 	);
  1395. 	comboPageListExpand.appendTo($pageListExpand);
  1396. 	$pageIndexGroup.appendChild($pageListExpand);
  1397.  
  1398.  
  1399.  
  1400. 	const $mButtons = document.createElement("div");
  1401. 	$mButtons.id = "apc-mButtons";
  1402. 	$config.appendChild($mButtons);
  1403.  
  1404. 	///config/ 閉じるボタン
  1405. 	const $mCloseDecision = document.createElement("input");
  1406. 	$mCloseDecision.attr(
  1407. 		{
  1408. 			'id': "apc-mCloseDecision",
  1409. 			'class': "apc-config_button",
  1410. 			'type': "button",
  1411. 			'value': "OK",
  1412. 		}
  1413. 	);
  1414. 	$mCloseDecision.addEventListener(
  1415. 		'click', () => config.close()
  1416. 	);
  1417. 	$mButtons.appendChild($mCloseDecision);
  1418. 	const $mCloseCancel = document.createElement("input");
  1419. 	$mCloseCancel.attr(
  1420. 		{
  1421. 			'id': "apc-mCloseCancel",
  1422. 			'class': "apc-config_button",
  1423. 			'type': "button",
  1424. 			'value': "Cancel",
  1425. 		}
  1426. 	);
  1427. 	$mCloseCancel.addEventListener(
  1428. 		'click', () => config.close(false)
  1429. 	);
  1430. 	$mButtons.appendChild($mCloseCancel);
  1431.  
  1432.  
  1433. 	class Config {
  1434. 		constructor(name, options = null){
  1435. 			this.name = name;
  1436. 			this.tempParams = null;
  1437. 			this.init(options);
  1438. 		}
  1439. 		init(options){
  1440. 			if( options == null ) return;
  1441. 			if( options.items != null ) this.items = options.items;
  1442. 			if( options.onopen != null ) this.onopen_  = options.onopen;
  1443. 			if( options.onclose != null ) this.onclose_ = options.onclose;
  1444. 		}
  1445. 		open(){
  1446. 			this.tempParams = this.getParams();
  1447. 			if( typeof this.onopen_ == "function" ){ this.onopen_(); }
  1448. 		}
  1449. 		close(decision = true){
  1450. 			if( decision ) this.save();
  1451. 			else this.restore(this.tempParams);
  1452. 			this.tempParams = null;
  1453.  
  1454. 			if( typeof this.onclose_ == "function" ){ this.onclose_(); }
  1455. 		}
  1456. 		restore(params){
  1457. 			if( params == null ){
  1458. 				this.items.forEach( elm => elm.setDefault() );
  1459. 			}else{
  1460. 				this.items.forEach( elm => elm.restoreState(params) );
  1461. 			}
  1462. 		}
  1463. 		getParams(){
  1464. 			const params = {};
  1465. 			this.items.forEach(
  1466. 				elm => params[elm.name] = elm.state
  1467. 			);
  1468. 			return params;
  1469. 		}
  1470. 		save(){
  1471. 			GM.setValue( this.name, this.getParams() );
  1472. 		}
  1473. 		load(){
  1474. 			GM.getValue( this.name, null).then(
  1475. 				result => this.restore(result)
  1476. 			);
  1477. 		}
  1478. 	}
  1479. 	const config = new Config(
  1480. 		"config",
  1481. 		{
  1482. 			'onopen': () => $panel.setAttribute("config", true),
  1483. 			'onclose': () => {
  1484. 				$panel.removeAttribute("config");
  1485. 				UpdateAllPositon();
  1486. 			},
  1487. 			'items': [
  1488. 			radioDisplayRule,        radioNonHover,
  1489. 			comboPanelPosY,
  1490. 			numericPanelPosValue,    comboPanelPosUnit,
  1491. 			numericOptionOrder,
  1492. 			comboOptionDirValid, comboOptionDirInvalid,
  1493. 			numericSpecing12,
  1494. 			numericScrollerOrder,
  1495. 			comboScrollerForm,
  1496. 			numericSpecing23,
  1497. 			numericPageIndexOrder,
  1498. 			comboPageIndexForm,
  1499. 			comboPageListExpand
  1500. 			]
  1501. 		}
  1502. 	);
  1503. 	const loadState = () => {
  1504. 		GM.getValue( apEnable.name, true).then(
  1505. 			result => {
  1506. 				FireEvent(
  1507. 					result?
  1508. 					'AutoPagerizeEnableRequest':
  1509. 					'AutoPagerizeDisableRequest'
  1510. 				);
  1511. 			}
  1512. 		);
  1513. 		config.load();
  1514. 		UpdateAllPositon();
  1515. 	};
  1516. 	loadState();
  1517.  
  1518. 	// タブを切り替えた時にステータスを最新に同期する
  1519. 	window.document.addEventListener(
  1520. 		'visibilitychange',
  1521. 		() => {
  1522. 			if( window.document.visibilityState == 'visible' ){
  1523. 				loadState();
  1524. 			}
  1525. 		}
  1526. 	);
  1527. })();