405 lines
14 KiB
JavaScript
405 lines
14 KiB
JavaScript
let selectedPalette = [];
|
|
let animationsEnabled = true;
|
|
|
|
// --- LOCAL STORAGE LOADING ---
|
|
// Load palette from Local Storage on startup
|
|
const savedPaletteJSON = localStorage.getItem('userPalette');
|
|
if (savedPaletteJSON) {
|
|
try {
|
|
selectedPalette = JSON.parse(savedPaletteJSON);
|
|
} catch (e) {
|
|
console.error("Error parsing saved palette from Local Storage", e);
|
|
selectedPalette = []; // Reset if data is corrupt
|
|
}
|
|
}
|
|
|
|
// Main function to fetch color data and build the page
|
|
fetch('colors.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const colorFamiliesContainer = document.getElementById('color-families');
|
|
|
|
// 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.innerHTML = `<h3>${family.family}</h3>`;
|
|
|
|
const swatchContainer = document.createElement('div');
|
|
swatchContainer.classList.add('swatch-container');
|
|
|
|
family.colors.forEach(color => {
|
|
const swatchWrapper = document.createElement('div');
|
|
swatchWrapper.classList.add('swatch-wrapper');
|
|
|
|
const swatch = document.createElement('div');
|
|
swatch.classList.add('color-swatch');
|
|
swatch.dataset.color = color.hex;
|
|
swatch.style.color = color.hex;
|
|
|
|
const backgroundDiv = document.createElement('div');
|
|
backgroundDiv.classList.add('color-background');
|
|
|
|
if (color.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}`);
|
|
}
|
|
|
|
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);
|
|
|
|
const colorName = document.createElement('span');
|
|
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) {
|
|
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
|
|
} else {
|
|
selectedPalette.push(color);
|
|
}
|
|
|
|
backgroundDiv.classList.add('pop');
|
|
backgroundDiv.addEventListener('animationend', () => {
|
|
backgroundDiv.classList.remove('pop');
|
|
}, { once: true });
|
|
|
|
renderSelectedPalette();
|
|
updateSwatchHighlights();
|
|
});
|
|
|
|
swatchWrapper.appendChild(swatch);
|
|
swatchWrapper.appendChild(colorName);
|
|
swatchContainer.appendChild(swatchWrapper);
|
|
});
|
|
|
|
familyDiv.appendChild(swatchContainer);
|
|
colorFamiliesContainer.appendChild(familyDiv);
|
|
});
|
|
|
|
// Initialize the palette, checking for shared links or local versions
|
|
initializePaletteOnLoad(data);
|
|
})
|
|
.catch(error => console.error('Error loading colors:', error));
|
|
|
|
/**
|
|
* Saves the current 'selectedPalette' array to the browser's Local Storage.
|
|
* We also save the URL params that would be generated from this palette.
|
|
*/
|
|
function savePaletteToLocalStorage() {
|
|
localStorage.setItem('userPalette', JSON.stringify(selectedPalette));
|
|
|
|
// Generate the canonical URL parameter string for the CURRENT palette
|
|
const currentPaletteParams = selectedPalette.map(c => c.hex.substring(1)).join(',');
|
|
|
|
// Always save this as the source, so we can detect incoming new links
|
|
localStorage.setItem('paletteSourceUrl', currentPaletteParams);
|
|
}
|
|
|
|
/**
|
|
* Renders the selected colors as floating balloons in the top palette.
|
|
*/
|
|
function renderSelectedPalette() {
|
|
const paletteColorsContainer = document.getElementById('palette-colors');
|
|
paletteColorsContainer.innerHTML = '';
|
|
|
|
selectedPalette.forEach(color => {
|
|
const swatchWrapper = document.createElement('div');
|
|
swatchWrapper.classList.add('swatch-wrapper');
|
|
|
|
const floatGroup = document.createElement('div');
|
|
floatGroup.classList.add('balloon-float-group');
|
|
|
|
if (animationsEnabled) {
|
|
floatGroup.style.animationDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
|
|
floatGroup.style.animationDelay = `${(Math.random() * 2).toFixed(2)}s`;
|
|
} else {
|
|
floatGroup.style.animation = 'none';
|
|
}
|
|
|
|
const swatch = document.createElement('div');
|
|
swatch.classList.add('color-swatch');
|
|
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 && color.chromeType) {
|
|
backgroundDiv.classList.add('metallic', `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);
|
|
|
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
const stringSVG = document.createElementNS(svgNS, "svg");
|
|
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");
|
|
path.setAttribute("stroke", "#444");
|
|
path.setAttribute("stroke-width", "2");
|
|
path.setAttribute("fill", "none");
|
|
stringSVG.appendChild(path);
|
|
|
|
floatGroup.appendChild(swatch);
|
|
floatGroup.appendChild(stringSVG);
|
|
swatchWrapper.appendChild(floatGroup);
|
|
|
|
const colorName = document.createElement('span');
|
|
colorName.classList.add('color-name', 'highlighted-name');
|
|
colorName.textContent = color.name;
|
|
swatchWrapper.appendChild(colorName);
|
|
|
|
swatch.addEventListener('click', () => {
|
|
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
|
|
renderSelectedPalette();
|
|
updateSwatchHighlights();
|
|
});
|
|
|
|
paletteColorsContainer.appendChild(swatchWrapper);
|
|
});
|
|
|
|
savePaletteToLocalStorage();
|
|
}
|
|
|
|
/**
|
|
* Updates the visual highlight on the main color swatches to show which are selected.
|
|
*/
|
|
function updateSwatchHighlights() {
|
|
const allSwatches = document.querySelectorAll('#color-families .color-swatch');
|
|
allSwatches.forEach(swatch => {
|
|
const color = swatch.dataset.color;
|
|
const background = swatch.querySelector('.color-background');
|
|
const nameEl = swatch.parentElement.querySelector('.color-name');
|
|
const isSelected = selectedPalette.some(c => c.hex === color);
|
|
|
|
if (isSelected) {
|
|
background.classList.add('chosen');
|
|
nameEl.classList.add('highlighted-name');
|
|
} else {
|
|
background.classList.remove('chosen');
|
|
nameEl.classList.remove('highlighted-name');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Determines if a hex color is light or dark to decide on border visibility.
|
|
* @param {string} hex - The hex color code (e.g., "#FFFFFF").
|
|
* @returns {boolean} - True if the color is light, false otherwise.
|
|
*/
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* Shuffles an array in place.
|
|
* @param {Array} array - The array to shuffle.
|
|
* @returns {Array} - The shuffled array.
|
|
*/
|
|
function shuffleArray(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
/**
|
|
* Initializes the palette on page load, prioritizing a new shared URL
|
|
* over existing local storage.
|
|
* @param {Array} allColorData - The entire array of color families from colors.json.
|
|
*/
|
|
function initializePaletteOnLoad(allColorData) {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const colorsFromURL = params.get('colors');
|
|
const savedSourceUrl = localStorage.getItem('paletteSourceUrl');
|
|
|
|
// Case 1: A new shared link has been clicked.
|
|
// The URL has colors, and they are different from the source of the currently saved palette.
|
|
if (colorsFromURL && colorsFromURL !== savedSourceUrl) {
|
|
console.log("Loading palette from new share link...");
|
|
const flatColorList = allColorData.flatMap(family => family.colors);
|
|
const hexCodesFromURL = colorsFromURL.split(',');
|
|
const paletteFromURL = hexCodesFromURL.map(hex => {
|
|
return flatColorList.find(color => color.hex === `#${hex}`);
|
|
}).filter(Boolean);
|
|
|
|
if (paletteFromURL.length > 0) {
|
|
selectedPalette = paletteFromURL;
|
|
}
|
|
|
|
// "Claim" this URL by saving it, then clean the address bar.
|
|
savePaletteToLocalStorage();
|
|
history.replaceState(null, '', window.location.pathname);
|
|
}
|
|
// Case 2: The user is just reloading a page. Default to local storage.
|
|
else {
|
|
console.log("Loading palette from Local Storage.");
|
|
// No action needed; palette is already loaded from local storage at the top.
|
|
}
|
|
|
|
// Finally, render whatever palette was decided upon.
|
|
renderSelectedPalette();
|
|
updateSwatchHighlights();
|
|
}
|
|
|
|
// --- Event Listeners ---
|
|
|
|
document.getElementById('clear-palette').addEventListener('click', () => {
|
|
selectedPalette = [];
|
|
localStorage.removeItem('paletteSourceUrl'); // Also clear the source
|
|
renderSelectedPalette();
|
|
updateSwatchHighlights();
|
|
});
|
|
|
|
document.getElementById('toggle-animation').addEventListener('click', (e) => {
|
|
animationsEnabled = e.target.checked;
|
|
renderSelectedPalette();
|
|
});
|
|
|
|
document.getElementById('shuffle-palette').addEventListener('click', () => {
|
|
selectedPalette = shuffleArray(selectedPalette);
|
|
renderSelectedPalette();
|
|
});
|
|
|
|
// --- 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');
|
|
|
|
shareButton.addEventListener('click', () => {
|
|
if (selectedPalette.length === 0) {
|
|
alert("Your palette is empty! Add some colors to create a shareable link.");
|
|
return;
|
|
}
|
|
|
|
const baseURL = window.location.href.split('?')[0];
|
|
const colorParams = selectedPalette.map(color => color.hex.substring(1)).join(',');
|
|
const shareableLink = `${baseURL}?colors=${colorParams}`;
|
|
|
|
modalColorList.innerHTML = `
|
|
<p>Copy this link to share your palette:</p>
|
|
<input type="text" id="share-link-input" value="${shareableLink}" readonly>
|
|
<button id="copy-link-button">Copy Link</button>
|
|
`;
|
|
|
|
document.getElementById('copy-link-button').addEventListener('click', () => {
|
|
const linkInput = document.getElementById('share-link-input');
|
|
navigator.clipboard.writeText(linkInput.value).then(() => {
|
|
const copyButton = document.getElementById('copy-link-button');
|
|
copyButton.textContent = 'Copied! ✅';
|
|
setTimeout(() => {
|
|
copyButton.textContent = 'Copy Link';
|
|
}, 2000);
|
|
}).catch(err => {
|
|
console.error('Failed to copy link: ', err);
|
|
alert('Failed to copy link.');
|
|
});
|
|
});
|
|
|
|
modalBackdrop.style.display = 'flex';
|
|
});
|
|
|
|
closeModalButton.addEventListener('click', () => {
|
|
modalBackdrop.style.display = 'none';
|
|
});
|
|
|
|
modalBackdrop.addEventListener('click', (event) => {
|
|
if (event.target === modalBackdrop) {
|
|
modalBackdrop.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// --- Zoom Palette Functionality ---
|
|
|
|
const zoomButton = document.getElementById('zoom-palette');
|
|
const zoomOverlay = document.getElementById('zoom-overlay');
|
|
const zoomedPaletteContent = document.getElementById('zoomed-palette-content');
|
|
|
|
// --- Event Listener to OPEN the zoom view ---
|
|
zoomButton.addEventListener('click', () => {
|
|
// Don't do anything if the palette is empty
|
|
if (selectedPalette.length === 0) {
|
|
alert("Palette is empty. Add some colors to zoom in!");
|
|
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);
|
|
|
|
// Show the overlay by adding the .is-active class
|
|
zoomOverlay.classList.add('is-active');
|
|
});
|
|
|
|
// --- Function to CLOSE the zoom view ---
|
|
function closeZoomView() {
|
|
zoomOverlay.classList.remove('is-active');
|
|
}
|
|
|
|
// --- Two ways to CLOSE the view for easy access ---
|
|
|
|
// 1. Click on the dark background (the overlay itself)
|
|
zoomOverlay.addEventListener('click', (event) => {
|
|
// Only close if the click is on the overlay, not the content inside
|
|
if (event.target === zoomOverlay) {
|
|
closeZoomView();
|
|
}
|
|
});
|
|
|
|
// 2. Press the 'Escape' key
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
|
|
closeZoomView();
|
|
}
|
|
}); |