← back to Losangelesfabrics Tmp
script.js
769 lines
// Safari compatibility polyfill for older versions
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (search instanceof RegExp) {
throw TypeError('first argument must not be a RegExp');
}
if (start === undefined) { start = 0; }
return this.indexOf(search, start) !== -1;
};
}
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
if (arguments.length > 1) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
// Los Angeles Fabrics Colors Data - Complete Collection from Woeller
// 35 new Los Angeles Fabrics colors launched 2026-04-20 — rendered in NEW ARRIVALS section
var newLosAngelesFabricsColors = [
{ name: "Amber", code: "T3Q8W" },
{ name: "Blank Slate", code: "T3L0W" },
{ name: "Bliss", code: "T3Q7W" },
{ name: "Blush Rose", code: "T3RFW" },
{ name: "Cement", code: "T3LAW" },
{ name: "Colonial Blue", code: "T3C9W" },
{ name: "Dusty Ranch", code: "T3FAW" },
{ name: "Dusty Teal", code: "T3NGW" },
{ name: "Fire", code: "T3QAW" },
{ name: "Flagstone", code: "T3LKW" },
{ name: "Henna", code: "T3G3W" },
{ name: "Kiva", code: "T3ECW" },
{ name: "Lipstick", code: "T3M4W" },
{ name: "Noir", code: "T3A2W" },
{ name: "Opal", code: "T3PQW" },
{ name: "Pastel Blue", code: "T3N0W" },
{ name: "Pastel Pink", code: "T3R6W" },
{ name: "Persimmon", code: "T3M8W" },
{ name: "Pink Lace", code: "T3RCW" },
{ name: "Port Blue", code: "T3NJW" },
{ name: "Raisin", code: "T3PRW" },
{ name: "Royal Blue", code: "T3CCW" },
{ name: "Sedona", code: "T3Q9W" },
{ name: "Shale", code: "T3KDW" },
{ name: "Snow", code: "T3B3W" },
{ name: "Spruce", code: "T3PYW" },
{ name: "Terracotta", code: "T3FCW" },
{ name: "Thistle", code: "T3PMW" },
{ name: "Tusk", code: "T3DJW" },
{ name: "Umber", code: "T3G4W" },
{ name: "Verdigris", code: "T3NHW" },
{ name: "Vermilion", code: "T3MBW" },
{ name: "Wheat", code: "T3FDW" },
{ name: "Winter White", code: "T3B2W" },
{ name: "Woodland", code: "T3H6W" }
];
var novaSuedeColors = [
{ name: "Acorn", code: "T3H5W" },
{ name: "Adobe", code: "T3K6W" },
{ name: "African Violet", code: "T3SAW" },
{ name: "Apricot", code: "T3Q4W" },
{ name: "Arrow Wood", code: "T3F8W" },
{ name: "Aubergine", code: "T3SCW" },
{ name: "Baltic", code: "T3L6W" },
{ name: "Beige", code: "T3E8W" },
{ name: "Biscuit", code: "T3DHW" },
{ name: "Bluestone", code: "T3N7W" },
{ name: "Blush Pink", code: "T3C7W" },
{ name: "Bone", code: "T3DSW" },
{ name: "Brown", code: "T3F6W" },
{ name: "Buff", code: "T3D1W" },
{ name: "Buttercup", code: "T3DEW" },
{ name: "Cane", code: "T3D3W" },
{ name: "Carbon", code: "T3C6W" },
{ name: "Cashew", code: "T3D2W" },
{ name: "Cashmere", code: "T3E6W" },
{ name: "Celadon", code: "T3P1W" },
{ name: "Celery", code: "T3PFW" },
{ name: "Champagne", code: "T3D4W" },
{ name: "China Blue", code: "T3NBW" },
{ name: "Chrome Grey", code: "T3PJW" },
{ name: "Cinder", code: "T3LCW" },
{ name: "Cloud", code: "T3L4W" },
{ name: "Cocoa", code: "T315W" },
{ name: "Coral", code: "T3Q3W" },
{ name: "Cottage Grey", code: "T3LGW" },
{ name: "Cream", code: "T3D9W" },
{ name: "Cypress", code: "T3PHW" },
{ name: "Dark Sand", code: "T3EAW" },
{ name: "Dew", code: "T3F3W" },
{ name: "Dove", code: "T3E2W" },
{ name: "Dune", code: "T3F4W" },
{ name: "Dusty Rose", code: "T3R2W" },
{ name: "Ecru", code: "T3K4W" },
{ name: "Fawn", code: "T3E4W" },
{ name: "French Blue", code: "T3NCW" },
{ name: "Gainsborough", code: "T3LLW" },
{ name: "Garnet", code: "T3J6W" },
{ name: "Gelato", code: "T3D7W" },
{ name: "Goldstone", code: "T3F1W" },
{ name: "Granite", code: "T3LOW" },
{ name: "Grape", code: "TES8W" },
{ name: "Green Marble", code: "T3P4W" },
{ name: "Greystone", code: "T3LNW" },
{ name: "Harvest", code: "T3E9W" },
{ name: "Honey", code: "T3DDW" },
{ name: "Hyacinth", code: "T3S2W" },
{ name: "Iceberg", code: "T3LHW" },
{ name: "Indigo", code: "T3C3W" },
{ name: "Ivory", code: "T3E3W" },
{ name: "Jade", code: "T3P6W" },
{ name: "Lavender", code: "T3S3W" },
{ name: "Light Amethyst", code: "T3S6W" },
{ name: "Light Grey", code: "T3L7W" },
{ name: "Linen", code: "T3D6W" },
{ name: "Madison Grey", code: "T3L1W" },
{ name: "Maize", code: "T3O3W" },
{ name: "Maroon", code: "T3JAW" },
{ name: "Meadow", code: "T3PIW" },
{ name: "Melon", code: "T3Q6W" },
{ name: "Milk", code: "T3DQW" },
{ name: "Mint Julip", code: "T3P5W" },
{ name: "Misty Dew", code: "T3PLW" },
{ name: "Moss", code: "T3L3W" },
{ name: "Mushroom", code: "T3K1W" },
{ name: "Newport", code: "T3C2W" },
{ name: "Nutmeg", code: "T3F9W" },
{ name: "Ocean", code: "T3POW" },
{ name: "Olive", code: "T3PEW" },
{ name: "Oyster", code: "T3EBW" },
{ name: "Pale Green", code: "T3P8W" },
{ name: "Passion Blue", code: "T3NAW" },
{ name: "Peach", code: "T3Q2W" },
{ name: "Pebble", code: "T3K2W" },
{ name: "Peppermint", code: "T3R4W" },
{ name: "Peridot", code: "T3P7W" },
{ name: "Periwinkle", code: "T3N6W" },
{ name: "Plum Pleasure", code: "T3S5W" },
{ name: "Porcelain", code: "T3DAW" },
{ name: "Powder Grey", code: "T3E5W" },
{ name: "Prairie", code: "T3KCW" },
{ name: "Putty", code: "T3K3W" },
{ name: "Raffia", code: "T3D5W" },
{ name: "Royal Purple", code: "T3S4W" },
{ name: "Ruby", code: "T3R6W" },
{ name: "Sable", code: "T3F7W" },
{ name: "Safari", code: "T3E7W" },
{ name: "Saffron", code: "T3O2W" },
{ name: "Sage", code: "T3P3W" },
{ name: "Salt", code: "T3DBW" },
{ name: "Sand", code: "T3D8W" },
{ name: "Sandalwood", code: "T3F5W" },
{ name: "Scarvar Wine", code: "T3R5W" },
{ name: "Sea Blue", code: "T3N9W" },
{ name: "Sea Grass", code: "T3P2W" },
{ name: "Sea Breeze", code: "T3N8W" },
{ name: "Seafoam", code: "T3N3W" },
{ name: "Sienna", code: "T3Q7W" },
{ name: "Sky Blue", code: "T3N5W" },
{ name: "Smoke", code: "T3L5W" },
{ name: "Soft Clay", code: "T3K7W" },
{ name: "Solar Yellow", code: "T3O1W" },
{ name: "Steel", code: "T3LBW" },
{ name: "Stone Grey", code: "T3L2W" },
{ name: "Stone Taupe", code: "T3K8W" },
{ name: "Straw", code: "T3DCW" },
{ name: "Strong White", code: "T3DAW" },
{ name: "Sugar Plum", code: "T3S7W" },
{ name: "Sweet Lilac", code: "T3S1W" },
{ name: "Tan", code: "T3E1W" },
{ name: "Tarragon", code: "T3PGW" },
{ name: "Taupe", code: "T3K9W" },
{ name: "Thyme", code: "T3PDW" },
{ name: "Trench", code: "T3F2W" },
{ name: "Vanilla", code: "T3D5W" }
];
// Populate dropdown as soon as script loads
setTimeout(function() {
populateColorDropdown();
}, 0);
// Mobile menu toggle
var mobileToggle = document.querySelector('.mobile-toggle');
var navMenu = document.querySelector('.nav-menu');
if (mobileToggle) {
mobileToggle.addEventListener('click', function() {
navMenu.classList.toggle('active');
});
}
// Close mobile menu when clicking a link
var navLinks = document.querySelectorAll('.nav-menu a');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function() {
navMenu.classList.remove('active');
});
}
// Render helper: populate one grid from a color list (alpha sorted).
function renderColorGrid(gridId, colorList) {
var grid = document.getElementById(gridId);
if (!grid) return 0;
grid.innerHTML = '';
var sorted = colorList.slice().sort(function(a, b) { return a.name.localeCompare(b.name); });
var count = 0;
for (var j = 0; j < sorted.length; j++) {
var color = sorted[j];
var fileName = color.name.toLowerCase().replace(/\s+/g, '-');
var imageUrl = '/images/colors/losangelesfabrics-' + fileName + '.jpg';
var colorItem = document.createElement('div');
colorItem.className = 'color-item';
// NEW badge — applies whenever we render the new-arrivals grid
if (gridId === 'newArrivalsGrid') {
var badge = document.createElement('div');
badge.className = 'new-badge';
badge.textContent = 'NEW';
colorItem.appendChild(badge);
}
var colorSwatch = document.createElement('div');
colorSwatch.className = 'color-swatch';
colorSwatch.style.cursor = 'pointer';
var imgElement = document.createElement('img');
imgElement.src = imageUrl;
imgElement.alt = 'Los Angeles Fabrics ' + color.name;
imgElement.style.width = '100%';
imgElement.style.height = '100%';
imgElement.style.objectFit = 'cover';
// Click on swatch image → drape the page in this color
(function(n, sw) {
colorSwatch.onclick = function(e) {
e.stopPropagation();
if (typeof applyDraperyColor === 'function') applyDraperyColor(n, sw);
};
})(color.name, imgElement);
colorSwatch.appendChild(imgElement);
var colorInfo = document.createElement('div');
colorInfo.className = 'color-info';
colorInfo.innerHTML = '<div class="color-name">' + color.name + '</div><div class="color-code">' + color.code + '</div>';
// Action buttons row: Drapery (recolor page bg) + Sample (open modal)
var actions = document.createElement('div');
actions.className = 'chip-actions';
var drapeBtn = document.createElement('button');
drapeBtn.className = 'drapery-btn';
drapeBtn.type = 'button';
drapeBtn.textContent = '🪟 Drapery';
(function(n, sw) {
drapeBtn.onclick = function(e) {
e.stopPropagation();
if (typeof applyDraperyColor === 'function') applyDraperyColor(n, sw);
};
})(color.name, imgElement);
actions.appendChild(drapeBtn);
var sampleBtn = document.createElement('button');
sampleBtn.className = 'sample-btn-chip';
sampleBtn.type = 'button';
sampleBtn.textContent = '📦 Sample';
(function(n, c, u) {
sampleBtn.onclick = function(e) {
e.stopPropagation();
if (typeof selectColor === 'function') selectColor(n, c, u);
else if (typeof openModal === 'function') {
openModal();
setTimeout(function() {
var sel = document.getElementById('selectedColor');
if (sel) { sel.value = 'Los Angeles Fabrics-' + n; if (typeof updatePreview === 'function') updatePreview(); }
}, 100);
}
};
})(color.name, color.code, imageUrl);
actions.appendChild(sampleBtn);
colorInfo.appendChild(actions);
colorItem.appendChild(colorSwatch);
colorItem.appendChild(colorInfo);
grid.appendChild(colorItem);
count++;
}
return count;
}
// Populate colors grid - New Arrivals section + Full Color Collection section
function populateColors() {
var newCount = renderColorGrid('newArrivalsGrid', newLosAngelesFabricsColors);
var oldCount = renderColorGrid('colorsGrid', novaSuedeColors);
console.log('Loaded ' + newCount + ' new arrivals + ' + oldCount + ' older colors');
if (typeof updateColorCount === 'function') updateColorCount(newCount + oldCount);
return;
// --- dead code kept for reference; original single-grid loop follows ---
var colorsGrid = document.getElementById('colorsGrid');
if (!colorsGrid) {
console.error('Colors grid element not found');
return;
}
console.log('Loading all 118 Los Angeles Fabrics colors...');
var displayedCount = 0;
for (var j = 0; j < novaSuedeColors.length; j++) {
var color = novaSuedeColors[j];
// All images are now local with consistent naming
var fileName = color.name.toLowerCase().replace(/\s+/g, '-');
var imageUrl = '/images/colors/losangelesfabrics-' + fileName + '.jpg';
// Create color item directly (no need to test, all images exist)
var colorItem = document.createElement('div');
colorItem.className = 'color-item';
colorItem.onclick = (function(name, code, url) {
return function() { selectColor(name, code, url); };
})(color.name, color.code, imageUrl);
var colorSwatch = document.createElement('div');
colorSwatch.className = 'color-swatch';
var imgElement = document.createElement('img');
imgElement.src = imageUrl;
imgElement.alt = 'Los Angeles Fabrics ' + color.name;
imgElement.style.width = '100%';
imgElement.style.height = '100%';
imgElement.style.objectFit = 'cover';
colorSwatch.appendChild(imgElement);
var colorInfo = document.createElement('div');
colorInfo.className = 'color-info';
colorInfo.innerHTML = '<div class="color-name">' + color.name + '</div><div class="color-code">' + color.code + '</div>';
colorItem.appendChild(colorSwatch);
colorItem.appendChild(colorInfo);
colorsGrid.appendChild(colorItem);
displayedCount++;
}
// Update final count
updateColorCount(displayedCount);
console.log('Loaded all ' + displayedCount + ' colors successfully');
}
// Try loading image from multiple URLs
function tryLoadImage(urls, index, color, callback) {
if (index >= urls.length) {
// No more URLs to try
callback(null);
return;
}
var testImg = new Image();
testImg.onload = function() {
// Success! Use this URL
callback(urls[index]);
};
testImg.onerror = function() {
// Try next URL
tryLoadImage(urls, index + 1, color, callback);
};
// Remove crossorigin to avoid CORS issues - we just need to test if image loads
// External images will load fine without crossorigin attribute for display purposes
testImg.src = urls[index];
}
// Update the displayed color count
function updateColorCount(count) {
var subtitle = document.querySelector('.section-subtitle');
if (subtitle) {
subtitle.textContent = 'Choose from our collection of ' + count + ' premium colors';
}
}
// Get approximate color hex based on color name (fallback)
function getColorHex(colorName) {
var colorMap = {
'Acorn': '87714f',
'Adobe': 'bd6439',
'African Violet': '884f88',
'Apricot': 'ffb87c',
'Arctic': 'e6f3ff',
'Ash': 'b4b4b4',
'Atlantic': '006994',
'Basalt': '5c5c5c',
'Beach Glass': '96ded1',
'Black': '000000',
'Black Pearl': '1e1e1e',
'Blush': 'ffb3ba',
'Bone': 'f0e6d2',
'Brandy': '87413f',
'Bronze': 'cd7f32',
'Burgundy': '800020',
'Burnt Orange': 'cc5500',
'Buttercup': 'f3e37c',
'Butter Rum': 'c48c47',
'Caramel': 'af6f09',
'Carbon': '333333',
'Cardinal': 'c41e3a',
'Celery': 'b5e3b5',
'Cement': '999999',
'Chai': 'd2b48c',
'Chalk': 'ffffff',
'Champagne': 'f7e7ce',
'Charcoal': '36454f',
'Chestnut': '954535',
'Chocolate': '7b3f00',
'Clay': 'cc8855',
'Cognac': '9a463d',
'Concord': '6f4e7c',
'Copper': 'b87333',
'Coral': 'ff7f50',
'Cordovan': '814141',
'Cornflower': '6495ed',
'Cranberry': '950714',
'Cream': 'fffdd0',
'Denim': '1560bd',
'Desert': 'c19a6b',
'Dove': 'd0d0d0',
'Ebony': '3c3c3c',
'Ecru': 'c2b280',
'Eggplant': '614051',
'Espresso': '4e312d',
'Fawn': 'e5aa70',
'Forest': '228b22',
'Garnet': '733635',
'Gold': 'ffd700',
'Graphite': '404040',
'Harvest': 'da8a67',
'Hemp': '907874',
'Honey': 'ec9706',
'Hunter': '355e3b',
'Ice': 'f0f8ff',
'Indigo': '4b0082',
'Ivory': 'fffff0',
'Jade': '00a86b',
'Jute': 'c8b88b',
'Kelly': '4cbb17',
'Latte': 'c8a882',
'Madison Grey': '808080',
'Mahogany': 'c04000',
'Marine': '00477d',
'Mauve': 'e0b0ff',
'Mocha': '967969',
'Mushroom': 'beaa9e',
'Natural': 'f2e8d7',
'Navy': '000080',
'Nutmeg': '8b6f47',
'Oatmeal': 'd8cfc4',
'Ochre': 'cc7722',
'Olive': '808000',
'Oyster': 'e8ddc7',
'Paprika': 'b22222',
'Pecan': '9a6e2e',
'Pewter': '8a8a8a',
'Pistachio': '93c572',
'Port': '3b0910',
'Putty': 'c8c2ae',
'Royal': '4169e1',
'Sable': '75533d',
'Saddle': '8b4513',
'Sage': '87a96b',
'Salmon': 'fa8072',
'Sand': 'c2b280',
'Sandstone': '786d5f',
'Scarlet': 'ff2400',
'Sea Foam': '93e0d1',
'Sienna': '882d17',
'Silver': 'c0c0c0',
'Slate': '708090',
'Smoke': 'bebebe',
'Snow': 'fffafa',
'Spice': '8b2500',
'Sterling': 'd4d4d4',
'Stone': '878e83',
'Storm': '4f666a',
'Straw': 'e4d96f',
'Suede': 'a5815c',
'Sunset': 'ffc87c',
'Tan': 'd2b48c',
'Taupe': '483c32',
'Teal': '008080',
'Terracotta': 'cc4125',
'Thyme': '636f48',
'Trench': '544333',
'Vanilla': 'f3e5ab'
};
// Check if we have a direct match
if (colorMap[colorName]) {
return colorMap[colorName];
}
// Check partial matches
for (var key in colorMap) {
if (colorName.toLowerCase().indexOf(key.toLowerCase()) !== -1) {
return colorMap[key];
}
}
// Default neutral color
return '8b7355';
}
// Filter colors
function filterColors() {
var searchValue = document.getElementById('colorSearch').value.toLowerCase();
var colorItems = document.querySelectorAll('.color-item');
for (var i = 0; i < colorItems.length; i++) {
var item = colorItems[i];
var colorName = item.querySelector('.color-name').textContent.toLowerCase();
var colorCode = item.querySelector('.color-code').textContent.toLowerCase();
if (colorName.indexOf(searchValue) !== -1 || colorCode.indexOf(searchValue) !== -1) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
}
// Select color for sample request
function selectColor(name, code, imageUrl) {
var selectedColorDropdown = document.getElementById('selectedColor');
var colorPreview = document.getElementById('colorPreview');
var colorPreviewImage = document.getElementById('colorPreviewImage');
var colorPreviewName = document.getElementById('colorPreviewName');
// Update dropdown selection
selectedColorDropdown.value = name + ' (' + code + ')';
// Always show color preview with image
colorPreviewImage.src = imageUrl;
colorPreviewImage.alt = 'Los Angeles Fabrics ' + name;
colorPreviewName.textContent = name;
colorPreview.style.display = 'flex';
openContactModal();
}
// Modal functions
function openContactModal() {
// Ensure dropdown is populated
var selectedColorDropdown = document.getElementById('selectedColor');
if (selectedColorDropdown && selectedColorDropdown.options.length <= 1) {
populateColorDropdown();
}
// If no color pre-selected, show a default image
if (!selectedColorDropdown.value) {
var colorPreviewImage = document.getElementById('colorPreviewImage');
var colorPreviewName = document.getElementById('colorPreviewName');
// Show first color as default preview
var firstColor = novaSuedeColors[0];
var fileName = firstColor.name.toLowerCase().replace(/\s+/g, '-');
colorPreviewImage.src = '/images/colors/losangelesfabrics-' + fileName + '.jpg';
colorPreviewImage.alt = 'Los Angeles Fabrics color selection';
colorPreviewName.textContent = 'Select a color from the dropdown';
}
document.getElementById('contactModal').style.display = 'block';
}
function closeContactModal() {
document.getElementById('contactModal').style.display = 'none';
}
// Close modal when clicking outside
window.onclick = function(event) {
var modal = document.getElementById('contactModal');
if (event.target === modal) {
modal.style.display = 'none';
}
}
// Handle form submission — sends to our server which forwards via George Gmail agent
function handleSubmit(event) {
event.preventDefault();
var form = event.target;
var submitBtn = form.querySelector('.submit-btn');
var originalText = submitBtn.textContent;
// Get form values using name attributes
var formData = {
name: form.elements['name'] ? form.elements['name'].value : '',
email: form.elements['email'] ? form.elements['email'].value : '',
company: form.elements['company'] ? form.elements['company'].value : '',
address: form.elements['address'] ? form.elements['address'].value : '',
city: form.elements['city'] ? form.elements['city'].value : '',
state: form.elements['state'] ? form.elements['state'].value : '',
zip: form.elements['zip'] ? form.elements['zip'].value : '',
color: document.getElementById('selectedColor').value || '',
message: form.elements['message'] ? form.elements['message'].value : ''
};
// Show loading state
submitBtn.textContent = 'Sending...';
submitBtn.disabled = true;
fetch('/api/send-sample-request', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
})
.then(function(response) { return response.json(); })
.then(function(result) {
if (result.success) {
submitBtn.textContent = 'Sent!';
setTimeout(function() {
form.reset();
closeContactModal();
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}, 1500);
} else {
submitBtn.textContent = originalText;
submitBtn.disabled = false;
alert('There was an error: ' + (result.error || 'Please try again.'));
}
})
.catch(function(error) {
console.error('Error submitting form:', error);
submitBtn.textContent = originalText;
submitBtn.disabled = false;
alert('There was an error submitting your request. Please try again or contact us directly at info@DesignerWallcoverings.com');
});
}
// Smooth scrolling for navigation links
var anchors = document.querySelectorAll('a[href^="#"]');
for (var i = 0; i < anchors.length; i++) {
anchors[i].addEventListener('click', function (e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
if (target) {
// Fallback for older browsers
if ('scrollBehavior' in document.documentElement.style) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
} else {
target.scrollIntoView();
}
}
});
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
populateColors();
populateColorDropdown();
});
// Also populate when window fully loads (backup)
window.addEventListener('load', function() {
var selectElement = document.getElementById('selectedColor');
if (selectElement && selectElement.options.length <= 1) {
populateColorDropdown();
}
});
// Populate the color dropdown in the contact form
function populateColorDropdown() {
var selectElement = document.getElementById('selectedColor');
if (!selectElement) {
console.log('Dropdown not found, will retry later');
// Try again in 100ms
setTimeout(populateColorDropdown, 100);
return;
}
// Check if already populated
if (selectElement.options.length > 100) {
console.log('Dropdown already populated');
return;
}
// Clear any existing options except the first
while (selectElement.options.length > 1) {
selectElement.remove(1);
}
// Add all colors as options
for (var k = 0; k < novaSuedeColors.length; k++) {
var color = novaSuedeColors[k];
var option = document.createElement('option');
option.value = color.name + ' (' + color.code + ')';
option.textContent = color.name + ' - ' + color.code;
selectElement.appendChild(option);
}
console.log('Successfully populated dropdown with ' + novaSuedeColors.length + ' colors');
// Add event listener to update preview when selection changes (only once)
if (!selectElement.hasAttribute('data-listener-added')) {
selectElement.setAttribute('data-listener-added', 'true');
selectElement.addEventListener('change', function() {
var selectedValue = this.value;
var colorPreviewImage = document.getElementById('colorPreviewImage');
var colorPreviewName = document.getElementById('colorPreviewName');
if (selectedValue) {
// Extract color name from the value
var colorName = selectedValue.split(' (')[0];
var color = null;
for (var m = 0; m < novaSuedeColors.length; m++) {
if (novaSuedeColors[m].name === colorName) {
color = novaSuedeColors[m];
break;
}
}
if (color) {
var fileName = color.name.toLowerCase().replace(/\s+/g, '-');
var imageUrl = '/images/colors/losangelesfabrics-' + fileName + '.jpg';
// Update preview
colorPreviewImage.src = imageUrl;
colorPreviewImage.alt = 'Los Angeles Fabrics ' + color.name;
colorPreviewName.textContent = color.name;
}
} else {
// Show prompt to select a color
var firstColor = novaSuedeColors[0];
var fileName = firstColor.name.toLowerCase().replace(/\s+/g, '-');
colorPreviewImage.src = '/images/colors/losangelesfabrics-' + fileName + '.jpg';
colorPreviewImage.alt = 'Los Angeles Fabrics color selection';
colorPreviewName.textContent = 'Select a color from the dropdown';
}
});
}
}
// Add scroll effect to navigation
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.boxShadow = '0 4px 20px rgba(0,0,0,0.1)';
} else {
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
});