Add Reset button

jgthms · Jun 25, 2024 · 2cc6593 · 2cc6593
1 parent 0c9ae61
commit 2cc6593
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx
@@ -49,15 +49,22 @@ function App() {
     getVar: (id) => {
       return context.cssvars[id];
     },
-    updateVar: (id, newValue) => {
+    updateVar: (id, newValue, unit) => {
+      const computedValue = `${newValue}${unit}`;
+
+      document.documentElement.style.setProperty(
+        `--bulma-${id}`,
+        computedValue,
+      );
+
       setContext((context) => {
         return {
           ...context,
           cssvars: {
             ...context.cssvars,
             [id]: {
               ...context.cssvars[id],
-              value: newValue,
+              current: newValue,
             },
           },
         };
@@ -66,8 +73,6 @@ function App() {
   };
   const [context, setContext] = useState(initialContext);
 
-  console.log("ZLOG context", context);
-
   useEffect(() => {
     const rootStyle = window.getComputedStyle(document.documentElement);
 

diff --git a/docs/_react/bulma-customizer/src/components/Color.jsx b/docs/_react/bulma-customizer/src/components/Color.jsx
@@ -11,7 +11,7 @@ function Color({ color }) {
   // const [saturation, setSaturation] = useState(s.start);
   // const [lightness, setLightness] = useState(l.start);
 
-  const { cssvars } = useContext(CustomizerContext);
+  const { cssvars, updateVar } = useContext(CustomizerContext);
   const hName = `${color}-h`;
   const sName = `${color}-s`;
   const lName = `${color}-l`;
@@ -28,15 +28,21 @@ function Color({ color }) {
 
   const handleReset = (event) => {
     event.preventDefault();
-    document.documentElement.style.removeProperty(`--bulma-${hName}`);
-    document.documentElement.style.removeProperty(`--bulma-${sName}`);
-    document.documentElement.style.removeProperty(`--bulma-${lName}`);
+    updateVar(h.id, h.start, h.unit);
+    updateVar(s.id, s.start, s.unit);
+    updateVar(l.id, l.start, l.unit);
+    // document.documentElement.style.removeProperty(`--bulma-${hName}`);
+    // document.documentElement.style.removeProperty(`--bulma-${sName}`);
+    // document.documentElement.style.removeProperty(`--bulma-${lName}`);
   };
 
   if (!h) {
     return;
   }
 
+  const isDisabled =
+    h.current === h.start && s.current === s.start && l.current === l.start;
+
   return (
     <div className={cn.main} style={mainStyle}>
       <div className={cn.side}>
@@ -45,7 +51,11 @@ function Color({ color }) {
           <p>{name}</p>
         </div>
 
-        <button className="button is-small" onClick={handleReset}>
+        <button
+          className="button is-small"
+          onClick={handleReset}
+          disabled={isDisabled}
+        >
           Reset
         </button>
       </div>

diff --git a/docs/_react/bulma-customizer/src/components/Slider.jsx b/docs/_react/bulma-customizer/src/components/Slider.jsx
@@ -27,7 +27,7 @@ const valueToX = (value, width, min, max) => {
 
 function Slider({ id, color, kind }) {
   const { cssvars, updateVar } = useContext(CustomizerContext);
-  const { start, current, unit } = cssvars[id];
+  const { start, unit, current } = cssvars[id];
   const [min, max] = RANGES[kind];
 
   const sliderRef = useRef(null);
@@ -52,26 +52,31 @@ function Slider({ id, color, kind }) {
     setMoving(false);
   };
 
-  useEffect(() => {
-    const computedValue = `${current}${unit}`;
-
-    if (current === start) {
-      document.documentElement.style.removeProperty(`--bulma-${id}`);
-    } else {
-      document.documentElement.style.setProperty(
-        `--bulma-${id}`,
-        computedValue,
-      );
-    }
-  }, [current, id, start, unit]);
+  // useEffect(() => {
+  //   const computedValue = `${current}${unit}`;
+
+  //   if (current === start) {
+  //     document.documentElement.style.removeProperty(`--bulma-${id}`);
+  //   } else {
+  //     document.documentElement.style.setProperty(
+  //       `--bulma-${id}`,
+  //       computedValue,
+  //     );
+  //   }
+  // }, [current, id, start, unit]);
 
   useEffect(() => {
     const slider = sliderRef.current;
     const sliderRect = slider.getBoundingClientRect();
     const final = xToValue(x, sliderRect.width, min, max);
-    updateVar(id, final);
+    updateVar(id, final, unit);
   }, [id, min, max, updateVar, unit, x]);
 
+  useEffect(() => {
+    const newX = valueToX(current, 240, min, max);
+    setX(newX);
+  }, [min, max, current]);
+
   useEffect(() => {
     const docMouseMove = (event) => {
       if (!isMoving || !sliderRef.current || !handleRef.current) {