diff options
| -rw-r--r-- | dist/libra.min.js | 2 | ||||
| -rw-r--r-- | dist/libra.min.js.map | 2 | ||||
| -rw-r--r-- | src/shadow.js | 3 |
3 files changed, 2 insertions, 5 deletions
diff --git a/dist/libra.min.js b/dist/libra.min.js index 67a5f98..796e54c 100644 --- a/dist/libra.min.js +++ b/dist/libra.min.js @@ -1,2 +1,2 @@ -class e{zIndex=900;zIndexHidden=-100;constructor(){let e=document.createElement("div");return e.id="libra-overlay",e.classList.add("libra-overlay"),e.style.zIndex=this.zIndexHidden,e.style.opacity="0",this.element=e,document.body.appendChild(e),this}show(){this.element.style.opacity="1",this.element.style.zIndex=this.zIndex}hide(){this.element.style.opacity="0",this.element.style.zIndex="-100"}}class t{zIndex="1000";isOpen=!1;constructor(e){return this.create(e),this.calculateStartsAndFinals(),this}create(e){let t=document.createElement("img");t.src=e.src,t.id=`libra-shadow-${e.id}`,t.classList.add("libra-shadow"),t.style.top=e.offsetTop,t.style.left=e.offsetLeft,t.style.width=e.offsetWidth,t.style.height=e.offsetHeight,t.style.zIndex=this.zIndex,document.body.appendChild(t),this.element=t}calculateStartsAndFinals(){let e={top:this.element.offsetTop,left:this.element.offsetLeft,width:this.element.offsetWidth,height:this.element.offsetHeight},t={},i=this.element.naturalWidth,s=i/this.element.naturalHeight,n=window.innerWidth-100,h=window.innerHeight-100;t.width=Math.min(i,n),t.height=t.width/s,t.height>=h&&(t.height=h,t.width=t.height*s),t.left=(n-t.width)/2+50,t.top=(h-t.height)/2+50,this.finalState=t,this.startingState=e}open(){this.isOpen=!0,this.animate(this.startingState,this.finalState)}close(){this.isOpen=!1,this.animate(this.finalState,this.startingState)}animate(e,t){let i=0,s=()=>{let n=i/20,h=e.top+(t.top-e.top)*n,l=e.left+(t.left-e.left)*n,a=e.width+(t.width-e.width)*n,o=e.height+(t.height-e.height)*n;this.element.style.top=`${h}px`,this.element.style.left=`${l}px`,this.element.style.width=`${a}px`,this.element.style.height=`${o}px`,console.log(`Step ${i}: ${h}, ${l}`),++i<=20?requestAnimationFrame(s):(this.element.classList.toggle("open"),this.isOpen||this.destroyItself())};requestAnimationFrame(s)}placeItself(){document.body.appendChild(this.element)}destroyItself(){document.body.contains(this.element)&&document.body.removeChild(this.element)}}class i{currentImage=null;shadows={};constructor({container:e}){this.container=e,this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new e,this.overlay.element.addEventListener("click",e=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(`${this.container} img[data-libra]`),this.images.forEach(e=>{e.id=crypto.randomUUID(),(function(e){let t,i=e.parentElement;return i&&"A"===i.tagName?t=i:((t=document.createElement("a")).href=e.src,i.insertBefore(t,e),t.appendChild(e)),t})(e).addEventListener("click",t=>{t.preventDefault(),this.openLightBox(e)})})}initControls(){document.addEventListener("keydown",e=>{("Escape"===e.key||" "===e.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",e=>{this.closeCurrent()})}openLightBox(e){e.style.visibility="hidden",this.currentImage=e;let i=this.shadows[e.id]||new t(e);this.shadows[e.id]||(this.shadows[e.id]=i),document.body.contains(i.element)||i.placeItself(),i.open(),this.overlay.show()}closeLightBox(e){e.style.visibility="visible",this.currentImage=null;let t=this.shadows[e.id];t&&(t.close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.closeLightBox(this.currentImage)}closeAll(){this.images.forEach(e=>{this.closeLightBox(e)}),this.overlay.hide()}}export{i as default}; +class e{zIndex=900;zIndexHidden=-100;constructor(){let e=document.createElement("div");return e.id="libra-overlay",e.classList.add("libra-overlay"),e.style.zIndex=this.zIndexHidden,e.style.opacity="0",this.element=e,document.body.appendChild(e),this}show(){this.element.style.opacity="1",this.element.style.zIndex=this.zIndex}hide(){this.element.style.opacity="0",this.element.style.zIndex="-100"}}class t{zIndex="1000";isOpen=!1;constructor(e){return this.create(e),this.calculateStartsAndFinals(),this}create(e){let t=document.createElement("img");t.src=e.src,t.id=`libra-shadow-${e.id}`,t.classList.add("libra-shadow"),t.style.top=e.offsetTop,t.style.left=e.offsetLeft,t.style.width=e.offsetWidth,t.style.height=e.offsetHeight,t.style.zIndex=this.zIndex,document.body.appendChild(t),this.element=t}calculateStartsAndFinals(){let e={top:this.element.offsetTop,left:this.element.offsetLeft,width:this.element.offsetWidth,height:this.element.offsetHeight},t={},i=this.element.naturalWidth,s=i/this.element.naturalHeight,n=window.innerWidth-100,h=window.innerHeight-100;t.width=Math.min(i,n),t.height=t.width/s,t.height>=h&&(t.height=h,t.width=t.height*s),t.left=(n-t.width)/2+50,t.top=(h-t.height)/2+50,this.finalState=t,this.startingState=e}open(){this.isOpen=!0,this.animate(this.startingState,this.finalState)}close(){this.isOpen=!1,this.animate(this.finalState,this.startingState)}animate(e,t){let i=0,s=()=>{let n=i/20,h=e.top+(t.top-e.top)*n,l=e.left+(t.left-e.left)*n,a=e.width+(t.width-e.width)*n,o=e.height+(t.height-e.height)*n;this.element.style.top=`${h}px`,this.element.style.left=`${l}px`,this.element.style.width=`${a}px`,this.element.style.height=`${o}px`,++i<=20?requestAnimationFrame(s):(this.element.classList.toggle("open"),this.isOpen||this.destroyItself())};requestAnimationFrame(s)}placeItself(){document.body.appendChild(this.element)}destroyItself(){document.body.contains(this.element)&&document.body.removeChild(this.element)}}class i{currentImage=null;shadows={};constructor({container:e}){this.container=e,this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new e,this.overlay.element.addEventListener("click",e=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(`${this.container} img[data-libra]`),this.images.forEach(e=>{e.id=crypto.randomUUID(),(function(e){let t,i=e.parentElement;return i&&"A"===i.tagName?t=i:((t=document.createElement("a")).href=e.src,i.insertBefore(t,e),t.appendChild(e)),t})(e).addEventListener("click",t=>{t.preventDefault(),this.openLightBox(e)})})}initControls(){document.addEventListener("keydown",e=>{("Escape"===e.key||" "===e.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",e=>{this.closeCurrent()})}openLightBox(e){e.style.visibility="hidden",this.currentImage=e;let i=this.shadows[e.id]||new t(e);this.shadows[e.id]||(this.shadows[e.id]=i),document.body.contains(i.element)||i.placeItself(),i.open(),this.overlay.show()}closeLightBox(e){e.style.visibility="visible",this.currentImage=null;let t=this.shadows[e.id];t&&(t.close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.closeLightBox(this.currentImage)}closeAll(){this.images.forEach(e=>{this.closeLightBox(e)}),this.overlay.hide()}}export{i as default}; //# sourceMappingURL=libra.min.js.map diff --git a/dist/libra.min.js.map b/dist/libra.min.js.map index d96a7c8..9325120 100644 --- a/dist/libra.min.js.map +++ b/dist/libra.min.js.map @@ -1 +1 @@ -{"mappings":"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","sources":["<anon>","src/lightbox.js","src/overlay.js","src/shadow.js"],"sourcesContent":["class $e49d13fc7942bae1$export$2e2bcd8739ae039 {\n zIndex = 900;\n zIndexHidden = -100;\n constructor(){\n const overlay = document.createElement('div');\n overlay.id = 'libra-overlay';\n overlay.classList.add('libra-overlay');\n // initialized state\n overlay.style.zIndex = this.zIndexHidden;\n overlay.style.opacity = '0';\n this.element = overlay;\n document.body.appendChild(overlay);\n return this;\n }\n show() {\n this.element.style.opacity = '1';\n this.element.style.zIndex = this.zIndex;\n }\n hide() {\n this.element.style.opacity = '0';\n this.element.style.zIndex = '-100';\n }\n}\n\n\nclass $2f427fc7e1c3703f$export$2e2bcd8739ae039 {\n zIndex = '1000';\n isOpen = false;\n /**\n * ============\n * Constructors\n * ============\n */ constructor(image){\n this.create(image);\n this.calculateStartsAndFinals();\n return this;\n }\n create(image) {\n // create shadow image\n const shadowImage = document.createElement('img');\n shadowImage.src = image.src;\n shadowImage.id = `libra-shadow-${image.id}`;\n shadowImage.classList.add('libra-shadow');\n // style and position shadow image\n shadowImage.style.top = image.offsetTop;\n shadowImage.style.left = image.offsetLeft;\n shadowImage.style.width = image.offsetWidth;\n shadowImage.style.height = image.offsetHeight;\n shadowImage.style.zIndex = this.zIndex;\n document.body.appendChild(shadowImage);\n this.element = shadowImage;\n }\n calculateStartsAndFinals() {\n // get starting state\n const s = {\n top: this.element.offsetTop,\n left: this.element.offsetLeft,\n width: this.element.offsetWidth,\n height: this.element.offsetHeight\n };\n const f = {};\n const margin = 50;\n // calculate final size\n const nw = this.element.naturalWidth;\n const nh = this.element.naturalHeight;\n const ratio = nw / nh;\n const ww = window.innerWidth - margin * 2;\n const wh = window.innerHeight - margin * 2;\n f.width = Math.min(nw, ww);\n f.height = f.width / ratio;\n if (f.height >= wh) {\n f.height = wh;\n f.width = f.height * ratio;\n }\n // calculate final position\n f.left = (ww - f.width) / 2 + margin;\n f.top = (wh - f.height) / 2 + margin;\n this.finalState = f;\n this.startingState = s;\n }\n /**\n * ============\n * Actions\n * ============\n */ open() {\n this.isOpen = true;\n this.animate(this.startingState, this.finalState);\n }\n close() {\n this.isOpen = false;\n this.animate(this.finalState, this.startingState);\n }\n animate(starts, finals) {\n // Set up the interval for smooth transition\n const steps = 20; // Number of steps for smoothness\n let step = 0;\n // Using requestAnimationFrame for smoother animation\n const frame = ()=>{\n // Calculate the progress (from 0 to 1)\n const progress = step / steps;\n // Interpolate the current values based on progress\n const currentTop = starts.top + (finals.top - starts.top) * progress;\n const currentLeft = starts.left + (finals.left - starts.left) * progress;\n const currentWidth = starts.width + (finals.width - starts.width) * progress;\n const currentHeight = starts.height + (finals.height - starts.height) * progress;\n // Update the element's style\n this.element.style.top = `${currentTop}px`;\n this.element.style.left = `${currentLeft}px`;\n this.element.style.width = `${currentWidth}px`;\n this.element.style.height = `${currentHeight}px`;\n // Log current size for debugging\n console.log(`Step ${step}: ${currentTop}, ${currentLeft}`);\n // Increase the step count\n step++;\n // Continue animating until we reach the final step\n if (step <= steps) requestAnimationFrame(frame);\n else {\n this.element.classList.toggle('open');\n if (!this.isOpen) this.destroyItself();\n }\n };\n // Start the animation\n requestAnimationFrame(frame);\n }\n placeItself() {\n document.body.appendChild(this.element);\n }\n destroyItself() {\n if (!document.body.contains(this.element)) return;\n document.body.removeChild(this.element);\n }\n}\n\n\nclass $e220af4964903f87$export$2e2bcd8739ae039 {\n currentImage = null;\n shadows = {};\n /**\n * ============\n * Initializers\n * ============\n */ constructor({ container: container }){\n this.container = container;\n this.initOverlay();\n this.initImages();\n this.initControls();\n }\n initOverlay() {\n this.overlay = new (0, $e49d13fc7942bae1$export$2e2bcd8739ae039)();\n this.overlay.element.addEventListener('click', (e)=>{\n this.closeCurrent();\n });\n }\n initImages() {\n this.images = document.querySelectorAll(`${this.container} img[data-libra]`);\n function wrapInLink(image) {\n // wrap image with a link if it's not already wrapped\n const parent = image.parentElement;\n let link;\n if (!parent || parent.tagName !== 'A') {\n link = document.createElement('a');\n link.href = image.src;\n // replace image with the linked one\n parent.insertBefore(link, image);\n link.appendChild(image);\n } else link = parent;\n return link;\n }\n this.images.forEach((image)=>{\n // generate unique id for each image\n image.id = crypto.randomUUID();\n // make sure every image has a link\n const link = wrapInLink(image);\n // click link to open lightbox\n link.addEventListener('click', (e)=>{\n e.preventDefault();\n this.openLightBox(image);\n });\n });\n }\n initControls() {\n // keyboard shortcuts\n document.addEventListener('keydown', (e)=>{\n if (e.key === 'Escape' || e.key === ' ') this.closeCurrent();\n });\n // scroll to dismiss\n document.body.addEventListener('wheel', (e)=>{\n this.closeCurrent();\n });\n }\n /**\n * ============\n * Actions\n * ============\n */ openLightBox(image) {\n // hide and store original image\n image.style.visibility = 'hidden';\n this.currentImage = image;\n // get shadow of this image\n const shadow = this.shadows[image.id] || new (0, $2f427fc7e1c3703f$export$2e2bcd8739ae039)(image);\n if (!this.shadows[image.id]) this.shadows[image.id] = shadow;\n // place and open shadow\n if (!document.body.contains(shadow.element)) shadow.placeItself();\n shadow.open();\n this.overlay.show();\n }\n closeLightBox(image) {\n // show and unstore original image\n image.style.visibility = 'visible';\n this.currentImage = null;\n // close shadow\n const shadow = this.shadows[image.id];\n if (!shadow) return;\n shadow.close();\n this.overlay.hide();\n }\n closeCurrent() {\n if (!this.currentImage) return;\n this.closeLightBox(this.currentImage);\n }\n closeAll() {\n this.images.forEach((image)=>{\n this.closeLightBox(image);\n });\n this.overlay.hide();\n }\n}\n\n\nexport {$e220af4964903f87$export$2e2bcd8739ae039 as default};\n//# sourceMappingURL=libra.min.js.map\n","import Overlay from './overlay.js';\nimport Shadow from './shadow.js';\n\nexport default class LightBox {\n currentImage = null;\n shadows = {};\n\n /**\n * ============\n * Initializers\n * ============\n */\n\n constructor({ container }) {\n this.container = container;\n this.initOverlay();\n this.initImages();\n this.initControls();\n }\n\n initOverlay() {\n this.overlay = new Overlay();\n this.overlay.element.addEventListener('click', e => {\n this.closeCurrent();\n });\n }\n\n initImages() {\n this.images = document.querySelectorAll(`${this.container} img[data-libra]`);\n\n function wrapInLink(image) {\n // wrap image with a link if it's not already wrapped\n const parent = image.parentElement;\n let link;\n if (!parent || parent.tagName !== 'A') {\n link = document.createElement('a');\n link.href = image.src;\n // replace image with the linked one\n parent.insertBefore(link, image);\n link.appendChild(image);\n } else {\n link = parent;\n }\n return link;\n }\n\n this.images.forEach(image => {\n // generate unique id for each image\n image.id = crypto.randomUUID();\n // make sure every image has a link\n const link = wrapInLink(image);\n // click link to open lightbox\n link.addEventListener('click', e => {\n e.preventDefault();\n this.openLightBox(image);\n });\n });\n }\n\n initControls() {\n // keyboard shortcuts\n document.addEventListener('keydown', e => {\n if (e.key === 'Escape' || e.key === ' ') {\n this.closeCurrent();\n }\n });\n // scroll to dismiss\n document.body.addEventListener('wheel', e => {\n this.closeCurrent();\n });\n }\n\n /**\n * ============\n * Actions\n * ============\n */\n\n openLightBox(image) {\n // hide and store original image\n image.style.visibility = 'hidden';\n this.currentImage = image;\n\n // get shadow of this image\n const shadow = this.shadows[image.id] || new Shadow(image);\n if (!this.shadows[image.id]) {\n this.shadows[image.id] = shadow;\n }\n\n // place and open shadow\n if (!document.body.contains(shadow.element)) shadow.placeItself();\n shadow.open();\n\n this.overlay.show();\n }\n\n closeLightBox(image) {\n // show and unstore original image\n image.style.visibility = 'visible';\n this.currentImage = null;\n\n // close shadow\n const shadow = this.shadows[image.id];\n if (!shadow) return;\n shadow.close();\n\n this.overlay.hide();\n }\n\n closeCurrent() {\n if (!this.currentImage) return;\n this.closeLightBox(this.currentImage);\n }\n\n closeAll() {\n this.images.forEach(image => {\n this.closeLightBox(image);\n });\n this.overlay.hide();\n }\n}\n","export default class Overlay {\n zIndex = 900;\n zIndexHidden = -100;\n\n constructor() {\n const overlay = document.createElement('div');\n overlay.id = 'libra-overlay';\n overlay.classList.add('libra-overlay');\n\n // initialized state\n overlay.style.zIndex = this.zIndexHidden;\n overlay.style.opacity = '0';\n\n this.element = overlay;\n document.body.appendChild(overlay);\n\n return this;\n }\n\n show() {\n this.element.style.opacity = '1';\n this.element.style.zIndex = this.zIndex;\n }\n\n hide() {\n this.element.style.opacity = '0';\n this.element.style.zIndex = '-100';\n }\n}\n","export default class Shadow {\n zIndex = '1000'\n isOpen = false\n\n /**\n * ============\n * Constructors\n * ============\n */\n\n constructor(image) {\n this.create(image);\n this.calculateStartsAndFinals();\n return this;\n }\n\n create(image) {\n // create shadow image\n const shadowImage = document.createElement('img');\n shadowImage.src = image.src;\n shadowImage.id = `libra-shadow-${image.id}`;\n shadowImage.classList.add('libra-shadow');\n\n // style and position shadow image\n shadowImage.style.top = image.offsetTop;\n shadowImage.style.left = image.offsetLeft;\n shadowImage.style.width = image.offsetWidth;\n shadowImage.style.height = image.offsetHeight;\n shadowImage.style.zIndex = this.zIndex;\n\n document.body.appendChild(shadowImage);\n this.element = shadowImage;\n }\n\n calculateStartsAndFinals() {\n // get starting state\n const s = {\n top: this.element.offsetTop,\n left: this.element.offsetLeft,\n width: this.element.offsetWidth,\n height: this.element.offsetHeight\n }\n\n const f = {};\n const margin = 50;\n\n // calculate final size\n const nw = this.element.naturalWidth;\n const nh = this.element.naturalHeight;\n const ratio = nw / nh;\n\n const ww = window.innerWidth - margin*2;\n const wh = window.innerHeight - margin*2;\n\n f.width = Math.min(nw, ww);\n f.height = f.width / ratio;\n\n if (f.height >= wh) {\n f.height = wh;\n f.width = f.height * ratio;\n }\n\n // calculate final position\n f.left = (ww - f.width) / 2 + margin;\n f.top = (wh - f.height) / 2 + margin;\n\n this.finalState = f;\n this.startingState = s;\n }\n\n /**\n * ============\n * Actions\n * ============\n */\n\n open() {\n this.isOpen = true;\n this.animate(this.startingState, this.finalState)\n }\n\n close() {\n this.isOpen = false;\n this.animate(this.finalState, this.startingState);\n }\n\n animate(starts, finals) {\n // Set up the interval for smooth transition\n const steps = 20; // Number of steps for smoothness\n let step = 0;\n\n // Using requestAnimationFrame for smoother animation\n const frame = () => {\n // Calculate the progress (from 0 to 1)\n const progress = step / steps;\n\n // Interpolate the current values based on progress\n const currentTop = starts.top + (finals.top - starts.top) * progress;\n const currentLeft = starts.left + (finals.left - starts.left) * progress;\n const currentWidth = starts.width + (finals.width - starts.width) * progress;\n const currentHeight = starts.height + (finals.height - starts.height) * progress;\n\n // Update the element's style\n this.element.style.top = `${currentTop}px`;\n this.element.style.left = `${currentLeft}px`;\n this.element.style.width = `${currentWidth}px`;\n this.element.style.height = `${currentHeight}px`;\n\n // Log current size for debugging\n console.log(`Step ${step}: ${currentTop}, ${currentLeft}`);\n\n // Increase the step count\n step++;\n\n // Continue animating until we reach the final step\n if (step <= steps) {\n requestAnimationFrame(frame);\n } else {\n this.element.classList.toggle('open');\n if (!this.isOpen) this.destroyItself();\n }\n };\n\n // Start the animation\n requestAnimationFrame(frame);\n }\n\n placeItself() {\n document.body.appendChild(this.element);\n }\n\n destroyItself() {\n if (!document.body.contains(this.element)) return;\n document.body.removeChild(this.element);\n }\n}\n"],"names":["$e49d13fc7942bae1$export$2e2bcd8739ae039","zIndex","zIndexHidden","overlay","document","createElement","id","classList","add","style","opacity","element","body","appendChild","show","hide","$2f427fc7e1c3703f$export$2e2bcd8739ae039","isOpen","image","create","calculateStartsAndFinals","shadowImage","src","top","offsetTop","left","offsetLeft","width","offsetWidth","height","offsetHeight","s","f","nw","naturalWidth","ratio","naturalHeight","ww","window","innerWidth","margin","wh","innerHeight","Math","min","finalState","startingState","open","animate","close","starts","finals","step","frame","progress","currentTop","currentLeft","currentWidth","currentHeight","console","log","requestAnimationFrame","toggle","destroyItself","placeItself","contains","removeChild","$e220af4964903f87$export$2e2bcd8739ae039","currentImage","shadows","container","initOverlay","initImages","initControls","addEventListener","e","closeCurrent","images","querySelectorAll","forEach","crypto","randomUUID","link","wrapInLink","parent","parentElement","tagName","href","insertBefore","preventDefault","openLightBox","key","visibility","shadow","closeLightBox","closeAll","default"],"version":3,"file":"libra.min.js.map"}
\ No newline at end of file +{"mappings":"AEAe,MAAA,EACb,OAAS,GAAI,AACb,CAAA,aAAe,IAAK,AAEpB,cAAc,CACZ,IAAM,EAAU,SAAS,aAAa,CAAC,OAWvC,OAVA,EAAQ,EAAE,CAAG,gBACb,EAAQ,SAAS,CAAC,GAAG,CAAC,iBAGtB,EAAQ,KAAK,CAAC,MAAM,CAAG,IAAI,CAAC,YAAY,CACxC,EAAQ,KAAK,CAAC,OAAO,CAAG,IAExB,IAAI,CAAC,OAAO,CAAG,EACf,SAAS,IAAI,CAAC,WAAW,CAAC,GAEnB,IAAI,AACb,CAEA,MAAO,CACL,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAG,IAC7B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAG,IAAI,CAAC,MAAM,AACzC,CAEA,MAAO,CACL,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAG,IAC7B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAG,MAC9B,CACF,CC5Be,MAAA,EACb,OAAS,MAAM,AACf,CAAA,OAAS,CAAA,CAAK,AAQd,aAAY,CAAK,CAAE,CAGjB,OAFA,IAAI,CAAC,MAAM,CAAC,GACZ,IAAI,CAAC,wBAAwB,GACtB,IAAI,AACb,CAEA,OAAO,CAAK,CAAE,CAEZ,IAAM,EAAc,SAAS,aAAa,CAAC,MAC3C,CAAA,EAAY,GAAG,CAAG,EAAM,GAAG,CAC3B,EAAY,EAAE,CAAG,CAAC,aAAa,EAAE,EAAM,EAAE,CAAA,CAAE,CAC3C,EAAY,SAAS,CAAC,GAAG,CAAC,gBAG1B,EAAY,KAAK,CAAC,GAAG,CAAG,EAAM,SAAS,CACvC,EAAY,KAAK,CAAC,IAAI,CAAG,EAAM,UAAU,CACzC,EAAY,KAAK,CAAC,KAAK,CAAG,EAAM,WAAW,CAC3C,EAAY,KAAK,CAAC,MAAM,CAAG,EAAM,YAAY,CAC7C,EAAY,KAAK,CAAC,MAAM,CAAG,IAAI,CAAC,MAAM,CAEtC,SAAS,IAAI,CAAC,WAAW,CAAC,GAC1B,IAAI,CAAC,OAAO,CAAG,CACjB,CAEA,0BAA2B,CAEzB,IAAM,EAAI,CACR,IAAK,IAAI,CAAC,OAAO,CAAC,SAAS,CAC3B,KAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAC7B,MAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAC/B,OAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,AACnC,EAEM,EAAI,CAAC,EAIL,EAAK,IAAI,CAAC,OAAO,CAAC,YAAY,CAE9B,EAAQ,EADH,IAAI,CAAC,OAAO,CAAC,aAAa,CAG/B,EAAK,OAAO,UAAU,CAAG,IACzB,EAAK,OAAO,WAAW,CAAG,GAEhC,CAAA,EAAE,KAAK,CAAG,KAAK,GAAG,CAAC,EAAI,GACvB,EAAE,MAAM,CAAG,EAAE,KAAK,CAAG,EAEjB,EAAE,MAAM,EAAI,IACd,EAAE,MAAM,CAAG,EACX,EAAE,KAAK,CAAG,EAAE,MAAM,CAAG,GAIvB,EAAE,IAAI,CAAG,AAAC,CAAA,EAAK,EAAE,KAAI,AAAJ,EAAS,EAnBX,GAoBf,EAAE,GAAG,CAAG,AAAC,CAAA,EAAK,EAAE,MAAK,AAAL,EAAU,EApBX,GAsBf,IAAI,CAAC,UAAU,CAAG,EAClB,IAAI,CAAC,aAAa,CAAG,CACvB,CAQA,MAAO,CACL,IAAI,CAAC,MAAM,CAAG,CAAA,EACd,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAE,IAAI,CAAC,UAAU,CAClD,CAEA,OAAQ,CACN,IAAI,CAAC,MAAM,CAAG,CAAA,EACd,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAE,IAAI,CAAC,aAAa,CAClD,CAEA,QAAQ,CAAM,CAAE,CAAM,CAAE,CAGtB,IAAI,EAAO,EAGL,EAAQ,KAEZ,IAAM,EAAW,EANL,GASN,EAAa,EAAO,GAAG,CAAG,AAAC,CAAA,EAAO,GAAG,CAAG,EAAO,GAAE,AAAF,EAAO,EACtD,EAAc,EAAO,IAAI,CAAG,AAAC,CAAA,EAAO,IAAI,CAAG,EAAO,IAAG,AAAH,EAAQ,EAC1D,EAAe,EAAO,KAAK,CAAG,AAAC,CAAA,EAAO,KAAK,CAAG,EAAO,KAAI,AAAJ,EAAS,EAC9D,EAAgB,EAAO,MAAM,CAAG,AAAC,CAAA,EAAO,MAAM,CAAG,EAAO,MAAK,AAAL,EAAU,CAGxE,CAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAG,CAAA,EAAG,EAAW,EAAE,CAAC,CAC1C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAG,CAAA,EAAG,EAAY,EAAE,CAAC,CAC5C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAG,CAAA,EAAG,EAAa,EAAE,CAAC,CAC9C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAG,CAAA,EAAG,EAAc,EAAE,CAAC,CAM5C,EAAA,GAxBQ,GAyBV,sBAAsB,IAEtB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,QAC1B,AAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,GAExC,EAGA,sBAAsB,EACxB,CAEA,aAAc,CACZ,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CACxC,CAEA,eAAgB,CACT,SAAS,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,GACxC,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CACxC,CACF,CFjIe,MAAA,EACb,aAAe,IAAK,AACpB,CAAA,QAAU,CAAC,CAAE,AAQb,aAAY,CAAA,UAAE,CAAS,CAAE,CAAE,CACzB,IAAI,CAAC,SAAS,CAAG,EACjB,IAAI,CAAC,WAAW,GAChB,IAAI,CAAC,UAAU,GACf,IAAI,CAAC,YAAY,EACnB,CAEA,aAAc,CACZ,IAAI,CAAC,OAAO,CAAG,IAAI,EACnB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAS,AAAA,IAC7C,IAAI,CAAC,YAAY,EACnB,EACF,CAEA,YAAa,CACX,IAAI,CAAC,MAAM,CAAG,SAAS,gBAAgB,CAAC,CAAA,EAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAkB3E,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,AAAA,IAElB,EAAM,EAAE,CAAG,OAAO,UAAU,GAI5B,AAFa,AApBf,CAAA,SAAoB,CAAK,EAEvB,IACI,EADE,EAAS,EAAM,aAAa,CAWlC,OATI,AAAC,GAAU,AAAmB,MAAnB,EAAO,OAAO,CAO3B,EAAO,GALP,AADA,CAAA,EAAO,SAAS,aAAa,CAAC,IAA9B,EACK,IAAI,CAAG,EAAM,GAAG,CAErB,EAAO,YAAY,CAAC,EAAM,GAC1B,EAAK,WAAW,CAAC,IAIZ,CACT,CAAA,EAM0B,GAEnB,gBAAgB,CAAC,QAAS,AAAA,IAC7B,EAAE,cAAc,GAChB,IAAI,CAAC,YAAY,CAAC,EACpB,EACF,EACF,CAEA,cAAe,CAEb,SAAS,gBAAgB,CAAC,UAAW,AAAA,IAC/B,CAAA,AAAU,WAAV,EAAE,GAAG,EAAiB,AAAU,MAAV,EAAE,GAAG,AAAK,GAClC,IAAI,CAAC,YAAY,EAErB,GAEA,SAAS,IAAI,CAAC,gBAAgB,CAAC,QAAS,AAAA,IACtC,IAAI,CAAC,YAAY,EACnB,EACF,CAQA,aAAa,CAAK,CAAE,CAElB,EAAM,KAAK,CAAC,UAAU,CAAG,SACzB,IAAI,CAAC,YAAY,CAAG,EAGpB,IAAM,EAAS,IAAI,CAAC,OAAO,CAAC,EAAM,EAAE,CAAC,EAAI,IAAI,EAAO,EAChD,AAAC,CAAA,IAAI,CAAC,OAAO,CAAC,EAAM,EAAE,CAAC,EACzB,CAAA,IAAI,CAAC,OAAO,CAAC,EAAM,EAAE,CAAC,CAAG,CAD3B,EAKI,AAAC,SAAS,IAAI,CAAC,QAAQ,CAAC,EAAO,OAAO,GAAG,EAAO,WAAW,GAC/D,EAAO,IAAI,GAEX,IAAI,CAAC,OAAO,CAAC,IAAI,EACnB,CAEA,cAAc,CAAK,CAAE,CAEnB,EAAM,KAAK,CAAC,UAAU,CAAG,UACzB,IAAI,CAAC,YAAY,CAAG,KAGpB,IAAM,EAAS,IAAI,CAAC,OAAO,CAAC,EAAM,EAAE,CAAC,CAChC,IACL,EAAO,KAAK,GAEZ,IAAI,CAAC,OAAO,CAAC,IAAI,GACnB,CAEA,cAAe,CACR,IAAI,CAAC,YAAY,EACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CACtC,CAEA,UAAW,CACT,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,AAAA,IAClB,IAAI,CAAC,aAAa,CAAC,EACrB,GACA,IAAI,CAAC,OAAO,CAAC,IAAI,EACnB,CACF,Q,K,O","sources":["<anon>","src/lightbox.js","src/overlay.js","src/shadow.js"],"sourcesContent":["class $e49d13fc7942bae1$export$2e2bcd8739ae039 {\n zIndex = 900;\n zIndexHidden = -100;\n constructor(){\n const overlay = document.createElement('div');\n overlay.id = 'libra-overlay';\n overlay.classList.add('libra-overlay');\n // initialized state\n overlay.style.zIndex = this.zIndexHidden;\n overlay.style.opacity = '0';\n this.element = overlay;\n document.body.appendChild(overlay);\n return this;\n }\n show() {\n this.element.style.opacity = '1';\n this.element.style.zIndex = this.zIndex;\n }\n hide() {\n this.element.style.opacity = '0';\n this.element.style.zIndex = '-100';\n }\n}\n\n\nclass $2f427fc7e1c3703f$export$2e2bcd8739ae039 {\n zIndex = '1000';\n isOpen = false;\n /**\n * ============\n * Constructors\n * ============\n */ constructor(image){\n this.create(image);\n this.calculateStartsAndFinals();\n return this;\n }\n create(image) {\n // create shadow image\n const shadowImage = document.createElement('img');\n shadowImage.src = image.src;\n shadowImage.id = `libra-shadow-${image.id}`;\n shadowImage.classList.add('libra-shadow');\n // style and position shadow image\n shadowImage.style.top = image.offsetTop;\n shadowImage.style.left = image.offsetLeft;\n shadowImage.style.width = image.offsetWidth;\n shadowImage.style.height = image.offsetHeight;\n shadowImage.style.zIndex = this.zIndex;\n document.body.appendChild(shadowImage);\n this.element = shadowImage;\n }\n calculateStartsAndFinals() {\n // get starting state\n const s = {\n top: this.element.offsetTop,\n left: this.element.offsetLeft,\n width: this.element.offsetWidth,\n height: this.element.offsetHeight\n };\n const f = {};\n const margin = 50;\n // calculate final size\n const nw = this.element.naturalWidth;\n const nh = this.element.naturalHeight;\n const ratio = nw / nh;\n const ww = window.innerWidth - margin * 2;\n const wh = window.innerHeight - margin * 2;\n f.width = Math.min(nw, ww);\n f.height = f.width / ratio;\n if (f.height >= wh) {\n f.height = wh;\n f.width = f.height * ratio;\n }\n // calculate final position\n f.left = (ww - f.width) / 2 + margin;\n f.top = (wh - f.height) / 2 + margin;\n this.finalState = f;\n this.startingState = s;\n }\n /**\n * ============\n * Actions\n * ============\n */ open() {\n this.isOpen = true;\n this.animate(this.startingState, this.finalState);\n }\n close() {\n this.isOpen = false;\n this.animate(this.finalState, this.startingState);\n }\n animate(starts, finals) {\n // Set up the interval for smooth transition\n const steps = 20; // Number of steps for smoothness\n let step = 0;\n // Using requestAnimationFrame for smoother animation\n const frame = ()=>{\n // Calculate the progress (from 0 to 1)\n const progress = step / steps;\n // Interpolate the current values based on progress\n const currentTop = starts.top + (finals.top - starts.top) * progress;\n const currentLeft = starts.left + (finals.left - starts.left) * progress;\n const currentWidth = starts.width + (finals.width - starts.width) * progress;\n const currentHeight = starts.height + (finals.height - starts.height) * progress;\n // Update the element's style\n this.element.style.top = `${currentTop}px`;\n this.element.style.left = `${currentLeft}px`;\n this.element.style.width = `${currentWidth}px`;\n this.element.style.height = `${currentHeight}px`;\n // Increase the step count\n step++;\n // Continue animating until we reach the final step\n if (step <= steps) requestAnimationFrame(frame);\n else {\n this.element.classList.toggle('open');\n if (!this.isOpen) this.destroyItself();\n }\n };\n // Start the animation\n requestAnimationFrame(frame);\n }\n placeItself() {\n document.body.appendChild(this.element);\n }\n destroyItself() {\n if (!document.body.contains(this.element)) return;\n document.body.removeChild(this.element);\n }\n}\n\n\nclass $e220af4964903f87$export$2e2bcd8739ae039 {\n currentImage = null;\n shadows = {};\n /**\n * ============\n * Initializers\n * ============\n */ constructor({ container: container }){\n this.container = container;\n this.initOverlay();\n this.initImages();\n this.initControls();\n }\n initOverlay() {\n this.overlay = new (0, $e49d13fc7942bae1$export$2e2bcd8739ae039)();\n this.overlay.element.addEventListener('click', (e)=>{\n this.closeCurrent();\n });\n }\n initImages() {\n this.images = document.querySelectorAll(`${this.container} img[data-libra]`);\n function wrapInLink(image) {\n // wrap image with a link if it's not already wrapped\n const parent = image.parentElement;\n let link;\n if (!parent || parent.tagName !== 'A') {\n link = document.createElement('a');\n link.href = image.src;\n // replace image with the linked one\n parent.insertBefore(link, image);\n link.appendChild(image);\n } else link = parent;\n return link;\n }\n this.images.forEach((image)=>{\n // generate unique id for each image\n image.id = crypto.randomUUID();\n // make sure every image has a link\n const link = wrapInLink(image);\n // click link to open lightbox\n link.addEventListener('click', (e)=>{\n e.preventDefault();\n this.openLightBox(image);\n });\n });\n }\n initControls() {\n // keyboard shortcuts\n document.addEventListener('keydown', (e)=>{\n if (e.key === 'Escape' || e.key === ' ') this.closeCurrent();\n });\n // scroll to dismiss\n document.body.addEventListener('wheel', (e)=>{\n this.closeCurrent();\n });\n }\n /**\n * ============\n * Actions\n * ============\n */ openLightBox(image) {\n // hide and store original image\n image.style.visibility = 'hidden';\n this.currentImage = image;\n // get shadow of this image\n const shadow = this.shadows[image.id] || new (0, $2f427fc7e1c3703f$export$2e2bcd8739ae039)(image);\n if (!this.shadows[image.id]) this.shadows[image.id] = shadow;\n // place and open shadow\n if (!document.body.contains(shadow.element)) shadow.placeItself();\n shadow.open();\n this.overlay.show();\n }\n closeLightBox(image) {\n // show and unstore original image\n image.style.visibility = 'visible';\n this.currentImage = null;\n // close shadow\n const shadow = this.shadows[image.id];\n if (!shadow) return;\n shadow.close();\n this.overlay.hide();\n }\n closeCurrent() {\n if (!this.currentImage) return;\n this.closeLightBox(this.currentImage);\n }\n closeAll() {\n this.images.forEach((image)=>{\n this.closeLightBox(image);\n });\n this.overlay.hide();\n }\n}\n\n\nexport {$e220af4964903f87$export$2e2bcd8739ae039 as default};\n//# sourceMappingURL=libra.min.js.map\n","import Overlay from './overlay.js';\nimport Shadow from './shadow.js';\n\nexport default class LightBox {\n currentImage = null;\n shadows = {};\n\n /**\n * ============\n * Initializers\n * ============\n */\n\n constructor({ container }) {\n this.container = container;\n this.initOverlay();\n this.initImages();\n this.initControls();\n }\n\n initOverlay() {\n this.overlay = new Overlay();\n this.overlay.element.addEventListener('click', e => {\n this.closeCurrent();\n });\n }\n\n initImages() {\n this.images = document.querySelectorAll(`${this.container} img[data-libra]`);\n\n function wrapInLink(image) {\n // wrap image with a link if it's not already wrapped\n const parent = image.parentElement;\n let link;\n if (!parent || parent.tagName !== 'A') {\n link = document.createElement('a');\n link.href = image.src;\n // replace image with the linked one\n parent.insertBefore(link, image);\n link.appendChild(image);\n } else {\n link = parent;\n }\n return link;\n }\n\n this.images.forEach(image => {\n // generate unique id for each image\n image.id = crypto.randomUUID();\n // make sure every image has a link\n const link = wrapInLink(image);\n // click link to open lightbox\n link.addEventListener('click', e => {\n e.preventDefault();\n this.openLightBox(image);\n });\n });\n }\n\n initControls() {\n // keyboard shortcuts\n document.addEventListener('keydown', e => {\n if (e.key === 'Escape' || e.key === ' ') {\n this.closeCurrent();\n }\n });\n // scroll to dismiss\n document.body.addEventListener('wheel', e => {\n this.closeCurrent();\n });\n }\n\n /**\n * ============\n * Actions\n * ============\n */\n\n openLightBox(image) {\n // hide and store original image\n image.style.visibility = 'hidden';\n this.currentImage = image;\n\n // get shadow of this image\n const shadow = this.shadows[image.id] || new Shadow(image);\n if (!this.shadows[image.id]) {\n this.shadows[image.id] = shadow;\n }\n\n // place and open shadow\n if (!document.body.contains(shadow.element)) shadow.placeItself();\n shadow.open();\n\n this.overlay.show();\n }\n\n closeLightBox(image) {\n // show and unstore original image\n image.style.visibility = 'visible';\n this.currentImage = null;\n\n // close shadow\n const shadow = this.shadows[image.id];\n if (!shadow) return;\n shadow.close();\n\n this.overlay.hide();\n }\n\n closeCurrent() {\n if (!this.currentImage) return;\n this.closeLightBox(this.currentImage);\n }\n\n closeAll() {\n this.images.forEach(image => {\n this.closeLightBox(image);\n });\n this.overlay.hide();\n }\n}\n","export default class Overlay {\n zIndex = 900;\n zIndexHidden = -100;\n\n constructor() {\n const overlay = document.createElement('div');\n overlay.id = 'libra-overlay';\n overlay.classList.add('libra-overlay');\n\n // initialized state\n overlay.style.zIndex = this.zIndexHidden;\n overlay.style.opacity = '0';\n\n this.element = overlay;\n document.body.appendChild(overlay);\n\n return this;\n }\n\n show() {\n this.element.style.opacity = '1';\n this.element.style.zIndex = this.zIndex;\n }\n\n hide() {\n this.element.style.opacity = '0';\n this.element.style.zIndex = '-100';\n }\n}\n","export default class Shadow {\n zIndex = '1000'\n isOpen = false\n\n /**\n * ============\n * Constructors\n * ============\n */\n\n constructor(image) {\n this.create(image);\n this.calculateStartsAndFinals();\n return this;\n }\n\n create(image) {\n // create shadow image\n const shadowImage = document.createElement('img');\n shadowImage.src = image.src;\n shadowImage.id = `libra-shadow-${image.id}`;\n shadowImage.classList.add('libra-shadow');\n\n // style and position shadow image\n shadowImage.style.top = image.offsetTop;\n shadowImage.style.left = image.offsetLeft;\n shadowImage.style.width = image.offsetWidth;\n shadowImage.style.height = image.offsetHeight;\n shadowImage.style.zIndex = this.zIndex;\n\n document.body.appendChild(shadowImage);\n this.element = shadowImage;\n }\n\n calculateStartsAndFinals() {\n // get starting state\n const s = {\n top: this.element.offsetTop,\n left: this.element.offsetLeft,\n width: this.element.offsetWidth,\n height: this.element.offsetHeight\n }\n\n const f = {};\n const margin = 50;\n\n // calculate final size\n const nw = this.element.naturalWidth;\n const nh = this.element.naturalHeight;\n const ratio = nw / nh;\n\n const ww = window.innerWidth - margin*2;\n const wh = window.innerHeight - margin*2;\n\n f.width = Math.min(nw, ww);\n f.height = f.width / ratio;\n\n if (f.height >= wh) {\n f.height = wh;\n f.width = f.height * ratio;\n }\n\n // calculate final position\n f.left = (ww - f.width) / 2 + margin;\n f.top = (wh - f.height) / 2 + margin;\n\n this.finalState = f;\n this.startingState = s;\n }\n\n /**\n * ============\n * Actions\n * ============\n */\n\n open() {\n this.isOpen = true;\n this.animate(this.startingState, this.finalState)\n }\n\n close() {\n this.isOpen = false;\n this.animate(this.finalState, this.startingState);\n }\n\n animate(starts, finals) {\n // Set up the interval for smooth transition\n const steps = 20; // Number of steps for smoothness\n let step = 0;\n\n // Using requestAnimationFrame for smoother animation\n const frame = () => {\n // Calculate the progress (from 0 to 1)\n const progress = step / steps;\n\n // Interpolate the current values based on progress\n const currentTop = starts.top + (finals.top - starts.top) * progress;\n const currentLeft = starts.left + (finals.left - starts.left) * progress;\n const currentWidth = starts.width + (finals.width - starts.width) * progress;\n const currentHeight = starts.height + (finals.height - starts.height) * progress;\n\n // Update the element's style\n this.element.style.top = `${currentTop}px`;\n this.element.style.left = `${currentLeft}px`;\n this.element.style.width = `${currentWidth}px`;\n this.element.style.height = `${currentHeight}px`;\n\n // Increase the step count\n step++;\n\n // Continue animating until we reach the final step\n if (step <= steps) {\n requestAnimationFrame(frame);\n } else {\n this.element.classList.toggle('open');\n if (!this.isOpen) this.destroyItself();\n }\n };\n\n // Start the animation\n requestAnimationFrame(frame);\n }\n\n placeItself() {\n document.body.appendChild(this.element);\n }\n\n destroyItself() {\n if (!document.body.contains(this.element)) return;\n document.body.removeChild(this.element);\n }\n}\n"],"names":["$e49d13fc7942bae1$export$2e2bcd8739ae039","zIndex","zIndexHidden","overlay","document","createElement","id","classList","add","style","opacity","element","body","appendChild","show","hide","$2f427fc7e1c3703f$export$2e2bcd8739ae039","isOpen","image","create","calculateStartsAndFinals","shadowImage","src","top","offsetTop","left","offsetLeft","width","offsetWidth","height","offsetHeight","s","f","nw","naturalWidth","ratio","naturalHeight","ww","window","innerWidth","margin","wh","innerHeight","Math","min","finalState","startingState","open","animate","close","starts","finals","step","frame","progress","currentTop","currentLeft","currentWidth","currentHeight","requestAnimationFrame","toggle","destroyItself","placeItself","contains","removeChild","$e220af4964903f87$export$2e2bcd8739ae039","currentImage","shadows","container","initOverlay","initImages","initControls","addEventListener","e","closeCurrent","images","querySelectorAll","forEach","crypto","randomUUID","link","wrapInLink","parent","parentElement","tagName","href","insertBefore","preventDefault","openLightBox","key","visibility","shadow","closeLightBox","closeAll","default"],"version":3,"file":"libra.min.js.map"}
\ No newline at end of file diff --git a/src/shadow.js b/src/shadow.js index d7c99ed..dc83e74 100644 --- a/src/shadow.js +++ b/src/shadow.js @@ -106,9 +106,6 @@ export default class Shadow { this.element.style.width = `${currentWidth}px`; this.element.style.height = `${currentHeight}px`; - // Log current size for debugging - console.log(`Step ${step}: ${currentTop}, ${currentLeft}`); - // Increase the step count step++; |