renderWheel()

colors.html

@@ -206,6 +206,8 @@ const cy = radius;
 const svg = document.querySelector('svg');
 const svgStyle = svg.querySelector('style').sheet;
 
+// TODO: Select-able color categories, re-render wheel.
+function renderWheel() {
   let colorsBySite = {};
   let sites = [];
   Object.entries(colors).forEach(([name, color], _) => {
@@ -247,6 +249,8 @@ voronoi.cells.forEach(cell => {
     let rgb = `rgb(${r}, ${g}, ${b})`;
     svgStyle.insertRule(`[data-color=${colorName}] { fill: ${rgb}; stroke: ${rgb}; }`);
   });
+}
+renderWheel();
 
 function activateColor(el) {
   renderPreview(el.getAttribute('data-color'));
@@ -257,6 +261,30 @@ function activateColor(el) {
   el.style.stroke = 'black';
 }
 
+// https://stackoverflow.com/a/5624139/91238
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+let previewLocked = false;
+function renderPreview(color) {
+  if (!color) {
+    document.getElementById('preview').innerHTML = '';
+    return;
+  }
+  let [r, g, b] = colors[color];
+
+  document.getElementById('preview').innerHTML = `
+      ${color}
+      <span id='swatch' style='background-color: ${color};'>&nbsp;</span>
+      ${rgbToHex(r, g, b).toUpperCase()}
+      `;
+}
+
 svg.addEventListener('mouseover', e => {
   let el = e.target;
   if (el.tagName != 'polygon') return;
@@ -275,44 +303,26 @@ svg.addEventListener('mouseout', e => {
     el.removeAttribute('style');
   }
 });
-svg.addEventListener('click', e => {
+document.body.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');
   });
 
+  if (el.tagName != 'polygon') {
+    previewLocked = false;
+    renderPreview(null);
+    return;
+  }
+
   previewLocked = true;
   activateColor(el);
 });
-
-// https://stackoverflow.com/a/5624139/91238
-function componentToHex(c) {
-  var hex = c.toString(16);
-  return hex.length == 1 ? "0" + hex : hex;
-}
-function rgbToHex(r, g, b) {
-  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-
-let previewLocked = false;
-function renderPreview(color) {
-  if (!color) {
-    document.getElementById('preview').innerHTML = '';
-    return;
-  }
-  let [r, g, b] = colors[color];
-
-  document.getElementById('preview').innerHTML = `
-  <h1>
-    ${color}
-    <span id='swatch' style='background-color: ${color};'>&nbsp;</span>
-    ${rgbToHex(r, g, b).toUpperCase()}
-  </h1>
-  `;
-}
-
 </script>
-<div id="preview"></div>
+<h1 id="preview"></h1>
+
+<!--
+https://news.ycombinator.com/item?id=33647207
+-->