feat: handle all image options

- try/catch wrong options
pex-gl · Mar 16, 2022 · 799b210 · 799b210
1 parent a2874d6
commit 799b210
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -59,15 +59,15 @@ <h1>pex-io</h1>
         async: { ...assetState },
         "async-batch": { ...assetState },
         error: { ...assetState, error: null },
+        "image-options": { all: null, readOnly: null, urlOnly: null },
       };
 
       const app = () => () => {
         return [
           "div",
-          { style: { display: "flex", gap: "60px" } },
+          { style: { display: "flex", "flex-wrap": "wrap", gap: "60px" } },
           Object.keys(state).map((technique) => [
             "div",
-            { style: { "flex-basis": "100%" } },
             ["h2", technique],
             Object.keys(state[technique]).map((itemName) => {
               let value = state[technique][itemName];
@@ -123,8 +123,7 @@ <h1>pex-io</h1>
             state["callback-batch"].json = res.color;
             state["callback-batch"].image = res.pex;
             state["callback-batch"].binary = res.data;
-            if (err)
-              return console.log("callback batch", filterResultsErrors(err));
+            if (err) console.log("callback batch", filterResultsErrors(err));
           }
         );
       })();
@@ -197,7 +196,52 @@ <h1>pex-io</h1>
         });
         io.load({ errorUnknownType: { foo: "bar" } }, (err, res) => {
           state.error.error = res.errorUnknownType;
-          if (err) return console.log("error", filterResultsErrors(err));
+          if (err) console.log("error", filterResultsErrors(err));
+        });
+      })();
+
+      // Image option
+      const printImageAttributes = (image) =>
+        Array.from(image.attributes)
+          .map((a) => a.name)
+          .join(", ");
+
+      (() => {
+        io.loadImage(
+          {
+            url: ASSETS.image,
+
+            alt: "Image Options",
+            crossOrigin: "anonymous",
+            decoding: "async",
+            height: 20,
+            isMap: false,
+            loading: "eager",
+            referrerPolicy: "no-referrer",
+            sizes: "(max-width: 600px) 480px, 800px",
+            src: "bogus",
+            srcset: `${ASSETS.image} 1x, ${ASSETS.image} 2x`,
+            useMap: false,
+            width: 20,
+          },
+          (err, image) => {
+            state["image-options"].all =
+              err || image + printImageAttributes(image);
+
+            if (err) console.log("image option", err);
+          }
+        );
+        io.loadImage({ url: ASSETS.image, complete: true }, (err, image) => {
+          state["image-options"].readOnly =
+            err || image + printImageAttributes(image);
+
+          if (err) console.log("image option", err);
+        });
+        io.loadImage({ url: ASSETS.image }, (err, image) => {
+          state["image-options"].urlOnly =
+            err || image + printImageAttributes(image);
+
+          if (err) console.log("image option", err);
         });
       })();
     </script>

diff --git a/load.js b/load.js
@@ -62,7 +62,7 @@ function load(resources, callback) {
       return Promise.reject(
         new Error(
           `io.load: unknown resource type "${Object.keys(res)}".
-Resource needs one of ${LOADERS_MAP_KEYS}`
+Resource needs one of ${LOADERS_MAP_KEYS.join("|")} set to an url.`
         )
       );
     })

diff --git a/loadBinary.js b/loadBinary.js
@@ -16,7 +16,10 @@ function loadBinary(url, callback) {
     if (request.status === 200) {
       if (callback) callback(null, request.response);
     } else {
-      callback(new Error(`io.loadBinary: ${request.statusText} "${url}"`), null);
+      callback(
+        new Error(`io.loadBinary: ${request.statusText} "${url}"`),
+        null
+      );
     }
   });
 }

diff --git a/loadImage.js b/loadImage.js
@@ -6,28 +6,38 @@ import { promisify } from "./utils.js";
  * @param {HTMLImageElement} image
  */
 
+/**
+ * @typedef ImageOptions
+ * @param {string} url
+ * @param {...*} rest
+ */
+
 /**
  * Loads a HTML Image
- * @param {string | { url: string; crossOrigin: string }} opts
+ * @param {string | ImageOptions} urlOrOpts
  * @param {imageCallback} [callback]
  */
-function loadImage(opts, callback) {
-  let crossOrigin = null;
-  let url = opts;
-  if (url.url) {
-    crossOrigin = url.crossOrigin;
-    url = url.url;
+function loadImage(urlOrOpts, callback) {
+  const img = new Image();
+
+  let src = urlOrOpts;
+  if (urlOrOpts.url) {
+    const { url, ...rest } = urlOrOpts;
+    src = url;
+    try {
+      Object.assign(img, rest);
+    } catch (error) {
+      return callback(new Error(error), null);
+    }
   }
 
-  const img = new Image();
-  if (crossOrigin) img.crossOrigin = crossOrigin;
   img.onerror = () => {
-    callback(new Error(`io.loadImage: Load Error "${url}"`), null);
+    callback(new Error(`io.loadImage: Load Error "${src}"`), null);
   };
   img.onload = () => {
     callback(null, img);
   };
-  img.src = url;
+  img.src = src;
 }
 
 export default promisify(loadImage);