npm - image-exporter - Versions diffs - 0.0.1 - Mend

image-exporter 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/.gitattributes +2 -0
package/.prettierrc +5 -0
package/LICENSE.md +201 -0
package/README.md +3 -0
package/dist/image-exporter.es.js +3807 -0
package/dist/image-exporter.umd.js +3813 -0
package/example/example.css +122 -0
package/example/example.html +152 -0
package/example/github.jpg +0 -0
package/example/poll-h.svg +1 -0
package/package.json +50 -0
package/src/capture-images.ts +129 -0
package/src/clean-up.ts +50 -0
package/src/cors-proxy/index.ts +22 -0
package/src/cors-proxy/proxy-css.ts +52 -0
package/src/cors-proxy/proxy-images.ts +90 -0
package/src/default-options.ts +58 -0
package/src/download-images.ts +52 -0
package/src/get-capture-element.test.html +21 -0
package/src/get-capture-element.test.ts +36 -0
package/src/get-capture-element.ts +175 -0
package/src/get-options/get-input-options.test.html +217 -0
package/src/get-options/get-input-options.test.ts +109 -0
package/src/get-options/get-input-options.ts +40 -0
package/src/get-options/get-item-options.ts +46 -0
package/src/get-options/get-wrapper-options.test.html +33 -0
package/src/get-options/get-wrapper-options.test.ts +109 -0
package/src/get-options/get-wrapper-options.ts +84 -0
package/src/get-options/index.ts +28 -0
package/src/image-exporter.ts +108 -0
package/src/index.ts +8 -0
package/src/types/image.ts +2 -0
package/src/types/index.ts +2 -0
package/src/types/options.ts +69 -0
package/src/utils/convert-to-slug.ts +15 -0
package/src/utils/get-attribute-values.ts +68 -0
package/src/utils/get-date-MMDDYY.ts +11 -0
package/src/utils/ignore-items.ts +11 -0
package/src/utils/index.ts +18 -0
package/src/utils/is-valid-url.ts +20 -0
package/src/utils/is-visible.ts +12 -0
package/src/utils/parse-labels.ts +55 -0
package/src/utils/push-to-window.ts +3 -0
package/tests/index.html +88 -0
package/tests/input-tests.html +169 -0
package/vite.config.js +39 -0

package/src/default-options.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import * as types from "./types";
+export const defaultOptions: types.Options = {
+  corsProxyBaseUrl: "",
+  downloadImages: true,
+  selectors: {
+    wrapper: "[ie='wrapper']",
+    capture: "[ie='capture']",
+    trigger: "[ie='trigger']",
+    slug: "[ie='slug']",
+    ignore: "[ie='ignore']",
+  },
+  image: {
+    scale: {
+      value: 1,
+      attributeSelector: "ie-scale",
+      inputSelector: "ie-scale-input",
+    },
+    quality: {
+      value: 1,
+      attributeSelector: "ie-quality",
+      inputSelector: "ie-quality-input",
+    },
+    format: {
+      value: "jpg",
+      attributeSelector: "ie-format",
+      inputSelector: "ie-format-input",
+    },
+    dateInLabel: {
+      value: true,
+      attributeSelector: "ie-img-label-date",
+      inputSelector: "ie-img-label-date-input",
+    },
+    scaleInLabel: {
+      value: true,
+      attributeSelector: "ie-img-label-scale",
+      inputSelector: "ie-img-label-scale-input",
+    },
+  },
+  zip: {
+    label: {
+      value: "images",
+      attributeSelector: "ie-zip-label",
+      inputSelector: "ie-zip-label-input",
+    },
+    dateInLabel: {
+      value: true,
+      attributeSelector: "ie-zip-label-date",
+      inputSelector: "ie-zip-label-date-input",
+    },
+    scaleInLabel: {
+      value: true,
+      attributeSelector: "ie-zip-label-scale",
+      inputSelector: "ie-zip-label-scale-input",
+    },
+  },
+  debug: false,
+};

