diff options
Diffstat (limited to 'dist/libra.min.js')
| -rw-r--r-- | dist/libra.min.js | 240 |
1 files changed, 1 insertions, 239 deletions
diff --git a/dist/libra.min.js b/dist/libra.min.js index fe939bb..a5dbf7b 100644 --- a/dist/libra.min.js +++ b/dist/libra.min.js @@ -1,240 +1,2 @@ -const $0a4c69ff81eafed7$var$config = { - selector: '[data-libra]', - margin: 50, - offset: { - x: 0, - y: 0 - }, - transitionDuration: 200, - imageCursor: 'zoom-in' -}; -function $0a4c69ff81eafed7$var$deepMerge(target, source) { - for(const key in source)if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) { - if (!target[key]) target[key] = {}; - $0a4c69ff81eafed7$var$deepMerge(target[key], source[key]); - } else target[key] = source[key]; - return target; -} -function $0a4c69ff81eafed7$export$940a7873bb071df8(newConfig) { - $0a4c69ff81eafed7$var$deepMerge($0a4c69ff81eafed7$var$config, newConfig); -} -var $0a4c69ff81eafed7$export$2e2bcd8739ae039 = $0a4c69ff81eafed7$var$config; - - -class $1e566b6277893a87$export$2e2bcd8739ae039 { - constructor(){ - const overlay = document.createElement('div'); - overlay.id = 'libra-overlay'; - overlay.classList.add('libra-overlay', 'libra-hidden'); - // Set transition duration from config - overlay.style.transitionDuration = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).transitionDuration + 'ms'; - this.element = overlay; - document.body.appendChild(overlay); - return this; - } - show() { - this.element.classList.remove('libra-hidden'); - this.element.classList.add('libra-visible'); - } - hide() { - this.element.classList.remove('libra-visible'); - this.element.classList.add('libra-hidden'); - } -} - - - -class $c202a9cf7133f3b7$export$2e2bcd8739ae039 { - static calculateFinalState(element) { - let finals = {}; - const margin = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).margin; - const nw = element.naturalWidth; - const nh = element.naturalHeight; - const ratio = nw / nh; - const ww = window.innerWidth - 2 * margin; - const wh = window.innerHeight - 2 * margin; - // size image based on width first - finals.width = nw > ww ? ww : nw; - finals.height = nw > ww ? ww / ratio : nh; - // if height is too big, adjust based on height - if (finals.height > wh) { - finals.height = wh; - finals.width = wh * ratio; - } - finals.top = (wh - finals.height) / 2 + window.scrollY + margin + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.y; - finals.left = (ww - finals.width) / 2 + window.scrollX + margin + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.x; - return finals; - } - static transformMatrix(element, starts, finals) { - // Calculate scaling factors based on width and height interpolation - const scaleX = finals.width / starts.width; - const scaleY = finals.height / starts.height; - // Calculate the center of the starting and final positions - const startCenterX = starts.left + starts.width / 2; - const startCenterY = starts.top + starts.height / 2; - const finalCenterX = finals.left + finals.width / 2; - const finalCenterY = finals.top + finals.height / 2; - const translateX = finalCenterX - startCenterX; - const translateY = finalCenterY - startCenterY; - // Apply the transform with matrix (scale + translate) - element.style.transform = `matrix(${scaleX}, 0, 0, ${scaleY}, ${translateX}, ${translateY})`; - } - static resetTransformMatrix(element) { - element.style.transform = `matrix(1, 0, 0, 1, 0, 0)`; - } -} - - - -class $ec04822463bc4394$export$2e2bcd8739ae039 { - isOpen = false; - /** - * ============ - * Constructors - * ============ - */ constructor(image){ - this.original = image; - const rect = this.original.getBoundingClientRect(); - this.originalPosition = { - top: rect.top + window.scrollY + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.y, - left: rect.left + window.scrollX + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.x, - width: rect.width, - height: rect.height - }; - this.create(image); - return this; - } - create(image) { - // create shadow image - const shadow = document.createElement('img'); - shadow.src = image.src; - shadow.id = `libra-shadow-${image.id}`; - shadow.classList.add('libra-shadow'); - // style and position shadow image - shadow.style.top = `${this.originalPosition.top}px`; - shadow.style.left = `${this.originalPosition.left}px`; - shadow.style.width = `${this.originalPosition.width}px`; - shadow.style.height = `${this.originalPosition.height}px`; - // Set transition duration from config - shadow.style.transitionDuration = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).transitionDuration + 'ms'; - document.body.appendChild(shadow); - this.element = shadow; - } - /** - * ============ - * Actions - * ============ - */ updateOriginalPosition() { - const rect = this.original.getBoundingClientRect(); - this.originalPosition = { - top: rect.top + window.scrollY + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.y, - left: rect.left + window.scrollX + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.x, - width: rect.width, - height: rect.height - }; - } - open() { - this.isOpen = true; - this.element.classList.add('open'); - // Update original position before animation in case viewport changed - this.updateOriginalPosition(); - this.element.style.top = `${this.originalPosition.top}px`; - this.element.style.left = `${this.originalPosition.left}px`; - this.element.style.width = `${this.originalPosition.width}px`; - this.element.style.height = `${this.originalPosition.height}px`; - this.original.style.visibility = 'hidden'; - if (!document.body.contains(this.element)) this.placeItself(); - // Wait for image to load before animating - if (this.element.naturalWidth === 0 || this.element.naturalHeight === 0) this.element.addEventListener('load', ()=>{ - (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).transformMatrix(this.element, this.originalPosition, (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).calculateFinalState(this.element)); - }, { - once: true - }); - else (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).transformMatrix(this.element, this.originalPosition, (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).calculateFinalState(this.element)); - } - close() { - this.isOpen = false; - this.element.classList.remove('open'); - (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).resetTransformMatrix(this.element); - // Wait for animation to complete before showing original and destroying shadow - setTimeout(()=>{ - this.original.style.visibility = 'visible'; - this.destroyItself(); - }, (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).transitionDuration); - } - placeItself() { - document.body.appendChild(this.element); - } - destroyItself() { - if (!document.body.contains(this.element)) return; - document.body.removeChild(this.element); - } -} - - - -class $3e29c386d1910a1d$export$2e2bcd8739ae039 { - currentImage = null; - shadows = {}; - /** - * ============ - * Initializers - * ============ - */ constructor(config){ - (0, $0a4c69ff81eafed7$export$940a7873bb071df8)(config); - this.initOverlay(); - this.initImages(); - this.initControls(); - } - initOverlay() { - this.overlay = new (0, $1e566b6277893a87$export$2e2bcd8739ae039)(); - this.overlay.element.addEventListener('click', ()=>{ - this.closeCurrent(); - }); - } - initImages() { - this.images = document.querySelectorAll((0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).selector); - this.images.forEach((image)=>{ - if (image.tagName !== 'IMG') return; - image.id = crypto.randomUUID(); // generate unique id for each image - image.style.cursor = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).imageCursor; - image.addEventListener('click', ()=>this.open(image)); // click image to open lightbox - }); - } - initControls() { - // keyboard shortcuts - document.addEventListener('keydown', (e)=>{ - if (e.key === 'Escape' || e.key === ' ') this.closeCurrent(); - }); - // scroll to dismiss - document.body.addEventListener('wheel', (e)=>this.closeCurrent()); - document.body.addEventListener('touchmove', (e)=>this.closeCurrent()); - } - /** - * ============ - * Actions - * ============ - */ // open lightbox = open shadow + show overlay - open(image) { - this.currentImage = image; - const shadow = this.shadows[image.id] || new (0, $ec04822463bc4394$export$2e2bcd8739ae039)(image); - if (!this.shadows[image.id]) this.shadows[image.id] = shadow; - shadow.open(); - this.overlay.show(); - } - // close lightbox = remove shadow + hide overlay - close(image) { - this.currentImage = null; - if (!this.shadows[image.id]) return; - this.shadows[image.id].close(); - this.overlay.hide(); - } - closeCurrent() { - if (!this.currentImage) return; - this.close(this.currentImage); - } -} - - -export {$3e29c386d1910a1d$export$2e2bcd8739ae039 as default}; +let t={selector:"[data-libra]",margin:50,offset:{x:0,y:0},transitionDuration:200,imageCursor:"zoom-in"};class e{constructor(){let e=document.createElement("div");return e.id="libra-overlay",e.classList.add("libra-overlay","libra-hidden"),e.style.transitionDuration=t.transitionDuration+"ms",this.element=e,document.body.appendChild(e),this}show(){this.element.classList.remove("libra-hidden"),this.element.classList.add("libra-visible")}hide(){this.element.classList.remove("libra-visible"),this.element.classList.add("libra-hidden")}}class i{static calculateFinalState(e){let i={},s=t.margin,n=e.naturalWidth,o=e.naturalHeight,l=n/o,r=window.innerWidth-2*s,a=window.innerHeight-2*s;return i.width=n>r?r:n,i.height=n>r?r/l:o,i.height>a&&(i.height=a,i.width=a*l),i.top=(a-i.height)/2+window.scrollY+s+t.offset.y,i.left=(r-i.width)/2+window.scrollX+s+t.offset.x,i}static transformMatrix(t,e,i){let s=i.width/e.width,n=i.height/e.height,o=e.left+e.width/2,l=e.top+e.height/2,r=i.left+i.width/2,a=i.top+i.height/2;t.style.transform=`matrix(${s}, 0, 0, ${n}, ${r-o}, ${a-l})`}static resetTransformMatrix(t){t.style.transform="matrix(1, 0, 0, 1, 0, 0)"}}class s{isOpen=!1;constructor(t){return this.original=t,this.fetchOriginalPosition(),this.create(t),this}create(e){let i=document.createElement("img");i.src=e.src,i.id=`libra-shadow-${e.id}`,i.classList.add("libra-shadow"),i.style.transitionDuration=t.transitionDuration+"ms",this.element=i,this.positionShadow(),this.placeItself()}fetchOriginalPosition(){let e=this.original.getBoundingClientRect();this.originalPosition={top:e.top+window.scrollY+t.offset.y,left:e.left+window.scrollX+t.offset.x,width:e.width,height:e.height}}positionShadow(){this.element.style.top=this.originalPosition.top+"px",this.element.style.left=this.originalPosition.left+"px",this.element.style.width=this.originalPosition.width+"px",this.element.style.height=this.originalPosition.height+"px"}open(){this.isOpen=!0,this.element.classList.add("open"),this.fetchOriginalPosition(),this.positionShadow(),this.original.style.visibility="hidden",document.body.contains(this.element)||this.placeItself();let t=()=>i.transformMatrix(this.element,this.originalPosition,i.calculateFinalState(this.element));0===this.element.naturalWidth||0===this.element.naturalHeight?this.element.addEventListener("load",t,{once:!0}):t()}close(){this.isOpen=!1,this.element.classList.remove("open"),i.resetTransformMatrix(this.element),setTimeout(()=>{this.original.style.visibility="visible",this.destroyItself()},t.transitionDuration)}placeItself(){document.body.appendChild(this.element)}destroyItself(){document.body.contains(this.element)&&document.body.removeChild(this.element)}}class n{currentImage=null;shadows={};constructor(e){!function t(e,i){for(let s in i)"object"!=typeof i[s]||null===i[s]||Array.isArray(i[s])?e[s]=i[s]:(e[s]||(e[s]={}),t(e[s],i[s]));return e}(t,e),this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new e,this.overlay.element.addEventListener("click",()=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(t.selector),this.images.forEach(e=>{"IMG"===e.tagName&&(e.id=crypto.randomUUID(),e.style.cursor=t.imageCursor,e.addEventListener("click",()=>this.open(e)))})}initControls(){document.addEventListener("keydown",t=>{("Escape"===t.key||" "===t.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",t=>this.closeCurrent()),document.body.addEventListener("touchmove",t=>this.closeCurrent())}open(t){this.currentImage=t;let e=this.shadows[t.id]||new s(t);this.shadows[t.id]||(this.shadows[t.id]=e),e.open(),this.overlay.show()}close(t){this.currentImage=null,this.shadows[t.id]&&(this.shadows[t.id].close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.close(this.currentImage)}}export{n as default}; //# sourceMappingURL=libra.min.js.map |