image-loader-spinner - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/index.d.ts

@@ -1,3 +0,3 @@
-declare function ImageLoader(errorUrl?: string | null): void;
+declare function ImageLoader(errorUrl?: string | null, defaultSize?: number): void;
 
 export { ImageLoader };

dist/index.js

@@ -28,2 +28,3 @@ "use strict";
 var firstInit = true;
+var imageDefaultSize = 50;
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
@@ -49,4 +50,4 @@ var observer = new MutationObserver((mutations) => {
   e.target.removeEventListener("error", imageError);
-  e.target.parentElement.removeChild(e.target.spinner);
-  e.target.spinner = null;
+  e.target.parentElement.removeChild(e.target.spinnerContainer);
+  e.target.spinnerContainer = null;
   e.target.removeAttribute("loading");
@@ -61,4 +62,4 @@ e.target.removeAttribute("spinner");
     e.target.removeEventListener("error", imageError);
-    e.target.parentElement.removeChild(e.target.spinner);
-    e.target.spinner = null;
+    e.target.parentElement.removeChild(e.target.spinnerContainer);
+    e.target.spinnerContainer = null;
     e.target.removeAttribute("loading");
@@ -75,18 +76,34 @@ e.target.removeAttribute("spinner");
   document.body.querySelectorAll("img").forEach((image) => {
-    const spinnerSize = image.getAttribute("spinner");
     const parentElement = image.parentElement;
-    if (spinnerSize == null || image.getAttribute("loading") != null || parentElement == null)
+    if (image.getAttribute("spinner") == null || image.getAttribute("loading") != null || parentElement == null)
       return;
     image.style.display = "none";
     image.setAttribute("loading", "true");
-    let size = 50;
-    if (!isNaN(parseInt(spinnerSize)))
-      size = parseInt(spinnerSize);
+    const size = image.getAttribute("size"), widthSize = image.getAttribute("sizeWidth"), heightSize = image.getAttribute("sizeWidth");
+    let spinner_container_size = { width: imageDefaultSize, height: imageDefaultSize };
+    let defaultUnit = { width: "px", height: "px" };
+    if (size != null && !isNaN(parseInt(size))) {
+      spinner_container_size = { width: parseInt(size), height: parseInt(size) };
+      defaultUnit = { width: getUnit(size), height: getUnit(size) };
+    }
+    if (widthSize != null && !isNaN(parseInt(widthSize))) {
+      spinner_container_size = { width: parseInt(widthSize), height: spinner_container_size.height };
+      defaultUnit = { width: getUnit(widthSize), height: defaultUnit.height };
+    }
+    if (heightSize != null && !isNaN(parseInt(heightSize))) {
+      spinner_container_size = { width: spinner_container_size.width, height: parseInt(heightSize) };
+      defaultUnit = { width: defaultUnit.width, height: getUnit(heightSize) };
+    }
     const spinner_container = document.createElement("div");
-    spinner_container.style.width = size + "px";
-    spinner_container.style.height = size + "px";
+    spinner_container.style.width = spinner_container_size + defaultUnit.toString();
+    spinner_container.style.height = spinner_container_size + defaultUnit.toString();
+    let spinner_size = { width: spinner_container.clientWidth / 2, height: spinner_container.clientHeight / 2 };
+    if (spinner_size.width > spinner_size.height)
+      spinner_size = { width: spinner_container.clientHeight / 2, height: spinner_container.clientHeight / 2 };
+    else
+      spinner_size = { width: spinner_container.clientWidth / 2, height: spinner_container.clientWidth / 2 };
     const spinner = document.createElement("div");
     spinner.classList.add("spinner");
-    spinner.style.width = size / 2 + "px";
-    spinner.style.height = size / 2 + "px";
+    spinner.style.width = spinner_size + "px";
+    spinner.style.height = spinner_size + "px";
     spinner_container.appendChild(spinner);
@@ -97,3 +114,3 @@ if (image.style.display == "none")
       image.displayAfterLoad = true;
-    image.spinner = spinner_container;
+    image.spinnerContainer = spinner_container;
     parentElement.insertBefore(spinner_container, image);
@@ -108,2 +125,12 @@ image.addEventListener("load", imageLoaded);
 }
+function getUnit(value) {
+  if (value.endsWith("%"))
+    return "%";
+  else if (value.endsWith("vh"))
+    return "vh";
+  else if (value.endsWith("vw"))
+    return "vw";
+  else
+    return "px";
+}
 function isLocalImage(src) {
@@ -116,3 +143,4 @@ if (src.startsWith(`http://${window.location.hostname}/`) || src.startsWith(`https://${window.location.hostname}/`))
 }
-function ImageLoader(errorUrl = null) {
+function ImageLoader(errorUrl = null, defaultSize = imageDefaultSize) {
+  imageDefaultSize = defaultSize;
   imageErrorSrc = errorUrl;
@@ -119,0 +147,0 @@ observer.observe(document, {

package.json

 {
   "name": "image-loader-spinner",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Use a spinner until your images are completely loaded in the DOM",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -16,3 +16,6 @@
 import ImageLoader from 'image-loader-spinner';
-ImageLoader('assets/images/errorLoad.png'); // you can pass an default image src error
+
+// first argument is an default image src error (default is null)
+// second argument is the default size of loading container in pixel (default is 50)
+ImageLoader('assets/images/errorLoad.png', 150);
 ```
@@ -31,7 +34,7 @@
             .spinner_container {
-			    display: flex;
-			    align-items: center;
-			    background-color: rgba(0, 0, 0, 0.05);
-		    }
-
+                display: flex;
+                align-items: center;
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+            
             .spinner {
@@ -58,6 +61,8 @@ border: 3px solid #333;
 
-        <img src="assets/images/image.png" spinner="100" /> <!-- Spinner size 50px -->
+        <img src="assets/images/image.png" spinner="true" /> <!-- Show spinner container with defaultSize -->
 
+        <img src="assets/images/image.png" spinner="true" size="150px" /> <!-- Show spinner container with widthSize 150px, heightSize 150px -->
+
         <div class="insideDiv">
-            <img src="assets/images/secondImage.png" spinner="150" /> <!-- Spinner size 150px -->
+            <img src="assets/images/image.png" spinner="true" widthSize="50px" heightSize="200px" /> <!-- Show spinner container with widthSize 50px, heightSize 200px -->
         </div>
@@ -69,3 +74,3 @@ </body>
 Add the attribute spinner for set the loading spinner instead an empty image.<br />
-The attribute is the size of your spinner_container div.<br />
+The attribute size is the size of your spinner_container div.<br />
 The spinner will be half the size of your container.<br />
@@ -87,3 +92,3 @@ Your spinner will be display as :
 const image = new Image();
-image.setAttribute("spinner", "100");
+image.setAttribute("spinner", "true");
 setTimeout(() => {
@@ -102,5 +107,5 @@ image.src = "https://i.imgur.com/rsjPao4.gif";
     const image = document.getElementById("myImage");
-    image.setAttribute("spinner", "100");
+    image.setAttribute("spinner", "true");
     image.src = "https://i.imgur.com/rsjPao4.gif";
 }, 5000);
 ```

No alert changes

Improved metrics

Total package byte prevSize

34019

increased by39.42%

Lines of code

276

increased by25.45%

Number of lines in readme file

105

increased by5%

No dependency changes