☰

AutoPagerize_Console

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

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址