package/src/download-images.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import * as types from "./types";
+import download from "downloadjs";
+import JSZip from "jszip";
+import { parseZipLabel } from "./utils";
+/**
+ * Downloads images based on the provided array of images and options.
+ * If there is only one image, it is downloaded individually.
+ * If there are multiple images, they are zipped and downloaded as a single file.
+ *
+ * @param images - An array of images to be downloaded. Each image should be represented as a tuple with the data URL and the file name.
+ * @param options - Additional options for downloading the images.
+ * @returns A promise that resolves when all the images are downloaded.
+ */
+export async function downloadImages(images: types.Image[], options: types.Options) {
+  if (images.length === 1) {
+    const [dataURL, fileName] = images[0];
+    await download(dataURL, fileName);
+  } else if (images.length > 1) {
+    const zipName = parseZipLabel(options);
+    const zipBlob = await zipUpImages(images);
+    await download(zipBlob, zipName);
+  }
+}
+/**
+ * Zips up the given images into a single ZIP file.
+ *
+ * @param images - An array of image tuples, where each tuple contains the data URL and the filename.
+ * @returns A Promise that resolves to the generated ZIP file as a Blob.
+ * @throws If there is an error creating the ZIP file.
+ */
+async function zipUpImages(images: types.Image[]) {
+  const zip = new JSZip();
+  // Loop through each image tuple and add to the zip
+  images.forEach(([dataURL, filename]) => {
+    // Extract the content from the data URL
+    const content = dataURL.split(",")[1]; // Assumes base64 encoding
+    zip.file(filename, content, { base64: true });
+  });
+  try {
+    // Generate the ZIP file
+    const zipBlob = await zip.generateAsync({ type: "blob" });
+    return zipBlob;
+  } catch (error) {
+    console.error("Error creating ZIP:", error);
+    throw error;
+  }
+}

package/src/get-capture-element.test.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tests</title>
+  </head>
+  <body>
+    <div ie="wrapper">
+      <div ie="capture" ie-scale="1,2,3"></div>
+      <div ie="capture"></div>
+      <div ie="capture"></div>
+      <div ie="capture"></div>
+    </div>
+    <script src="../../dist/image-exporter.umd.js"></script>
+    <script>
+      let imageExporter = new ImageExporter({ downloadImages: false, debug: true });
+      imageExporter.captureAll();
+    </script>
+  </body>
+</html>

package/src/get-capture-element.test.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+import puppeteer from "puppeteer";
+import path from "path";
+import * as types from "./types";
+import { defaultOptions } from "./default-options";
+describe("get-capture-element", () => {
+  let browser;
+  let page;
+  beforeAll(async () => {
+    // Setup for puppeteer with Vitest
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto(`file://${path.join(__dirname, "get-capture-element.test.html")}`);
+  });
+  afterAll(async () => {
+    // Teardown for puppeteer with Vitest
+    await browser.close();
+  });
+  it("encapsulate multi-scale", async () => {
+    const result = await page.evaluate(() => {
+      const js = `const options = { downloadImages: false, debug: true };
+        const imageExporter = new ImageExporter(options);
+        const images = imageExporter.captureAll();`;
+      //insert at the end of the body
+      const script = document.createElement("script");
+      script.text = js;
+      document.body.appendChild(script);
+      return (window as any).getInputOptionsDebug;
+    });
+  });
+});

package/src/get-capture-element.ts ADDED Viewed

