From 2ac28c552366fd8b57578f9490e189ba494bca5a Mon Sep 17 00:00:00 2001 From: Anthony Lieuallen Date: Sun, 20 Nov 2022 19:51:45 -0500 Subject: [PATCH] Preview the color on hover, lock it by clicking. --- colors.html | 61 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 52 insertions(+), 9 deletions(-) diff --git a/colors.html b/colors.html index 2937b4a..b1454cb 100644 --- a/colors.html +++ b/colors.html @@ -3,8 +3,13 @@ Named Colors Wheel @@ -227,7 +232,6 @@ voronoi.cells.forEach(cell => { let [r, g, b] = colors[colorName]; let c = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); -// c.setAttribute('style', `fill: ); c.setAttribute('data-color', colorName); c.setAttribute('mask', 'url(#circle-mask)'); @@ -244,21 +248,60 @@ voronoi.cells.forEach(cell => { svgStyle.insertRule(`[data-color=${colorName}] { fill: ${rgb}; stroke: ${rgb}; }`); }); +function activateColor(el) { + renderPreview(el.getAttribute('data-color')); + // Move the SVG node to the end, so it(s stroke) will draw above all others. + el.parentNode.appendChild(el); + // Force its stroke to be black. (Doing this with CSS doesn't work; the + // hover state is broken by mutating the DOM.) + el.style.stroke = 'black'; +} + svg.addEventListener('mouseover', e => { let el = e.target; if (el.tagName != 'polygon') return; if (!el.nextElementSibling) return; - let parent = el.parentElement; - // Move the SVG node to the end, so it(s stroke) will draw above all others. - parent.appendChild(el); - // Force its stroke to be black. (Doing this with CSS doesn't work; the hover - // state is broken by mutating the DOM.) - el.style.stroke = 'black'; + + if (!previewLocked) { + activateColor(el); + } }); svg.addEventListener('mouseout', e => { let el = e.target; if (el.tagName != 'polygon') return; - // Reset stroke from mouseover. - el.style.stroke = ''; + if (!previewLocked) { + renderPreview(null); + // Reset forced stroke from mouseover. + el.removeAttribute('style'); + } }); +svg.addEventListener('click', e => { + let el = e.target; + if (el.tagName != 'polygon') return; + + // Remove possible forced stroke from previously-locked color. + document.querySelectorAll('polygon[style]').forEach(el => { + el.removeAttribute('style'); + }); + + previewLocked = true; + activateColor(el); +}); + +let previewLocked = false; +function renderPreview(color) { + if (!color) { + document.getElementById('preview').innerHTML = ''; + return; + } + + document.getElementById('preview').innerHTML = ` +

+ ${color} +   +

+ `; +} + +