massi-world

this website of mine
Log | Files | Refs

swatchbuckler-project.ts (1512B)

      1 import * as d3 from 'd3-color';
      2 document.addEventListener("DOMContentLoaded", () => {
      3   const el = document.getElementById("gradient-sample-1") as HTMLDivElement;
      4   const drawSwatches = (tgtEl: HTMLDivElement, lightenColorFn: (colorspace, lightness: number) => string) => {
      5     const colorspaceSwatch = (colorspace, swatchEl = document.createElement("div")) => {
      6       const nodes: Array<HTMLDivElement> = [];
      7       let lastColor = "";
      8       swatchEl.classList.add("gradient");
      9       for (let i = -10; i <= 10; i += 0.2) {
     10 	const color = lightenColorFn(colorspace, i);
     11 	console.log(color);
     12 	if (color === "rgb(0, 0, 0)" || color === lastColor) {
     13 	  continue;
     14 	}
     15 	const swatchEl = document.createElement("div");
     16 	swatchEl.classList.add("gradient-swatch")
     17 	swatchEl.style.backgroundColor = color;
     18 	nodes.push(swatchEl);
     19 	lastColor = color;
     20       }
     21       swatchEl.replaceChildren(...nodes);
     22       return swatchEl;
     23     }
     24     tgtEl.appendChild(colorspaceSwatch(d3.rgb));
     25     tgtEl.appendChild(colorspaceSwatch(d3.hsl));
     26     tgtEl.appendChild(colorspaceSwatch(d3.lch));
     27   }
     28   const mkLighten = (color) => (colorspace, lightness: number) => {
     29     return colorspace(color).brighter(lightness).toString();
     30 
     31   }
     32   drawSwatches(document.getElementById("gradient-sample-1") as HTMLDivElement, mkLighten("#ff1111"));
     33   drawSwatches(document.getElementById("gradient-sample-2") as HTMLDivElement, mkLighten("#11ff11"));
     34   drawSwatches(document.getElementById("gradient-sample-3") as HTMLDivElement, mkLighten("#1111ff"));
     35 });