Refactor logo image handling across components

- Introduced utility functions to determine the base directory and image URL for logos based on their collection. - Updated `Actions.svelte`, `CardFull.svelte`, `CardMiddle.svelte`, `CardSmall.svelte`, and `CardTiny.svelte` to use the new utility functions for generating image paths. - Ensured that the correct image format (SVG, PNG, JPG) is used based on the logo's properties and active color sets.
2026-02-04 11:03:24 +00:00 · 2025-06-18 12:27:27 +03:00
parent a7762803b8
commit 708334bcf4
526 changed files with 4676 additions and 193 deletions
--- a/src/components/Actions.svelte
+++ b/src/components/Actions.svelte
@@ -1,6 +1,7 @@
 <script>
  import { copySvgSource } from '../utils/svgSource.js';
  import Notification from './Notification.svelte';
+  import { collections } from '../collections.js';

  export let logo;
  export let onDownload;
@@ -91,35 +92,46 @@
    window.removeEventListener('click', handleClick);
  }

-  function canCopyPng() {
-    return !!(navigator.clipboard && typeof window.ClipboardItem === 'function');
+  function getCollectionByPath(path) {
+    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
  }

-  function getBaseName(filename) {
-    return filename.split('/').pop().replace(/\.[^.]+$/, '');
+  function getBaseDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.baseDir : 'images/logos';
+  }
+
+  function getGenDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.genDir : 'images/logos_variants';
+  }
+
+  function getImageUrl(logo) {
+    const baseDir = getBaseDir(logo);
+    return `/${baseDir}/${logo.path.split('/').pop()}`;
  }

  function getSvgPath(logo) {
-    // If a color set is active, use the generated variant
+    const genDir = getGenDir(logo);
    if (logo._activeSet) {
-      return `/logos_gen/${getBaseName(logo.path)}__${logo._activeSet}.svg`;
+      return `/${genDir}/${getBaseName(logo.path)}__${logo._activeSet}.svg`;
    }
-    // Otherwise use the original SVG
    return logo.path;
  }

  function getPngUrl(logo) {
-    // Adjust this endpoint to match your backend
-    const svgPath = getSvgPath(logo);
-    return `/api/svg2png?file=${encodeURIComponent(svgPath)}`;
+    const genDir = getGenDir(logo);
+    return `/${genDir}/${logo.path.split('/').pop().replace(/\.svg$/, '.png')}`;
  }

  function getPngLink(logo) {
-    return `${window.location.origin}/logos_gen/${getBaseName(logo.path)}.png`;
+    const genDir = getGenDir(logo);
+    return `${window.location.origin}/${genDir}/${getBaseName(logo.path)}.png`;
  }

  function getJpgLink(logo) {
-    return `${window.location.origin}/logos_gen/${getBaseName(logo.path)}.jpg`;
+    const genDir = getGenDir(logo);
+    return `${window.location.origin}/${genDir}/${getBaseName(logo.path)}.jpg`;
  }

  async function handleCopyPngUrlClick(e) {
@@ -175,7 +187,8 @@
  // Download PNG using the same logic as JPG
  async function handleDownloadPngClick(e) {
    e.stopPropagation();
-    const pngUrl = `/logos_gen/${getBaseName(logo.path)}.png`;
+    const genDir = getGenDir(logo);
+    const pngUrl = `/${genDir}/${getBaseName(logo.path)}.png`;
    try {
      const res = await fetch(pngUrl, { method: 'HEAD' });
      if (res.ok) {
@@ -207,7 +220,8 @@
  }

  async function downloadJpg(logo) {
-    const jpgUrl = `/logos_gen/${getBaseName(logo.path)}.jpg`;
+    const genDir = getGenDir(logo);
+    const jpgUrl = `/${genDir}/${getBaseName(logo.path)}.jpg`;
    try {
      const res = await fetch(jpgUrl, { method: 'HEAD' });
      if (res.ok) {
--- a/src/components/CardFull.svelte
+++ b/src/components/CardFull.svelte
@@ -5,6 +5,7 @@
  import ColorSwitcher from "./ColorSwitcher.svelte";
  import { getDefaultLogoColor, getThemeColor } from "../utils/colorTheme.js";
  import { fetchSvgSource } from "../utils/svgSource.js";
+  import { collections } from '../collections.js';

  export let show = false;
  export let logo = null;
@@ -127,6 +128,20 @@
    if (!str) return "";
    return str.charAt(0).toUpperCase() + str.slice(1);
  }
+
+  function getCollectionByPath(path) {
+    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  }
+
+  function getBaseDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.baseDir : 'images/logos';
+  }
+
+  function getImageUrl(logo) {
+    const baseDir = getBaseDir(logo);
+    return `/${baseDir}/${logo.path.split('/').pop()}`;
+  }
 </script>

 <div
@@ -146,11 +161,11 @@
        {#if isSvgLogo(logo)}
          <InlineSvg
            bind:this={inlineSvgRef}
-            path={logo.path}
+            path={getImageUrl(logo)}
            color={logo.colors
              ? logo._activeColor || getLogoThemeColor(logo)
              : undefined}
-            colorConfig={validColorConfig}
+            colorConfig={logo.colors ? logo.colorConfig : undefined}
            targets={logo.targets}
            sets={logo.sets}
            colors={logo.colors}
@@ -158,7 +173,7 @@
            alt={logo.title || logo.name}
          />
        {:else}
-          <img src={logo.path} alt={logo.title || logo.name} />
+          <img src={getImageUrl(logo)} alt={logo.title || logo.name} />
        {/if}
      </div>
      <div class="right-column">
--- a/src/components/CardMiddle.svelte
+++ b/src/components/CardMiddle.svelte
@@ -3,6 +3,7 @@
  import Actions from "./Actions.svelte";
  import ColorSwitcher from "./ColorSwitcher.svelte";
  import { getDefaultLogoColor } from "../utils/colorTheme.js";
+  import { collections } from '../collections.js';

  export let logo;
  export let theme;
@@ -21,6 +22,20 @@
    return logo && logo.format && logo.format.toLowerCase() === "svg";
  }

+  function getCollectionByPath(path) {
+    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  }
+
+  function getBaseDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.baseDir : 'images/logos';
+  }
+
+  function getImageUrl(logo) {
+    const baseDir = getBaseDir(logo);
+    return `/${baseDir}/${logo.path.split('/').pop()}`;
+  }
+
  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
 </script>

@@ -41,7 +56,7 @@
    {#if isSvgLogo(logo)}
      {#key theme + (logo._activeColor || "")}
        <InlineSvg
-          path={logo.path}
+          path={getImageUrl(logo)}
          color={logo.colors
            ? logo._activeColor || getLogoThemeColor(logo)
            : undefined}
@@ -54,7 +69,7 @@
        />
      {/key}
    {:else}
-      <img src={logo.path} alt={logo.title || logo.name}/>
+      <img src={getImageUrl(logo)} alt={logo.title || logo.name}/>
    {/if}
  </div>
  <div class="logo-info">
--- a/src/components/CardSmall.svelte
+++ b/src/components/CardSmall.svelte
@@ -3,6 +3,7 @@
  import Actions from "./Actions.svelte";
  import ColorSwitcher from "./ColorSwitcher.svelte";
  import { getDefaultLogoColor } from "../utils/colorTheme.js";
+  import { collections } from '../collections.js';

  export let logo;
  export let theme;
@@ -23,6 +24,20 @@
  }

  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
+
+  function getCollectionByPath(path) {
+    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  }
+
+  function getBaseDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.baseDir : 'images/logos';
+  }
+
+  function getImageUrl(logo) {
+    const baseDir = getBaseDir(logo);
+    return `/${baseDir}/${logo.path.split('/').pop()}`;
+  }
 </script>

 <div class="logo-list-item">
@@ -42,7 +57,7 @@
    {#if isSvgLogo(logo)}
      {#key theme + (logo._activeColor || "")}
        <InlineSvg
-          path={logo.path}
+          path={getImageUrl(logo)}
          color={logo.colors
            ? logo._activeColor || getLogoThemeColor(logo)
            : undefined}
@@ -55,7 +70,7 @@
        />
      {/key}
    {:else}
-      <img src={logo.path} alt={logo.title || logo.name} />
+      <img src={getImageUrl(logo)} alt={logo.title || logo.name} />
    {/if}
  </div>
  <div class="logo-content">
--- a/src/components/CardTiny.svelte
+++ b/src/components/CardTiny.svelte
@@ -2,6 +2,7 @@
  import InlineSvg from "./InlineSvg.svelte";
  import { getDefaultLogoColor } from "../utils/colorTheme.js";
  import ColorSwitcher from './ColorSwitcher.svelte';
+  import { collections } from '../collections.js';

  export let logo;
  export let theme;
@@ -30,6 +31,20 @@

  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);

+  function getCollectionByPath(path) {
+    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  }
+
+  function getBaseDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.baseDir : 'images/logos';
+  }
+
+  function getImageUrl(logo) {
+    const baseDir = getBaseDir(logo);
+    return `/${baseDir}/${logo.path.split('/').pop()}`;
+  }
+
 </script>

 <div
@@ -44,7 +59,7 @@
  <div class="image-container">
    {#if isSvgLogo(logo)}
      <InlineSvg
-        path={logo.path}
+        path={getImageUrl(logo)}
        color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
        colorConfig={logo.colors ? logo.colorConfig : undefined}
        targets={logo.targets}
@@ -54,7 +69,7 @@
        alt={logo.title || logo.name}
      />
    {:else}
-      <img src={logo.path} alt={logo.title || logo.name} />
+      <img src={getImageUrl(logo)} alt={logo.title || logo.name} />
    {/if}
  </div>
  {#if logo.colors}