// ==UserScript==
// @name         MaxShowBox
// @version      2026.02.18.01
// @description  最大程度显示图片的库
// @author       You
// @grant        none
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_download
// @require https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js
// ==/UserScript==
 
/**
 * 让图片放大到原始或满屏大小
 * @class
 * @example
 const maxShowBox = new MaxShowBox();
 MaxShowBox.Add_Img(img);
 如果想用按键+打开可以用MaxShowBox.ShowImgByKey(()=>img);
 
 @ps 每调用一次Add_Img显示一次Img;
*/
function MaxShowBox(){
	const MSB = this;
	const box = `<div class="max-show-box">
				<button class="closeBox">X</button>
				</div>
	           <style>
			       .max-show-box{
					   width:100vw;
					   height:100vh;
					   overflow:auto;
					   z-index:9999;
					   position:fixed;
					   top:0;
					   left:0;
					   background:#434343;
				   }
				   .max-show-box button{
					   width:20vmin;
					   height:20vmin;
					   border-radius:50%;
					   position:fixed;
					   bottom:0;
					   left:50%;
					   transform:translateX(-50%);
					   background: #272727;
					   color: #ffffff;
					   opacity: .5;
					   border: none;
				   }
				   .max-show-box img{
					   min-width:100vw;
					   min-height:100vh;
					   max-width:none;
					   max-height:none;
					   width:auto !important;
					   height:auto !important;
				   }
			   </style>
	`
	/**
	 * 最大显示一张图片
	 * @param {JQuery} img
	 * @example maxShowBox.Add_Img(img);
	*/
	this.Add_Img = (img=null)=>{
		if(!img) return;
		CreatBox();
		Add_Img(img);
		Add_scale_mover($('.max-show-box'),$('.max-show-box img'));
	}
	function PCAction(callback){
		if($(window).width()>$(window).height()) callback();
	}
	function CreatBox(){
		if($('.max-show-box').length==0){
			$('body').append(box);
			$('.max-show-box').hide();
			$('.max-show-box .closeBox').click(function(){
				$('.max-show-box').fadeOut();
			});
			PCAction(()=>{
				$('.max-show-box .closeBox').css({
					'z-index':99,
					'width':'100px',
					'height':'100px'
				});
				$('.max-show-box').on('wheel',(e)=>{console.log('scroll');
					e.preventDefault();  // 阻止默认滚动行为
				    e.stopPropagation(); // 阻止事件冒泡到 body
				    
					$('.max-show-box .closeBox').click();
				})
				$('body').on('click.maxshow','.max-show-box',function(){
					$('.max-show-box:visible').hide();
				})
			});
		}
	}
	function PrevImg(){
		const img = MSB.PrevImg();
		if(!img || img.length==0) return;
		$('.max-show-box img').attr('src',img[0].src);
	}
	function NextImg(){
		const img = MSB.NextImg();
		if(!img || img.length==0) return;
		$('.max-show-box img').attr('src',img[0].src);
	}
	this.PrevImg = ()=>null;
	this.NextImg = ()=>null;
	this.Download = ()=>{}
	this.ShowImgByKey = ()=>{return null}
	function Add_Img(img){
		const newimg = $('<img />').attr('src',img[0].src);
		$('.max-show-box img').remove();
		$('.max-show-box').append(newimg);
		$('.max-show-box').fadeIn();
	}
	
	let autoRun = false;
	/**
	 * 自动给图片加一个最大显示按钮，由body touchstart触发
	 * @param null
	 * @example maxShowBox.StartAutoRun();
	*/
	this.StartAutoRun = ()=>{
		autoRun = true;
		let scale = 1;
		document.addEventListener('keydown', function(event) {
			if($('.max-show-box:visible').length>0){
				if(event.key==="+") scale*=1.5;
				if(event.key==="-") scale/=1.5;
				$('.max-show-box img').css('--scale',scale);
			}
		  if (event.key === '+' || event.code === 'NumpadAdd') {
		    console.log('按下了加号键');
		    // 在这里执行你的逻辑
			MSB.Add_Img(MSB.ShowImgByKey());
			//$('.max-show-box .closeBox').hide();
			$('.max-show-box img').css('cursor','none');
		  }else{
			  switch(event.code){
				  case 'Numpad1':
					  PrevImg();
					  break;
				  case 'Numpad3':
					  NextImg();
					  break;
				  case 'NumpadDecimal':
					  MSB.Download();
					  break;
			  }
		  }
		});
		$('body').on('touchstart',()=>{
			if(!autoRun){return;}
			$('img:not([add-max-show-box]):not(.max-show-box img)').each(function(){
				$(this).attr('add-max-show-box','yes');
				const parent = $(this).parent();
				if(parent.css("position")!="absolute"||parent.css("position")!="relative"){
					parent.css("position","relative");
				}
				
				const img = $(this);
				const bu = $('<div>B</div>').css({
								'position': 'absolute',
								'bottom': '0px',
								'color': 'white',
								'font-size': '10vw',
								'background': '#0000005e'
						})
				img.after(bu);
				bu.click(function(event){
						event.stopPropagation();
						maxShowBox.Add_Img(img);
						ScrollToCenter($('.max-show-box'));
					});
			});
		});
	}
	/**
	 * 停止给图片加一个最大显示按钮
	 * @param null
	 * @example maxShowBox.StopAutoRun();
	*/
	this.StopAutoRun = ()=>{autoRun = false;}
	
	function ScrollToCenter(item){
		const sh = item[0].scrollHeight;
		const ch = item[0].clientHeight;
		const y = (sh-ch)/2;
		const sw = item[0].scrollWidth;
		const cw = item[0].clientWidth;
		const x = (sw-cw)/2;
		item[0].scrollTop = y;
		item[0].scrollLeft = x;
	}
	
	let Add_scale_mover_container_event = null
	function Add_scale_mover(container,img){
		container.css('overflow','hidden');
		img.css({
			'transform': 'translate(var(--x),var(--y)) scale(var(--scale))',
			'transform-origin': 'top left',
			'--scale':'1'
		})
		Add_scale_mover_container_event = function(event){
			const mouseX = event.clientX - container[0].getBoundingClientRect().left;
			const mouseY = event.clientY - container[0].getBoundingClientRect().top;
			
			const px = mouseX/container.width();
			const py = mouseY/container.height();
			let tx = (img[0].getBoundingClientRect().width-container.width())*px;
			let ty = (img[0].getBoundingClientRect().height-container.height())*py;
			tx = Math.floor(0-tx) + "px"
			ty = Math.floor(0-ty) + "px"
			img.css({
				"--x":tx,
				"--y":ty
			});
		}
		if(container.attr('add-event')){return;}
		container.on('mousemove mouseenter',function(event){
			Add_scale_mover_container_event(event);
		}).attr('add-event','yes')
	}
}
let maxShowBox = new MaxShowBox();
$(function(){ 
	maxShowBox.StartAutoRun();
})
window.MaxShowBox = maxShowBox;