☰

MyShowBox

显示图片的库

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/515677/1576435/MyShowBox.js 

  1. // ==UserScript==
  2. // @name         MyShowBox
  3. // @version      2025.04.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. // ==/UserScript==
  12.  
  13. if(window.GAIL == null || window.Downloader == null){alert("GAIL or Downloader is null");}
  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.Set_downloadType("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.Set_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'));
  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. 			var src = img.attr('big_src') || img.attr('big-src') || null;
  150. 			console.log(src);
  151. 			if(!src){return;}
  152. 			img.attr('src',src);
  153. 			// $('.clickShowBox .item img').filter(function(){return $(this).attr('big_src')||$(this).attr('small_src') == img[0].src})
  154. 			// 							.attr('src',img[0].src);
  155. 		});
  156. 		Add_ClickShowBox_css();
  157. 		$('.clickShowBox').hide();
  158. 		Add_keyControl()
  159. 		return box;
  160. 	}
  161. 	
  162. 	function Add_ClickShowBox_css(){
  163. 		let css = `
  164. 		.clickShowBox{
  165. 			width: 100%;
  166. 			height: 100%;
  167. 			background-color: #2d2d2d;
  168. 			overflow: hidden;
  169. 			border-radius: 0vw;
  170. 			position: fixed;
  171. 			z-index: 9999;
  172. 		}
  173. 		.clickShowBox .item{
  174. 			width: 100%;
  175. 			height: 100%;
  176. 			background-color: #2D2D2D;
  177. 			display: flex;
  178. 			align-items: center;
  179. 			justify-content: center;
  180. 		}
  181. 		.clickShowBox .item img{
  182. 			max-width: 100%;
  183. 			height: auto;
  184. 			max-height: 100%;
  185. 		}
  186. 		.clickShowBox .pages{
  187. 			font-size: 5vw;
  188. 			color: rgba(255,255,255,0.5);
  189. 			position: fixed;
  190. 			top: 1.5vw;
  191. 			margin: 2vw;
  192. 			right:12vw
  193. 		}
  194. 		.clickShowBox .close{
  195. 			width: 10vw;
  196. 			height:10vw;
  197. 			font-size: 6vw;
  198. 			border-radius: 10vw;
  199. 			background-color: rgba(255,255,255,0.1);
  200. 			color: rgba(255,255,255,0.1);
  201. 			position: fixed;
  202. 			right: 0;
  203. 			top:0;
  204. 			margin: 2vw;
  205. 			font-weight: bold;
  206. 			border: none;
  207. 		}
  208. 		.clickShowBox .close:active{
  209. 			filter:invert(100%);
  210. 		}
  211. 		.clickShowBox .downloadBU{
  212. 			display: flex;
  213. 			flex-direction: row;
  214. 			position: fixed;
  215. 			bottom:0;
  216. 		}
  217. 		.clickShowBox .download
  218. 		,.clickShowBox .downloadall{
  219. 		    width:100%;
  220. 			font-size: 5vmin;
  221. 			aspect-ratio: 1/1;
  222. 			border-radius: 2vmin;
  223. 			background-color: #ff8a17;
  224. 			color: white;
  225. 			margin: 0 0 2vw 2vw;
  226. 			border: none;
  227. 			opacity: .4;
  228. 			position: relative;
  229. 		}
  230. 		.clickShowBox .download:active
  231. 		,.clickShowBox .downloadall:active{
  232. 			opacity: .6;
  233. 		}
  234. 		.clickShowBox .busy{
  235. 			animation: BU_busy infinite 1s linear;
  236. 		}
  237. 		@keyframes BU_busy{
  238. 			0%{top:0}
  239. 			25%{top:2vw}
  240. 			75%{top:-2vw}
  241. 			100%{top:0}
  242. 		}
  243. 		.clickShowBox .error{
  244. 			background-color: red;
  245. 		}
  246. 		.clickShowBox_ShowBu{
  247. 			width: 10vw;
  248. 			height: 10vw;
  249. 			border-radius: 10vw;
  250. 			background-color: orange;
  251. 			position: fixed;
  252. 			bottom: 30%;
  253. 			right: -5vw;
  254. 			z-index: 999999;
  255. 			display: flex;
  256. 			align-items: center;
  257. 			justify-content: center;
  258. 	
  259. 		}
  260. 		.clickShowBox_ShowBu::after{
  261. 			content: "";
  262. 			width: 70%;
  263. 			height: 70%;
  264. 			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>');
  265. 			background-size: cover;
  266. 			background-repeat: no-repeat;
  267. 			transform: scaleX(0.8);
  268. 		}
  269. 		`
  270. 		Add_css(css)
  271. 	}
  272. 	function BU_busy(bu){
  273. 		bu.addClass('busy');
  274. 	}
  275. 	function BU_done(bu){
  276. 		bu.removeClass('busy');
  277. 	}
  278. 	function BU_error(bu){
  279. 		bu.removeClass('busy');
  280. 		bu.addClass('error');
  281. 	}
  282. 	function BU_nomal(bu){
  283. 		bu.removeClass('busy').removeClass('error');
  284. 	}
  285. 	
  286. 	function Add_keyControl(){
  287. 		let downItem = $('<button><button>').click(function(){
  288. 			simulateClick($(window).width()/2,$(window).height()*0.8);
  289. 		})
  290. 		let upItem = $('<button><button>').click(function(){
  291. 			simulateClick($(window).width()/2,$(window).height()*0.2);
  292. 		})
  293. 		window.GAIL.AddKeyControl(downItem,upItem,null,null,true);
  294. 	}
  295. 	
  296. 	function ClickShowNext({img,onlyDown}){
  297. 		if(!$){return;}
  298. 		if(img.length<=1){console.log('only one img');return;}
  299. 		let item = $('.clickShowBox .item');
  300. 		$('.clickShowBox .pages').text(1+"/"+item.length);
  301. 		item.on("touchstart mousedown",function(event){
  302. 			if ($(window).height()>$(window).width() && event.type === 'mousedown'){return;}
  303. 			let y = event.clientY;
  304. 			if(event.touches){y = event.touches[0].clientY;}
  305. 			let index = item.index($(this));
  306. 			index = !onlyDown && y<$(this).height()/2 ? index-1:index+1;
  307. 			index = index>=0?Math.min(index,item.length-1):0
  308. 			item.eq(index)[0].scrollIntoView();
  309. 			$('.clickShowBox .pages').text((index+1)+"/"+item.length);
  310. 			nowIndex = index;
  311. 			Show_imgs(showNum);
  312. 		});
  313. 	}
  314. 	function Show_imgs(i){
  315. 		let img = $('.clickShowBox .item img[small_src][src=""]');
  316. 		let start = Math.max(0,nowIndex-i);
  317. 		let end = Math.min(img.length,nowIndex+i);
  318. 		img.slice(start,end).each(function(){
  319. 			this.src = $(this).attr('small_src');
  320. 		});
  321. 		console.log(`${start} ${end} ${img.length}`)
  322. 	}
  323. 	function Add_css(cssString){
  324. 		var style = document.createElement('style');
  325. 		style.type = 'text/css';
  326. 		style.innerHTML = cssString;
  327. 		document.body.appendChild(style);
  328. 	}
  329. }
  330.  
  331. window.ShowBox = ShowBox;
  332.  
  333. window.ShowBox.ShowInNewPage = (url)=>{
  334. 	GM_setValue('ShowBoxInNewPage','yes');
  335. 	window.open(url);
  336. 	const img = $('.clickShowBox img');
  337. 	GM_setValue('ShowBoxInNewPage_img',img.eq(0)[0].src);
  338. 	GM_setValue('ShowBoxInNewPage_num',img.length);
  339. 	let i = 1;
  340. 	let obo = setInterval(()=>{
  341. 		if(i==img.length){clearInterval(obo);return;}
  342. 		if(!GM_getValue('ShowBoxInNewPage_img')){
  343. 			GM_setValue('ShowBoxInNewPage_img',img.eq(++i).html());
  344. 		}
  345. 	},100);
  346. }
  347. window.ShowBox.Linsening_ShowInNewPage = ()=>{
  348. 	if(!GM_getValue('ShowBoxInNewPage')){
  349. 		return;
  350. 	}
  351. 	GM_deleteValue('ShowBoxInNewPage');
  352. 	const box = new window.ShowBox();
  353. 	let i = 0;
  354. 	let img = ''
  355. 	const num = Number(GM_getValue('ShowBoxInNewPage_num'));
  356. 	let obo = setInterval(()=>{
  357. 		if(i==num){GM_deleteValue('ShowBoxInNewPage_num');box.AddImgs($(img));clearInterval(obo);return;}
  358. 		if(GM_getValue('ShowBoxInNewPage_img')){
  359. 			img += GM_getValue('ShowBoxInNewPage_img')
  360. 			GM_deleteValue('ShowBoxInNewPage_img');
  361. 		}
  362. 	},100);
  363. }
  364. $(function(){
  365. 	window.ShowBox.Linsening_ShowInNewPage();
  366. })