diff options
| -rw-r--r-- | src/config.js | 6 | ||||
| -rw-r--r-- | src/libra.css | 14 | ||||
| -rw-r--r-- | src/lightbox.js | 4 | ||||
| -rw-r--r-- | src/overlay.js | 20 | ||||
| -rw-r--r-- | src/shadow.js | 6 |
5 files changed, 30 insertions, 20 deletions
diff --git a/src/config.js b/src/config.js index eea8314..c306d8f 100644 --- a/src/config.js +++ b/src/config.js @@ -1,8 +1,10 @@ const config = { selector: '[data-libra]', margin: 50, - offset: { x: 0, y: 0 } -} + offset: { x: 0, y: 0 }, + transitionDuration: 200, // milliseconds + imageCursor: 'zoom-in', +}; function deepMerge(target, source) { for (const key in source) { diff --git a/src/libra.css b/src/libra.css index 1c7277c..f3d6e7b 100644 --- a/src/libra.css +++ b/src/libra.css @@ -5,7 +5,7 @@ width: 100%; height: 100%; padding: 1rem; - transition: opacity 0.2s ease-in-out; + transition: opacity ease-in-out; backdrop-filter: blur(2rem); background-color: rgba(255, 255, 255, 0.75); @@ -17,6 +17,16 @@ cursor: pointer; } +.libra-overlay.libra-visible { + opacity: 1; + z-index: 900; +} + +.libra-overlay.libra-hidden { + opacity: 0; + z-index: -100; +} + @media (prefers-color-scheme: dark) { .libra-overlay { background-color: rgba(0, 0, 0, 0.75); @@ -25,9 +35,9 @@ .libra-shadow { position: absolute; - transition-duration: 0.2s; transition-property: transform; cursor: pointer; + z-index: 1000; } .libra-shadow.open { diff --git a/src/lightbox.js b/src/lightbox.js index bef29eb..7bf23d9 100644 --- a/src/lightbox.js +++ b/src/lightbox.js @@ -33,8 +33,8 @@ export default class LightBox { this.images.forEach(image => { if (image.tagName !== 'IMG') return; image.id = crypto.randomUUID(); // generate unique id for each image - image.style.cursor = 'zoom-in'; - image.addEventListener('click', () => this.open(image)); // click image to open lightbox + image.style.cursor = config.imageCursor; + image.addEventListener('click', () => this.open(image)); // click image to open lightbox }); } diff --git a/src/overlay.js b/src/overlay.js index 613340c..78fb579 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -1,15 +1,13 @@ -export default class Overlay { - zIndex = 900; - zIndexHidden = -100; +import config from './config'; +export default class Overlay { constructor() { const overlay = document.createElement('div'); overlay.id = 'libra-overlay'; - overlay.classList.add('libra-overlay'); + overlay.classList.add('libra-overlay', 'libra-hidden'); - // initialized state - overlay.style.zIndex = this.zIndexHidden; - overlay.style.opacity = '0'; + // Set transition duration from config + overlay.style.transitionDuration = config.transitionDuration + 'ms'; this.element = overlay; document.body.appendChild(overlay); @@ -18,12 +16,12 @@ export default class Overlay { } show() { - this.element.style.opacity = '1'; - this.element.style.zIndex = this.zIndex; + this.element.classList.remove('libra-hidden'); + this.element.classList.add('libra-visible'); } hide() { - this.element.style.opacity = '0'; - this.element.style.zIndex = '-100'; + this.element.classList.remove('libra-visible'); + this.element.classList.add('libra-hidden'); } } diff --git a/src/shadow.js b/src/shadow.js index 9889240..e36affa 100644 --- a/src/shadow.js +++ b/src/shadow.js @@ -2,8 +2,7 @@ import Animation from './animation.js' import config from './config' export default class Shadow { - zIndex = '1000' - isOpen = false + isOpen = false; /** * ============ @@ -39,7 +38,8 @@ export default class Shadow { shadow.style.left = `${this.originalPosition.left}px`; shadow.style.width = `${this.originalPosition.width}px`; shadow.style.height = `${this.originalPosition.height}px`; - shadow.style.zIndex = this.zIndex; + // Set transition duration from config + shadow.style.transitionDuration = config.transitionDuration + 'ms'; document.body.appendChild(shadow); this.element = shadow; |