script.min.js

function SwitchImagePreview(e){if(!DragActive){for(let t=0;t<PreviewImage.children.length;t++)if(PreviewImage.children[t].attributes.uid.value==e){ActiveImagePreviewElement=PreviewImage.children[t];break}for(const t of PreviewImage.children)t.style.opacity=t.attributes.uid.value==e?1:0;for(const t of IMGs.children)void 0!==t.attributes.uid&&(t.attributes.uid.value==e?t.classList.add("active"):t.classList.remove("active"))}}function SwitchImagePreviewFromCursorPosition(){var e=document.elementFromPoint(CursorPosX,CursorPosY);e=TopDataElement(e),void 0!==e.attributes.uid&&SwitchImagePreview(e.attributes.uid.value)}function UpdateImagePosition(){const e=100;if(!(PreviewImage.children.length<1)){var t=ActiveImagePreviewElement.getBoundingClientRect();DragOffsetX>window.innerWidth-e&&(DragOffsetX=window.innerWidth-e),DragOffsetX+t.width<e&&(DragOffsetX=-t.width+e),DragOffsetY>window.innerHeight-e&&(DragOffsetY=window.innerHeight-e),DragOffsetY+t.height<e&&(DragOffsetY=-t.height+e),PreviewImage.style.translate=DragOffsetX+"px "+DragOffsetY+"px"}}function DragImage(e,t){DragActive&&(DragOffsetX+=e,DragOffsetY+=t,UpdateImagePosition())}function ZoomImage(e){if(!(PreviewImage.children.length<1)){var t=1;if(e>0){if(ImageScale<=.025)return;t*=.9}else t=1.1;ImageScale*=t;var a=ActiveImagePreviewElement.getBoundingClientRect(),i=a.width*t-a.width,r=a.height*t-a.height,n=(CursorPosX-DragOffsetX)/a.width,o=(CursorPosY-DragOffsetY)/a.height;DragOffsetX-=i*n,DragOffsetY-=r*o,UpdateImagePosition(),PreviewImage.style.transform="scale("+ImageScale+")"}}function TopDataElement(e){for(let t=0;t<10&&void 0===e.attributes.uid&&e.parentElement;t++)e=e.parentElement;return e}function ProcessInput(e,t=!1){for(let i=0;i<e.length;i++){var a=new FileReader;a.onload=function(a){CreateImage(t?`Clipboard ${TotalImageCount}`:e[i].name,TotalImageCount,a.target.result),TotalImageCount++},a.readAsDataURL(e[i])}ManageFileSelectDialog(0)}function ManageFileSelectDialog(e){var t=document.getElementById("fileSelect");0==e?(t.innerText="",t.classList.add("addMore"),IMGs.appendChild(t)):IMGs.children.length<=e&&(t.innerHTML=FileSelectInnerHTML,t.classList.remove("addMore"),document.body.appendChild(t))}function checkImage(e){const t=[".png",".jpg",".jpeg",".webp",".avif",".gif",".heif",".heic",".tiff",".bmp"];var a=e.split("?")[0];for(let e=0;e<t.length;e++)if(a.endsWith(t[e]))return!0;return!1}function ProcessInputURL(e){checkImage(e)&&(CreateImage(e.split("?")[0].split("/").at(-1),TotalImageCount,e),TotalImageCount++,ManageFileSelectDialog(0))}function CreateImage(e,t,a){var i=document.createElement("div");i.setAttribute("uid",t),i.setAttribute("name",e);var r=document.createElement("div");r.classList.add("imageName"),r.setAttribute("draggable",!0),r.addEventListener("dragstart",e=>{DraggedTab=e.target,dropIndicator.style.display="block",UpdateDropIndicator()}),r.addEventListener("auxclick",e=>{1==e.button&&CloseImage(r)});var n=document.createElement("input");n.value=e,n.addEventListener("mousedown",e=>{1==e.button&&e.preventDefault()});var o=document.createElement("button");o.onclick=function(){CloseImage(o)},r.appendChild(n),r.appendChild(o),i.appendChild(r),IMGs.appendChild(i),IMGs.appendChild(document.getElementById("fileSelect"));var s=document.createElement("img");s.setAttribute("uid",t),s.setAttribute("src",a),PreviewImage.appendChild(s),i.addEventListener("mouseover",e=>{SwitchImagePreview(i.attributes.uid.value)})}function GetTabPosition(e){for(let t=0;t<IMGs.children.length;t++)if(e==IMGs.children[t].attributes.uid.value)return t;return-1}function CloseImage(e){e=TopDataElement(e);var t=e.attributes.uid.value;for(let e=0;e<IMGs.childNodes.length-1;e++)IMGs.childNodes[e].attributes.uid.value==t&&IMGs.childNodes[e].remove();for(let e=0;e<PreviewImage.childNodes.length;e++)PreviewImage.childNodes[e].attributes.uid.value==t&&PreviewImage.childNodes[e].remove();ManageFileSelectDialog(1)}function UpdateDropIndicator(){if(DraggedTab){for(let e=0;e<IMGs.children.length-1;e++){const t=IMGs.children[e];if(IMGs.children[e+1].offsetLeft>CursorPosX){dropIndicator.style.left=t.offsetLeft+"px";break}}requestAnimationFrame(UpdateDropIndicator)}else dropIndicator.style.display="none"}var IMGs=document.getElementById("IMGs"),PreviewImage=document.getElementById("image"),dropIndicator=document.getElementById("dropIndicator"),DragActive=!1,DragOffsetX=0,DragOffsetY=0,ImageScale=1,CursorPosX=0,CursorPosY=0,ActiveImagePreviewElement=null,TotalImageCount=0,DraggedTab=null,FileSelectInnerHTML=document.getElementById("fileSelect").innerHTML,input=document.createElement("input");input.type="file",input.multiple=!0,input.onchange=(e=>ProcessInput(e.target.files)),window.addEventListener("paste",e=>{e.preventDefault();var t=e.clipboardData.getData("text");""!=t&&ProcessInputURL(t),ProcessInput(e.clipboardData.files,!0)}),window.addEventListener("drop",e=>{e.preventDefault(),DragActive=!1;var t=e.dataTransfer.getData("text");if(""!=t?ProcessInputURL(t):ProcessInput(e.dataTransfer.files),SwitchImagePreviewFromCursorPosition(),DraggedTab){if(!e.target)return;var a=TopDataElement(e.target);if(void 0===a.attributes.uid)return;if(DraggedTab=TopDataElement(DraggedTab),DraggedTab.offsetLeft>a.offsetLeft)IMGs.insertBefore(DraggedTab,a);else{var i=GetTabPosition(a.attributes.uid.value);IMGs.insertBefore(DraggedTab,IMGs.children[i+1])}DraggedTab=null}}),document.addEventListener("dragover",function(e){e.preventDefault(),CursorPosX=e.clientX,CursorPosY=e.clientY}),document.getElementById("fileSelect").addEventListener("click",e=>{input.click()}),IMGs.addEventListener("mousedown",e=>{DragActive=!0}),IMGs.addEventListener("mouseup",e=>{DragActive=!1,SwitchImagePreviewFromCursorPosition()}),IMGs.addEventListener("mousemove",e=>{e.preventDefault(),DragImage(e.movementX,e.movementY)}),IMGs.addEventListener("wheel",e=>{e.preventDefault(),ZoomImage(e.deltaY)}),document.addEventListener("mousemove",e=>{e.preventDefault(),CursorPosX=e.clientX,CursorPosY=e.clientY});