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}
+
+
+ `;
+}
+
+