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/get-options/get-input-options.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import * as types from "../types";
+import { pushToWindow } from "../utils/push-to-window";
+import { optionSafetyCheck } from "./get-wrapper-options";
+// Helper function to handle common logic
+async function handleOptions(optionsType: any, key: string) {
+  const selector = optionsType[key].inputSelector;
+  const inputElement = document.querySelector(`[${selector}]`) as HTMLInputElement;
+  if (!inputElement) return;
+  if (inputElement.getAttribute("type") === "checkbox") {
+    optionsType[key].value = inputElement.checked;
+    return;
+  }
+  if (inputElement.value) {
+    const safeValue = optionSafetyCheck(key, inputElement.value);
+    if (safeValue === null) return;
+    optionsType[key].value = safeValue;
+  }
+}
+export function getInputOptions(options: types.Options): types.Options {
+  try {
+    // Use the helper function for both 'image' and 'zip' options
+    Promise.all(
+      Object.keys(options.image).map((key) => handleOptions(options.image, key))
+    );
+    Promise.all(Object.keys(options.zip).map((key) => handleOptions(options.zip, key)));
+    if (options.debug) pushToWindow("getInputOptionsDebug", options);
+    return options;
+  } catch (e) {
+    console.error("ImageExporter: Error in getUserOptions", e);
+    return options;
+  }
+}

package/src/get-options/get-item-options.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import * as types from "../types";
+import { parseImageLabel } from "../utils";
+/**
+ * Extracts and customizes settings for a specific element based on its attributes and additional criteria.
+ *
+ * This function creates a copy of the provided options object and then customizes it for an individual
+ * element. It checks for specific attributes on the element (defined in the 'attributesToCheck' parameter)
+ * and, if present, overwrites the corresponding properties in the options object with the attribute values.
+ * Additionally, it sets a 'slug' property based on the content of a specific child element or generates a
+ * unique name based on the index.
+ *
+ * @param {HTMLElement} element - The HTML element for which the settings are being determined.
+ * @param {Object} options - The base options object that provides default settings.
+ * @param {number} index - An index value, typically representing the element's position in a collection.
+ * @param {Object} attributesToCheck - An object mapping option keys to attribute names to be checked on the element.
+ * @returns {Object} An object containing the customized settings for the element.
+ *
+ */
+export function getItemOptions(
+  element: HTMLElement,
+  options: types.Options,
+  index: number
+): types.ItemOptions {
+  let itemOptions: types.ItemOptions = {
+    ...options,
+    id: index,
+    userSlug: "",
+    slug: "",
+    fileName: "",
+  };
+  Object.keys(options.image).forEach((key) => {
+    const attributeValue = element.getAttribute(options.image[key].attributeSelector);
+    if (attributeValue !== null) {
+      console.log("Capture item option:", key, "=", attributeValue);
+      itemOptions.image[key].value = attributeValue;
+    }
+  });
+  itemOptions.id = index;
+  itemOptions.userSlug = element.querySelector(options.selectors.slug)?.textContent || "";
+  itemOptions.slug = parseImageLabel(itemOptions);
+  return itemOptions;
+}

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

@@ -0,0 +1,33 @@
+<!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"
+      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"
+      test-scale="3"
+      test-quality="0.65"
+      test-format="png"
+      test-img-label-date="false"
+      test-img-label-scale="false"
+      test-zip-label="test"
+      test-zip-label-date="false"
+      test-zip-label-scale="false"
+    ></div>
+    <script src="../../dist/image-exporter.umd.js"></script>
+  </body>
+</html>

package/src/get-options/get-wrapper-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-wrapper-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-wrapper-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).getWrapperOptionsDebug;
+    });
+    // Assertions can then be made based on the result object
+    expect(result.image.scale.value).toBe(2);
+    expect(result.image.quality.value).toBe(0.55);
+    expect(result.image.format.value).toBe("png");
+    expect(result.image.dateInLabel.value).toBe(false);
+    expect(result.image.scaleInLabel.value).toBe(false);
+    expect(result.zip.label.value).toBe("yay");
+    expect(result.zip.dateInLabel.value).toBe(false);
+    expect(result.zip.scaleInLabel.value).toBe(false);
+  });
+  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: {
+            attributeSelector: "test-scale",
+          },
+          quality: {
+            attributeSelector: "test-quality",
+          },
+          format: {
+            attributeSelector: "test-format",
+          },
+          dateInLabel: {
+            attributeSelector: "test-img-label-date",
+          },
+          scaleInLabel: {
+            attributeSelector: "test-img-label-scale",
+          },
+        },
+        zip: {
+          label: {
+            attributeSelector: "test-zip-label",
+          },
+          dateInLabel: {
+            attributeSelector: "test-zip-label-date",
+          },
+          scaleInLabel: {
+            attributeSelector: "test-zip-label-scale",
+          },
+        },
+        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).getWrapperOptionsDebug;
+    });
+    // Assertions can then be made based on the result object
+    expect(result.image.scale.value).toBe(3);
+    expect(result.image.quality.value).toBe(0.65);
+    expect(result.image.format.value).toBe("png");
+    expect(result.image.dateInLabel.value).toBe(false);
+    expect(result.image.scaleInLabel.value).toBe(false);
+    expect(result.zip.label.value).toBe("test");
+    expect(result.zip.dateInLabel.value).toBe(false);
+    expect(result.zip.scaleInLabel.value).toBe(false);
+  });
+});