@@ -0,0 +1,175 @@
+import * as types from "./types";
+import { isVisible } from "./utils/is-visible";
+import { pushToWindow } from "./utils/push-to-window";
+// Finds all elements to be captured and returns them in an array
+export function getCaptureElements(options: types.Options): HTMLElement[] {
+  try {
+    if (!document.querySelector(options.selectors.capture)) {
+      console.error("ImageExporter: No capture items found in the wrapper.");
+      return [];
+    }
+    // If CSV values found in scale attribute, encapsulate elements until all scales are accounted for
+    findMultiScaleElements(options);
+    // Find all elements to be captured (which includes the multi-scale elements)
+    const elements = Array.from(
+      document.querySelectorAll(
+        `${options.selectors.wrapper} ${options.selectors.capture}`
+      ) as NodeListOf<HTMLElement>
+    );
+    // Filter out elements that are not visible
+    const visibleElements = elements.filter((element) => isVisible(element));
+    return visibleElements;
+  } catch (e) {
+    console.error("ImageExporter: Error in getCaptureElements", e);
+    return [];
+  }
+}
+// If CSV values found in ${prefix}-scale, encapsulate elements until all scales are accounted for
+export function findMultiScaleElements(options: types.Options) {
+  try {
+    const elements = Array.from(
+      document.querySelectorAll(
+        `${options.selectors.wrapper} ${options.selectors.capture}`
+      ) as NodeListOf<HTMLElement>
+    );
+    if (elements) {
+      const elementsWithScaleAttribute = elements.filter((element) =>
+        element.hasAttribute(options.image.scale.attributeSelector)
+      );
+      // Check attribute value. It will be a string.
+      // If string successfully converts to a number, do nothing.
+      // If string is comma-separated, convert to array of numbers.
+      elementsWithScaleAttribute.forEach((element) => {
+        const scaleValue: any = element.getAttribute(
+          options.image.scale.attributeSelector
+        );
+        if (scaleValue.includes(",")) {
+          console.log("Multi-scale element found:", scaleValue);
+          // If scaleValue is an array...
+          const scaleArray: Array<Number> = scaleValue.split(",").map(Number);
+          encapsulateMultiScaleElements(options, element, scaleArray, scaleValue);
+          if (options.debug)
+            pushToWindow("findMultiScaleElementsTest", element.outerHTML);
+        }
+      });
+      return true;
+    } else {
+      return false;
+    }
+  } catch (e) {
+    console.error("ImageExporter: Error in findMultiScaleElements", e);
+    return;
+  }
+}
+function encapsulateMultiScaleElements(
+  options: types.Options,
+  element: Element,
+  scaleArray: Array<Number>,
+  scaleValue: string
+) {
+  try {
+    // Set scale attribute
+    element.setAttribute(options.image.scale.attributeSelector, scaleArray[0].toString());
+    // Force include scale img attribute
+    element.setAttribute(options.image.scaleInLabel.attributeSelector, "true");
+    element.setAttribute("ie-clone-source", scaleValue);
+    // iterate through array and wrap the element in a new element for each scale
+    for (let i = 1; i < scaleArray.length; i++) {
+      const newElement = cloneElementAttributes(options, element);
+      // Set scale attribute
+      newElement.setAttribute(
+        options.image.scale.attributeSelector,
+        scaleArray[i].toString()
+      );
+      // Force include scale img attribute
+      newElement.setAttribute(options.image.scaleInLabel.attributeSelector, "true");
+      // Insert element before the original element, then move the original element inside the new element, deleting the original element
+      if (element.parentNode) {
+        element.parentNode.insertBefore(newElement, element);
+        newElement.appendChild(element);
+        console.log("Encapsulated element", element, "with scale", scaleArray[i]);
+      }
+    }
+  } catch (e) {
+    console.error("ImageExporter: Error in encapsulateMultiScaleElements", e);
+    return;
+  }
+}
+// only clones attributes that are in the options.image[key].attributeSelector
+function cloneElementAttributes(
+  options: types.Options,
+  originalElement: Element
+): Element {
+  try {
+    // Create a new div element
+    const clonedElement = document.createElement("div");
+    const arrayOfPossibleAttributes = Object.keys(options.image).map(
+      (key) => options.image[key].attributeSelector
+    );
+    // Adds capture attribute to cloned element
+    const { prefix, value } = parseStringAttribute(options.selectors.capture);
+    clonedElement.setAttribute(prefix, value);
+    clonedElement.setAttribute("ie-clone", "true");
+    setExplicitDimensions(originalElement, clonedElement);
+    // Iterate over all attributes of the original element
+    Array.from(originalElement.attributes).forEach((attr: any) => {
+      // Check if the attribute name exists in types.Attributes
+      if (attr.name in arrayOfPossibleAttributes) {
+        // Copy the attribute to the cloned element
+        clonedElement.setAttribute(attr.name, attr.value);
+      }
+    });
+    return clonedElement;
+  } catch (e) {
+    console.error("ImageExporter: Error in cloneElementAttributes", e);
+    return originalElement;
+  }
+}
+function parseStringAttribute(attributeValue: string) {
+  if (!attributeValue.includes("=")) {
+    throw new Error("Invalid attribute format. Expected format: [prefix=value]");
+  }
+  const attributeArray = attributeValue.split("=");
+  if (attributeArray.length !== 2) {
+    throw new Error("Invalid attribute format. Expected format: [prefix=value]");
+  }
+  const prefix = attributeArray[0].trim().replace(/^\[|\]$/g, "");
+  const value = attributeArray[1]
+    .trim()
+    .replace(/^\[|\]$/g, "")
+    .replace(/^'|'$/g, "");
+  if (!prefix || !value) {
+    throw new Error("Invalid attribute format. Prefix or value is missing.");
+  }
+  return { prefix, value };
+}
+function setExplicitDimensions(originalElement: any, clonedElement: any) {
+  const originalElementStyle = window.getComputedStyle(originalElement);
+  const originalElementWidth = originalElementStyle.getPropertyValue("width");
+  const originalElementHeight = originalElementStyle.getPropertyValue("height");
+  clonedElement.style.width = originalElementWidth;
+  clonedElement.style.height = originalElementHeight;
+}

