summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEltrac <hi@guhub.cn>2025-09-16 15:19:11 +0800
committerEltrac <hi@guhub.cn>2025-09-16 15:19:11 +0800
commit11e0bbedadcd950bb17bf4d97adfd0afb0bce713 (patch)
tree9aca0b99595eeb8dc9b283ba0ef571eaf369de27
parentf4f5d842dfb398e9da599fe2534167e95cc1d6b9 (diff)
refactor: move image handling to shadow class
- lightbox module no longer handles original image visibility - lightbox module no longer handles shadow placement - lightbox module now only fetch and use shadow object
-rw-r--r--src/lightbox.js23
-rw-r--r--src/shadow.js8
2 files changed, 12 insertions, 19 deletions
diff --git a/src/lightbox.js b/src/lightbox.js
index 49884cc..f7dd8b3 100644
--- a/src/lightbox.js
+++ b/src/lightbox.js
@@ -53,33 +53,25 @@ export default class LightBox {
* ============
*/
+ // open lightbox = open shadow + show overlay
open(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 Shadow(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();
}
+ // close lightbox = remove shadow + hide overlay
close(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();
+ if (!this.shadows[image.id]) return;
+ this.shadows[image.id].close();
this.overlay.hide();
}
@@ -88,11 +80,4 @@ export default class LightBox {
if (!this.currentImage) return;
this.close(this.currentImage);
}
-
- closeAll() {
- this.images.forEach(image => {
- this.close(image);
- });
- this.overlay.hide();
- }
}
diff --git a/src/shadow.js b/src/shadow.js
index 19703de..462b3af 100644
--- a/src/shadow.js
+++ b/src/shadow.js
@@ -11,6 +11,7 @@ export default class Shadow {
*/
constructor(image) {
+ this.original = image;
this.create(image);
this.startingState = {
@@ -49,6 +50,10 @@ export default class Shadow {
open() {
this.isOpen = true;
+
+ this.original.style.visibility = 'hidden';
+ if (!document.body.contains(this.element)) this.placeItself();
+
Animation.transformMatrix(
this.element,
this.startingState,
@@ -58,6 +63,9 @@ export default class Shadow {
close() {
this.isOpen = false;
+
+ this.original.style.visibility = 'visible';
+
Animation.resetTransformMatrix(this.element);
setTimeout(() => this.destroyItself(), 300);
}