15 lines
No EOL
7.1 KiB
JavaScript
15 lines
No EOL
7.1 KiB
JavaScript
(function(){const e={selector:".lightbox-img, #flowDiagram",captionAttribute:"data-caption",zoomable:!0,maxZoom:300,minZoom:100,closeOnEsc:!0,closeOnOutsideClick:!0};window.EasyLightbox={options:{...e},init:function(t={}){return this.options={...e,...t},this._createLightbox(),this._initImageListeners(),this},_createLightbox:function(){if(document.getElementById("imageLightbox"))return;const e=document.createElement("div");if(e.id="imageLightbox",e.className="lightbox",e.innerHTML=`
|
|
<div class="lightbox-content">
|
|
<div class="lightbox-close" id="lightboxClose">X</div>
|
|
<div class="lightbox-img-container">
|
|
<img class="lightbox-img" id="lightboxImg" src="" alt="Enlarged image" draggable="false">
|
|
</div>
|
|
<div class="lightbox-caption" id="lightboxCaption"></div>
|
|
${this.options.zoomable?`
|
|
<div class="zoom-controls">
|
|
<span class="zoom-label">Zoom:</span>
|
|
<input type="range" min="${this.options.minZoom}" max="${this.options.maxZoom}" value="100" class="zoom-slider" id="zoomSlider">
|
|
<span class="zoom-value" id="zoomValue">100%</span>
|
|
</div>`:""}
|
|
</div>
|
|
`,!document.getElementById("lightbox-styles")){const e=document.createElement("link");e.id="lightbox-styles",e.rel="stylesheet",e.href="/css/lightbox.css",document.head.appendChild(e)}document.body.appendChild(e),this.elements={lightbox:e,lightboxImg:document.getElementById("lightboxImg"),lightboxCaption:document.getElementById("lightboxCaption"),lightboxClose:document.getElementById("lightboxClose"),zoomSlider:document.getElementById("zoomSlider"),zoomValue:document.getElementById("zoomValue")},this._initLightboxHandlers()},_initImageListeners:function(){const n=document.querySelectorAll(this.options.selector),t=this;n.forEach(e=>{if(e.id==="lightboxImg")return;if(e.dataset.lightboxInitialized)return;e.dataset.lightboxInitialized="true",e.style.cursor="pointer",e.addEventListener("click",function(){let e=this.getAttribute(t.options.captionAttribute);(this.id==="flowDiagram"||!e)&&(e="Basic POW Flow Diagram"),t.open(this,e)})});const e=document.getElementById("flowDiagram");e&&!e.dataset.lightboxInitialized&&(e.dataset.lightboxInitialized="true",e.style.cursor="pointer",e.addEventListener("click",function(){t.open(this,"Basic POW Flow Diagram")}))},_initLightboxHandlers:function(){const n=this,e=this.elements;let o=!1,i,a,u,l,r=0,c=0;this.options.zoomable&&e.zoomSlider&&e.zoomSlider.addEventListener("input",function(){const t=this.value;e.zoomValue.textContent=t+"%",h()}),e.lightboxClose&&e.lightboxClose.addEventListener("click",function(e){e.preventDefault(),e.stopPropagation(),n.close()}),this.options.closeOnOutsideClick&&e.lightbox.addEventListener("click",function(t){t.target===e.lightbox&&n.close()}),this.options.closeOnEsc&&document.addEventListener("keydown",function(t){t.key==="Escape"&&e.lightbox.classList.contains("active")&&n.close()}),e.lightboxImg&&(e.lightboxImg.addEventListener("mousedown",d),e.lightboxImg.addEventListener("touchstart",d));function d(d){if(!n.options.zoomable||parseInt(e.zoomSlider.value)<=100)return;d.preventDefault(),d.type==="touchstart"?(i=d.touches[0].clientX,a=d.touches[0].clientY):(i=d.clientX,a=d.clientY),u=r,l=c,o=!0,e.lightboxImg.classList.add("grabbing"),document.addEventListener("mousemove",s),document.addEventListener("touchmove",s),document.addEventListener("mouseup",t),document.addEventListener("touchend",t),document.addEventListener("mouseleave",t)}function s(e){if(!o)return;e.preventDefault();let t,n;if(e.type==="touchmove"){if(e.touches.length===0)return;t=e.touches[0].clientX,n=e.touches[0].clientY}else t=e.clientX,n=e.clientY;const s=t-i,d=n-a;r=u+s,c=l+d,h()}function t(){if(!o)return;o=!1,e.lightboxImg.classList.remove("grabbing"),document.removeEventListener("mousemove",s),document.removeEventListener("touchmove",s),document.removeEventListener("mouseup",t),document.removeEventListener("touchend",t),document.removeEventListener("mouseleave",t)}function h(){if(!n.options.zoomable)return;const t=parseInt(e.zoomSlider.value)/100;e.lightboxImg.style.transform=`scale(${t}) translate(${r/t}px, ${c/t}px)`}const m=window.matchMedia("(max-width: 768px), (max-width: 1024px) and (orientation: landscape)").matches;m&&e.lightboxImg&&e.lightboxImg.addEventListener("touchmove",function(e){e.touches.length>1&&e.preventDefault()})},open:async function(e,t){if(!e||!this.elements)return;const n=this.elements;let u=0,h=0;if(n.lightboxImg&&n.lightboxImg.parentNode){n.lightboxImg.style.display="";const e=n.lightboxImg.parentNode.querySelector("svg.injected-svg");e&&e.remove()}const i=e.src||e.getAttribute("data-fullsize")||"",l=i.toLowerCase().endsWith(".svg");function a(){return n.zoomSlider?parseInt(n.zoomSlider.value)/100:1}function r(e,t,n,s){e.style.transform=`scale(${s}) translate(${t/s}px, ${n/s}px)`}if(l){n.lightboxImg.style.display="none";try{const l=await fetch(i);let d=await l.text();const t=document.createElement("div");t.innerHTML=d;const e=t.querySelector("svg");if(e){e.classList.add("injected-svg"),e.style.transformOrigin="center center",e.style.maxWidth="100%",e.style.maxHeight="100%",e.style.display="block",e.style.cursor="grab",e.style.userSelect="none",e.removeAttribute("width"),e.removeAttribute("height"),n.lightboxImg.parentNode.appendChild(e),n.zoomSlider&&(n.zoomSlider.value=100,n.zoomValue.textContent="100%");let t=0,i=0,l=!1,u,h,m=0,f=0,d=a();r(e,t,i,d),e.addEventListener("mousedown",c),e.addEventListener("touchstart",c);function c(n){n.preventDefault(),l=!0,e.classList.add("grabbing"),n.type==="touchstart"?(u=n.touches[0].clientX,h=n.touches[0].clientY):(u=n.clientX,h=n.clientY),m=t,f=i,document.addEventListener("mousemove",o),document.addEventListener("touchmove",o),document.addEventListener("mouseup",s),document.addEventListener("touchend",s),document.addEventListener("mouseleave",s)}function o(n){if(!l)return;n.preventDefault();let s,o;if(n.type==="touchmove"){if(n.touches.length===0)return;s=n.touches[0].clientX,o=n.touches[0].clientY}else s=n.clientX,o=n.clientY;const c=s-u,d=o-h;t=m+c,i=f+d,r(e,t,i,a())}function s(){if(!l)return;l=!1,e.classList.remove("grabbing"),document.removeEventListener("mousemove",o),document.removeEventListener("touchmove",o),document.removeEventListener("mouseup",s),document.removeEventListener("touchend",s),document.removeEventListener("mouseleave",s)}n.zoomSlider&&(n.zoomSlider.oninput=function(){d=a(),n.zoomValue.textContent=Math.round(d*100)+"%",r(e,t,i,d)})}}catch{n.lightboxImg.style.display=""}}else n.lightboxImg.src=i,n.lightboxImg.style.display="",n.lightboxImg.style.transform="scale(1) translate(0px, 0px)",this.options.zoomable&&n.zoomSlider&&(n.zoomSlider.value=100,n.zoomValue.textContent="100%");const d=t||e.getAttribute(this.options.captionAttribute)||e.alt||e.getAttribute("title")||"";n.lightboxCaption.textContent=d,n.lightbox.classList.add("active"),document.body.style.overflow="hidden"},close:function(){if(!this.elements)return;this.elements.lightbox.classList.remove("active"),document.body.style.overflow=""}},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){window.EasyLightbox.init()}):window.EasyLightbox.init()})() |