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/utils/is-visible.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * 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 ADDED Viewed

@@ -0,0 +1,55 @@
+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 ADDED Viewed

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

package/tests/index.html ADDED Viewed

@@ -0,0 +1,88 @@
+<!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 ADDED Viewed

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

package/vite.config.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { defineConfig } from "vite";
+import strip from "@rollup/plugin-strip";
+export default defineConfig({
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    minify: false,
+    lib: {
+      entry: "src/index.ts",
+      name: "image-exporter",
+      fileName: (format) => `image-exporter.${format}.js`,
+    },
+    rollupOptions: {
+      input: "src/index.ts",
+      plugins: [
+        {
+          name: "wrap-in-iife",
+          generateBundle(outputOptions, bundle) {
+            if (outputOptions.format === "umd") {
+              Object.keys(bundle).forEach((fileName) => {
+                const file = bundle[fileName];
+                if (fileName.slice(-3) === ".js" && "code" in file) {
+                  file.code = `(() => {\n${file.code}})()`;
+                }
+              });
+            }
+          },
+        },
+        strip({
+          include: "**/*.(js|ts)",
+          functions: ["console.log"],
+          // Only apply this plugin during build, not during watch
+          exclude: process.env.NODE_ENV === "development" ? "**/*" : "",
+        }),
+      ],
+    },
+  },
+});