gatsby-background-image-es5 - npm Package Compare versions

Comparing version 0.8.8 to 0.8.9

ImageUtils.js

@@ -77,2 +77,3 @@ "use strict";
  * @param props
+ * @param selfRef
  */
@@ -83,3 +84,3 @@
 
-var activateCacheForImage = function activateCacheForImage(props) {
+var activateCacheForImage = function activateCacheForImage(props, selfRef) {
   var convertedProps = (0, _HelperUtils.convertProps)(props);
@@ -224,2 +225,3 @@
  * @param props
+ * @param selfRef
  * @return {null|Array|*}
@@ -231,3 +233,7 @@ */
 
-var activatePictureRef = function activatePictureRef(imageRef, props) {
+var activatePictureRef = function activatePictureRef(imageRef, props, selfRef) {
+  if (selfRef === void 0) {
+    selfRef = null;
+  }
+
   var convertedProps = (0, _HelperUtils.convertProps)(props);
@@ -237,3 +243,3 @@
     if ((0, _HelperUtils.hasImageArray)(convertedProps)) {
-      return activateMultiplePictureRefs(imageRef, props);
+      return activateMultiplePictureRefs(imageRef, props, selfRef);
     } else {
@@ -243,7 +249,15 @@ var imageData = convertedProps.fluid ? convertedProps.fluid : convertedProps.fixed; // Prevent adding HTMLPictureElement if it isn't supported (e.g. IE11),
 
+      var removableElement = null;
+
       if (hasPictureElement()) {
         var pic = document.createElement('picture');
 
+        if (selfRef) {
+          pic.width = imageRef.width = selfRef.offsetWidth;
+          pic.height = imageRef.height = selfRef.offsetHeight;
+        }
+
         if (imageData.srcSetWebp) {
-          var sourcesWebP = document.createElement('source');
+          var sourcesWebP = document.createElement('source'); // Set original component's style.
+
           sourcesWebP.type = "image/webp";
@@ -256,6 +270,15 @@ sourcesWebP.srcset = imageData.srcSetWebp;
         pic.appendChild(imageRef);
+        removableElement = pic; // document.body.appendChild(removableElement)
+      } else {
+        if (selfRef) {
+          imageRef.width = selfRef.offsetWidth;
+          imageRef.height = selfRef.offsetHeight;
+        }
+
+        removableElement = imageRef; // document.body.appendChild(removableElement)
       }
 
       imageRef.srcset = imageData.srcSet ? imageData.srcSet : "";
-      imageRef.src = imageData.src ? imageData.src : "";
+      imageRef.src = imageData.src ? imageData.src : ""; // document.body.removeChild(removableElement)
+
       return imageRef;
@@ -272,2 +295,3 @@ }
  * @param props
+ * @param selfRef
  * @return {Array||null}
@@ -279,3 +303,3 @@ */
 
-var activateMultiplePictureRefs = function activateMultiplePictureRefs(imageRefs, props) {
+var activateMultiplePictureRefs = function activateMultiplePictureRefs(imageRefs, props, selfRef) {
   var convertedProps = (0, _HelperUtils.convertProps)(props); // Extract Image Array.
@@ -287,7 +311,7 @@
         fluid: convertedProps.fluid[index]
-      }));
+      }), selfRef);
     } else {
       return activatePictureRef(imageRef, (0, _assign["default"])({}, convertedProps, {
         fixed: convertedProps.fixed[index]
-      }));
+      }), selfRef);
     }
@@ -294,0 +318,0 @@ });

index.js

@@ -74,3 +74,3 @@ "use strict";
 
-      _this.imageRef = (0, _ImageUtils.activatePictureRef)(_this.imageRef, _this.props);
+      _this.imageRef = (0, _ImageUtils.activatePictureRef)(_this.imageRef, _this.props, _this.selfRef);
 
@@ -142,3 +142,4 @@ _this.setState({
 
-    _this.bgImage = (0, _ImageUtils.initialBgImage)(props); // console.log(`-------------------------------------------------------------`)
+    _this.bgImage = (0, _ImageUtils.initialBgImage)(props);
+    _this.selfRef = null; // console.log(`-------------------------------------------------------------`)
 
@@ -234,2 +235,4 @@ return _this;
   _proto.handleRef = function handleRef(ref) {
+    this.selfRef = ref;
+
     if (this.state.IOSupported && ref) {
@@ -236,0 +239,0 @@ this.cleanUpListeners = (0, _IntersectionObserverUtils.listenToIntersections)(ref, this.intersectionListener);

package.json

 {
   "name": "gatsby-background-image-es5",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Lazy-loading React background-image component with optional support for the blur-up effect. Transpiled to ES5.",
@@ -48,3 +48,3 @@ "keywords": [
   },
-  "gitHead": "da9574c6b16b4bf6466dcea0282743303a1dc8b9"
+  "gitHead": "522b2bb94ae0dac320644f1f600bdf3134504df9"
 }

README.md

@@ -186,4 +186,5 @@ <h1 align="center">
   plugins: [
-      ...
-  `gatsby-background-image-es5`,
+    ...
+    `gatsby-background-image-es5`,
+    ...
 ]
@@ -190,0 +191,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89878

increased by0.92%

Lines of code

1561

increased by1.3%

Number of lines in readme file

502

increased by0.2%

No dependency changes