Redesign color picker UI and improve palette modals
This commit is contained in:
parent
a58b0f7cdb
commit
248d73a619
24
colors.json
24
colors.json
@ -36,7 +36,7 @@
|
||||
{ "name": "Yellow", "hex": "#f5e812" },
|
||||
{ "name": "Goldenrod", "hex": "#f7b615" },
|
||||
{ "name": "Orange", "hex": "#ef6b24" },
|
||||
{ "name":"Blended Brown","hex":"#c9aea0"}
|
||||
{ "name":"Blended Brown","hex":"#c9aea0"},
|
||||
{ "name": "Coffee", "hex": "#957461" },
|
||||
{ "name": "Burnt Orange", "hex": "#9d4223" }
|
||||
]
|
||||
@ -92,28 +92,28 @@
|
||||
},
|
||||
{
|
||||
"name": "Classic Silver",
|
||||
"hex": "#F4C2C2",
|
||||
"hex": "#C0C0C0",
|
||||
"metallic": true,
|
||||
"pearlType": "silver",
|
||||
"image": "images/classic-silver.webp"
|
||||
},
|
||||
{
|
||||
"name": "Pearl Pink",
|
||||
"hex": "#F4C2C2",
|
||||
"hex": "#F4C2D0",
|
||||
"metallic": true,
|
||||
"pearlType": "pink",
|
||||
"image": "images/pearl-pink.webp"
|
||||
},
|
||||
{
|
||||
"name": "Pearl Peach",
|
||||
"hex": "#F4C2C2",
|
||||
"hex": "#F4D2C2",
|
||||
"metallic": true,
|
||||
"pearlType": "pink",
|
||||
"image": "images/pearl-peach.webp"
|
||||
},
|
||||
{
|
||||
"name": "Classic Rose Gold",
|
||||
"hex": "#F4C2C2",
|
||||
"hex": "#B76E79",
|
||||
"metallic": true,
|
||||
"pearlType": "pink",
|
||||
"image": "images/metalic-rosegold.webp"
|
||||
@ -134,7 +134,7 @@
|
||||
},
|
||||
{
|
||||
"name": "Pearl Periwinkle",
|
||||
"hex": "#F4C2C2",
|
||||
"hex": "#CCCCFF",
|
||||
"metallic": true,
|
||||
"pearlType": "blue",
|
||||
"image": "images/pearl-periwinkle.webp"
|
||||
@ -181,14 +181,14 @@
|
||||
"colors": [
|
||||
{
|
||||
"name": "Chrome Rose Gold",
|
||||
"hex": "#FFBF00",
|
||||
"hex": "#B76E79",
|
||||
"metallic": true,
|
||||
"chromeType": "rosegold",
|
||||
"image": "images/chrome-rosegold.webp"
|
||||
},
|
||||
{
|
||||
"name": "Chrome Pink",
|
||||
"hex": "#FFBF00",
|
||||
"hex": "#FF69B4",
|
||||
"metallic": true,
|
||||
"chromeType": "rosegold",
|
||||
"image": "images/chrome-pink.webp"
|
||||
@ -202,28 +202,28 @@
|
||||
},
|
||||
{
|
||||
"name": "Chrome Champagne",
|
||||
"hex": "#FF1DCE",
|
||||
"hex": "#F7E7CE",
|
||||
"metallic": true,
|
||||
"chromeType": "champagne",
|
||||
"image": "images/chrome-champagne.webp"
|
||||
},
|
||||
{
|
||||
"name": "Chrome Truffle",
|
||||
"hex": "#FF1DCE",
|
||||
"hex": "#D2B48C",
|
||||
"metallic": true,
|
||||
"chromeType": "champagne",
|
||||
"image": "images/chrome-truffle.webp"
|
||||
},
|
||||
{
|
||||
"name": "Chrome Silver",
|
||||
"hex": "#a8a9a4",
|
||||
"hex": "#C0C0C0",
|
||||
"metallic": true,
|
||||
"chromeType": "silver",
|
||||
"image": "images/chrome-silver.webp"
|
||||
},
|
||||
{
|
||||
"name": "Chrome Space Grey",
|
||||
"hex": "#a8a9a4",
|
||||
"hex": "#5C5C5C",
|
||||
"metallic": true,
|
||||
"chromeType": "spacegrey",
|
||||
"image": "images/chrome-spacegrey.webp"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 521 KiB |
59
index.html
59
index.html
@ -9,6 +9,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="color.css">
|
||||
@ -37,6 +38,7 @@
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-tab" href="/">Home</a>
|
||||
<a class="navbar-item" href="https://shop.beachpartyballoons.com">Shop</a>
|
||||
<a class="navbar-item" href="../about/">About Us</a>
|
||||
<a class="navbar-item" href="../faq/">FAQ</a>
|
||||
<a class="navbar-item" href="../terms/">Terms</a>
|
||||
@ -47,35 +49,50 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div id="selected-palette">
|
||||
<main class="color-picker-app">
|
||||
<section class="picker-layout">
|
||||
<aside id="selected-palette" aria-label="Selected palette">
|
||||
<div class="palette-header-row">
|
||||
<div class="palette-title-group">
|
||||
<h2 class="has-text-dark">Your Palette</h2>
|
||||
<div id="palette-controls">
|
||||
<label class="switch" title="Toggle Animations">
|
||||
</div>
|
||||
<div id="palette-controls" aria-label="Palette controls">
|
||||
<label class="switch" title="Toggle Animations" aria-label="Toggle animations">
|
||||
<input type="checkbox" id="toggle-animation" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette">
|
||||
<button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette" aria-label="Shuffle palette">
|
||||
<i class="fa-solid fa-shuffle"></i>
|
||||
</button>
|
||||
<button id="share-palette" class="palette-control-btn" title="Share Palette">
|
||||
<button id="preset-palettes" class="palette-control-btn" title="Palette Ideas" aria-label="Palette ideas">
|
||||
<i class="fa-solid fa-palette"></i>
|
||||
</button>
|
||||
<button id="share-palette" class="palette-control-btn" title="Share Palette" aria-label="Share palette">
|
||||
<i class="fa-solid fa-share-nodes"></i>
|
||||
</button>
|
||||
<button id="zoom-palette" class="palette-control-btn" title="Zoom In Palette">
|
||||
<button id="zoom-palette" class="palette-control-btn" title="Zoom In Palette" aria-label="Zoom palette">
|
||||
<i class="fa-solid fa-magnifying-glass-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="palette-colors">
|
||||
<div class="palette-meta-row">
|
||||
<span id="palette-count" class="palette-count-badge">0 selected</span>
|
||||
<span class="palette-hint">Tap a balloon below to add it here</span>
|
||||
</div>
|
||||
|
||||
<div id="palette-colors" aria-live="polite"></div>
|
||||
|
||||
<div class="palette-footer-row">
|
||||
<button id="clear-palette" class="has-text-dark">Clear Palette</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="color-families">
|
||||
</div>
|
||||
<section class="library-panel" aria-labelledby="library-heading">
|
||||
<h2 id="library-heading" class="library-inline-title">Colors</h2>
|
||||
<div id="color-families"></div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -90,12 +107,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="zoom-overlay">
|
||||
<div id="zoomed-palette-content"></div>
|
||||
<div class="preset-modal-backdrop" aria-hidden="true">
|
||||
<div class="preset-modal" role="dialog" aria-modal="true" aria-labelledby="preset-modal-title">
|
||||
<div class="preset-modal-header">
|
||||
<h3 id="preset-modal-title">Palette Ideas</h3>
|
||||
<button id="close-preset-modal" type="button" aria-label="Close palette ideas">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="preset-modal-subtitle">Quick starting points you can tweak after applying.</p>
|
||||
<div id="preset-palette-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="zoom-overlay">
|
||||
<div id="zoom-modal-shell">
|
||||
<a href="#" id="zoom-close" aria-label="Close zoom view">×</a>
|
||||
<div id="zoomed-palette-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="script.js"></script>
|
||||
<script src="../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
507
script.js
507
script.js
@ -1,5 +1,53 @@
|
||||
let selectedPalette = [];
|
||||
let animationsEnabled = true;
|
||||
let allColorFamilies = [];
|
||||
let colorSearchQuery = '';
|
||||
let colorSortMode = 'default';
|
||||
|
||||
const PRESET_PALETTES = [
|
||||
{
|
||||
id: 'soft-baby-shower',
|
||||
name: 'Pastels',
|
||||
tag: 'Pastels',
|
||||
description: 'Gentle mix of pink, blue, lilac, and white.',
|
||||
colors: ['White', 'Light Pink', 'Sky Blue', 'Lilac', 'Pastel Green', 'Pastel Yellow']
|
||||
},
|
||||
{
|
||||
id: 'beach-party',
|
||||
name: 'Muted Naturals',
|
||||
tag: 'Neutral',
|
||||
description: 'Soft neutral mix with a chrome champagne accent.',
|
||||
colors: ['Cameo', 'Sand', 'White', 'Chrome Champagne']
|
||||
},
|
||||
{
|
||||
id: 'elegant-neutral',
|
||||
name: 'Elegant Neutral',
|
||||
tag: 'Event',
|
||||
description: 'Wedding-friendly neutrals with soft warmth.',
|
||||
colors: ['White', 'Retro White', 'Sand', 'Cameo', 'Fog']
|
||||
},
|
||||
{
|
||||
id: 'chrome-lux',
|
||||
name: 'Midnight Steel',
|
||||
tag: 'Bold',
|
||||
description: 'Deep dark base with pearl blues and chrome grey accents.',
|
||||
colors: ['Black', 'Pearl Midnight Blue', 'Pearl Sapphire', 'Chrome Space Grey']
|
||||
},
|
||||
{
|
||||
id: 'jewel-night',
|
||||
name: 'Modern Minimal',
|
||||
tag: 'Trend',
|
||||
description: 'Clean neutrals with a muted blue accent for a current look.',
|
||||
colors: ['White', 'Sand', 'Grey', 'Fog', 'Sea Glass']
|
||||
},
|
||||
{
|
||||
id: 'pearl-dream',
|
||||
name: 'Tropical Rainbow',
|
||||
tag: 'Bright',
|
||||
description: 'Bold tropical brights for playful rainbow installs.',
|
||||
colors: ['Fuchsia', 'Goldenrod', 'Caribbean Blue', 'Lime Green', 'Yellow', 'Lavender']
|
||||
}
|
||||
];
|
||||
|
||||
// --- LOCAL STORAGE LOADING ---
|
||||
// Load palette from Local Storage on startup
|
||||
@ -17,19 +65,66 @@ if (savedPaletteJSON) {
|
||||
fetch('colors.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const colorFamiliesContainer = document.getElementById('color-families');
|
||||
allColorFamilies = data;
|
||||
renderColorFamilies();
|
||||
initializeLibraryControls();
|
||||
|
||||
// Initialize the palette, checking for shared links or local versions
|
||||
initializePaletteOnLoad(data);
|
||||
})
|
||||
.catch(error => console.error('Error loading colors:', error));
|
||||
|
||||
function renderColorFamilies() {
|
||||
const colorFamiliesContainer = document.getElementById('color-families');
|
||||
colorFamiliesContainer.innerHTML = '';
|
||||
|
||||
const query = colorSearchQuery.trim().toLowerCase();
|
||||
let visibleFamilyCount = 0;
|
||||
|
||||
allColorFamilies.forEach(family => {
|
||||
const familyMatchesQuery = family.family.toLowerCase().includes(query);
|
||||
let colors = [...family.colors];
|
||||
|
||||
if (colorSortMode === 'az') {
|
||||
colors.sort((a, b) => a.name.localeCompare(b.name));
|
||||
} else if (colorSortMode === 'lightness') {
|
||||
colors.sort((a, b) => getPerceivedBrightness(a.hex ?? '#000000') - getPerceivedBrightness(b.hex ?? '#000000'));
|
||||
}
|
||||
|
||||
if (query) {
|
||||
colors = colors.filter(color => {
|
||||
const nameMatch = color.name.toLowerCase().includes(query);
|
||||
const hexMatch = (color.hex || '').toLowerCase().includes(query);
|
||||
return familyMatchesQuery || nameMatch || hexMatch;
|
||||
});
|
||||
}
|
||||
|
||||
if (query && colors.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
visibleFamilyCount += 1;
|
||||
|
||||
// Create the color swatch for each color in the JSON data
|
||||
data.forEach(family => {
|
||||
const familyDiv = document.createElement('div');
|
||||
familyDiv.classList.add('color-family');
|
||||
familyDiv.classList.add('has-text-dark');
|
||||
familyDiv.classList.add('color-family', 'has-text-dark');
|
||||
familyDiv.innerHTML = `<h3>${family.family}</h3>`;
|
||||
|
||||
const swatchContainer = document.createElement('div');
|
||||
swatchContainer.classList.add('swatch-container');
|
||||
|
||||
family.colors.forEach(color => {
|
||||
colors.forEach(color => {
|
||||
swatchContainer.appendChild(createColorSwatch(color));
|
||||
});
|
||||
|
||||
familyDiv.appendChild(swatchContainer);
|
||||
colorFamiliesContainer.appendChild(familyDiv);
|
||||
});
|
||||
|
||||
colorFamiliesContainer.classList.toggle('has-filtered-results-none', visibleFamilyCount === 0);
|
||||
updateSwatchHighlights();
|
||||
}
|
||||
|
||||
function createColorSwatch(color) {
|
||||
const swatchWrapper = document.createElement('div');
|
||||
swatchWrapper.classList.add('swatch-wrapper');
|
||||
|
||||
@ -37,18 +132,25 @@ fetch('colors.json')
|
||||
swatch.classList.add('color-swatch');
|
||||
swatch.dataset.color = color.hex;
|
||||
swatch.style.color = color.hex;
|
||||
swatch.setAttribute('role', 'button');
|
||||
swatch.setAttribute('tabindex', '0');
|
||||
swatch.setAttribute('aria-label', `Toggle ${color.name}`);
|
||||
|
||||
const backgroundDiv = document.createElement('div');
|
||||
backgroundDiv.classList.add('color-background');
|
||||
|
||||
if (color.image) {
|
||||
backgroundDiv.classList.add('finish-image');
|
||||
backgroundDiv.style.backgroundImage = `url(${color.image})`;
|
||||
} else {
|
||||
backgroundDiv.style.backgroundColor = color.hex;
|
||||
}
|
||||
|
||||
if (color.metallic && color.chromeType) {
|
||||
backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
|
||||
if (color.metallic) {
|
||||
backgroundDiv.classList.add('metallic');
|
||||
if (color.chromeType && !color.image) {
|
||||
backgroundDiv.classList.add(`chrome-${color.chromeType}`);
|
||||
}
|
||||
}
|
||||
|
||||
const shineImg = document.createElement('img');
|
||||
@ -68,7 +170,6 @@ fetch('colors.json')
|
||||
colorName.classList.add('color-name');
|
||||
colorName.textContent = color.name;
|
||||
|
||||
// Event listener to add/remove a color from the palette
|
||||
swatch.addEventListener('click', () => {
|
||||
const isSelected = selectedPalette.some(c => c.hex === color.hex);
|
||||
if (isSelected) {
|
||||
@ -86,19 +187,116 @@ fetch('colors.json')
|
||||
updateSwatchHighlights();
|
||||
});
|
||||
|
||||
swatch.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
swatch.click();
|
||||
}
|
||||
});
|
||||
|
||||
swatchWrapper.appendChild(swatch);
|
||||
swatchWrapper.appendChild(colorName);
|
||||
swatchContainer.appendChild(swatchWrapper);
|
||||
return swatchWrapper;
|
||||
}
|
||||
|
||||
function initializeLibraryControls() {
|
||||
const searchInput = document.getElementById('color-search');
|
||||
const sortSelect = document.getElementById('color-sort');
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', (event) => {
|
||||
colorSearchQuery = event.target.value || '';
|
||||
renderColorFamilies();
|
||||
});
|
||||
}
|
||||
|
||||
if (sortSelect) {
|
||||
sortSelect.addEventListener('change', (event) => {
|
||||
colorSortMode = event.target.value || 'default';
|
||||
renderColorFamilies();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function findColorByNameOrHex(token) {
|
||||
const normalized = String(token || '').trim().toLowerCase();
|
||||
if (!normalized) return null;
|
||||
const allColors = allColorFamilies.flatMap(family => family.colors);
|
||||
|
||||
return allColors.find(color =>
|
||||
color.name.toLowerCase() === normalized ||
|
||||
(color.hex || '').toLowerCase() === normalized
|
||||
) || null;
|
||||
}
|
||||
|
||||
function resolvePresetPalette(preset) {
|
||||
return preset.colors
|
||||
.map(findColorByNameOrHex)
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function renderPresetPaletteModal() {
|
||||
const presetList = document.getElementById('preset-palette-list');
|
||||
if (!presetList) return;
|
||||
|
||||
presetList.innerHTML = '';
|
||||
|
||||
PRESET_PALETTES.forEach(preset => {
|
||||
const resolvedColors = resolvePresetPalette(preset);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'preset-card';
|
||||
|
||||
const titleRow = document.createElement('div');
|
||||
titleRow.className = 'preset-card-title-row';
|
||||
titleRow.innerHTML = `
|
||||
<h4 class="preset-card-title">${preset.name}</h4>
|
||||
<span class="preset-card-tag">${preset.tag}</span>
|
||||
`;
|
||||
|
||||
const desc = document.createElement('p');
|
||||
desc.className = 'preset-card-desc';
|
||||
desc.textContent = preset.description;
|
||||
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'preset-preview';
|
||||
resolvedColors.forEach(color => {
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'preset-dot';
|
||||
dot.title = color.name;
|
||||
|
||||
if (color.image) {
|
||||
dot.classList.add('is-image');
|
||||
dot.style.backgroundImage = `url(${color.image})`;
|
||||
} else {
|
||||
dot.style.backgroundColor = color.hex;
|
||||
}
|
||||
|
||||
if (isLightColor(color.hex)) {
|
||||
dot.style.borderColor = 'rgba(21,56,76,0.24)';
|
||||
}
|
||||
|
||||
preview.appendChild(dot);
|
||||
});
|
||||
|
||||
familyDiv.appendChild(swatchContainer);
|
||||
colorFamiliesContainer.appendChild(familyDiv);
|
||||
const applyButton = document.createElement('button');
|
||||
applyButton.type = 'button';
|
||||
applyButton.textContent = 'Use Palette';
|
||||
applyButton.addEventListener('click', () => {
|
||||
if (resolvedColors.length === 0) return;
|
||||
selectedPalette = resolvedColors.map(color => ({ ...color }));
|
||||
renderSelectedPalette();
|
||||
updateSwatchHighlights();
|
||||
closePresetModal();
|
||||
});
|
||||
|
||||
// Initialize the palette, checking for shared links or local versions
|
||||
initializePaletteOnLoad(data);
|
||||
})
|
||||
.catch(error => console.error('Error loading colors:', error));
|
||||
card.appendChild(titleRow);
|
||||
card.appendChild(desc);
|
||||
card.appendChild(preview);
|
||||
card.appendChild(applyButton);
|
||||
presetList.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the current 'selectedPalette' array to the browser's Local Storage.
|
||||
@ -114,16 +312,36 @@ function renderSelectedPalette() {
|
||||
const paletteColorsContainer = document.getElementById('palette-colors');
|
||||
paletteColorsContainer.innerHTML = '';
|
||||
|
||||
if (selectedPalette.length === 0) {
|
||||
paletteColorsContainer.classList.add('is-empty');
|
||||
paletteColorsContainer.innerHTML = `
|
||||
<div class="palette-empty-state">
|
||||
<i class="fa-solid fa-circle-dot"></i>
|
||||
<strong>No balloons selected yet</strong>
|
||||
<span>Tap colors below to build a palette, then shuffle, zoom, or share it.</span>
|
||||
</div>
|
||||
`;
|
||||
updatePaletteUIState();
|
||||
savePaletteToLocalStorage();
|
||||
return;
|
||||
}
|
||||
|
||||
paletteColorsContainer.classList.remove('is-empty');
|
||||
|
||||
selectedPalette.forEach(color => {
|
||||
const swatchWrapper = document.createElement('div');
|
||||
swatchWrapper.classList.add('swatch-wrapper');
|
||||
|
||||
const floatGroup = document.createElement('div');
|
||||
floatGroup.classList.add('balloon-float-group');
|
||||
let floatDuration = '4s';
|
||||
let floatDelay = '0s';
|
||||
|
||||
if (animationsEnabled) {
|
||||
floatGroup.style.animationDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
|
||||
floatGroup.style.animationDelay = `${(Math.random() * 2).toFixed(2)}s`;
|
||||
floatDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
|
||||
floatDelay = `${(Math.random() * 2).toFixed(2)}s`;
|
||||
floatGroup.style.animationDuration = floatDuration;
|
||||
floatGroup.style.animationDelay = floatDelay;
|
||||
} else {
|
||||
floatGroup.style.animation = 'none';
|
||||
}
|
||||
@ -131,6 +349,9 @@ function renderSelectedPalette() {
|
||||
const swatch = document.createElement('div');
|
||||
swatch.classList.add('color-swatch');
|
||||
swatch.dataset.color = color.hex;
|
||||
swatch.setAttribute('role', 'button');
|
||||
swatch.setAttribute('tabindex', '0');
|
||||
swatch.setAttribute('aria-label', `Remove ${color.name} from palette`);
|
||||
|
||||
const backgroundDiv = document.createElement('div');
|
||||
backgroundDiv.classList.add('color-background', 'chosen');
|
||||
@ -141,8 +362,11 @@ function renderSelectedPalette() {
|
||||
backgroundDiv.style.backgroundColor = color.hex;
|
||||
}
|
||||
|
||||
if (color.metallic && color.chromeType) {
|
||||
backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
|
||||
if (color.metallic) {
|
||||
backgroundDiv.classList.add('metallic');
|
||||
if (color.chromeType && !color.image) {
|
||||
backgroundDiv.classList.add(`chrome-${color.chromeType}`);
|
||||
}
|
||||
}
|
||||
|
||||
const shineImg = document.createElement('img');
|
||||
@ -163,10 +387,39 @@ function renderSelectedPalette() {
|
||||
stringSVG.setAttribute("class", "balloon-string-svg");
|
||||
stringSVG.setAttribute("viewBox", "0 0 20 60");
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
path.setAttribute("d", "M10 0 C8 10, 12 20, 10 30 C8 40, 12 50, 10 60");
|
||||
const basePathD = "M10 0 C6 8, 14 14, 9 22 C5 29, 14 35, 10 43 C7 49, 12 54, 10 60";
|
||||
const rightLeadD = "M10 0 C8 7, 16 13, 12 21 C8 28, 16 34, 13 42 C10 48, 13 54, 11 60";
|
||||
const rightSnapD = "M10 0 C9 8, 17 15, 13 23 C9 30, 17 36, 14 44 C11 50, 14 55, 12 60";
|
||||
const centerRecoverD = "M10 0 C7 8, 15 14, 10 22 C6 29, 13 35, 9 43 C7 49, 12 54, 10 60";
|
||||
const leftLeadD = "M10 0 C4 8, 12 14, 7 22 C3 29, 12 35, 8 43 C5 49, 11 54, 9 60";
|
||||
const leftSnapD = "M10 0 C3 9, 11 15, 6 23 C2 30, 11 36, 7 44 C4 50, 10 55, 8 60";
|
||||
const centerSettleD = "M10 0 C6 8, 14 14, 9 22 C5 29, 13 35, 9 43 C7 49, 12 54, 10 60";
|
||||
|
||||
path.setAttribute("d", basePathD);
|
||||
path.setAttribute("class", "wiggle-path");
|
||||
path.setAttribute("stroke", "#444");
|
||||
path.setAttribute("stroke-width", "2");
|
||||
path.setAttribute("fill", "none");
|
||||
|
||||
if (animationsEnabled) {
|
||||
const bendAnimate = document.createElementNS(svgNS, "animate");
|
||||
bendAnimate.setAttribute("attributeName", "d");
|
||||
bendAnimate.setAttribute("dur", floatDuration);
|
||||
bendAnimate.setAttribute("begin", floatDelay);
|
||||
bendAnimate.setAttribute("repeatCount", "indefinite");
|
||||
bendAnimate.setAttribute(
|
||||
"values",
|
||||
`${basePathD};${rightLeadD};${rightSnapD};${centerRecoverD};${leftLeadD};${leftSnapD};${centerSettleD};${basePathD}`
|
||||
);
|
||||
bendAnimate.setAttribute("keyTimes", "0;0.14;0.24;0.42;0.62;0.74;0.9;1");
|
||||
bendAnimate.setAttribute("calcMode", "spline");
|
||||
bendAnimate.setAttribute(
|
||||
"keySplines",
|
||||
"0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1"
|
||||
);
|
||||
path.appendChild(bendAnimate);
|
||||
}
|
||||
|
||||
stringSVG.appendChild(path);
|
||||
|
||||
floatGroup.appendChild(swatch);
|
||||
@ -184,9 +437,17 @@ function renderSelectedPalette() {
|
||||
updateSwatchHighlights();
|
||||
});
|
||||
|
||||
swatch.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
swatch.click();
|
||||
}
|
||||
});
|
||||
|
||||
paletteColorsContainer.appendChild(swatchWrapper);
|
||||
});
|
||||
|
||||
updatePaletteUIState();
|
||||
savePaletteToLocalStorage();
|
||||
}
|
||||
|
||||
@ -211,6 +472,25 @@ function updateSwatchHighlights() {
|
||||
});
|
||||
}
|
||||
|
||||
function updatePaletteUIState() {
|
||||
const countBadge = document.getElementById('palette-count');
|
||||
const clearButton = document.getElementById('clear-palette');
|
||||
const shareButtonEl = document.getElementById('share-palette');
|
||||
const shuffleButton = document.getElementById('shuffle-palette');
|
||||
const zoomButtonEl = document.getElementById('zoom-palette');
|
||||
|
||||
const count = selectedPalette.length;
|
||||
if (countBadge) {
|
||||
countBadge.textContent = `${count} selected`;
|
||||
}
|
||||
|
||||
const hasSelection = count > 0;
|
||||
[clearButton, shareButtonEl, shuffleButton, zoomButtonEl].forEach(button => {
|
||||
if (!button) return;
|
||||
button.disabled = !hasSelection;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines if a hex color is light or dark to decide on border visibility.
|
||||
* @param {string} hex - The hex color code (e.g., "#FFFFFF").
|
||||
@ -218,9 +498,16 @@ function updateSwatchHighlights() {
|
||||
*/
|
||||
function isLightColor(hex) {
|
||||
if (!hex) return false;
|
||||
const rgb = hex.replace('#', '').match(/.{1,2}/g).map(x => parseInt(x, 16));
|
||||
const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
|
||||
return brightness > 220;
|
||||
return getPerceivedBrightness(hex) > 220;
|
||||
}
|
||||
|
||||
function getPerceivedBrightness(hex) {
|
||||
if (!hex) return 0;
|
||||
const normalized = hex.replace('#', '');
|
||||
const pairs = normalized.match(/.{1,2}/g);
|
||||
if (!pairs || pairs.length < 3) return 0;
|
||||
const rgb = pairs.map(x => parseInt(x, 16));
|
||||
return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -275,7 +562,47 @@ function initializePaletteOnLoad(allColorData) {
|
||||
|
||||
// --- Event Listeners ---
|
||||
|
||||
document.getElementById('clear-palette').addEventListener('click', () => {
|
||||
const shareButton = document.getElementById('share-palette');
|
||||
const modalBackdrop = document.querySelector('.palette-modal-backdrop');
|
||||
const closeModalButton = document.getElementById('close-modal');
|
||||
const modalColorList = document.getElementById('modal-color-list');
|
||||
const presetButton = document.getElementById('preset-palettes');
|
||||
const presetModalBackdrop = document.querySelector('.preset-modal-backdrop');
|
||||
const closePresetModalButton = document.getElementById('close-preset-modal');
|
||||
|
||||
function syncModalInteractionLock() {
|
||||
const shareOpen = modalBackdrop && getComputedStyle(modalBackdrop).display !== 'none';
|
||||
const presetOpen = presetModalBackdrop && getComputedStyle(presetModalBackdrop).display !== 'none';
|
||||
const zoomOpen = zoomOverlay && zoomOverlay.classList.contains('is-active');
|
||||
document.body.classList.toggle('modal-open', Boolean(shareOpen || presetOpen || zoomOpen));
|
||||
}
|
||||
|
||||
async function confirmClearPalette() {
|
||||
if (typeof Swal !== 'undefined' && Swal.fire) {
|
||||
const result = await Swal.fire({
|
||||
title: 'Clear palette?',
|
||||
text: 'This removes all selected balloons from your palette.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Clear Palette',
|
||||
cancelButtonText: 'Cancel',
|
||||
reverseButtons: true,
|
||||
confirmButtonColor: '#0ea7a0',
|
||||
background: '#fffdf7',
|
||||
color: '#15384c'
|
||||
});
|
||||
return result.isConfirmed;
|
||||
}
|
||||
|
||||
return confirm('Are you sure you want to clear your entire palette?');
|
||||
}
|
||||
|
||||
// --- Event Listeners ---
|
||||
|
||||
document.getElementById('clear-palette').addEventListener('click', async () => {
|
||||
const shouldClear = await confirmClearPalette();
|
||||
if (!shouldClear) return;
|
||||
|
||||
selectedPalette = [];
|
||||
renderSelectedPalette();
|
||||
updateSwatchHighlights();
|
||||
@ -293,10 +620,18 @@ document.getElementById('shuffle-palette').addEventListener('click', () => {
|
||||
|
||||
// --- Modal Functionality ---
|
||||
|
||||
const shareButton = document.getElementById('share-palette');
|
||||
const modalBackdrop = document.querySelector('.palette-modal-backdrop');
|
||||
const closeModalButton = document.getElementById('close-modal');
|
||||
const modalColorList = document.getElementById('modal-color-list');
|
||||
function openPresetModal() {
|
||||
renderPresetPaletteModal();
|
||||
presetModalBackdrop.style.display = 'flex';
|
||||
presetModalBackdrop.setAttribute('aria-hidden', 'false');
|
||||
syncModalInteractionLock();
|
||||
}
|
||||
|
||||
function closePresetModal() {
|
||||
presetModalBackdrop.style.display = 'none';
|
||||
presetModalBackdrop.setAttribute('aria-hidden', 'true');
|
||||
syncModalInteractionLock();
|
||||
}
|
||||
|
||||
shareButton.addEventListener('click', () => {
|
||||
if (selectedPalette.length === 0) {
|
||||
@ -329,23 +664,96 @@ shareButton.addEventListener('click', () => {
|
||||
});
|
||||
|
||||
modalBackdrop.style.display = 'flex';
|
||||
syncModalInteractionLock();
|
||||
});
|
||||
|
||||
closeModalButton.addEventListener('click', () => {
|
||||
modalBackdrop.style.display = 'none';
|
||||
syncModalInteractionLock();
|
||||
});
|
||||
|
||||
modalBackdrop.addEventListener('click', (event) => {
|
||||
if (event.target === modalBackdrop) {
|
||||
modalBackdrop.style.display = 'none';
|
||||
syncModalInteractionLock();
|
||||
}
|
||||
});
|
||||
|
||||
if (presetButton && presetModalBackdrop && closePresetModalButton) {
|
||||
presetButton.addEventListener('click', openPresetModal);
|
||||
closePresetModalButton.addEventListener('click', closePresetModal);
|
||||
presetModalBackdrop.addEventListener('click', (event) => {
|
||||
if (event.target === presetModalBackdrop) {
|
||||
closePresetModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Zoom Palette Functionality ---
|
||||
|
||||
const zoomButton = document.getElementById('zoom-palette');
|
||||
const zoomOverlay = document.getElementById('zoom-overlay');
|
||||
const zoomedPaletteContent = document.getElementById('zoomed-palette-content');
|
||||
const zoomCloseButton = document.getElementById('zoom-close');
|
||||
|
||||
function renderZoomPaletteComparison() {
|
||||
zoomedPaletteContent.innerHTML = '';
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.classList.add('zoom-palette-grid');
|
||||
|
||||
selectedPalette.forEach(color => {
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('zoom-color-card');
|
||||
|
||||
const balloonWrap = document.createElement('div');
|
||||
balloonWrap.classList.add('zoom-balloon-wrap');
|
||||
|
||||
const swatch = document.createElement('div');
|
||||
swatch.classList.add('color-swatch', 'zoom-color-balloon');
|
||||
swatch.dataset.color = color.hex;
|
||||
|
||||
const backgroundDiv = document.createElement('div');
|
||||
backgroundDiv.classList.add('color-background', 'chosen');
|
||||
|
||||
if (color.image) {
|
||||
backgroundDiv.style.backgroundImage = `url(${color.image})`;
|
||||
} else {
|
||||
backgroundDiv.style.backgroundColor = color.hex;
|
||||
}
|
||||
|
||||
if (color.metallic) {
|
||||
backgroundDiv.classList.add('metallic');
|
||||
if (color.chromeType && !color.image) {
|
||||
backgroundDiv.classList.add(`chrome-${color.chromeType}`);
|
||||
}
|
||||
}
|
||||
|
||||
const shineImg = document.createElement('img');
|
||||
shineImg.classList.add('color-shine');
|
||||
shineImg.src = "shine.svg";
|
||||
shineImg.alt = "";
|
||||
|
||||
if (isLightColor(color.hex)) {
|
||||
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
|
||||
shineImg.classList.add('has-halo');
|
||||
}
|
||||
|
||||
swatch.appendChild(backgroundDiv);
|
||||
swatch.appendChild(shineImg);
|
||||
balloonWrap.appendChild(swatch);
|
||||
|
||||
const name = document.createElement('div');
|
||||
name.classList.add('zoom-color-name');
|
||||
name.textContent = color.name;
|
||||
|
||||
card.appendChild(balloonWrap);
|
||||
card.appendChild(name);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
zoomedPaletteContent.appendChild(grid);
|
||||
}
|
||||
|
||||
// --- Event Listener to OPEN the zoom view ---
|
||||
zoomButton.addEventListener('click', () => {
|
||||
@ -355,26 +763,18 @@ zoomButton.addEventListener('click', () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the original container of the colored balloons
|
||||
const originalPaletteColors = document.getElementById('palette-colors');
|
||||
|
||||
// Clear any old content and create a deep clone of the balloons
|
||||
zoomedPaletteContent.innerHTML = '';
|
||||
const clonedContent = originalPaletteColors.cloneNode(true);
|
||||
|
||||
// The clone doesn't need its own ID
|
||||
clonedContent.id = '';
|
||||
|
||||
// Append the cloned balloons to our zoom container
|
||||
zoomedPaletteContent.appendChild(clonedContent);
|
||||
// Build a utility-focused static comparison layout (no strings/motion)
|
||||
renderZoomPaletteComparison();
|
||||
|
||||
// Show the overlay by adding the .is-active class
|
||||
zoomOverlay.classList.add('is-active');
|
||||
syncModalInteractionLock();
|
||||
});
|
||||
|
||||
// --- Function to CLOSE the zoom view ---
|
||||
function closeZoomView() {
|
||||
zoomOverlay.classList.remove('is-active');
|
||||
syncModalInteractionLock();
|
||||
}
|
||||
|
||||
// --- Two ways to CLOSE the view for easy access ---
|
||||
@ -387,9 +787,32 @@ zoomOverlay.addEventListener('click', (event) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Press the 'Escape' key
|
||||
// 2. Click the close button
|
||||
zoomCloseButton.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
closeZoomView();
|
||||
});
|
||||
|
||||
// 3. Press the 'Escape' key
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && presetModalBackdrop?.style.display === 'flex') {
|
||||
closePresetModal();
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
|
||||
closeZoomView();
|
||||
}
|
||||
});
|
||||
|
||||
// --- Mobile navbar burger (Bulma) ---
|
||||
const navbarBurger = document.querySelector('.navbar-burger');
|
||||
const navbarMenu = document.getElementById('navbarBasicExample');
|
||||
|
||||
if (navbarBurger && navbarMenu) {
|
||||
navbarBurger.addEventListener('click', () => {
|
||||
navbarBurger.classList.toggle('is-active');
|
||||
navbarMenu.classList.toggle('is-active');
|
||||
const isExpanded = navbarBurger.classList.contains('is-active');
|
||||
navbarBurger.setAttribute('aria-expanded', String(isExpanded));
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user