From 7113655e17a38d9d73cffe469c28b6ddf5b0636f Mon Sep 17 00:00:00 2001 From: Eltrac Date: Thu, 18 Sep 2025 18:51:39 +0800 Subject: refactor: avoid repetition Since we are constantly adjusting shadow's positions and fetching original positions, encapsulate them into functions. --- src/shadow.js | 50 +++++++++++++++++++++----------------------------- 1 file changed, 21 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/shadow.js b/src/shadow.js index b02fad5..50e3345 100644 --- a/src/shadow.js +++ b/src/shadow.js @@ -12,15 +12,7 @@ export default class Shadow { constructor(image) { this.original = image; - - const rect = this.original.getBoundingClientRect(); - this.originalPosition = { - top: rect.top + window.scrollY + config.offset.y, - left: rect.left + window.scrollX + config.offset.x, - width: rect.width, - height: rect.height - } - + this.fetchOriginalPosition(); this.create(image); return this; @@ -32,26 +24,16 @@ export default class Shadow { 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 = config.transitionDuration + 'ms'; - document.body.appendChild(shadow); this.element = shadow; - } - /** - * ============ - * Actions - * ============ - */ + // set positioning and place shadow element + this.positionShadow(); + this.placeItself(); + } - updateOriginalPosition() { + fetchOriginalPosition() { const rect = this.original.getBoundingClientRect(); this.originalPosition = { top: rect.top + window.scrollY + config.offset.y, @@ -61,16 +43,26 @@ export default class Shadow { }; } + 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'; + } + + /** + * ============ + * Actions + * ============ + */ + 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.fetchOriginalPosition(); + this.positionShadow(); this.original.style.visibility = 'hidden'; if (!document.body.contains(this.element)) this.placeItself(); -- cgit v1.2.3