<!--
-->
<!---->
Izaberi Boju
<!--
Teksture
-->
<!--
Crvena
Zelena
Plava
Žuta
Magenta
Cijan
Crna
Bela
Ljubičasta
Siva
-->
Tekstura 1
Tekstura 2
Tekstura 3
Tekstura 4
Tekstura 5
Tekstura 6
Tekstura 7
Tekstura 8
Tekstura 9
Tekstura 10
document.addEventListener('DOMContentLoaded', () => {
const svg = document.getElementById('custom-kitchen-svg-123');
const optionDropdown = document.getElementById('custom-option-dropdown-123');
const colorDropdown = document.getElementById('custom-color-dropdown-123');
const textureDropdown = document.getElementById('custom-texture-dropdown-123');
const container = document.getElementById('custom-kitchen-container-123');
let currentElement = null;
const colors = [
"#F0F8FF", "#FAEBD7", "#00FFFF", "#7FFFD4", "#F0FFFF", "#F5F5DC", "#FFE4C4", "#000000", "#FFEBCD", "#0000FF",
"#8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#7FFF00", "#D2691E", "#FF7F50", "#6495ED", "#FFF8DC", "#DC143C",
"#00FFFF", "#00008B", "#008B8B", "#B8860B", "#A9A9A9", "#006400", "#BDB76B", "#8B008B", "#556B2F", "#FF8C00"
];
colors.forEach(color => {
const colorOption = document.createElement('div');
colorOption.style.display = 'flex';
colorOption.style.alignItems = 'center';
colorOption.style.marginBottom = '5px';
colorOption.innerHTML = `
${color}`;
colorDropdown.appendChild(colorOption);
});
function lightenColor(color, percent) {
const num = parseInt(color.slice(1), 16);
const amt = Math.round(2.55 * percent);
const R = (num >> 16) + amt;
const G = (num >> 8 & 0x00FF) + amt;
const B = (num & 0x0000FF) + amt;
return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B {
if (e.target.tagName !== 'svg') {
currentElement = e.target;
const containerRect = container.getBoundingClientRect();
const elementRect = currentElement.getBoundingClientRect();
optionDropdown.style.left = `${elementRect.right - containerRect.left + window.scrollX}px`;
optionDropdown.style.top = `${elementRect.top - containerRect.top + window.scrollY}px`;
optionDropdown.style.display = 'block';
} else {
optionDropdown.style.display = 'none';
colorDropdown.style.display = 'none';
textureDropdown.style.display = 'none';
currentElement = null;
}
});
optionDropdown.addEventListener('click', (e) => {
if (e.target.dataset.option) {
const option = e.target.dataset.option;
optionDropdown.style.display = 'none';
if (option === 'colors') {
colorDropdown.style.left = optionDropdown.style.left;
colorDropdown.style.top = optionDropdown.style.top;
colorDropdown.style.display = 'block';
} else if (option === 'textures') {
textureDropdown.style.left = optionDropdown.style.left;
textureDropdown.style.top = optionDropdown.style.top;
textureDropdown.style.display = 'block';
}
}
});
function darkenColor(color, percent) {
const f = parseInt(color.slice(1), 16);
const t = 0;
const R = f >> 16;
const G = f >> 8 & 0x00FF;
const B = f & 0x0000FF;
return "#" + (0x1000000 + (Math.round((t - R) * (1 - percent)) + R) * 0x10000 + (Math.round((t - G) * (1 - percent)) + G) * 0x100 + (Math.round((t - B) * (1 - percent)) + B)).toString(16).slice(1);
}
colorDropdown.addEventListener('click', (e) => {
if (e.target.dataset.color) {
const color = e.target.dataset.color;
if (currentElement) {
currentElement.style.fill = color;
colorDropdown.style.display = 'none';
// Check if the current element is cabinet3 and update cabinet4 with a lighter color
if (currentElement.id === 'custom-cabinet2-123') {
const cabinet2obod = document.getElementById('custom-cabinet2-obod');
/*const cabinet3 = document.getElementById('custom-cabinet3-123');
const cabinet3obod = document.getElementById('custom-cabinet3-obod');
const cabinet4 = document.getElementById('custom-cabinet4-123');
const cabinet4obod = document.getElementById('custom-cabinet4-obod');
const cabinet5 = document.getElementById('custom-cabinet5-123');
const cabinet5obod = document.getElementById('custom-cabinet5-obod');*/
if (cabinet2obod) {
cabinet2obod.style.fill = lightenColor(color, 30); // Lighten by 70%
/*cabinet3.style.fill = lightenColor(color, 1);
cabinet3obod.style.fill = lightenColor(color, 30);
cabinet4.style.fill = lightenColor(color, 1);
cabinet4obod.style.fill = lightenColor(color, 30);
cabinet5.style.fill = lightenColor(color, 1);
cabinet4obod.style.fill = lightenColor(color, 30);*/
}
}
if (currentElement.id === 'custom-cabinet3-123') {
const cabinet3obod = document.getElementById('custom-cabinet3-obod');
if (cabinet3obod) {
cabinet3obod.style.fill = lightenColor(color, 42); // Lighten by 70%
}
}
if (currentElement.id === 'custom-cabinet4-123') {
const cabinet4obod = document.getElementById('custom-cabinet4-obod');
if (cabinet4obod) {
cabinet4obod.style.fill = lightenColor(color, 42); // Lighten by 70%
}
}
if (currentElement.id === 'custom-cabinet5-123') {
const cabinet5obod = document.getElementById('custom-cabinet5-obod');
if (cabinet5obod) {
cabinet5obod.style.fill = lightenColor(color, 42); // Lighten by 70%
}
}
if (currentElement.id === 'gornja-ploca') {
const gornjaPlocaObod1 = document.getElementById('gornja-ploca-obod-1');
if (gornjaPlocaObod1) {
gornjaPlocaObod1.style.fill = lightenColor(color, 42); // Lighten by 70%
}
}
}
if (currentElement.id === 'custom-cabinet-frizider' /*|| currentElement.id === 'custom-cabinet6-123'*/) {
const gradientId = `gradient-${color.replace('#', '')}`;
const svg = document.getElementById('custom-kitchen-svg-123');
let svgDefs = document.querySelector('#custom-kitchen-svg-123 defs');
if (!svgDefs) {
svgDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
svg.appendChild(svgDefs);
}
// Remove existing gradients for this element
const oldGradients = svgDefs.querySelectorAll(`linearGradient[id^="gradient-"]`);
oldGradients.forEach(grad => svgDefs.removeChild(grad));
const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
gradient.id = gradientId;
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '0%');
gradient.setAttribute('x2', '100%');
gradient.setAttribute('y2', '0%');
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', lightenColor(color, 70)); // Light color
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop2.setAttribute('offset', '70%');
stop2.setAttribute('stop-color', color); // Original color
gradient.appendChild(stop1);
gradient.appendChild(stop2);
svgDefs.appendChild(gradient);
currentElement.style.fill = `url(#${gradientId})`;
}
else if (currentElement.id === 'bocna-ploca') {
currentElement.style.fill = darkenColor(color, 0.2); // Zatamni za 70%
}
else {
currentElement.style.fill = color;
}
colorDropdown.style.display = 'none';
// Check if the current element is custom-cabinet3-123 and update custom-cabinet4-123 with a lighter color
/*if (currentElement.id === 'custom-cabinet3-123') {
const cabinet4 = document.getElementById('custom-cabinet4-123');
if (cabinet4) {
cabinet4.style.fill = lightenColor(color, 70); // Lighten by 70%
}
}*/
}
});
textureDropdown.addEventListener('click', (e) => {
if (e.target.dataset.texture) {
const texture = e.target.dataset.texture;
if (currentElement) {
currentElement.style.fill = texture;
textureDropdown.style.display = 'none';
}
}
});
document.addEventListener('click', (e) => {
if (!svg.contains(e.target) && !optionDropdown.contains(e.target) && !colorDropdown.contains(e.target) && !textureDropdown.contains(e.target)) {
optionDropdown.style.display = 'none';
colorDropdown.style.display = 'none';
textureDropdown.style.display = 'none';
}
});
});