image-exporter 0.0.1 → 1.0.1

package/src/image-exporter.ts

@@ -1,108 +0,0 @@
-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/types/image.ts

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

package/src/types/index.ts

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

package/src/types/options.ts

@@ -1,69 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,68 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/**
- *
- * @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

@@ -1,11 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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-visible.ts

@@ -1,12 +0,0 @@
-/**
- * Determines if a given element is currently visible on the page.
- *
- * @param element - The DOM element to check for visibility.
- * @returns True if the element is visible, false otherwise.
- */
-export function isVisible(element: Element): boolean {
-  if (!(element instanceof HTMLElement)) return false;
-  if (element.offsetParent === null) return false;
-  const rect = element.getBoundingClientRect();
-  return rect.width > 0 && rect.height > 0;
-}

package/src/utils/parse-labels.ts

@@ -1,55 +0,0 @@
-import * as types from "../types";
-import { convertToSlug } from "./convert-to-slug";
-import { getDateMMDDYY } from "./get-date-MMDDYY";
-
-/**
- * Generates a zip file label based on user settings.
- *
- * This function creates a label for a zip file using various parameters from the user settings.
- * It includes optional elements such as a date stamp and scale factor in the filename, depending on the user's preferences.
- *
- * @param {Object} options - The settings provided by the user.
- *   It is expected to have the following properties:
- *   - includeScaleZip: {boolean} - Determines if scale factor should be included in the label.
- *   - fileScale: {number} - The scale factor to be used if includeScaleZip is true.
- *   - includeDateZip: {boolean} - Determines if the current date should be included in the label.
- *   - zipName: {string} - The base name of the zip file.
- * @returns {string|null} The formatted zip file label, or null if userSettings is not provided.
- *
- */
-
-export function parseZipLabel(options: types.Options): string {
-  const date = getDateMMDDYY();
-  const zipScale = convertStringToBoolean(options.zip.scaleInLabel.value)
-    ? `_@${options.image.scale.value}x`
-    : "";
-  const zipDate = convertStringToBoolean(options.zip.dateInLabel.value) ? `_${date}` : "";
-  const zipNameSlug = convertToSlug(options.zip.label.value);
-  const zipLabel = `${zipNameSlug}${zipDate}${zipScale}.zip`;
-
-  return zipLabel;
-}
-
-export function parseImageLabel(itemOptions: types.ItemOptions): string {
-  const date = getDateMMDDYY();
-  const imgScale = itemOptions.image.scaleInLabel.value
-    ? `_@${itemOptions.image.scale.value}x`
-    : "";
-  const imgDate = itemOptions.image.dateInLabel.value ? `_${date}` : "";
-  const imgNameSlug = convertToSlug(itemOptions.userSlug) || `img-${itemOptions.id}`;
-  const imgLabel = `${imgNameSlug}${imgDate}${imgScale}`;
-
-  return imgLabel;
-}
-
-function convertStringToBoolean(str: boolean | string): boolean | string {
-  // Convert "true" or "false" to boolean
-  if (str === "true") {
-    return true;
-  } else if (str === "false") {
-    return false;
-  }
-
-  // Return the original string if no conversion is possible
-  return str;
-}

package/src/utils/push-to-window.ts

@@ -1,3 +0,0 @@
-export function pushToWindow(propertyName: string, value: any): void {
-  (window as any)[propertyName] = value;
-}

package/tests/index.html

