Fix issue with slides without caption

deoostfrees · Jan 17, 2022 · b4e3525 · b4e3525
1 parent 8ac1889
commit b4e3525
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 32 deletions.
diff --git a/dist/js/parvus.esm.js b/dist/js/parvus.esm.js
@@ -2,7 +2,7 @@
  * Parvus
  *
  * @author Benjamin de Oostfrees
- * @version 2.0.0
+ * @version 2.0.1
  * @url https://github.com/deoostfrees/parvus
  *
  * MIT license
@@ -636,10 +636,6 @@ function Parvus(userOptions) {
       heightDifference = THUMBNAIL_SIZE.height / IMAGE_SIZE.height;
       xDifference = THUMBNAIL_SIZE.left - IMAGE_SIZE.left;
       yDifference = THUMBNAIL_SIZE.top - IMAGE_SIZE.top;
-      console.log(THUMBNAIL_SIZE.width);
-      console.log(THUMBNAIL_SIZE.height);
-      console.log(IMAGE_SIZE.width);
-      console.log(IMAGE_SIZE.height);
       requestAnimationFrame(() => {
         IMAGE.style.transform = `translate(${xDifference}px, ${yDifference}px) scale(${widthDifference}, ${heightDifference})`;
         IMAGE.style.transition = 'transform 0s, opacity 0s'; // Animate the difference reversal on the next tick
@@ -901,18 +897,16 @@ function Parvus(userOptions) {
 
   const setImageDimension = function setImageDimension(slideEl, imageEl) {
     const computedStyle = getComputedStyle(slideEl);
-    const captionRec = slideEl.querySelector('.parvus__caption').getBoundingClientRect();
+    const captionRec = slideEl.querySelector('.parvus__caption') !== null ? slideEl.querySelector('.parvus__caption').getBoundingClientRect().height : 0;
     const srcHeight = imageEl.naturalHeight;
     const srcWidth = imageEl.naturalWidth;
     let maxHeight = slideEl.getBoundingClientRect().height;
     let maxWidth = slideEl.getBoundingClientRect().width;
-    maxHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom) + parseFloat(captionRec.height);
+    maxHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom) + parseFloat(captionRec);
     maxWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
     const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight);
     imageEl.style.width = `${srcWidth * ratio || 0}px`;
     imageEl.style.height = `${srcHeight * ratio || 0}px`;
-    console.log(srcWidth * ratio || 0);
-    console.log(srcHeight * ratio || 0);
   };
   /**
    * Click event handler to trigger Parvus

diff --git a/dist/js/parvus.esm.min.js b/dist/js/parvus.esm.min.js
diff --git a/dist/js/parvus.js b/dist/js/parvus.js
@@ -2,7 +2,7 @@
  * Parvus
  *
  * @author Benjamin de Oostfrees
- * @version 2.0.0
+ * @version 2.0.1
  * @url https://github.com/deoostfrees/parvus
  *
  * MIT license
@@ -642,10 +642,6 @@
         heightDifference = THUMBNAIL_SIZE.height / IMAGE_SIZE.height;
         xDifference = THUMBNAIL_SIZE.left - IMAGE_SIZE.left;
         yDifference = THUMBNAIL_SIZE.top - IMAGE_SIZE.top;
-        console.log(THUMBNAIL_SIZE.width);
-        console.log(THUMBNAIL_SIZE.height);
-        console.log(IMAGE_SIZE.width);
-        console.log(IMAGE_SIZE.height);
         requestAnimationFrame(() => {
           IMAGE.style.transform = `translate(${xDifference}px, ${yDifference}px) scale(${widthDifference}, ${heightDifference})`;
           IMAGE.style.transition = 'transform 0s, opacity 0s'; // Animate the difference reversal on the next tick
@@ -907,18 +903,16 @@
 
     const setImageDimension = function setImageDimension(slideEl, imageEl) {
       const computedStyle = getComputedStyle(slideEl);
-      const captionRec = slideEl.querySelector('.parvus__caption').getBoundingClientRect();
+      const captionRec = slideEl.querySelector('.parvus__caption') !== null ? slideEl.querySelector('.parvus__caption').getBoundingClientRect().height : 0;
       const srcHeight = imageEl.naturalHeight;
       const srcWidth = imageEl.naturalWidth;
       let maxHeight = slideEl.getBoundingClientRect().height;
       let maxWidth = slideEl.getBoundingClientRect().width;
-      maxHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom) + parseFloat(captionRec.height);
+      maxHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom) + parseFloat(captionRec);
       maxWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
       const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight);
       imageEl.style.width = `${srcWidth * ratio || 0}px`;
       imageEl.style.height = `${srcHeight * ratio || 0}px`;
-      console.log(srcWidth * ratio || 0);
-      console.log(srcHeight * ratio || 0);
     };
     /**
      * Click event handler to trigger Parvus