mirror of
https://github.com/shadoll/sLogos.git
synced 2026-08-28 03:28:01 +00:00
518 lines
13 KiB
Svelte
518 lines
13 KiB
Svelte
<script>
|
|
import CountryMap from "./CountryMap.svelte";
|
|
import { onMount, getContext } from "svelte";
|
|
import InlineSvg from "./InlineSvg.svelte";
|
|
import Actions from "./Actions.svelte";
|
|
import ColorSwitcher from "./ColorSwitcher.svelte";
|
|
import { getDefaultLogoColor, getThemeColor } from "../utils/colorTheme.js";
|
|
import { fetchSvgSource } from "../utils/svgSource.js";
|
|
import { collections } from "../collections.js";
|
|
import { get } from "svelte/store";
|
|
|
|
export let show = false;
|
|
export let logo = null;
|
|
export let theme;
|
|
export const setTheme = () => {};
|
|
export const openLogoByAnchor = () => {};
|
|
export let onDownload = (path, name) => {
|
|
const a = document.createElement("a");
|
|
a.href = path;
|
|
a.download = name;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
};
|
|
|
|
// For SVG source code display
|
|
let svgSource = "";
|
|
let isFetchingSvgSource = false;
|
|
let inlineSvgRef; // Reference to the InlineSvg component
|
|
|
|
// Watch for color changes and update SVG source
|
|
function updateSvgSource() {
|
|
if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === "function") {
|
|
const newSource = inlineSvgRef.getSvgSource();
|
|
if (newSource) {
|
|
svgSource = newSource;
|
|
}
|
|
}
|
|
}
|
|
|
|
function isSvgLogo(logo) {
|
|
return logo && logo.format && logo.format.toLowerCase() === "svg";
|
|
}
|
|
function copySvgSourceFromTextarea() {
|
|
if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === "function") {
|
|
// Get the updated SVG source with all color changes applied
|
|
const updatedSource = inlineSvgRef.getSvgSource();
|
|
|
|
try {
|
|
const tempEl = document.createElement("textarea");
|
|
tempEl.value = updatedSource || svgSource;
|
|
document.body.appendChild(tempEl);
|
|
tempEl.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(tempEl);
|
|
return true;
|
|
} catch (err) {
|
|
console.error("Error copying SVG source:", err);
|
|
window.prompt("Copy the SVG source code:", updatedSource || svgSource);
|
|
return false;
|
|
}
|
|
} else if (svgSource) {
|
|
// Fallback to the original source if component reference is not available
|
|
try {
|
|
navigator.clipboard.writeText(svgSource);
|
|
return true;
|
|
} catch (err) {
|
|
console.error("Error copying from textarea:", err);
|
|
window.prompt("Copy the SVG source code:", svgSource);
|
|
return false;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// Update SVG source every time the component rerenders with new colors
|
|
$: if (logo && (logo._activeColor || (logo && logo._activeSet))) {
|
|
// Use a small delay to ensure the SVG has been rendered with the new colors
|
|
setTimeout(updateSvgSource, 100);
|
|
}
|
|
|
|
$: validColorConfig =
|
|
logo && typeof logo.colorConfig === "object" && logo.colorConfig.selector
|
|
? logo.colorConfig
|
|
: undefined;
|
|
|
|
$: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
|
|
$: if (show && logo) {
|
|
if (logo.format === "SVG" && !svgSource) {
|
|
isFetchingSvgSource = true;
|
|
fetchSvgSource(getImageUrl(logo))
|
|
.then((source) => {
|
|
svgSource = source;
|
|
isFetchingSvgSource = false;
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error fetching SVG source:", err);
|
|
isFetchingSvgSource = false;
|
|
});
|
|
}
|
|
|
|
// Ensure the page scrolls to the top when preview is shown
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
// Capitalize first letter of a string
|
|
function capitalizeFirst(str) {
|
|
if (!str) return "";
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
}
|
|
|
|
// Use the current collection context for baseDir
|
|
let collection = getContext("collection");
|
|
if (!collection) {
|
|
// fallback: try to infer from window.appData
|
|
if (
|
|
typeof window !== "undefined" &&
|
|
window.appData &&
|
|
window.appData.collection
|
|
) {
|
|
collection =
|
|
collections.find((c) => c.name === window.appData.collection) ||
|
|
collections[0];
|
|
} else {
|
|
collection = collections[0];
|
|
}
|
|
}
|
|
|
|
function getImageUrl(logo) {
|
|
return `/${collection.baseDir}/${logo.path}`;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="preview-wrapper"
|
|
style="display: {show === true ? 'flex' : 'none'}"
|
|
role="region"
|
|
aria-label="Logo preview"
|
|
>
|
|
{#if logo}
|
|
<div class="modal-header">
|
|
<div class="header-spacer"></div>
|
|
<h2>{logo.title || logo.name}</h2>
|
|
<div class="header-spacer"></div>
|
|
</div>
|
|
<div class="preview-body">
|
|
<div class="preview-container">
|
|
{#if isSvgLogo(logo)}
|
|
<InlineSvg
|
|
bind:this={inlineSvgRef}
|
|
path={getImageUrl(logo)}
|
|
color={logo.colors
|
|
? logo._activeColor || getLogoThemeColor(logo)
|
|
: undefined}
|
|
colorConfig={logo.colors ? logo.colorConfig : undefined}
|
|
targets={logo.targets}
|
|
sets={logo.sets}
|
|
colors={logo.colors}
|
|
activeSet={logo._activeSet}
|
|
alt={logo.title || logo.name}
|
|
/>
|
|
{:else}
|
|
<img src={getImageUrl(logo)} alt={logo.title || logo.name} />
|
|
{/if}
|
|
</div>
|
|
<div class="right-column">
|
|
{#if logo.tags && logo.tags.some((tagObj) => (tagObj.text || tagObj) === "Country") && logo.meta && logo.meta["ISO code"]}
|
|
<CountryMap
|
|
countryCodes={[logo.meta["ISO code"]]}
|
|
countryNames={[logo.meta["country"]]}
|
|
countryScale={true}
|
|
/>
|
|
{/if}
|
|
|
|
<div class="logo-details fullscreen-details">
|
|
{#if logo.colors}
|
|
<ColorSwitcher
|
|
{logo}
|
|
{theme}
|
|
mode="standard"
|
|
onSelect={(color, setName) => {
|
|
logo._activeColor = color;
|
|
logo._activeSet = setName;
|
|
setTimeout(updateSvgSource, 100);
|
|
}}
|
|
/>
|
|
{/if}
|
|
{#if logo.brand}
|
|
<p><strong>Owner:</strong> <span>{logo.brand}</span></p>
|
|
{/if}
|
|
<p><strong>Format:</strong> <span>{logo.format}</span></p>
|
|
<p><strong>Path:</strong> {logo.path}</p>
|
|
{#if logo.meta}
|
|
<div class="logo-meta">
|
|
{#each Object.entries(logo.meta) as [key, value]}
|
|
<p>
|
|
{#if typeof value === "string" && value.startsWith("https://")}
|
|
<a
|
|
class="meta-link"
|
|
href={value}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{capitalizeFirst(key)}
|
|
<svg
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
width="12"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><path
|
|
d="m6 1h5v5l-2.14-2.15-4.16 4.15-.7-.7 4.15-4.16zm-4 2h2v1h-2v6h6v-2h1v2a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1-1v-6a1 1 0 0 1 1-1"
|
|
fill="currentColor"
|
|
/></svg
|
|
>
|
|
</a>
|
|
{:else}
|
|
<strong>{capitalizeFirst(key)}:</strong>
|
|
<span>{value}</span>
|
|
{/if}
|
|
</p>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{#if logo.tags && logo.tags.length}
|
|
<div class="logo-tags">
|
|
{#each logo.tags as tagObj}
|
|
<span
|
|
class="logo-tag"
|
|
style={tagObj.color ? `background:${tagObj.color}` : ""}
|
|
>{tagObj.text || tagObj}</span
|
|
>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{#if logo.variants && logo.variants.length}
|
|
<div class="variants-list">
|
|
{#each logo.variants as variant}
|
|
<span class="logo-variant">{variant}</span>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="preview-actions-container">
|
|
<div class="actions-wrapper">
|
|
<Actions
|
|
{logo}
|
|
{onDownload}
|
|
onCopySource={copySvgSourceFromTextarea}
|
|
inPreview={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{#if isSvgLogo(logo) && svgSource}
|
|
<div class="source-code-container">
|
|
<h3>SVG Source Code</h3>
|
|
<div class="source-code-wrapper">
|
|
<textarea class="source-code" readonly>{svgSource}</textarea>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.actions-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.preview-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--color-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
border: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1.5rem 2rem;
|
|
background: var(--color-card);
|
|
color: var(--color-text);
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 2rem;
|
|
color: var(--color-accent, #4f8cff);
|
|
margin: 0;
|
|
}
|
|
|
|
.header-spacer {
|
|
width: 70px;
|
|
}
|
|
|
|
.preview-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-container {
|
|
flex: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
background-color: var(--color-card);
|
|
color: var(--color-text);
|
|
overflow: hidden;
|
|
position: relative;
|
|
contain: layout style paint; /* CSS containment */
|
|
}
|
|
|
|
.preview-container img {
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
|
|
.logo-details.fullscreen-details {
|
|
width: 100%;
|
|
background: var(--color-card);
|
|
color: var(--color-text);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.logo-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.variants-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.logo-tag {
|
|
display: inline-block;
|
|
background: var(--color-accent);
|
|
color: var(--white);
|
|
border-radius: 12px;
|
|
padding: 0.2em 0.8em;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
margin-right: 0.3em;
|
|
margin-top: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.logo-variant {
|
|
display: inline-block;
|
|
background: #9b59b6;
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 0.2em 0.8em;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
margin-right: 0.3em;
|
|
margin-top: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.logo-variant:hover {
|
|
background: #8e44ad;
|
|
}
|
|
.preview-actions-container {
|
|
width: 100%;
|
|
background: var(--color-card);
|
|
color: var(--color-text);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
|
|
z-index: 2;
|
|
position: relative;
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.meta-link {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
transition: text-decoration 0.15s;
|
|
}
|
|
.meta-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.preview-wrapper {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.preview-container {
|
|
flex: none;
|
|
width: 100%;
|
|
height: 60vh;
|
|
min-height: 300px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.right-column {
|
|
flex: none;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
overflow-y: visible;
|
|
max-height: none;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.logo-details.fullscreen-details {
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.preview-actions-container {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.right-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
flex: 1;
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
overflow-y: auto;
|
|
padding: 0 1.5rem;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.source-code-container {
|
|
width: 100%;
|
|
background: var(--color-card);
|
|
color: var(--color-text);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
|
|
position: relative;
|
|
}
|
|
|
|
.source-code-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border, #ddd);
|
|
}
|
|
|
|
.source-code {
|
|
width: 100%;
|
|
min-height: 180px;
|
|
max-height: 300px;
|
|
padding: 1rem;
|
|
font-family: monospace;
|
|
font-size: 0.6rem;
|
|
line-height: 1.4;
|
|
border: none;
|
|
border-radius: 6px;
|
|
resize: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.logo-details {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.logo-details p {
|
|
margin: 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.logo-details strong,
|
|
.logo-details span {
|
|
color: var(--color-text);
|
|
}
|
|
</style>
|