@@ -1,88 +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>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
-    />
-    <script src="/dist/image-exporter.umd.js"></script>
-
-    <style>
-      slug {
-        display: none;
-      }
-      artboard {
-        border: 1px solid #2d3138;
-      }
-      section {
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-direction: column;
-        padding: 1rem 0;
-      }
-      .test-1 {
-        padding: 1rem;
-        background-color: #f0f0f0;
-        color: #333;
-        width: 300px;
-        height: 300px;
-        font-weight: 800;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: linear-gradient(45deg, #01aaff, #0172ad);
-        color: white;
-        margin: 0rem;
-      }
-    </style>
-  </head>
-  <body>
-    <header>
-      <h1>Tests</h1>
-      <p>Exports a series of artboards simulating common scenarios.</p>
-      <p>Check each export on build.</p>
-      <button gf="trigger">Run</button>
-      <label for="format" class="input-label">File Format</label>
-      <select title="format" ie-format-input class="example-input">
-        <option value="png">PNG</option>
-        <option value="jpg">JPG</option>
-      </select>
-
-      <label for="scale" class="input-label">Scale</label>
-      <select title="scale" ie-scale-input class="example-input">
-        <option value="1">@1x</option>
-        <option value="2">@2x</option>
-        <option value="3">@3x</option>
-        <option value="4">@4x</option>
-      </select>
-    </header>
-    <main ie="wrapper" ie-scale="4">
-      <section>
-        <h2 gf="test-trigger">Test 1</h2>
-        <artboard ie="capture" class="test-1">
-          <slug ie="slug">ping</slug>
-          <div>This is the headline</div>
-        </artboard>
-        <artboard ie="capture" class="test-1" ie-scale="1,2,3,4" test="test">
-          <slug ie="slug">pong</slug>
-          <div>This is the headline</div>
-        </artboard>
-      </section>
-    </main>
-    <script>
-      let options = {
-        corsProxyBaseUrl: "http://localhost:8010/",
-      };
-
-      let imageExporter = new ImageExporter({ options });
-      imageExporter.addTrigger(document.querySelector("[gf=trigger]"));
-      imageExporter.addTrigger(
-        document.querySelector("[gf=test-trigger]"),
-        document.querySelector("[test=test]")
-      );
-    </script>
-  </body>
-</html>

package/tests/input-tests.html

@@ -1,169 +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>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
-    />
-    <script src="/dist/image-exporter.umd.js"></script>
-
-    <style>
-      slug {
-        display: none;
-      }
-      artboard {
-        border: 1px solid #2d3138;
-      }
-      section {
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-direction: column;
-        padding: 1rem 0;
-      }
-      .artboard-1 {
-        padding: 1rem;
-        background-color: #f0f0f0;
-        color: #333;
-        width: 300px;
-        height: 300px;
-        font-weight: 800;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: linear-gradient(45deg, #01aaff, #0172ad);
-        color: white;
-        margin: 0rem;
-      }
-    </style>
-  </head>
-  <body>
-    <header>
-      <h1>Input Tests</h1>
-      <hr />
-
-      <h2>Inputs</h2>
-      <div>
-        <!-- Scale -->
-        <label for="scale"><strong>Scale</strong></label>
-        <select title="scale" ie-scale-input>
-          <option value="1">@1x</option>
-          <option value="2">@2x</option>
-          <option value="3">@3x</option>
-          <option value="4">@4x</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="1"
-          step="0.01"
-          ie-quality-input
-        />
-      </div>
-      <div>
-        <!-- Format -->
-        <label for="format"><strong>Format</strong></label>
-        <select title="format" ie-format-input>
-          <option value="png">PNG</option>
-          <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=""
-              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=""
-              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 />
-        <!-- zipDateInLabel -->
-        <label for="zipDateInLabel">
-          <input
-            type="checkbox"
-            id="zipDateInLabel"
-            name="zipDateInLabel"
-            name="zipDateInLabel"
-            role="switch"
-            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=""
-            ie-zip-label-scale-input
-          />
-          Scale in label
-        </label>
-      </fieldset>
-
-      <button ie-trigger>Run</button>
-    </header>
-    <hr />
-    <main ie="wrapper">
-      <section>
-        <h2>Artboards</h2>
-        <artboard ie="capture" class="artboard-1">
-          <slug ie="slug">ping</slug>
-          <div>This is the headline</div>
-        </artboard>
-        <artboard ie="capture" class="artboard-1">
-          <slug ie="slug">pong</slug>
-          <div>This is the headline</div>
-        </artboard>
-      </section>
-    </main>
-    <script>
-      const testOptions = {
-        corsProxyBaseUrl: "http://localhost:8010/",
-      };
-
-      let imageExporter = new ImageExporter({ testOptions });
-      imageExporter.addTrigger("[ie-trigger]");
-    </script>
-  </body>
-</html>