mirror of
https://github.com/shadoll/sLogos.git
synced 2025-12-20 03:26:59 +00:00
Implement routing and improve app data management
- Integrated svelte-spa-router for navigation between Home and Preview pages. - Refactored App.svelte to manage global app data and handle search queries, compact mode, and view mode changes. - Updated Grid and List components to navigate to the Preview page instead of using modals. - Created Home.svelte to serve as the main page, utilizing global app data for rendering. - Enhanced Preview.svelte to fetch logos and display the selected logo based on URL parameters. - Improved data handling and reactivity across components, ensuring UI updates reflect changes in global state. - Added logging for better debugging and tracking of state changes.
This commit is contained in:
14
Makefile
14
Makefile
@@ -2,7 +2,7 @@
|
||||
|
||||
# Configuration
|
||||
DOCKER_COMPOSE = docker compose
|
||||
CONTAINER_NAME = logo-gallery
|
||||
CONTAINER_NAME = slogos-dev
|
||||
DEV_PORT = 5006
|
||||
|
||||
# Main targets
|
||||
@@ -47,15 +47,9 @@ run:
|
||||
# Scan logos.json from files in the logos directory (for dev mode)
|
||||
scan-logos:
|
||||
@echo "Scanning logos directory and updating logos.json for development..."
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run scan-logos
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm run scan-logos
|
||||
@echo "Logos have been updated - refresh the browser to see changes"
|
||||
|
||||
# Convert logo colors format from array to object
|
||||
convert-colors:
|
||||
@echo "Converting logo colors format in logos.json..."
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run convert-colors
|
||||
@echo "Color format conversion complete"
|
||||
|
||||
# Clean up build artifacts and temporary files
|
||||
clean:
|
||||
@echo "Cleaning up build artifacts and temporary files..."
|
||||
@@ -70,7 +64,7 @@ rebuild:
|
||||
# Generate favicons
|
||||
favicon:
|
||||
@echo "Generating favicons..."
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run generate-favicons
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm run generate-favicons
|
||||
@echo "Favicons have been generated"
|
||||
|
||||
# Build with favicons
|
||||
@@ -79,5 +73,5 @@ build-with-favicons: favicon build
|
||||
# Update package-lock.json by running npm install in Docker
|
||||
update-lock:
|
||||
@echo "Updating package-lock.json to match package.json..."
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm install
|
||||
$(DOCKER_COMPOSE) -f compose.dev.yml run --rm $(CONTAINER_NAME) npm install
|
||||
@echo "Package lock file has been updated"
|
||||
|
||||
24
package-lock.json
generated
24
package-lock.json
generated
@@ -10,7 +10,8 @@
|
||||
"dependencies": {
|
||||
"@resvg/resvg-js": "^2.0.1",
|
||||
"jimp": "^0.22.10",
|
||||
"sirv-cli": "^1.0.0"
|
||||
"sirv-cli": "^1.0.0",
|
||||
"svelte-spa-router": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
@@ -1736,6 +1737,15 @@
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/regexparam": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
|
||||
"integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.10",
|
||||
"dev": true,
|
||||
@@ -2017,6 +2027,18 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-spa-router": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
|
||||
"integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"regexparam": "2.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ItalyPaleAle"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.39.0",
|
||||
"dev": true,
|
||||
|
||||
@@ -7,8 +7,7 @@
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --host 0.0.0.0 --dev --single",
|
||||
"scan-logos": "node scripts/scanLogos.js",
|
||||
"generate-favicons": "node scripts/generateFavicons.js",
|
||||
"convert-colors": "node scripts/convertColorsFormat.js"
|
||||
"generate-favicons": "node scripts/generateFavicons.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
@@ -23,6 +22,7 @@
|
||||
"dependencies": {
|
||||
"@resvg/resvg-js": "^2.0.1",
|
||||
"jimp": "^0.22.10",
|
||||
"sirv-cli": "^1.0.0"
|
||||
"sirv-cli": "^1.0.0",
|
||||
"svelte-spa-router": "^3.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
// Path to logos.json
|
||||
const logosJsonPath = path.join(__dirname, '../public/data/logos.json');
|
||||
|
||||
// Read the current logos.json file
|
||||
console.log('Reading logos.json...');
|
||||
const logosData = JSON.parse(fs.readFileSync(logosJsonPath, 'utf8'));
|
||||
|
||||
// Convert the colors format and create targets & sets
|
||||
console.log('Converting logos format...');
|
||||
let convertedColorsCount = 0;
|
||||
let convertedConfigCount = 0;
|
||||
|
||||
for (const logo of logosData) {
|
||||
// 1. Convert colors array to object if needed
|
||||
if (logo.colors && Array.isArray(logo.colors)) {
|
||||
// Convert array format to object format
|
||||
const newColors = {};
|
||||
for (const colorObj of logo.colors) {
|
||||
// Convert label to lowercase and replace spaces with underscores
|
||||
const key = colorObj.label.toLowerCase().replace(/\s+/g, '_');
|
||||
newColors[key] = colorObj.value;
|
||||
}
|
||||
logo.colors = newColors;
|
||||
convertedColorsCount++;
|
||||
}
|
||||
|
||||
// 2. Convert colorConfig to targets and sets
|
||||
if (logo.colorConfig && !logo.targets) {
|
||||
// Create targets object
|
||||
logo.targets = {};
|
||||
|
||||
// Handle selector or target from colorConfig
|
||||
if (logo.colorConfig.selector) {
|
||||
// Split multiple selectors (e.g., "#text, #logo_int")
|
||||
const selectors = logo.colorConfig.selector.split(',').map(s => s.trim());
|
||||
|
||||
// Create a target for each selector
|
||||
selectors.forEach((selector, index) => {
|
||||
logo.targets[`selector_${index + 1}`] = selector;
|
||||
});
|
||||
|
||||
// Create sets for each color
|
||||
if (logo.colors && Object.keys(logo.colors).length > 0) {
|
||||
logo.sets = {};
|
||||
let setIndex = 1;
|
||||
|
||||
// Create a set for each color
|
||||
for (const [colorName, colorValue] of Object.entries(logo.colors)) {
|
||||
const setName = `set_${setIndex}`;
|
||||
logo.sets[setName] = {};
|
||||
|
||||
// Apply this color to all targets in this set
|
||||
Object.keys(logo.targets).forEach(targetName => {
|
||||
logo.sets[setName][targetName] = colorName;
|
||||
});
|
||||
|
||||
setIndex++;
|
||||
}
|
||||
}
|
||||
} else if (logo.colorConfig.target) {
|
||||
logo.targets.main = logo.colorConfig.target;
|
||||
|
||||
// Create sets for each color
|
||||
if (logo.colors && Object.keys(logo.colors).length > 0) {
|
||||
logo.sets = {};
|
||||
let setIndex = 1;
|
||||
|
||||
// Create a set for each color
|
||||
for (const [colorName, colorValue] of Object.entries(logo.colors)) {
|
||||
const setName = `set_${setIndex}`;
|
||||
logo.sets[setName] = {
|
||||
main: colorName
|
||||
};
|
||||
setIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
convertedConfigCount++;
|
||||
|
||||
// Keep the original colorConfig for backward compatibility
|
||||
}
|
||||
}
|
||||
|
||||
// Write the updated data back to logos.json
|
||||
console.log('Writing updated logos.json...');
|
||||
fs.writeFileSync(logosJsonPath, JSON.stringify(logosData, null, 2));
|
||||
console.log(`Conversion complete! Updated colors for ${convertedColorsCount} logos and created targets/sets for ${convertedConfigCount} logos.`);
|
||||
337
src/App.svelte
337
src/App.svelte
@@ -1,9 +1,15 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Grid from "./components/Grid.svelte";
|
||||
import List from "./components/List.svelte";
|
||||
import Header from "./components/Header.svelte";
|
||||
import Preview from "./components/Preview.svelte";
|
||||
import Router from 'svelte-spa-router';
|
||||
|
||||
// Import pages for routing
|
||||
import Home from './pages/Home.svelte';
|
||||
import PreviewPage from './pages/Preview.svelte';
|
||||
|
||||
const routes = {
|
||||
'/': Home,
|
||||
'/preview/:id': PreviewPage,
|
||||
};
|
||||
|
||||
let viewMode = "grid"; // 'grid' or 'list'
|
||||
let searchQuery = "";
|
||||
@@ -21,15 +27,82 @@
|
||||
|
||||
function setSearchQuery(val) {
|
||||
searchQuery = val;
|
||||
console.log("App: searchQuery set to:", val);
|
||||
// Update window.appData immediately
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.searchQuery = val;
|
||||
|
||||
// Also update filtered/display logos immediately for reactive UI
|
||||
window.appData.filteredLogos = window.appData.logos.filter((logo) => {
|
||||
const matchesSearch = logo.name.toLowerCase().includes(val.toLowerCase())
|
||||
|| (logo.brand && logo.brand.toLowerCase().includes(val.toLowerCase()));
|
||||
const matchesTags =
|
||||
!selectedTags.length ||
|
||||
(logo.tags &&
|
||||
logo.tags.some((tag) =>
|
||||
selectedTags.includes(typeof tag === "string" ? tag : tag.text),
|
||||
));
|
||||
return matchesSearch && matchesTags;
|
||||
});
|
||||
|
||||
window.appData.displayLogos = (!val && compactMode)
|
||||
? window.appData.filteredLogos.filter((logo, idx, arr) =>
|
||||
arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx)
|
||||
: window.appData.filteredLogos;
|
||||
|
||||
console.log("App: Updated filtered/display logos directly:",
|
||||
window.appData.filteredLogos.length, window.appData.displayLogos.length);
|
||||
}
|
||||
}
|
||||
|
||||
function setCompactMode(val) {
|
||||
compactMode = val;
|
||||
localStorage.setItem("compactMode", String(val));
|
||||
|
||||
// Update window.appData immediately on compact mode change
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.compactMode = val;
|
||||
console.log("App: Updated compactMode in window.appData to", val);
|
||||
|
||||
// Also update filtered/display logos immediately
|
||||
updateFilteredLogosImmediate();
|
||||
}
|
||||
}
|
||||
|
||||
// Load logos from JSON file with cache busting
|
||||
onMount(async () => {
|
||||
console.log("App: onMount start - before loading logos");
|
||||
|
||||
// Set initial empty app data
|
||||
if (typeof window !== 'undefined') {
|
||||
window.appData = {
|
||||
logos: [],
|
||||
filteredLogos: [],
|
||||
displayLogos: [],
|
||||
theme,
|
||||
effectiveTheme: 'light',
|
||||
viewMode,
|
||||
searchQuery,
|
||||
allTags: [],
|
||||
selectedTags: [],
|
||||
tagDropdownOpen,
|
||||
compactMode,
|
||||
setSearchQuery,
|
||||
setGridView,
|
||||
setListView,
|
||||
setTheme,
|
||||
toggleDropdown,
|
||||
addTag,
|
||||
removeTag,
|
||||
toggleTag,
|
||||
getTagObj,
|
||||
closeDropdown,
|
||||
setCompactMode,
|
||||
onCopy: copyUrl,
|
||||
onDownload: downloadLogo
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
// Add timestamp as cache-busting query parameter
|
||||
const timestamp = new Date().getTime();
|
||||
@@ -45,12 +118,44 @@
|
||||
if (response.ok) {
|
||||
logos = await response.json();
|
||||
filteredLogos = logos;
|
||||
displayLogos = logos;
|
||||
console.log(
|
||||
"Loaded logos:",
|
||||
logos.length,
|
||||
"at",
|
||||
new Date().toLocaleTimeString(),
|
||||
);
|
||||
|
||||
// Update app data immediately after logos are loaded
|
||||
if (typeof window !== 'undefined') {
|
||||
window.appData = {
|
||||
logos,
|
||||
filteredLogos,
|
||||
displayLogos,
|
||||
theme,
|
||||
effectiveTheme,
|
||||
viewMode,
|
||||
searchQuery,
|
||||
allTags,
|
||||
selectedTags,
|
||||
tagDropdownOpen,
|
||||
compactMode,
|
||||
setSearchQuery,
|
||||
setGridView,
|
||||
setListView,
|
||||
setTheme,
|
||||
toggleDropdown,
|
||||
addTag,
|
||||
removeTag,
|
||||
toggleTag,
|
||||
getTagObj,
|
||||
closeDropdown,
|
||||
setCompactMode,
|
||||
onCopy: copyUrl,
|
||||
onDownload: downloadLogo
|
||||
};
|
||||
console.log("App: Updated window.appData after loading with", logos.length, "logos");
|
||||
}
|
||||
} else {
|
||||
console.error("Failed to load logos data", response.status);
|
||||
}
|
||||
@@ -134,16 +239,59 @@
|
||||
: "light"
|
||||
: theme;
|
||||
|
||||
// Make app data available globally for components
|
||||
$: if (typeof window !== 'undefined') {
|
||||
window.appData = {
|
||||
logos,
|
||||
filteredLogos,
|
||||
displayLogos,
|
||||
theme,
|
||||
effectiveTheme,
|
||||
viewMode,
|
||||
searchQuery,
|
||||
allTags,
|
||||
selectedTags,
|
||||
tagDropdownOpen,
|
||||
compactMode,
|
||||
setSearchQuery,
|
||||
setGridView,
|
||||
setListView,
|
||||
setTheme,
|
||||
toggleDropdown,
|
||||
addTag,
|
||||
removeTag,
|
||||
toggleTag,
|
||||
getTagObj,
|
||||
closeDropdown,
|
||||
setCompactMode,
|
||||
onCopy: copyUrl,
|
||||
onDownload: downloadLogo
|
||||
};
|
||||
console.log("App: Updated window.appData with", logos.length, "logos,", displayLogos.length, "display logos");
|
||||
}
|
||||
|
||||
function setGridView() {
|
||||
console.log("Setting view mode to: grid");
|
||||
viewMode = "grid";
|
||||
localStorage.setItem("viewMode", "grid");
|
||||
|
||||
// Update window.appData immediately on view change
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.viewMode = "grid";
|
||||
console.log("App: Updated viewMode in window.appData to grid");
|
||||
}
|
||||
}
|
||||
|
||||
function setListView() {
|
||||
console.log("Setting view mode to: list");
|
||||
viewMode = "list";
|
||||
localStorage.setItem("viewMode", "list");
|
||||
|
||||
// Update window.appData immediately on view change
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.viewMode = "list";
|
||||
console.log("App: Updated viewMode in window.appData to list");
|
||||
}
|
||||
}
|
||||
|
||||
function copyUrl(logoPath) {
|
||||
@@ -219,31 +367,101 @@
|
||||
}
|
||||
|
||||
function toggleTag(tag) {
|
||||
console.log("App: Toggling tag:", tag);
|
||||
if (selectedTags.includes(tag)) {
|
||||
selectedTags = selectedTags.filter((t) => t !== tag);
|
||||
} else {
|
||||
selectedTags = [...selectedTags, tag];
|
||||
}
|
||||
}
|
||||
|
||||
function addTag(tag) {
|
||||
// Update window.appData immediately
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.selectedTags = [...selectedTags];
|
||||
|
||||
// Update filtered logos immediately
|
||||
updateFilteredLogosImmediate();
|
||||
}
|
||||
} function addTag(tag) {
|
||||
console.log("App: Adding tag:", tag);
|
||||
if (!selectedTags.includes(tag)) {
|
||||
selectedTags = [...selectedTags, tag];
|
||||
|
||||
// Update window.appData immediately
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.selectedTags = [...selectedTags];
|
||||
|
||||
// Update filtered logos immediately
|
||||
updateFilteredLogosImmediate();
|
||||
}
|
||||
}
|
||||
// Close dropdown after adding tag
|
||||
tagDropdownOpen = false;
|
||||
|
||||
// Also update the dropdown state in window.appData
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.tagDropdownOpen = false;
|
||||
console.log("App: Closed tag dropdown after adding tag");
|
||||
}
|
||||
}
|
||||
|
||||
function removeTag(tag) {
|
||||
console.log("App: Removing tag:", tag);
|
||||
selectedTags = selectedTags.filter((t) => t !== tag);
|
||||
|
||||
// Update window.appData immediately
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.selectedTags = [...selectedTags];
|
||||
|
||||
// Update filtered logos immediately
|
||||
updateFilteredLogosImmediate();
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to immediately update filtered/display logos in window.appData
|
||||
function updateFilteredLogosImmediate() {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.logos) {
|
||||
window.appData.filteredLogos = window.appData.logos.filter((logo) => {
|
||||
const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
|| (logo.brand && logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
const matchesTags =
|
||||
!selectedTags.length ||
|
||||
(logo.tags &&
|
||||
logo.tags.some((tag) =>
|
||||
selectedTags.includes(typeof tag === "string" ? tag : tag.text),
|
||||
));
|
||||
return matchesSearch && matchesTags;
|
||||
});
|
||||
|
||||
window.appData.displayLogos = (!searchQuery && compactMode)
|
||||
? window.appData.filteredLogos.filter((logo, idx, arr) =>
|
||||
arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx)
|
||||
: window.appData.filteredLogos;
|
||||
|
||||
console.log("App: Updated filtered logos:", window.appData.filteredLogos.length,
|
||||
"display logos:", window.appData.displayLogos.length);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDropdown() {
|
||||
console.log("App: Toggling tag dropdown, current state:", tagDropdownOpen);
|
||||
tagDropdownOpen = !tagDropdownOpen;
|
||||
|
||||
// Update window.appData immediately
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.tagDropdownOpen = tagDropdownOpen;
|
||||
console.log("App: Updated tagDropdownOpen in window.appData to", tagDropdownOpen);
|
||||
}
|
||||
}
|
||||
|
||||
function closeDropdown(e) {
|
||||
if (!e.target.closest(".tag-dropdown")) {
|
||||
tagDropdownOpen = false;
|
||||
|
||||
// Update window.appData immediately
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
window.appData.tagDropdownOpen = false;
|
||||
console.log("App: Closed dropdown, updated in window.appData");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -252,22 +470,35 @@
|
||||
}
|
||||
|
||||
function openPreview(logo) {
|
||||
selectedLogo = logo;
|
||||
showModal = true;
|
||||
// Use the routing approach
|
||||
const previewUrl = `#/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
|
||||
window.location.href = previewUrl;
|
||||
}
|
||||
|
||||
function openLogoByAnchor(hash) {
|
||||
if (!hash || !hash.startsWith("#preview-")) return;
|
||||
const anchor = decodeURIComponent(
|
||||
hash.replace("#preview-", "").replace(/-/g, " "),
|
||||
);
|
||||
if (!hash) return;
|
||||
|
||||
let anchor = "";
|
||||
// Handle both old and new formats
|
||||
if (hash.startsWith("#preview-")) {
|
||||
anchor = decodeURIComponent(hash.replace("#preview-", "").replace(/-/g, " "));
|
||||
} else if (hash.startsWith("#/preview/")) {
|
||||
anchor = decodeURIComponent(hash.replace("#/preview/", "").replace(/-/g, " "));
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
const found = logos.find(
|
||||
(l) =>
|
||||
l.name.replace(/\s+/g, "-").toLowerCase() ===
|
||||
anchor.replace(/\s+/g, "-").toLowerCase(),
|
||||
);
|
||||
|
||||
if (found) {
|
||||
openPreview(found);
|
||||
// Use routing approach - use router format
|
||||
const previewUrl = `#/preview/${encodeURIComponent(found.name.replace(/\s+/g, '-').toLowerCase())}`;
|
||||
console.log("App: Navigating to router URL:", previewUrl);
|
||||
window.location.href = previewUrl;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -280,85 +511,7 @@
|
||||
</script>
|
||||
|
||||
<main class="container app-flex">
|
||||
<Header
|
||||
logos={logos}
|
||||
displayLogos={displayLogos}
|
||||
{theme}
|
||||
{setTheme}
|
||||
{viewMode}
|
||||
{setGridView}
|
||||
{setListView}
|
||||
bind:searchQuery
|
||||
setSearchQuery={setSearchQuery}
|
||||
{allTags}
|
||||
{selectedTags}
|
||||
{tagDropdownOpen}
|
||||
{toggleDropdown}
|
||||
{addTag}
|
||||
{removeTag}
|
||||
{toggleTag}
|
||||
{getTagObj}
|
||||
{closeDropdown}
|
||||
{filteredLogos}
|
||||
{compactMode}
|
||||
setCompactMode={setCompactMode}
|
||||
/>
|
||||
|
||||
<Preview
|
||||
bind:show={showModal}
|
||||
bind:logo={selectedLogo}
|
||||
{theme}
|
||||
{logos}
|
||||
{openLogoByAnchor}
|
||||
/>
|
||||
|
||||
<div class="logos-container main-content">
|
||||
{#if viewMode === "grid"}
|
||||
<Grid
|
||||
logos={displayLogos}
|
||||
allLogos={logos}
|
||||
onCopy={copyUrl}
|
||||
onDownload={downloadLogo}
|
||||
setSearchQuery={setSearchQuery}
|
||||
theme={effectiveTheme}
|
||||
on:openPreview={(e) => openPreview(e.detail)}
|
||||
{compactMode}
|
||||
/>
|
||||
{:else}
|
||||
<List
|
||||
logos={displayLogos}
|
||||
allLogos={logos}
|
||||
onCopy={copyUrl}
|
||||
onDownload={downloadLogo}
|
||||
setSearchQuery={setSearchQuery}
|
||||
on:openPreview={(e) => openPreview(e.detail)}
|
||||
{compactMode}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-flex">
|
||||
<span class="footer-left">shadoll Logo Gallery</span>
|
||||
<span class="footer-center">All logos are property of their respective owners.</span>
|
||||
<a
|
||||
href="https://github.com/shadoll/sLogos"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="footer-github"
|
||||
>
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 24 24"
|
||||
fill="#ccc"
|
||||
style="margin-right:0.3em;"
|
||||
><path
|
||||
d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
<Router {routes} />
|
||||
|
||||
<style>
|
||||
.app-flex {
|
||||
|
||||
@@ -13,19 +13,14 @@
|
||||
export let allLogos = [];
|
||||
|
||||
let showModal = false;
|
||||
let selectedLogo = null;
|
||||
|
||||
function openPreview(logo) {
|
||||
selectedLogo = logo;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
let selectedLogo = null; function openPreview(logo) {
|
||||
// Navigate to preview page using router
|
||||
const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
|
||||
window.location.hash = routerPath;
|
||||
}
|
||||
|
||||
function isSvgLogo(logo) {
|
||||
return logo.format && logo.format.toLowerCase() === 'svg';
|
||||
return logo && logo.format && logo.format.toLowerCase() === 'svg';
|
||||
}
|
||||
|
||||
export let theme;
|
||||
@@ -44,23 +39,20 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Preview
|
||||
show={showModal}
|
||||
logo={selectedLogo}
|
||||
theme={theme}
|
||||
{onCopy}
|
||||
{onDownload}
|
||||
on:close={closeModal}
|
||||
/>
|
||||
<!-- Preview is now handled via the standalone page, no longer needed here -->
|
||||
|
||||
<div class="logo-grid">
|
||||
{#each logos as logo}
|
||||
<!-- For debugging: {console.log("Grid: rendering logo", logo)} -->
|
||||
<div class="logo-card">
|
||||
<div class="logo-image"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Preview {logo.name}"
|
||||
on:click={() => openPreview(logo)}
|
||||
on:click={() => {
|
||||
console.log("Logo clicked, calling openPreview");
|
||||
openPreview(logo);
|
||||
}}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
@@ -85,6 +77,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
<div class="logo-title-row">
|
||||
<h3>{logo.name}</h3>
|
||||
<button class="brand-filter-btn" title="Filter by brand" on:click={() => {
|
||||
console.log("Grid: Filtering by brand:", logo.brand);
|
||||
setSearchQuery(logo.brand);
|
||||
// Update URL with search param
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
export let setSearchQuery;
|
||||
export let allTags = [];
|
||||
export let selectedTags = [];
|
||||
export let tagDropdownOpen;
|
||||
export let toggleDropdown;
|
||||
export let addTag;
|
||||
export let removeTag;
|
||||
export let getTagObj;
|
||||
export let tagDropdownOpen = false;
|
||||
export let toggleDropdown = () => console.log("toggleDropdown not provided");
|
||||
export let addTag = () => console.log("addTag not provided");
|
||||
export let removeTag = () => console.log("removeTag not provided");
|
||||
export let getTagObj = (tag) => ({ text: tag });
|
||||
export let compactMode = false;
|
||||
export let setCompactMode = () => {};
|
||||
|
||||
@@ -34,6 +34,8 @@
|
||||
window.location.pathname +
|
||||
(params.toString() ? "?" + params.toString() : "");
|
||||
history.replaceState(null, "", newUrl);
|
||||
|
||||
console.log("Header: Search query set to:", searchQuery);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -144,6 +146,7 @@
|
||||
window.location.pathname +
|
||||
(params.toString() ? "?" + params.toString() : "");
|
||||
history.replaceState(null, "", newUrl);
|
||||
console.log("Header: Search query cleared");
|
||||
}}
|
||||
aria-label="Clear search"
|
||||
>
|
||||
|
||||
@@ -6,9 +6,8 @@
|
||||
export let targets = null;
|
||||
export let sets = null;
|
||||
export let activeSet = null;
|
||||
export let colors = null; // Add colors object for access to all color values
|
||||
export const alt = "";
|
||||
|
||||
export let colors = null;
|
||||
export let alt = "";
|
||||
let svgHtml = "";
|
||||
|
||||
async function fetchAndColorSvg() {
|
||||
@@ -89,39 +88,29 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// Otherwise, use the legacy format for backward compatibility
|
||||
else {
|
||||
let targetElements;
|
||||
if (colorConfig.selector) {
|
||||
targetElements = doc.querySelectorAll(colorConfig.selector);
|
||||
} else if (colorConfig.target) {
|
||||
targetElements = doc.querySelectorAll(colorConfig.target);
|
||||
} else {
|
||||
targetElements = [];
|
||||
}
|
||||
targetElements.forEach((el) => {
|
||||
if (colorConfig.attribute) {
|
||||
// Legacy: force a single attribute
|
||||
el.setAttribute(colorConfig.attribute, color);
|
||||
} else {
|
||||
// Always override fill and stroke unless they are 'none'
|
||||
if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
|
||||
el.setAttribute("fill", color);
|
||||
}
|
||||
if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
|
||||
el.setAttribute("stroke", color);
|
||||
}
|
||||
if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
|
||||
// If neither, prefer fill
|
||||
el.setAttribute("fill", color);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
svgHtml = doc.documentElement.outerHTML;
|
||||
}
|
||||
|
||||
$: path, color, colorConfig, targets, sets, activeSet, colors, fetchAndColorSvg();
|
||||
</script>
|
||||
|
||||
{@html svgHtml}
|
||||
<div class="svg-wrapper" role="img" aria-label={alt || "SVG image"}>
|
||||
{@html svgHtml}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.svg-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.svg-wrapper :global(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import Actions from './Actions.svelte';
|
||||
import Preview from "./Preview.svelte";
|
||||
|
||||
import Actions from "./Actions.svelte";
|
||||
import InlineSvg from "./InlineSvg.svelte";
|
||||
import { getThemeColor, getDefaultLogoColor } from "../utils/colorTheme.js";
|
||||
import { generateColorSetCircle } from "../utils/colorCircles.js";
|
||||
@@ -16,15 +15,10 @@
|
||||
let showModal = false;
|
||||
let selectedLogo = null;
|
||||
|
||||
let theme = getTheme();
|
||||
|
||||
function openPreview(logo) {
|
||||
selectedLogo = logo;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
let theme = getTheme(); function openPreview(logo) {
|
||||
// Navigate to preview page instead of showing modal
|
||||
const previewUrl = `#/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
|
||||
window.location.href = previewUrl;
|
||||
}
|
||||
|
||||
function isSvgLogo(logo) {
|
||||
@@ -78,8 +72,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
|
||||
|
||||
<div class="logo-list">
|
||||
{#each logos as logo}
|
||||
<div class="logo-item">
|
||||
@@ -179,6 +171,7 @@
|
||||
class="brand-filter-btn common-btn"
|
||||
title="Filter by brand"
|
||||
on:click={() => {
|
||||
console.log("List: Filtering by brand:", logo.brand);
|
||||
setSearchQuery(logo.brand);
|
||||
// Update URL with search param
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import Actions from './Actions.svelte';
|
||||
import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
|
||||
@@ -9,7 +9,7 @@
|
||||
export let show = false;
|
||||
export let logo = null;
|
||||
export let theme;
|
||||
export let openLogoByAnchor = () => {};
|
||||
export const openLogoByAnchor = () => {};
|
||||
export let onDownload = (path, name) => {
|
||||
const a = document.createElement('a');
|
||||
a.href = path;
|
||||
@@ -23,22 +23,7 @@
|
||||
let svgSource = '';
|
||||
let isFetchingSvgSource = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function close() {
|
||||
show = false;
|
||||
dispatch('close');
|
||||
// Remove preview anchor from URL
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
history.replaceState(null, '', window.location.pathname + window.location.search);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
// No event dispatching, parent is fully responsible for controlling the component
|
||||
|
||||
function isSvgLogo(logo) {
|
||||
return logo && logo.format && logo.format.toLowerCase() === 'svg';
|
||||
@@ -62,29 +47,11 @@
|
||||
|
||||
$: validColorConfig = logo && typeof logo.colorConfig === 'object' && logo.colorConfig.selector ? logo.colorConfig : undefined;
|
||||
|
||||
// Sync show state with URL hash
|
||||
$: {
|
||||
if (typeof window !== 'undefined') {
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
show = true;
|
||||
} else {
|
||||
show = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
// No URL manipulation in the component anymore
|
||||
// Parent components should handle all URL and navigation concerns
|
||||
|
||||
// Update URL hash when opening/closing preview
|
||||
// Only fetch SVG source when displayed
|
||||
$: if (show && logo) {
|
||||
const anchor = '#preview-' + encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase());
|
||||
if (window.location.hash !== anchor) {
|
||||
history.replaceState(null, '', window.location.pathname + window.location.search + anchor);
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for show/close to update scroll lock
|
||||
$: if (show && logo) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Fetch SVG source when logo is displayed and is an SVG
|
||||
if (logo.format === 'SVG' && !svgSource) {
|
||||
isFetchingSvgSource = true;
|
||||
@@ -98,37 +65,10 @@
|
||||
isFetchingSvgSource = false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// On mount, check for preview anchor and open if present
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
openLogoByAnchor(window.location.hash);
|
||||
}
|
||||
window.addEventListener('hashchange', onHashChange);
|
||||
// Lock background scroll when preview is open
|
||||
if (show && logo) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
window.removeEventListener('hashchange', onHashChange);
|
||||
// Restore scroll when component is destroyed
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
|
||||
function onHashChange() {
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
openLogoByAnchor(window.location.hash);
|
||||
} else {
|
||||
dispatch('close');
|
||||
}
|
||||
}
|
||||
// Component doesn't handle any window events or URL changes
|
||||
// Parent should handle all navigation logic
|
||||
|
||||
// Svelte action to remove width/height from SVGs for responsive scaling
|
||||
function removeSvgSize(node) {
|
||||
@@ -154,15 +94,16 @@
|
||||
</script>
|
||||
|
||||
<div class="modal-backdrop fullscreen"
|
||||
style="display: {show && logo ? 'flex' : 'none'}"
|
||||
style="display: {show === true ? 'flex' : 'none'}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
{#if logo}
|
||||
<div class="modal-content fullscreen-modal">
|
||||
<div class="modal-header">
|
||||
<div class="header-spacer"></div>
|
||||
<h2>{logo.name}</h2>
|
||||
<button class="close-btn" on:click={close} aria-label="Close preview">×</button>
|
||||
<div class="header-spacer"></div>
|
||||
</div>
|
||||
<div class="modal-body fullscreen-body">
|
||||
<div class="preview-container fullscreen-preview"
|
||||
@@ -355,17 +296,9 @@
|
||||
color: var(--color-accent, #4f8cff);
|
||||
margin: 0;
|
||||
}
|
||||
.close-btn {
|
||||
font-size: 2.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
.close-btn:hover {
|
||||
color: #f44336;
|
||||
.header-spacer {
|
||||
/* This empty div helps maintain the centered title with the back button on the left */
|
||||
width: 70px;
|
||||
}
|
||||
.modal-body.fullscreen-body {
|
||||
flex: 1 1 auto;
|
||||
|
||||
277
src/pages/Home.svelte
Normal file
277
src/pages/Home.svelte
Normal file
@@ -0,0 +1,277 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Grid from "../components/Grid.svelte";
|
||||
import List from "../components/List.svelte";
|
||||
import Header from "../components/Header.svelte";
|
||||
|
||||
// Use the app's global data without reloading
|
||||
let appData = {};
|
||||
let initialized = false;
|
||||
|
||||
// Simple function to get data from the global app object
|
||||
function getAppData() {
|
||||
if (typeof window !== "undefined" && window.appData) {
|
||||
console.log("Home: Using app data with",
|
||||
window.appData.logos ? window.appData.logos.length : 0, "logos",
|
||||
"displayLogos:", window.appData.displayLogos ? window.appData.displayLogos.length : 0);
|
||||
|
||||
// Create a fresh copy to trigger reactivity
|
||||
appData = {
|
||||
...window.appData,
|
||||
logos: [...(window.appData.logos || [])],
|
||||
displayLogos: [...(window.appData.displayLogos || [])],
|
||||
filteredLogos: [...(window.appData.filteredLogos || [])]
|
||||
};
|
||||
|
||||
initialized = true;
|
||||
} else {
|
||||
console.log("Home: window.appData not available yet");
|
||||
}
|
||||
}
|
||||
|
||||
// Consolidate the onMount functions into a single one
|
||||
onMount(() => {
|
||||
getAppData();
|
||||
|
||||
// If not initialized yet, set up an interval to check for data
|
||||
if (!initialized) {
|
||||
console.log("Home: Setting up retry interval for logos data");
|
||||
const interval = setInterval(() => {
|
||||
if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
|
||||
console.log("Home: Data now available:",
|
||||
window.appData.logos.length, "logos");
|
||||
getAppData();
|
||||
initialized = true;
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
console.log("Home: Waiting for logo data, current status:",
|
||||
window.appData ? `${window.appData.logos?.length || 0} logos` : "no window.appData");
|
||||
}
|
||||
}, 200); // Increased interval for better logging
|
||||
|
||||
// No cleanup here - we'll handle in the second part
|
||||
}
|
||||
|
||||
// Also watch for changes to window.appData
|
||||
let logoCheckInterval;
|
||||
let lastViewMode = '';
|
||||
let lastCompactMode = false;
|
||||
let lastSearchQuery = '';
|
||||
let lastSelectedTags = [];
|
||||
let lastTagDropdownOpen = false;
|
||||
let lastDisplayLogosCount = 0;
|
||||
|
||||
// Set up the interval for watching changes
|
||||
logoCheckInterval = setInterval(() => {
|
||||
if (window.appData) {
|
||||
// Check for logo updates
|
||||
if (window.appData.logos &&
|
||||
window.appData.logos.length > 0 &&
|
||||
(!appData.logos || appData.logos.length === 0)) {
|
||||
console.log("Home: Detected logos update in window.appData:", window.appData.logos.length);
|
||||
getAppData();
|
||||
initialized = true;
|
||||
}
|
||||
|
||||
// Check for view mode changes
|
||||
if (window.appData.viewMode !== lastViewMode) {
|
||||
console.log("Home: Detected viewMode change:",
|
||||
lastViewMode, "→", window.appData.viewMode);
|
||||
lastViewMode = window.appData.viewMode;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for compact mode changes
|
||||
if (window.appData.compactMode !== lastCompactMode) {
|
||||
console.log("Home: Detected compactMode change:",
|
||||
lastCompactMode, "→", window.appData.compactMode);
|
||||
lastCompactMode = window.appData.compactMode;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for search query changes
|
||||
if (window.appData.searchQuery !== lastSearchQuery) {
|
||||
console.log("Home: Detected searchQuery change:",
|
||||
lastSearchQuery, "→", window.appData.searchQuery);
|
||||
lastSearchQuery = window.appData.searchQuery;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for display logos count changes
|
||||
if (window.appData.displayLogos &&
|
||||
window.appData.displayLogos.length !== lastDisplayLogosCount) {
|
||||
console.log("Home: Detected displayLogos count change:",
|
||||
lastDisplayLogosCount, "→", window.appData.displayLogos.length);
|
||||
lastDisplayLogosCount = window.appData.displayLogos.length;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for tag selection changes
|
||||
const currentSelectedTags = window.appData.selectedTags || [];
|
||||
if (JSON.stringify(currentSelectedTags) !== JSON.stringify(lastSelectedTags)) {
|
||||
console.log("Home: Detected selectedTags change, now:",
|
||||
currentSelectedTags.length, "tags");
|
||||
lastSelectedTags = [...currentSelectedTags];
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for tag dropdown state changes
|
||||
if (window.appData.tagDropdownOpen !== lastTagDropdownOpen) {
|
||||
console.log("Home: Detected tagDropdownOpen change:",
|
||||
lastTagDropdownOpen, "→", window.appData.tagDropdownOpen);
|
||||
lastTagDropdownOpen = window.appData.tagDropdownOpen;
|
||||
getAppData();
|
||||
}
|
||||
}
|
||||
}, 100); // Faster interval for UI responsiveness
|
||||
|
||||
// Cleanup function to clear the interval when component is destroyed
|
||||
return () => clearInterval(logoCheckInterval);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if initialized}
|
||||
<div class="home-container">
|
||||
<Header
|
||||
logos={appData.logos || []}
|
||||
displayLogos={appData.displayLogos || []}
|
||||
theme={appData.theme || "light"}
|
||||
setTheme={appData.setTheme || ((t) => {})}
|
||||
viewMode={appData.viewMode || "grid"}
|
||||
setGridView={appData.setGridView || (() => {})}
|
||||
setListView={appData.setListView || (() => {})}
|
||||
searchQuery={appData.searchQuery || ""}
|
||||
setSearchQuery={appData.setSearchQuery || ((q) => {})}
|
||||
allTags={appData.allTags || []}
|
||||
selectedTags={appData.selectedTags || []}
|
||||
tagDropdownOpen={appData.tagDropdownOpen || false}
|
||||
toggleDropdown={appData.toggleDropdown || (() => {})}
|
||||
addTag={appData.addTag || (() => {})}
|
||||
removeTag={appData.removeTag || (() => {})}
|
||||
getTagObj={appData.getTagObj || ((t) => ({text: t}))}
|
||||
compactMode={appData.compactMode || false}
|
||||
setCompactMode={appData.setCompactMode || ((val) => {})}
|
||||
/>
|
||||
|
||||
<div class="logos-container main-content">
|
||||
{#if appData.viewMode === "grid"}
|
||||
<Grid
|
||||
logos={appData.displayLogos || []}
|
||||
allLogos={appData.logos || []}
|
||||
onCopy={appData.onCopy || ((p) => {})}
|
||||
onDownload={appData.onDownload || ((p, n) => {})}
|
||||
setSearchQuery={appData.setSearchQuery || ((q) => {})}
|
||||
theme={appData.effectiveTheme || "light"}
|
||||
/>
|
||||
{:else}
|
||||
<List
|
||||
logos={appData.displayLogos || []}
|
||||
allLogos={appData.logos || []}
|
||||
onCopy={appData.onCopy || ((p) => {})}
|
||||
onDownload={appData.onDownload || ((p, n) => {})}
|
||||
setSearchQuery={appData.setSearchQuery || ((q) => {})}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="footer-flex">
|
||||
<span class="footer-left">shadoll Logo Gallery</span>
|
||||
<span class="footer-center">All logos are property of their respective owners.</span>
|
||||
<a
|
||||
href="https://github.com/shadoll/sLogos"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="footer-github"
|
||||
>
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 24 24"
|
||||
fill="#ccc"
|
||||
style="margin-right:0.3em;"
|
||||
><path
|
||||
d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="loading">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.home-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logos-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1.5rem;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-muted);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
flex: 2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-github {
|
||||
flex: 0;
|
||||
margin-left: 1em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.footer-flex {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.3em;
|
||||
}
|
||||
.footer-left, .footer-center {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
.footer-github {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
191
src/pages/Preview.svelte
Normal file
191
src/pages/Preview.svelte
Normal file
@@ -0,0 +1,191 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { push, pop } from 'svelte-spa-router';
|
||||
import PreviewComponent from '../components/Preview.svelte';
|
||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
|
||||
// Get preview ID from URL parameter
|
||||
export let params = {};
|
||||
|
||||
let logo = null;
|
||||
let theme = 'light'; // Default theme
|
||||
let allLogos = [];
|
||||
let showPreview = false;
|
||||
|
||||
// Download handler
|
||||
function onDownload(path, name) {
|
||||
const a = document.createElement('a');
|
||||
a.href = path;
|
||||
a.download = name;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
// Go back to previous page
|
||||
function goBack() {
|
||||
pop();
|
||||
}
|
||||
|
||||
// Set theme based on user preference or system
|
||||
function initTheme() {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme && ['light', 'dark', 'system'].includes(savedTheme)) {
|
||||
theme = savedTheme;
|
||||
} else {
|
||||
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark-theme');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark-theme');
|
||||
}
|
||||
}
|
||||
|
||||
// Find logo by ID in URL
|
||||
function findLogoByUrlId(id) {
|
||||
if (!id || !allLogos.length) return null;
|
||||
|
||||
const decodedId = decodeURIComponent(id);
|
||||
console.log("Preview page: Looking for logo with ID:", decodedId);
|
||||
|
||||
// Try to match by name
|
||||
const foundLogo = allLogos.find(logo => {
|
||||
const urlFriendlyName = logo.name.replace(/\s+/g, '-').toLowerCase();
|
||||
return urlFriendlyName === decodedId;
|
||||
});
|
||||
|
||||
console.log("Preview page: Found logo:", foundLogo ? foundLogo.name : "none");
|
||||
return foundLogo;
|
||||
}
|
||||
|
||||
// Handle close event from Preview component - navigate back to home
|
||||
function handleClose() {
|
||||
push('/');
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
console.log("Preview page: onMount with params:", params);
|
||||
// Initialize theme
|
||||
initTheme();
|
||||
|
||||
// First try to get logos from window.appData if available
|
||||
if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
|
||||
console.log("Preview page: Using logos from window.appData:", window.appData.logos.length);
|
||||
allLogos = window.appData.logos;
|
||||
} else {
|
||||
// Fetch logos data directly if not available in window.appData
|
||||
try {
|
||||
console.log("Preview page: Fetching logos data directly");
|
||||
const timestamp = new Date().getTime(); // Cache busting
|
||||
const response = await fetch(`/data/logos.json?t=${timestamp}`, {
|
||||
cache: "no-cache",
|
||||
headers: {
|
||||
"Cache-Control": "no-cache",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to fetch logos data');
|
||||
|
||||
allLogos = await response.json();
|
||||
console.log("Preview page: Loaded", allLogos.length, "logos directly");
|
||||
} catch (error) {
|
||||
console.error('Preview page: Error loading logos:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Find the logo to display based on URL
|
||||
if (params.id && allLogos.length > 0) {
|
||||
logo = findLogoByUrlId(params.id);
|
||||
|
||||
// Set document title
|
||||
if (logo) {
|
||||
document.title = `${logo.name} - Logo Gallery`;
|
||||
showPreview = true;
|
||||
console.log("Preview page: Set up logo for display:", logo.name);
|
||||
} else {
|
||||
console.error("Preview page: Logo not found for ID:", params.id);
|
||||
}
|
||||
} else {
|
||||
console.log("Preview page: No params.id or no logos loaded:",
|
||||
params.id, allLogos.length);
|
||||
}
|
||||
|
||||
if (!logo && params.id) {
|
||||
console.error("Preview page: Logo not found: " + params.id);
|
||||
// Redirect to home if logo not found
|
||||
push('/');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if logo}
|
||||
<div class="preview-page">
|
||||
<div class="back-button-container">
|
||||
<button class="back-button" on:click={goBack}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
Back to Gallery
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<PreviewComponent
|
||||
show={true}
|
||||
{logo}
|
||||
{theme}
|
||||
{onDownload}
|
||||
on:close={handleClose}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="loading-container">
|
||||
<p>Loading logo...</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.preview-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 2500;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1rem;
|
||||
background: var(--color-card, #fff);
|
||||
color: var(--color-text, #222);
|
||||
border: 1px solid var(--color-border, #ddd);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text, #222);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user