package/src/get-options/get-wrapper-options.ts ADDED Viewed

@@ -0,0 +1,84 @@
+import * as types from "../types";
+import { pushToWindow } from "../utils/push-to-window";
+/**
+ * Retrieves and updates the options based on the attributes of the wrapper element.
+ *
+ * This function queries the DOM for the wrapper element specified in the options.
+ * If the wrapper element is found, it iterates over the image settings and updates
+ * them with the values provided in the wrapper element's attributes.
+ *
+ * @param {types.Options} options - The initial settings object, which may contain default settings.
+ * @returns {types.Options} The updated settings object with values from the wrapper element.
+ */
+export function getWrapperOptions(options: types.Options): types.Options {
+  try {
+    const wrapper = document.querySelector(options.selectors.wrapper) as HTMLElement;
+    if (!wrapper) {
+      new Error("Wrapper element not found");
+      return options;
+    }
+    // For each image setting, see if value is provided in the wrapper element
+    // If so, update that setting with the new value
+    Object.keys(options.image).forEach((key) => {
+      const attrValue = wrapper.getAttribute(options.image[key].attributeSelector);
+      if (attrValue !== null) {
+        const safeValue = optionSafetyCheck(key, attrValue);
+        if (safeValue === null) return;
+        options.image[key].value = safeValue;
+      }
+    });
+    Object.keys(options.zip).forEach((key) => {
+      const attrValue = wrapper.getAttribute(options.zip[key].attributeSelector);
+      if (attrValue !== null) {
+        const safeValue = optionSafetyCheck(key, attrValue);
+        if (safeValue === null) return;
+        options.zip[key].value = safeValue;
+      }
+    });
+    if (options.debug) pushToWindow("getWrapperOptionsDebug", options);
+    return options;
+  } catch (e) {
+    console.error("ImageExporter: Error in getWrapperOptions", e);
+    return options;
+  }
+}
+/**
+ * Validates and converts the provided value based on the key.
+ */
+export function optionSafetyCheck(key: string, value: any): any {
+  // Handle checkbox inputs
+  if (value === "on") return true;
+  if (value === "off") return false;
+  // Handle number inputs
+  if (key === "scale" || key === "quality") {
+    if (typeof value === "number") return value;
+    value = value.trim();
+    value = parseFloat(value);
+    if (isNaN(value)) return null;
+    return value;
+  }
+  // Handle boolean inputs
+  if (key === "dateInLabel" || key === "scaleInLabel") {
+    if (typeof value === "boolean") return value;
+    value = value.trim();
+    return value === "true";
+  }
+  // Handle image format
+  if (key === "format") {
+    value = value.trim();
+    if (value === "jpg" || value === "png") return value;
+    return null;
+  }
+  return value;
+}

package/src/get-options/index.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { getWrapperOptions } from "./get-wrapper-options";
+import { getInputOptions } from "./get-input-options";
+import { getItemOptions } from "./get-item-options";
+import * as types from "../types";
+/**
+ * Asynchronously determines and finalizes settings by aggregating them from multiple sources.
+ *
+ * This function works through a sequence of steps to build a comprehensive settings object. Initially,
+ * it displays a loading message. It then sequentially updates the settings based on the attributes of a
+ * wrapper element and user inputs, respectively. Each step potentially overwrites the settings from the
+ * previous steps, allowing for a layered approach to setting configuration.
+ *
+ * @param {Object} options - The initial settings object, which may contain default settings.
+ * @returns {Promise<Object>} A promise that resolves to the fully determined settings object.
+ *
+ */
+function determineOptions(options: types.Options): types.Options {
+  // If settings exist on the wrapper, overwrite the default options
+  options = getWrapperOptions(options);
+  // If settings exist via user input, overwrite the default/wrapper options
+  options = getInputOptions(options);
+  return options;
+}
+export { getItemOptions, determineOptions };

package/src/image-exporter.ts ADDED Viewed

