☰

MyShowBox

修复touch就滚两页的bug

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

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/515677/1525705/MyShowBox.js 

  1. // ==UserScript==
  2. // @name         MyShowBox
  3. // @version      2025.01.24
  4. // @description  修复touch就滚两页的bug
  5. // @author       You
  6. // @grant        none
  7. // @grant        GM_getValue
  8. // @grant        GM_setValue
  9. // @grant        GM_deleteValue
  10. // @grant        GM_download
  11. // @require https://update.greasyfork.org/scripts/480132/1476440/Get_all_img_Library.js
  12. // @require https://update.greasyfork.org/scripts/515674/1477309/MyDownloader.js
  13. // ==/UserScript==
  14.  
  15. /**
  16.  * 把图片全部添加到一个Showbox里的类,只能new一次
  17.  * @class
  18.  * @example
  19.  const showBox = new ShowBox();
  20.  showBox.Add(imgs);
  21.  
  22.  @ps Add函数只能调用一次
  23. */
  24. function ShowBox(){
  25. 	let imgs = null;
  26. 	let num = 10;
  27. 	let showNum = num;
  28. 	let nowIndex = 0;
  29. 	/**
  30. 	 * @type {Downloader}
  31. 	*/
  32. 	let downloader = window?.Downloader ? new window.Downloader() : (() => { throw new DOMException("Downloader does not exist"); })();
  33. 	let box = $('.clickShowBox').length > 0 ? $('.clickShowBox') : CreateShowBox()
  34. 	downloader.downloadType.value="GM_download";
  35. 	
  36. 	this.downloader = {get obj(){return downloader;}}
  37. 	/**
  38. 	 * 把图片全部添加到一个Showbox里
  39. 	 * @example Add(imgs)
  40. 	 * @param {JQuery} iimgs
  41. 	 * @ps 只能调用一次，等图片获取完了再调用
  42. 	*/
  43. 	this.Add = (iimgs)=>{
  44. 		imgs = iimgs;
  45. 		AddImgs();
  46. 	}
  47. 	
  48. 	/**
  49. 	 * @example controlType = "mouse"
  50. 	*/
  51. 	this.controlType = "mouse";
  52. 	
  53. 	/**
  54. 	 * 设置一次预加载多少图片，默认是10
  55. 	 * @example SetShowNum = 20
  56. 	 * @param {number} n 
  57. 	 * @ps 未加载的图片src为空，只有small_src和big_src
  58. 	*/
  59. 	this.SetShowNum = (n) => {showNum = num = n;}
  60. 	
  61. 	/**
  62. 	 * @param {string} type - {GM_download / atag / blob}
  63. 	*/
  64. 	this.Set_donwloadType = (type)=>{downloader.downloadType=type;}
  65.  
  66. 	/**
  67. 	 * 重写下载图片的方法
  68. 	 * @example SetDonloadFunction((imgs)=>{...})
  69. 	 * @param {function(JQuery)} foo - (imgs)=>{}
  70. 	*/
  71. 	this.SetDonloadFunction = (foo)=>{downloader.Download_img = foo;}
  72. 	
  73. 	function AddImgs(){
  74. 		imgs.each(function(){
  75. 			const item = $('<div class="item"></div>')
  76. 				.append($('<img>').attr({'small_src':this.src,src:"",'big_src':$(this).attr('big_src')}));
  77. 			$('.clickShowBox').append(item);
  78. 		})
  79. 		ClickShowNext({img:$('img'),onlyDown:false});
  80. 	}
  81. 	function CreateShowBox(){
  82. 		let box = `
  83. 		<div class="clickShowBox">
  84. 			<p class="pages">1/10</p>
  85. 			<button class="close">x</button>
  86. 			<div class="downloadBU">
  87. 				<button class="download">↓</button>
  88. 				<button class="downloadall">↓↓</button>
  89. 			</div>
  90. 		</div>
  91. 		<div class="clickShowBox_ShowBu"></div>
  92. 		`
  93. 		box = $(box);
  94. 		$('body').prepend(box);
  95. 		
  96. 		$('.clickShowBox .close').click(function(){
  97. 			$('.clickShowBox').fadeOut();
  98. 			$('.clickShowBox_ShowBu').show()
  99. 		})
  100. 		$('.clickShowBox_ShowBu').click(function(){
  101. 			$('.clickShowBox').fadeIn();
  102. 			$(this).hide();
  103. 			Show_imgs(num);
  104. 		})
  105. 		$('.clickShowBox .download').click(function(){
  106. 			BU_nomal($(this))
  107. 			const img = $('.clickShowBox .item img').eq(nowIndex);
  108. 			let src = img[0].src;
  109. 			if(img.attr('big_src')){
  110. 				src = img.attr('big_src');
  111. 				img[0].src = src;
  112. 			}
  113. 			let name = document.title + new Date().getTime() + src.match(/\.jpg|\.jpeg|\.webp|\.png/g)[0];
  114. 			if(img.attr('name')){
  115. 				name = img.attr('name');
  116. 			}
  117. 			BU_busy($(this))
  118. 			try{
  119. 				GM_download({
  120. 					url:src,
  121. 					name:name,
  122. 					onload:function(){
  123. 						BU_done($('.download'));
  124. 					},
  125. 					error:function(){
  126. 						BU_error($('.download'));
  127. 					}
  128. 				})
  129. 			}catch(error){
  130. 				console.log(error);
  131. 				BU_error($('.download'));
  132. 			}
  133. 		})
  134. 		
  135. 		$('.clickShowBox .downloadall').click(function(){
  136. 			BU_busy($(this));
  137. 			try{
  138. 				console.log(downloader)
  139. 				downloader?.Download_img($('.clickShowBox .item img').clone());
  140. 			}catch(error){
  141. 				console.log(error);
  142. 				BU_error($(this));
  143. 			}
  144. 		})
  145. 		downloader.AllComplete(()=>{
  146. 			BU_done($('.clickShowBox .downloadall'));
  147. 		});
  148. 		downloader.OneSuccess((img)=>{
  149. 			$('.clickShowBox .item img').filter(function(){return $(this).attr('big_src')||$(this).attr('small_src') == img[0].src})
  150. 										.attr('src',img[0].src);
  151. 		});
  152. 		Add_ClickShowBox_css();
  153. 		$('.clickShowBox').hide();
  154. 		Add_keyControl()
  155. 		return box;
  156. 	}
  157. 	
  158. 	function Add_ClickShowBox_css(){
  159. 		let css = `
  160. 		.clickShowBox{
  161. 			width: 100%;
  162. 			height: 100vh;
  163. 			background-color: #2d2d2d;
  164. 			overflow: hidden;
  165. 			border-radius: 0vw;
  166. 			position: fixed;
  167. 			z-index: 9999;
  168. 		}
  169. 		.clickShowBox .item{
  170. 			width: 100%;
  171. 			height: 100%;
  172. 			background-color: #2D2D2D;
  173. 			display: flex;
  174. 			align-items: center;
  175. 			justify-content: center;
  176. 		}
  177. 		.clickShowBox .item img{
  178. 			max-width: 100%;
  179. 			height: auto;
  180. 			max-height: 100%;
  181. 		}
  182. 		.clickShowBox .pages{
  183. 			font-size: 5vw;
  184. 			color: rgba(255,255,255,0.5);
  185. 			position: fixed;
  186. 			top: 1.5vw;
  187. 			margin: 2vw;
  188. 			right:12vw
  189. 		}
  190. 		.clickShowBox .close{
  191. 			width: 10vw;
  192. 			height:10vw;
  193. 			font-size: 6vw;
  194. 			border-radius: 10vw;
  195. 			background-color: rgba(255,255,255,0.1);
  196. 			color: rgba(255,255,255,0.1);
  197. 			position: fixed;
  198. 			right: 0;
  199. 			top:0;
  200. 			margin: 2vw;
  201. 			font-weight: bold;
  202. 			border: none;
  203. 		}
  204. 		.clickShowBox .close:active{
  205. 			filter:invert(100%);
  206. 		}
  207. 		.clickShowBox .downloadBU{
  208. 			display: flex;
  209. 			flex-direction: row;
  210. 			position: fixed;
  211. 			bottom:0;
  212. 		}
  213. 		.clickShowBox .download
  214. 		,.clickShowBox .downloadall{
  215. 			width: 10vmin;
  216. 			height: 10vmin;
  217. 			font-size: 5vmin;
  218. 			border-radius: 2vmin;
  219. 			background-color: #ff8a17;
  220. 			color: white;
  221. 			margin: 0 0 2vw 2vw;
  222. 			border: none;
  223. 			opacity: .4;
  224. 			position: relative;
  225. 		}
  226. 		.clickShowBox .download:active
  227. 		,.clickShowBox .downloadall:active{
  228. 			opacity: .6;
  229. 		}
  230. 		.clickShowBox .busy{
  231. 			animation: BU_busy infinite 1s linear;
  232. 		}
  233. 		@keyframes BU_busy{
  234. 			0%{top:0}
  235. 			25%{top:2vw}
  236. 			75%{top:-2vw}
  237. 			100%{top:0}
  238. 		}
  239. 		.clickShowBox .error{
  240. 			background-color: red;
  241. 		}
  242. 		.clickShowBox_ShowBu{
  243. 			width: 10vw;
  244. 			height: 10vw;
  245. 			border-radius: 10vw;
  246. 			background-color: orange;
  247. 			position: fixed;
  248. 			bottom: 30%;
  249. 			right: -5vw;
  250. 			z-index: 999999;
  251. 			display: flex;
  252. 			align-items: center;
  253. 			justify-content: center;
  254. 	
  255. 		}
  256. 		.clickShowBox_ShowBu::after{
  257. 			content: "";
  258. 			width: 70%;
  259. 			height: 70%;
  260. 			background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M 10 10 L 0 5 L 10 0 Z" fill="White"/></svg>');
  261. 			background-size: cover;
  262. 			background-repeat: no-repeat;
  263. 			transform: scaleX(0.8);
  264. 		}
  265. 		`
  266. 		Add_css(css)
  267. 	}
  268. 	function BU_busy(bu){
  269. 		bu.addClass('busy');
  270. 	}
  271. 	function BU_done(bu){
  272. 		bu.removeClass('busy');
  273. 	}
  274. 	function BU_error(bu){
  275. 		bu.removeClass('busy');
  276. 		bu.addClass('error');
  277. 	}
  278. 	function BU_nomal(bu){
  279. 		bu.removeClass('busy').removeClass('error');
  280. 	}
  281. 	
  282. 	function Add_keyControl(){
  283. 		let downItem = $('<button><button>').click(function(){
  284. 			simulateClick($(window).width()/2,$(window).height()*0.8);
  285. 		})
  286. 		let upItem = $('<button><button>').click(function(){
  287. 			simulateClick($(window).width()/2,$(window).height()*0.2);
  288. 		})
  289. 		window?.GAIL?.AddKeyControl(downItem,upItem,null,null,true);
  290. 	}
  291. 	
  292. 	function ClickShowNext({img,onlyDown}){
  293. 		if(!$){return;}
  294. 		if(img.length<=1){console.log('only one img');return;}
  295. 		let item = $('.clickShowBox .item');
  296. 		$('.clickShowBox .pages').text(1+"/"+item.length);
  297. 		item.on("touchstart mousedown",function(event){
  298. 			let y = event.clientY;
  299. 			if(event.touches){y = event.touches[0].clientY;}
  300. 			let index = item.index($(this));
  301. 			index = !onlyDown && y<$(this).height()/2 ? index-1:index+1;
  302. 			index = index>=0?Math.min(index,item.length-1):0
  303. 			item.eq(index)[0].scrollIntoView();
  304. 			$('.clickShowBox .pages').text((index+1)+"/"+item.length);
  305. 			nowIndex = index;
  306. 			Show_imgs(showNum);
  307. 		});
  308. 	}
  309. 	function Show_imgs(i){
  310. 		let img = $('.clickShowBox .item img[small_src][src=""]');
  311. 		let start = Math.max(0,nowIndex-i);
  312. 		let end = Math.min(img.length,nowIndex+i);
  313. 		img.slice(start,end).each(function(){
  314. 			this.src = $(this).attr('small_src');
  315. 		});
  316. 		console.log(`${start} ${end} ${img.length}`)
  317. 	}
  318. 	function Add_css(cssString){
  319. 		var style = document.createElement('style');
  320. 		style.type = 'text/css';
  321. 		style.innerHTML = cssString;
  322. 		document.body.appendChild(style);
  323. 	}
  324. }
  325.  
  326. window.ShowBox = ShowBox;
  327.  
  328. window.ShowBox.ShowInNewPage = (url)=>{
  329. 	GM_setValue('ShowBoxInNewPage','yes');
  330. 	window.open(url);
  331. 	const img = $('.clickShowBox img');
  332. 	GM_setValue('ShowBoxInNewPage_img',img.eq(0)[0].src);
  333. 	GM_setValue('ShowBoxInNewPage_num',img.length);
  334. 	let i = 1;
  335. 	let obo = setInterval(()=>{
  336. 		if(i==img.length){clearInterval(obo);return;}
  337. 		if(!GM_getValue('ShowBoxInNewPage_img')){
  338. 			GM_setValue('ShowBoxInNewPage_img',img.eq(++i).html());
  339. 		}
  340. 	},100);
  341. }
  342. window.ShowBox.Linsening_ShowInNewPage = ()=>{
  343. 	if(!GM_getValue('ShowBoxInNewPage')){
  344. 		return;
  345. 	}
  346. 	GM_deleteValue('ShowBoxInNewPage');
  347. 	const box = new window.ShowBox();
  348. 	let i = 0;
  349. 	let img = ''
  350. 	const num = Number(GM_getValue('ShowBoxInNewPage_num'));
  351. 	let obo = setInterval(()=>{
  352. 		if(i==num){GM_deleteValue('ShowBoxInNewPage_num');box.AddImgs($(img));clearInterval(obo);return;}
  353. 		if(GM_getValue('ShowBoxInNewPage_img')){
  354. 			img += GM_getValue('ShowBoxInNewPage_img')
  355. 			GM_deleteValue('ShowBoxInNewPage_img');
  356. 		}
  357. 	},100);
  358. }
  359. $(function(){
  360. 	window.ShowBox.Linsening_ShowInNewPage();
  361. })