feature: store color code in url

src/components/addressBar/index.ts

@@ -0,0 +1,20 @@
+import state, { SLIDER_MODES } from "../../state";
+import { oklabToOkhsl, oklabToOkhsv, sRgbToOklab } from "../../utils/color";
+import { isHex, getHexTokensFromString, getRgbaFromHex } from "../../utils/hex";
+import { updateSliderRangeInputs } from "../sliders/sliderRangeInputs";
+
+export default function initAddressBar() {
+  var hash = window.location.hash.substring(1);
+  let hex = getHexTokensFromString(hash);
+
+  if (isHex(hex)) {
+    let [r, g, b, alpha] = getRgbaFromHex(hex);
+
+    const fn =
+      state.sliderMode === SLIDER_MODES.OKHSV ? oklabToOkhsv : oklabToOkhsl;
+
+    const color = fn(...sRgbToOklab(r, g, b, alpha));
+    const values = color.map((v, i: number) => v * state.currentSliders[i].max);
+    updateSliderRangeInputs(values);
+  }
+}

src/components/sliders/sliderRangeInputs/index.ts

@@ -5,6 +5,7 @@ import { updateSliderTextInput } from "../sliderTextInputs";
 import { okhsvToOklab, okhslToOklab } from "../../../utils/color";
 import { updateHexInput } from "../../hexInput";
 import { updateColors } from "../../../utils/dom";
+import debounce from "../.././../utils/debounce";
 
 export const sliderRangeLabelEls = <NodeListOf<HTMLLabelElement>>(
   document.querySelectorAll(".sliderLabel")
@@ -83,13 +84,18 @@ export function getValue(value: number, key: number) {
     : value;
 }
 
+const updateAddressBar = debounce((hex: string) => {
+  window.location.hash = hex;
+}, 300);
+
 function handleSync(skipHexInput: boolean = false) {
   const oklab = getOklab();
   const hex = oklabToHex(oklab);
   if (!skipHexInput) {
     updateHexInput(hex);
   }
   updateDomColors(hex, oklab);
+  updateAddressBar(hex);
 }
 
 function handleAsync() {}

src/main.ts

@@ -7,9 +7,11 @@ import initActionBar from "./components/actionBar";
 import initSliders from "./components/sliders";
 import initPWA from "./pwa";
 import initGitHubButton from "./components/githubButton";
+import initAddressBar from "./components/addressBar";
 
 initSliders();
 initHexInput();
 initActionBar();
+initAddressBar();
 initPWA();
 initGitHubButton();

src/utils/debounce.ts

@@ -0,0 +1,13 @@
+export default function debounce(fn: Function, delay = 300, immediate = false) {
+  let timeout: number | undefined;
+  return function (this: any, ...args: any) {
+    function delayed(this: any) {
+      timeout = undefined;
+      if (!immediate) fn.apply(this, args);
+    }
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(delayed, delay);
+    if (callNow) fn.apply(this, args);
+  };
+}