package/src/get-options/get-input-options.test.html ADDED Viewed

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tests</title>
+  </head>
+  <body>
+    <section>
+      <div>
+        <!-- Scale -->
+        <label for="scale"><strong>Scale</strong></label>
+        <select title="scale" ie-scale-input>
+          <option value="5">@1x</option>
+        </select>
+      </div>
+      <div>
+        <!-- Quality -->
+        <label for="quality"><strong>Quality</strong></label>
+        <input
+          type="range"
+          id="quality"
+          name="quality"
+          min="0.00"
+          max="1.00"
+          value="0.75"
+          step="0.01"
+          ie-quality-input
+        />
+      </div>
+      <div>
+        <!-- Format -->
+        <label for="format"><strong>Format</strong></label>
+        <select title="format" ie-format-input>
+          <option value="jpg">JPG</option>
+        </select>
+      </div>
+      <div>
+        <fieldset>
+          <legend><strong>Image label</strong></legend>
+          <!-- dateInLabel -->
+          <label for="dateInLabel">
+            <input
+              type="checkbox"
+              id="dateInLabel"
+              name="dateInLabel"
+              name="dateInLabel"
+              role="switch"
+              checked="checked"
+              ie-img-label-date-input
+            />
+            Date in label
+          </label>
+          <!--scaleInLabel-->
+          <label for="scaleInLabel">
+            <input
+              type="checkbox"
+              id="scaleInLabel"
+              name="scaleInLabel"
+              name="scaleInLabel"
+              role="switch"
+              checked="checked"
+              ie-img-label-scale-input
+            />
+            Scale in label
+          </label>
+        </fieldset>
+      </div>
+      <fieldset>
+        <legend><strong>Zip label</strong></legend>
+        <!-- zipLabel -->
+        <label for="zipLabel">Label</label>
+        <input type="text" id="zipLabel" name="zipLabel" ie-zip-label-input value="ie" />
+        <!-- zipDateInLabel -->
+        <label for="zipDateInLabel">
+          <input
+            type="checkbox"
+            id="zipDateInLabel"
+            name="zipDateInLabel"
+            name="zipDateInLabel"
+            role="switch"
+            checked="checked"
+            ie-zip-label-date-input
+          />
+          Date in label
+        </label>
+        <!--zipScaleInLabel-->
+        <label for="zipScaleInLabel">
+          <input
+            type="checkbox"
+            id="zipScaleInLabel"
+            name="zipScaleInLabel"
+            name="zipScaleInLabel"
+            role="switch"
+            checked="checked"
+            ie-zip-label-scale-input
+          />
+          Scale in label
+        </label>
+      </fieldset>
+      <button ie-trigger>Run</button>
+    </section>
+    <section>
+      <div>
+        <!-- Scale -->
+        <label for="test-scale"><strong>Scale</strong></label>
+        <select title="test-scale" test-scale-input>
+          <option value="5">@1x</option>
+        </select>
+      </div>
+      <div>
+        <!-- Quality -->
+        <label for="quality"><strong>Quality</strong></label>
+        <input
+          type="range"
+          id="quality"
+          name="quality"
+          min="0.00"
+          max="1.00"
+          value="0.75"
+          step="0.01"
+          test-quality-input
+        />
+      </div>
+      <div>
+        <!-- Format -->
+        <label for="format"><strong>Format</strong></label>
+        <select title="format" test-format-input>
+          <option value="jpg">JPG</option>
+        </select>
+      </div>
+      <div>
+        <fieldset>
+          <legend><strong>Image label</strong></legend>
+          <!-- dateInLabel -->
+          <label for="dateInLabel">
+            <input
+              type="checkbox"
+              id="dateInLabel"
+              name="dateInLabel"
+              name="dateInLabel"
+              role="switch"
+              checked="checked"
+              test-img-label-date-input
+            />
+            Date in label
+          </label>
+          <!--scaleInLabel-->
+          <label for="scaleInLabel">
+            <input
+              type="checkbox"
+              id="scaleInLabel"
+              name="scaleInLabel"
+              name="scaleInLabel"
+              role="switch"
+              checked="checked"
+              test-img-label-scale-input
+            />
+            Scale in label
+          </label>
+        </fieldset>
+      </div>
+      <fieldset>
+        <legend><strong>Zip label</strong></legend>
+        <!-- zipLabel -->
+        <label for="zipLabel">Label</label>
+        <input
+          type="text"
+          id="zipLabel"
+          name="zipLabel"
+          test-zip-label-input
+          value="ie"
+        />
+        <!-- zipDateInLabel -->
+        <label for="zipDateInLabel">
+          <input
+            type="checkbox"
+            id="zipDateInLabel"
+            name="zipDateInLabel"
+            name="zipDateInLabel"
+            role="switch"
+            checked="checked"
+            test-zip-label-date-input
+          />
+          Date in label
+        </label>
+        <!--zipScaleInLabel-->
+        <label for="zipScaleInLabel">
+          <input
+            type="checkbox"
+            id="zipScaleInLabel"
+            name="zipScaleInLabel"
+            name="zipScaleInLabel"
+            role="switch"
+            checked="checked"
+            test-zip-label-scale-input
+          />
+          Scale in label
+        </label>
+      </fieldset>
+    </section>
+    <div
+      ie="wrapper"
+      ie-scale="2"
+      ie-quality="0.55"
+      ie-format="png"
+      ie-img-label-date="false"
+      ie-img-label-scale="false"
+      ie-zip-label="yay"
+      ie-zip-label-date="false"
+      ie-zip-label-scale="false"
+    ></div>
+    <div test="wrapper"></div>
+    <script src="../../dist/image-exporter.umd.js"></script>
+  </body>
+</html>

