diff options
| -rw-r--r-- | dist/libra.min.js | 2 | ||||
| -rw-r--r-- | dist/libra.min.js.map | 1 | ||||
| -rw-r--r-- | dist/lightbox.min.js | 231 | ||||
| -rw-r--r-- | dist/lightbox.min.js.map | 1 | ||||
| -rw-r--r-- | package-lock.json | 2 | ||||
| -rw-r--r-- | package.json | 15 | ||||
| -rw-r--r-- | src/libo.css | 8 | ||||
| -rw-r--r-- | src/lightbox.js | 2 | ||||
| -rw-r--r-- | src/overlay.js | 4 | ||||
| -rw-r--r-- | src/shadow.js | 4 | ||||
| -rw-r--r-- | test/index.html | 12 |
11 files changed, 29 insertions, 253 deletions
diff --git a/dist/libra.min.js b/dist/libra.min.js new file mode 100644 index 0000000..67a5f98 --- /dev/null +++ b/dist/libra.min.js @@ -0,0 +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}; +//# sourceMappingURL=libra.min.js.map diff --git a/dist/libra.min.js.map b/dist/libra.min.js.map new file mode 100644 index 0000000..d96a7c8 --- /dev/null +++ b/dist/libra.min.js.map @@ -0,0 +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 diff --git a/dist/lightbox.min.js b/dist/lightbox.min.js deleted file mode 100644 index 84921d8..0000000 --- a/dist/lightbox.min.js +++ /dev/null @@ -1,231 +0,0 @@ -class $1e566b6277893a87$export$2e2bcd8739ae039 { - zIndex = 900; - zIndexHidden = -100; - constructor(){ - const overlay = document.createElement('div'); - overlay.id = 'libo-overlay'; - overlay.classList.add('libo-overlay'); - // initialized state - overlay.style.zIndex = this.zIndexHidden; - overlay.style.opacity = '0'; - this.element = overlay; - document.body.appendChild(overlay); - return 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 $ec04822463bc4394$export$2e2bcd8739ae039 { - zIndex = '1000'; - isOpen = false; - /** - * ============ - * Constructors - * ============ - */ constructor(image){ - this.create(image); - this.calculateStartsAndFinals(); - return this; - } - create(image) { - // create shadow image - const shadowImage = document.createElement('img'); - shadowImage.src = image.src; - shadowImage.id = `libo-shadow-${image.id}`; - shadowImage.classList.add('libo-shadow'); - // style and position shadow image - shadowImage.style.top = image.offsetTop; - shadowImage.style.left = image.offsetLeft; - shadowImage.style.width = image.offsetWidth; - shadowImage.style.height = image.offsetHeight; - shadowImage.style.zIndex = this.zIndex; - document.body.appendChild(shadowImage); - this.element = shadowImage; - } - calculateStartsAndFinals() { - // get starting state - const s = { - top: this.element.offsetTop, - left: this.element.offsetLeft, - width: this.element.offsetWidth, - height: this.element.offsetHeight - }; - const f = {}; - const margin = 50; - // calculate final size - const nw = this.element.naturalWidth; - const nh = this.element.naturalHeight; - const ratio = nw / nh; - const ww = window.innerWidth - margin * 2; - const wh = window.innerHeight - margin * 2; - f.width = Math.min(nw, ww); - f.height = f.width / ratio; - if (f.height >= wh) { - f.height = wh; - f.width = f.height * ratio; - } - // calculate final position - f.left = (ww - f.width) / 2 + margin; - f.top = (wh - f.height) / 2 + margin; - this.finalState = f; - this.startingState = s; - } - /** - * ============ - * Actions - * ============ - */ open() { - this.isOpen = true; - this.animate(this.startingState, this.finalState); - } - close() { - this.isOpen = false; - this.animate(this.finalState, this.startingState); - } - animate(starts, finals) { - // Set up the interval for smooth transition - const steps = 20; // Number of steps for smoothness - let step = 0; - // Using requestAnimationFrame for smoother animation - const frame = ()=>{ - // Calculate the progress (from 0 to 1) - const progress = step / steps; - // Interpolate the current values based on progress - const currentTop = starts.top + (finals.top - starts.top) * progress; - const currentLeft = starts.left + (finals.left - starts.left) * progress; - const currentWidth = starts.width + (finals.width - starts.width) * progress; - const currentHeight = starts.height + (finals.height - starts.height) * progress; - // Update the element's style - this.element.style.top = `${currentTop}px`; - this.element.style.left = `${currentLeft}px`; - 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++; - // Continue animating until we reach the final step - if (step <= steps) requestAnimationFrame(frame); - else { - this.element.classList.toggle('open'); - if (!this.isOpen) this.destroyItself(); - } - }; - // Start the animation - requestAnimationFrame(frame); - } - 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({ container: container }){ - this.container = container; - this.initOverlay(); - this.initImages(); - this.initControls(); - } - initOverlay() { - this.overlay = new (0, $1e566b6277893a87$export$2e2bcd8739ae039)(); - this.overlay.element.addEventListener('click', (e)=>{ - this.closeCurrent(); - }); - } - initImages() { - this.images = document.querySelectorAll(`${this.container} img[data-libo]`); - function wrapInLink(image) { - // wrap image with a link if it's not already wrapped - const parent = image.parentElement; - let link; - if (!parent || parent.tagName !== 'A') { - link = document.createElement('a'); - link.href = image.src; - // replace image with the linked one - parent.insertBefore(link, image); - link.appendChild(image); - } else link = parent; - return link; - } - this.images.forEach((image)=>{ - // generate unique id for each image - image.id = crypto.randomUUID(); - // make sure every image has a link - const link = wrapInLink(image); - // click link to open lightbox - link.addEventListener('click', (e)=>{ - e.preventDefault(); - this.openLightBox(image); - }); - }); - } - 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(); - }); - } - /** - * ============ - * Actions - * ============ - */ openLightBox(image) { - // hide and store original image - image.style.visibility = 'hidden'; - this.currentImage = image; - // get shadow of this image - const shadow = this.shadows[image.id] || new (0, $ec04822463bc4394$export$2e2bcd8739ae039)(image); - if (!this.shadows[image.id]) this.shadows[image.id] = shadow; - // place and open shadow - if (!document.body.contains(shadow.element)) shadow.placeItself(); - shadow.open(); - this.overlay.show(); - } - closeLightBox(image) { - // show and unstore original image - image.style.visibility = 'visible'; - this.currentImage = null; - // close shadow - const shadow = this.shadows[image.id]; - if (!shadow) return; - shadow.close(); - this.overlay.hide(); - } - closeCurrent() { - if (!this.currentImage) return; - this.closeLightBox(this.currentImage); - } - closeAll() { - this.images.forEach((image)=>{ - this.closeLightBox(image); - }); - this.overlay.hide(); - } -} - - -export {$3e29c386d1910a1d$export$2e2bcd8739ae039 as default}; -//# sourceMappingURL=lightbox.min.js.map diff --git a/dist/lightbox.min.js.map b/dist/lightbox.min.js.map deleted file mode 100644 index 5dd3139..0000000 --- a/dist/lightbox.min.js.map +++ /dev/null @@ -1 +0,0 @@ -{"mappings":"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","sources":["src/lightbox.js","src/overlay.js","src/shadow.js"],"sourcesContent":["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-libo]`);\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 = 'libo-overlay';\n overlay.classList.add('libo-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 = `libo-shadow-${image.id}`;\n shadowImage.classList.add('libo-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":[],"version":3,"file":"lightbox.min.js.map","sourceRoot":"../"}
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d716725..9c49869 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "libo", + "name": "libra", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/package.json b/package.json index f8c3cfd..b75bdc0 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,28 @@ { - "name": "libo", + "name": "libra", "version": "1.0.0", "description": "Light-weight and focused JavaScript image lightbox plugin.", "keywords": [ "lightbox" ], - "homepage": "https://github.com/BigCoke233/libo#readme", + "homepage": "https://github.com/BigCoke233/libra#readme", "bugs": { - "url": "https://github.com/BigCoke233/libo/issues" + "url": "https://github.com/BigCoke233/libra/issues" }, "repository": { "type": "git", - "url": "git+https://github.com/BigCoke233/libo.git" + "url": "git+https://github.com/BigCoke233/libra.git" }, "license": "MIT", "author": "Eltrac", "type": "module", "source": "src/lightbox.js", - "main": "dist/lightbox.min.js", + "module": "dist/libra.min.js", + "targets": { + "module": { + "optimize": true + } + }, "directories": { "test": "test" }, diff --git a/src/libo.css b/src/libo.css index b92c4b4..2118d14 100644 --- a/src/libo.css +++ b/src/libo.css @@ -1,4 +1,4 @@ -.libo-overlay { +.libra-overlay { position: fixed; top: 0; left: 0; @@ -18,12 +18,12 @@ } @media (prefers-color-scheme: dark) { - .libo-overlay { + .libra-overlay { background-color: rgba(0, 0, 0, 0.75); } } -.libo-shadow { +.libra-shadow { position: absolute; transition-duration: 0.2s; transition-property: transform; @@ -32,6 +32,6 @@ cursor: pointer; } -.libo-shadow.open { +.libra-shadow.open { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); } diff --git a/src/lightbox.js b/src/lightbox.js index 8d7ea67..5272186 100644 --- a/src/lightbox.js +++ b/src/lightbox.js @@ -26,7 +26,7 @@ export default class LightBox { } initImages() { - this.images = document.querySelectorAll(`${this.container} img[data-libo]`); + this.images = document.querySelectorAll(`${this.container} img[data-libra]`); function wrapInLink(image) { // wrap image with a link if it's not already wrapped diff --git a/src/overlay.js b/src/overlay.js index 5c73b95..613340c 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -4,8 +4,8 @@ export default class Overlay { constructor() { const overlay = document.createElement('div'); - overlay.id = 'libo-overlay'; - overlay.classList.add('libo-overlay'); + overlay.id = 'libra-overlay'; + overlay.classList.add('libra-overlay'); // initialized state overlay.style.zIndex = this.zIndexHidden; diff --git a/src/shadow.js b/src/shadow.js index 88bf210..d7c99ed 100644 --- a/src/shadow.js +++ b/src/shadow.js @@ -18,8 +18,8 @@ export default class Shadow { // create shadow image const shadowImage = document.createElement('img'); shadowImage.src = image.src; - shadowImage.id = `libo-shadow-${image.id}`; - shadowImage.classList.add('libo-shadow'); + shadowImage.id = `libra-shadow-${image.id}`; + shadowImage.classList.add('libra-shadow'); // style and position shadow image shadowImage.style.top = image.offsetTop; diff --git a/test/index.html b/test/index.html index 3b443ef..4dc3cf3 100644 --- a/test/index.html +++ b/test/index.html @@ -1,31 +1,31 @@ <html> <head> - <link rel="stylesheet" href="/src/libo.css" /> + <link rel="stylesheet" href="/src/libra.css" /> </head> <body> - <div class="libo" style="display: flex; justify-content: center; align-items: center;flex-wrap:wrap; + <div class="libra" style="display: flex; justify-content: center; align-items: center;flex-wrap:wrap; width:700px;margin:1rem auto"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <img style="max-width:100%" - data-libo + data-libra src="test.jpg" /> <img style="width:50%" - data-libo + data-libra src="test-2.jpg" /> <img style="width:30%" - data-libo + data-libra src="test-3.jpg" /> </div> <script type="module"> import LightBox from '/dist/lightbox.min.js'; const lightbox = new LightBox({ - container: '.libo' + container: '.libra' }); </script> </body> |