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

image-exporter 0.0.1 → 1.0.0

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 (56) hide show

package/README.md +137 -2
package/bun.lockb +0 -0
package/dist/image-exporter.es.js +499 -612
package/dist/image-exporter.umd.js +506 -619
package/package.json +18 -15
package/src/capture/capture-element.ts +58 -0
package/src/capture/determine-total-elements.ts +40 -0
package/src/capture/download-images.ts +69 -0
package/src/capture/get-image-options.ts +196 -0
package/src/capture/handle-filenames.ts +52 -0
package/src/capture/index.ts +99 -0
package/src/capture/remove-hidden-elements.ts +19 -0
package/src/config.ts +19 -0
package/src/cors-proxy/cleanup.ts +43 -0
package/src/cors-proxy/index.ts +6 -21
package/src/{utils → cors-proxy}/is-valid-url.ts +5 -3
package/src/cors-proxy/proxy-css.ts +51 -44
package/src/cors-proxy/proxy-images.ts +21 -77
package/src/cors-proxy/run.ts +26 -0
package/src/index.ts +10 -4
package/src/logger.ts +61 -0
package/src/types.d.ts +51 -0
package/vite.config.js +3 -7
package/example/example.css +0 -122
package/example/example.html +0 -152
package/example/github.jpg +0 -0
package/example/poll-h.svg +0 -1
package/src/capture-images.ts +0 -129
package/src/clean-up.ts +0 -50
package/src/default-options.ts +0 -58
package/src/download-images.ts +0 -52
package/src/get-capture-element.test.html +0 -21
package/src/get-capture-element.test.ts +0 -36
package/src/get-capture-element.ts +0 -175
package/src/get-options/get-input-options.test.html +0 -217
package/src/get-options/get-input-options.test.ts +0 -109
package/src/get-options/get-input-options.ts +0 -40
package/src/get-options/get-item-options.ts +0 -46
package/src/get-options/get-wrapper-options.test.html +0 -33
package/src/get-options/get-wrapper-options.test.ts +0 -109
package/src/get-options/get-wrapper-options.ts +0 -84
package/src/get-options/index.ts +0 -28
package/src/image-exporter.ts +0 -108
package/src/types/image.ts +0 -2
package/src/types/index.ts +0 -2
package/src/types/options.ts +0 -69
package/src/utils/convert-to-slug.ts +0 -15
package/src/utils/get-attribute-values.ts +0 -68
package/src/utils/get-date-MMDDYY.ts +0 -11
package/src/utils/ignore-items.ts +0 -11
package/src/utils/index.ts +0 -18
package/src/utils/is-visible.ts +0 -12
package/src/utils/parse-labels.ts +0 -55
package/src/utils/push-to-window.ts +0 -3
package/tests/index.html +0 -88
package/tests/input-tests.html +0 -169

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

@@ -1,217 +0,0 @@
-<!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 DELETED Viewed

@@ -1,109 +0,0 @@
-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);
-  });
-});

package/src/get-options/get-input-options.ts DELETED Viewed

@@ -1,40 +0,0 @@
-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 DELETED Viewed

@@ -1,46 +0,0 @@
-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 DELETED Viewed

@@ -1,33 +0,0 @@
-<!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 DELETED Viewed

@@ -1,109 +0,0 @@
-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 DELETED Viewed

@@ -1,84 +0,0 @@
-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 DELETED Viewed

@@ -1,28 +0,0 @@
-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 };