package/src/get-options/get-input-options.test.ts ADDED Viewed

@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+import puppeteer from "puppeteer";
+import path from "path";
+import * as types from "../types";
+import { defaultOptions } from "../default-options";
+describe("get-input-options", () => {
+  let browser;
+  let page;
+  beforeAll(async () => {
+    // Setup for puppeteer with Vitest
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto(`file://${path.join(__dirname, "get-input-options.test.html")}`);
+  });
+  afterAll(async () => {
+    // Teardown for puppeteer with Vitest
+    await browser.close();
+  });
+  it("standard attributes", async () => {
+    const result = await page.evaluate(() => {
+      const js = `const options = { downloadImages: false, debug: true };
+        const imageExporter = new ImageExporter(options);
+        const images = imageExporter.captureAll();`;
+      //insert at the end of the body
+      const script = document.createElement("script");
+      script.text = js;
+      document.body.appendChild(script);
+      return (window as any).getInputOptionsDebug;
+    });
+    // Assertions can then be made based on the result object
+    expect(result.image.scale.value).toBe(5);
+    expect(result.image.quality.value).toBe(0.75);
+    expect(result.image.format.value).toBe("jpg");
+    expect(result.image.dateInLabel.value).toBe(true);
+    expect(result.image.scaleInLabel.value).toBe(true);
+    expect(result.zip.label.value).toBe("ie");
+    expect(result.zip.dateInLabel.value).toBe(true);
+    expect(result.zip.scaleInLabel.value).toBe(true);
+  });
+  it("custom attributes", async () => {
+    await page.reload();
+    const result = await page.evaluate(() => {
+      const js = `const options = {
+          downloadImages: false,
+          selectors: {
+            wrapper: "[test='wrapper']",
+            capture: "[test='capture']",
+            trigger: "[test='trigger']",
+            slug: "[test='slug']",
+            ignore: "[test='ignore']",
+          },
+          image: {
+            scale: {
+              inputSelector: "test-scale-input",
+            },
+            quality: {
+              inputSelector: "test-quality-input",
+            },
+            format: {
+              inputSelector: "test-format-input",
+            },
+            dateInLabel: {
+              inputSelector: "test-img-label-date-input",
+            },
+            scaleInLabel: {
+              inputSelector: "test-img-label-scale-input",
+            },
+          },
+          zip: {
+            label: {
+              inputSelector: "test-zip-label-input",
+            },
+            dateInLabel: {
+              inputSelector: "test-zip-label-date-input",
+            },
+            scaleInLabel: {
+              inputSelector: "test-zip-label-scale-input",
+            },
+          },
+          debug: true,
+        };
+          const imageExporter = new ImageExporter(options);
+          const images = imageExporter.captureAll();`;
+      //insert at the end of the body
+      const script = document.createElement("script");
+      script.text = js;
+      document.body.appendChild(script);
+      return (window as any).getInputOptionsDebug;
+    });
+    // Assertions can then be made based on the result object
+    expect(result.image.scale.value).toBe(5);
+    expect(result.image.quality.value).toBe(0.75);
+    expect(result.image.format.value).toBe("jpg");
+    expect(result.image.dateInLabel.value).toBe(true);
+    expect(result.image.scaleInLabel.value).toBe(true);
+    expect(result.zip.label.value).toBe("ie");
+    expect(result.zip.dateInLabel.value).toBe(true);
+    expect(result.zip.scaleInLabel.value).toBe(true);
+  });
+});