@@ -0,0 +1,108 @@
+import * as types from "./types";
+import { determineOptions, getItemOptions } from "./get-options";
+import { findMultiScaleElements, getCaptureElements } from "./get-capture-element";
+import { captureImage, captureImages } from "./capture-images";
+import { downloadImages } from "./download-images";
+import { runCorsProxy } from "./cors-proxy";
+import { ignoreFilter } from "./utils/ignore-items";
+import { defaultOptions } from "./default-options";
+import { cleanUp } from "./clean-up";
+// TODO: ignored nodes not working
+export class ImageExporter {
+  options: types.Options;
+  constructor(userOptions = {}) {
+    this.options = { ...defaultOptions, ...userOptions };
+  }
+  /**
+   * Captures images from all elements specified in the options.
+   * If downloadImages is set to true, the images will be downloaded.
+   *
+   * @returns {types.Image[]} An array of captured images.
+   */
+  async captureAll(): Promise<types.Image[]> {
+    console.log(this.options);
+    this.options = determineOptions(this.options);
+    const captureElements = getCaptureElements(this.options);
+    const images = await captureImages(this.options, captureElements);
+    if (this.options.downloadImages) downloadImages(images, this.options);
+    cleanUp(this.options, captureElements);
+    return images;
+  }
+  /**
+   * Captures an image from a single element.
+   * If downloadImages is set to true, the image will be downloaded.
+   *
+   * If multiscale elements are found,
+   * the element will be cloned and captured at each scale.
+   */
+  async captureElement(element: HTMLElement): Promise<types.Image | types.Image[]> {
+    this.options = determineOptions(this.options);
+    await runCorsProxy(this.options);
+    const ignoredNodes = ignoreFilter(this.options);
+    const multiScale = findMultiScaleElements(this.options);
+    if (multiScale) {
+      const elements = Array.from(
+        document.querySelectorAll(
+          "[ie-clone], [ie-clone-source]"
+        ) as NodeListOf<HTMLElement>
+      );
+      const images = await captureImages(this.options, elements);
+      if (this.options.downloadImages) downloadImages(images, this.options);
+      cleanUp(this.options, elements);
+      return images;
+    }
+    const image = await captureImage(
+      element,
+      getItemOptions(element, this.options, 1),
+      ignoredNodes
+    );
+    if (this.options.downloadImages) downloadImages([image], this.options);
+    cleanUp(this.options, [element]);
+    return image;
+  }
+  /**
+   * Adds a click event listener to the trigger element.
+   * If no element is provided, the captureAll method will be run on click.
+   * If an element is provided, provided element will be captured on click.
+   */
+  addTrigger(triggerSelector: string, element: HTMLElement | null = null) {
+    const triggerElement = document.querySelector(triggerSelector);
+    if (!triggerElement) throw new Error("Trigger element not found");
+    if (!element) {
+      // add event listener to trigger element. on click, run captureAll
+      triggerElement.addEventListener("click", () => {
+        this.captureAll();
+      });
+      console.log("Listener added to trigger element");
+    } else {
+      // add event listener to trigger element. on click, run captureElement
+      triggerElement.addEventListener("click", () => {
+        this.captureElement(element);
+      });
+      console.log("Listener added to trigger element");
+    }
+  }
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { ImageExporter } from "./image-exporter";
+// Pushes imageExporter to window object so it can be called in Webflow
+if (typeof window !== "undefined") {
+  (window as any).ImageExporter = ImageExporter;
+}
+export { ImageExporter };

package/src/types/image.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // First is dataURL, second is fileName
2	+ export type Image = [string, string];

package/src/types/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./options";
2	+ export * from "./image";

package/src/types/options.ts ADDED Viewed

@@ -0,0 +1,69 @@
+export interface Options {
+  corsProxyBaseUrl: string;
+  downloadImages: boolean;
+  selectors: Selectors;
+  image: ImageOptions;
+  zip: ZipOptions;
+  debug: boolean;
+}
+export interface Selectors {
+  wrapper: string;
+  capture: string;
+  trigger: string;
+  slug: string;
+  ignore: string;
+}
+export interface ImageOptions {
+  scale: NumberSetting;
+  quality: NumberSetting;
+  format: ImageSetting;
+  dateInLabel: BooleanSetting;
+  scaleInLabel: BooleanSetting;
+}
+export interface ZipOptions {
+  label: {
+    value: string;
+    attributeSelector: string;
+    inputSelector: string;
+  };
+  dateInLabel: {
+    value: boolean;
+    attributeSelector: string;
+    inputSelector: string;
+  };
+  scaleInLabel: {
+    value: boolean;
+    attributeSelector: string;
+    inputSelector: string;
+  };
+}
+export interface ItemOptions extends Options {
+  // Options +
+  id: number;
+  userSlug: string;
+  slug: string;
+  fileName: string;
+}
+export interface Setting {
+  attributeSelector: string;
+  inputSelector: string;
+  value: string | number | boolean | "jpg" | "png";
+}
+export interface StringSetting extends Setting {
+  value: string;
+}
+export interface NumberSetting extends Setting {
+  value: number;
+}
+export interface BooleanSetting extends Setting {
+  value: boolean;
+}
+export interface ImageSetting extends Setting {
+  value: "jpg" | "png";
+}

package/src/utils/convert-to-slug.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/**
+ * Converts a given string to a URL-friendly slug.
+ *
+ * @param input - The string to be converted to a slug.
+ * @returns The input string transformed into a slug format.
+ */
+export function convertToSlug(input: string) {
+  if (!input) {
+    return null;
+  }
+  input = input.toLowerCase();
+  input = input.replace(/[^a-z0-9_@ -]/g, "");
+  input = input.replace(/\s+/g, "-");
+  return input;
+}

package/src/utils/get-attribute-values.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import * as types from "../types";
+/**
+ * Option determination order:
+ * 1. User input
+ * 2. Item attribute
+ * 3. Wrapper attribute
+ * 4. Default
+ *
+ * Meaning wrapper overwrites default, item overwrites wrapper, and user input overwrites all.
+ */
+/**
+ * Checks if the user provided a value via attribute on an input element.
+ * If the user provided a value, it returns the value. Otherwise, it returns null.
+ */
+export function getUserInputValue(imageSetting: types.Setting): string | null {
+  try {
+    const inputElement = document.querySelector(
+      imageSetting.attributeSelector
+    ) as HTMLInputElement | null;
+    if (inputElement) {
+      return inputElement.value;
+    } else return null;
+  } catch (e) {
+    console.error("ImageExporter: Error in getUserInputValue", e);
+    return null;
+  }
+}
+/**
+ * Checks if the user provided a value via attribute on the wrapper element.
+ * If the user provided a value, it returns the value. Otherwise, it returns null.
+ */
+export function getWrapperValue(
+  options: types.Options,
+  attribute: string,
+  wrapperSelector: string
+): string | null {
+  try {
+    console.log("📣 - wrapperSelector:", wrapperSelector);
+    const wrapperElement = document.querySelector(wrapperSelector);
+    console.log(wrapperElement ? wrapperElement.getAttribute(attribute) : null);
+    return wrapperElement ? wrapperElement.getAttribute(attribute) : null;
+  } catch (e) {
+    console.error("ImageExporter: Error in getWrapperValue", e);
+    return null;
+  }
+}
+/**
+ * Checks if the user provided a value via attribute on an item element.
+ * If the user provided a value, it returns the value. Otherwise, it returns null.
+ */
+export function getItemValue(options: types.Options, attribute, element): string | null {
+  try {
+    const itemValue = element.querySelector(attribute);
+    if (itemValue) {
+      return itemValue;
+    } else {
+      return null;
+    }
+  } catch (e) {
+    console.error("ImageExporter: Error in getItemValue", e);
+    return null;
+  }
+}

package/src/utils/get-date-MMDDYY.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ *
+ * @returns {string} Current date formatted as MMDDYY
+ */
+export function getDateMMDDYY() {
+  return (
+    String(new Date().getMonth() + 1).padStart(2, "0") +
+    String(new Date().getDate()).padStart(2, "0") +
+    new Date().getFullYear().toString().slice(-2)
+  );
+}

package/src/utils/ignore-items.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import * as types from "../types";
+// Return a function that checks if a node does not match the ignore selector
+export function ignoreFilter(options: types.Options) {
+  return (node: HTMLElement) => {
+    if (!(node instanceof HTMLElement)) {
+      throw new Error("The provided node is not an HTMLElement");
+    }
+    return !node.matches(options.selectors.ignore);
+  };
+}

package/src/utils/index.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { getItemValue, getUserInputValue, getWrapperValue } from "./get-attribute-values";
+import { convertToSlug } from "./convert-to-slug";
+import { isVisible } from "./is-visible";
+import { getDateMMDDYY } from "./get-date-MMDDYY";
+import { parseImageLabel, parseZipLabel } from "./parse-labels";
+import { isValidUrl } from "./is-valid-url";
+export {
+  isValidUrl,
+  getItemValue,
+  getWrapperValue,
+  getUserInputValue as getUserValue,
+  isVisible,
+  convertToSlug,
+  getDateMMDDYY,
+  parseZipLabel,
+  parseImageLabel,
+};

package/src/utils/is-valid-url.ts ADDED Viewed

@@ -0,0 +1,20 @@
+// Helper function to check if a URL is valid and not a data URL
+export function isValidUrl(string: string): boolean {
+  try {
+    const url = new URL(string);
+    // Check if the URL is a data URL
+    if (url.protocol === "data:") {
+      return false;
+    }
+    // Optionally, check for HTTP and HTTPS protocols specifically
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      return false;
+    }
+    return true;
+  } catch (_) {
+    return false;
+  }
+}