☰

AutoPagerize_Console

Expansion Autopagerize operation. / AutoPagerizeの操作系を拡張します。

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