-
-
- );
+ return (
+
+
+
+ );
};
export default KirkiReactColorfulCircle;
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js
index 2d5ccc7..e879e48 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js
@@ -2,92 +2,92 @@ import { useState, useEffect, useCallback } from "react";
import reactCSS from "reactcss";
const KirkiReactColorfulInput = (props) => {
- const { onChange, color = "" } = props;
- const [value, setValue] = useState(() => color);
+ const { onChange, color = "" } = props;
+ const [value, setValue] = useState(() => color);
- const handleChange = useCallback(
- (e) => {
- let val = e.target.value;
+ const handleChange = useCallback(
+ (e) => {
+ let val = e.target.value;
- if (2 === val.length) {
- if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
- val = "#" + val;
- }
- } else if (3 === val.length || 6 === val.length) {
- if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
- val = "#" + val;
- }
- }
+ if (2 === val.length) {
+ if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
+ val = "#" + val;
+ }
+ } else if (3 === val.length || 6 === val.length) {
+ if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) {
+ val = "#" + val;
+ }
+ }
- val = val.toLowerCase();
+ val = val.toLowerCase();
- // Thank you: https://regexr.com/39cgj
- const pattern = new RegExp(
- /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/
- );
+ // Thank you: https://regexr.com/39cgj
+ const pattern = new RegExp(
+ /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/
+ );
- if (pattern.test(val)) {
- onChange(val); // Run onChange handler passed by `KirkiReactColorfulForm` component.
- }
+ if ("" === val || pattern.test(val)) {
+ onChange(val); // Run onChange handler passed by `KirkiReactColorfulForm` component.
+ }
- setValue(val);
- },
- [onChange]
- );
+ setValue(val);
+ },
+ [onChange]
+ );
- // Update the local state when `color` property value is changed.
- useEffect(() => {
- // We don't need to convert the color since it's already handled in parent component.
- setValue(color);
- }, [color]);
+ // Update the local state when `color` property value is changed.
+ useEffect(() => {
+ // We don't need to convert the color since it's already handled in parent component.
+ setValue(color);
+ }, [color]);
- const pickersWithAlpha = [
- "RgbaColorPicker",
- "RgbaStringColorPicker",
- "HslaColorPicker",
- "HslaStringColorPicker",
- "HsvaColorPicker",
- "HsvaStringColorPicker",
- ];
+ const pickersWithAlpha = [
+ "RgbaColorPicker",
+ "RgbaStringColorPicker",
+ "HslaColorPicker",
+ "HslaStringColorPicker",
+ "HsvaColorPicker",
+ "HsvaStringColorPicker",
+ ];
- const styles = reactCSS({
- default: {
- colorPreviewWrapper: {
- backgroundImage: pickersWithAlpha.includes(props.pickerComponent)
- ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")'
- : "none",
- },
- colorPreview: {
- backgroundColor: value,
- },
- },
- });
+ const styles = reactCSS({
+ default: {
+ colorPreviewWrapper: {
+ backgroundImage: pickersWithAlpha.includes(props.pickerComponent)
+ ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")'
+ : "none",
+ },
+ colorPreview: {
+ backgroundColor: value,
+ },
+ },
+ });
- return (
-
-
- );
+ return (
+
- {!props.useHueMode && (
-
-
-
-
- )}
-
-
+
+ );
};
export default KirkiReactColorfulInput;
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js
index 2d48e46..2fa1c22 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js
@@ -1,22 +1,22 @@
const KirkiReactColorfulSwatches = ({ colors, onClick }) => {
- return (
-
+ {!props.useHueMode && (
+
+
+
+
+ )}
+
+
- {colors.map((clr, index) => {
+ return (
+
+ );
};
export default KirkiReactColorfulSwatches;
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js
index 270a286..0f00ea1 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js
@@ -5,41 +5,41 @@ import { useEffect } from "react";
* It was improved version of https://usehooks.com/useOnClickOutside/
*/
const useClickOutside = (pickerRef, resetRef, handler) => {
- useEffect(() => {
- let startedWhenMounted = false;
- let startedInside = false;
+ useEffect(() => {
+ let startedWhenMounted = false;
+ let startedInside = false;
- const listener = (event) => {
- // Do nothing if `mousedown` or `touchstart` started either inside resetRef or pickerRef element
- if (!startedWhenMounted || startedInside) return;
+ const listener = (event) => {
+ // Do nothing if `mousedown` or `touchstart` started either inside resetRef or pickerRef element
+ if (!startedWhenMounted || startedInside) return;
- // Do nothing if clicking resetRef's element or descendent elements
- if (!resetRef.current || resetRef.current.contains(event.target)) return;
+ // Do nothing if clicking resetRef's element or descendent elements
+ if (!resetRef.current || resetRef.current.contains(event.target)) return;
- // Do nothing if clicking pickerRef's element or descendent elements
- if (!pickerRef.current || pickerRef.current.contains(event.target))
- return;
+ // Do nothing if clicking pickerRef's element or descendent elements
+ if (!pickerRef.current || pickerRef.current.contains(event.target))
+ return;
- handler();
- };
+ handler();
+ };
- const validateEventStart = (event) => {
- startedWhenMounted = resetRef.current && pickerRef.current;
- startedInside =
- (resetRef.current && resetRef.current.contains(event.target)) ||
- (pickerRef.current && pickerRef.current.contains(event.target));
- };
+ const validateEventStart = (event) => {
+ startedWhenMounted = resetRef.current && pickerRef.current;
+ startedInside =
+ (resetRef.current && resetRef.current.contains(event.target)) ||
+ (pickerRef.current && pickerRef.current.contains(event.target));
+ };
- document.addEventListener("mousedown", validateEventStart);
- document.addEventListener("touchstart", validateEventStart);
- document.addEventListener("click", listener);
+ document.addEventListener("mousedown", validateEventStart);
+ document.addEventListener("touchstart", validateEventStart);
+ document.addEventListener("click", listener);
- return () => {
- document.removeEventListener("mousedown", validateEventStart);
- document.removeEventListener("touchstart", validateEventStart);
- document.removeEventListener("click", listener);
- };
- }, [resetRef, pickerRef, handler]);
+ return () => {
+ document.removeEventListener("mousedown", validateEventStart);
+ document.removeEventListener("touchstart", validateEventStart);
+ document.removeEventListener("click", listener);
+ };
+ }, [resetRef, pickerRef, handler]);
};
export default useClickOutside;
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js
index 2b137c9..6955cb3 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js
@@ -1,17 +1,17 @@
import { useEffect } from "react";
const useWindowResize = (handler) => {
- useEffect(() => {
- const listener = (e) => {
- handler();
- };
+ useEffect(() => {
+ const listener = (e) => {
+ handler();
+ };
- window.addEventListener("resize", listener, true);
+ window.addEventListener("resize", listener, true);
- return () => {
- window.removeEventListener("resize", listener, true);
- };
- }, [handler]);
+ return () => {
+ window.removeEventListener("resize", listener, true);
+ };
+ }, [handler]);
};
export default useWindowResize;
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js
index bfd1b12..9981532 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js
@@ -20,23 +20,26 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => {
* 1. When formComponent is defined with HexColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way).
*/
- case 'HexColorPicker':
- convertedValue = 'string' === typeof value && value.includes('#') ? value : colord(value).toHex();
+ case "HexColorPicker":
+ convertedValue =
+ "string" === typeof value && value.includes("#")
+ ? value
+ : colord(value).toHex();
break;
- case 'RgbColorPicker':
+ case "RgbColorPicker":
convertedValue = colord(value).toRgb();
delete convertedValue.a;
break;
- case 'RgbStringColorPicker':
+ case "RgbStringColorPicker":
convertedValue =
- "string" === typeof value && value.includes("rgb(")
- ? value
- : colord(value).toRgbString();
+ "string" === typeof value && value.includes("rgb(")
+ ? value
+ : colord(value).toRgbString();
break;
- case 'RgbaColorPicker':
+ case "RgbaColorPicker":
rgba = colord(value).toRgb();
convertedValue = rgba;
break;
@@ -46,62 +49,65 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => {
* 1. When formComponent is defined with RgbaColorPicker as the value.
* 2. When formComponent is not defined but the "alpha" choice is set to true.
*/
- case 'RgbaStringColorPicker':
+ case "RgbaStringColorPicker":
rgba = colord(value).toRgb();
if (rgba.a < 1) {
convertedValue =
- "string" === typeof value && value.includes("rgba")
- ? value
- : colord(value).toRgbString();
+ "string" === typeof value && value.includes("rgba")
+ ? value
+ : colord(value).toRgbString();
} else {
// When it uses the 2nd condition above, then the expected value is "hex".
if (!formComponent) {
convertedValue =
- "string" === typeof value && value.includes("#")
- ? value
- : colord(value).toHex();
+ "string" === typeof value && value.includes("#")
+ ? value
+ : colord(value).toHex();
} else {
convertedValue = colord(value).toRgbString();
// Force to set the alpha channel value.
- if (convertedValue.includes('rgb') && !convertedValue.includes('rgba')) {
- convertedValue = convertedValue.replace('rgb', 'rgba');
- convertedValue = convertedValue.replace(')', ', 1)');
+ if (
+ convertedValue.includes("rgb") &&
+ !convertedValue.includes("rgba")
+ ) {
+ convertedValue = convertedValue.replace("rgb", "rgba");
+ convertedValue = convertedValue.replace(")", ", 1)");
}
}
}
break;
- case 'HslColorPicker':
+ case "HslColorPicker":
convertedValue = colord(value).toHsl();
delete convertedValue.a;
break;
- case 'HslStringColorPicker':
+ case "HslStringColorPicker":
convertedValue =
- "string" === typeof value && value.includes("hsl(")
- ? value
- : colord(value).toHslString();
+ "string" === typeof value && value.includes("hsl(")
+ ? value
+ : colord(value).toHslString();
break;
- case 'HslaColorPicker':
+ case "HslaColorPicker":
convertedValue = colord(value).toHsl();
break;
- case 'HslaStringColorPicker':
+ case "HslaStringColorPicker":
convertedValue = colord(value).toHslString();
// Force to set the alpha channel value.
- if (convertedValue.includes('hsl') && !convertedValue.includes('hsla')) {
- convertedValue = convertedValue.replace('hsl', 'hsla');
- convertedValue = convertedValue.replace(')', ', 1)');
+ if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
+ convertedValue = convertedValue.replace("hsl", "hsla");
+ convertedValue = convertedValue.replace(")", ", 1)");
}
break;
- case 'HsvColorPicker':
+ case "HsvColorPicker":
convertedValue = colord(value).toHsv();
delete convertedValue.a;
break;
@@ -110,25 +116,34 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => {
* The colord library doesn't provide .toHsvString() method yet.
* This manual value-building will apply to "HsvStringColorPicker" and "HsvaStringColorPicker" stuff below.
*/
- case 'HsvStringColorPicker':
+ case "HsvStringColorPicker":
hsv = colord(value).toHsv();
- convertedValue = 'hsv(' + hsv.h + ', ' + hsv.s + '%, ' + hsv.v + '%)';
+ convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
- case 'HsvaColorPicker':
+ case "HsvaColorPicker":
convertedValue = colord(value).toHsv();
break;
- case 'HsvaStringColorPicker':
+ case "HsvaStringColorPicker":
hsva = colord(value).toHsv();
- convertedValue = 'hsva(' + hsva.h + ', ' + hsva.s + '%, ' + hsva.v + '%, ' + hsva.a + ')';
+ convertedValue =
+ "hsva(" +
+ hsva.h +
+ ", " +
+ hsva.s +
+ "%, " +
+ hsva.v +
+ "%, " +
+ hsva.a +
+ ")";
break;
default:
convertedValue =
- "string" === typeof value && value.includes("#")
- ? value
- : colord(value).toHex();
+ "string" === typeof value && value.includes("#")
+ ? value
+ : colord(value).toHex();
break;
}
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js
index d4ac464..45b5e66 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js
@@ -9,174 +9,174 @@ import { colord } from "colord";
* @returns {string} The converted value.
*/
const convertColorForInput = (value, pickerComponent, formComponent) => {
- let rgba;
- let hsv;
- let hsva;
- let convertedValue;
+ let rgba;
+ let hsv;
+ let hsva;
+ let convertedValue;
- switch (pickerComponent) {
- /**
- * The HexColorPicker is used by these condition:
- * 1. When formComponent is defined with HexColorPicker as the value.
- * 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way).
- */
- case "HexColorPicker":
- convertedValue =
- "string" === typeof value && value.includes("#")
- ? value
- : colord(value).toHex();
- break;
+ switch (pickerComponent) {
+ /**
+ * The HexColorPicker is used by these condition:
+ * 1. When formComponent is defined with HexColorPicker as the value.
+ * 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way).
+ */
+ case "HexColorPicker":
+ convertedValue =
+ "string" === typeof value && value.includes("#")
+ ? value
+ : colord(value).toHex();
+ break;
- case "RgbColorPicker":
- convertedValue =
- "string" === typeof value && value.includes("rgb(")
- ? value
- : colord(value).toRgbString();
- break;
+ case "RgbColorPicker":
+ convertedValue =
+ "string" === typeof value && value.includes("rgb(")
+ ? value
+ : colord(value).toRgbString();
+ break;
- case "RgbStringColorPicker":
- convertedValue =
- "string" === typeof value && value.includes("rgba")
- ? value
- : colord(value).toRgbString();
- break;
+ case "RgbStringColorPicker":
+ convertedValue =
+ "string" === typeof value && value.includes("rgba")
+ ? value
+ : colord(value).toRgbString();
+ break;
- case "RgbaColorPicker":
- rgba = colord(value).toRgb();
+ case "RgbaColorPicker":
+ rgba = colord(value).toRgb();
- if (rgba.a < 1) {
- convertedValue =
- "string" === typeof value && value.includes("rgba")
- ? value
- : colord(value).toRgbString();
- } else {
- convertedValue = colord(value).toRgbString();
+ if (rgba.a < 1) {
+ convertedValue =
+ "string" === typeof value && value.includes("rgba")
+ ? value
+ : colord(value).toRgbString();
+ } else {
+ convertedValue = colord(value).toRgbString();
- // Force to set the alpha value.
- if (
- convertedValue.includes("rgb") &&
- !convertedValue.includes("rgba")
- ) {
- convertedValue = convertedValue.replace("rgb", "rgba");
- convertedValue = convertedValue.replace(")", ", 1)");
- }
- }
+ // Force to set the alpha value.
+ if (
+ convertedValue.includes("rgb") &&
+ !convertedValue.includes("rgba")
+ ) {
+ convertedValue = convertedValue.replace("rgb", "rgba");
+ convertedValue = convertedValue.replace(")", ", 1)");
+ }
+ }
- break;
+ break;
- /**
- * The RgbaStringColorPicker is used by these condition:
- * 1. When formComponent is defined with RgbaColorPicker as the value.
- * 2. When formComponent is not defined but the "alpha" choice is set to true.
- */
- case "RgbaStringColorPicker":
- rgba = colord(value).toRgb();
+ /**
+ * The RgbaStringColorPicker is used by these condition:
+ * 1. When formComponent is defined with RgbaColorPicker as the value.
+ * 2. When formComponent is not defined but the "alpha" choice is set to true.
+ */
+ case "RgbaStringColorPicker":
+ rgba = colord(value).toRgb();
- // When it uses the 2nd condition above, then the expected value is "hex".
- if (rgba.a == 1 && !formComponent) {
- convertedValue =
- "string" === typeof value && value.includes("#")
- ? value
- : colord(value).toHex();
- } else {
- convertedValue = colord(value).toRgbString();
+ // When it uses the 2nd condition above, then the expected value is "hex".
+ if (rgba.a == 1 && !formComponent) {
+ convertedValue =
+ "string" === typeof value && value.includes("#")
+ ? value
+ : colord(value).toHex();
+ } else {
+ convertedValue = colord(value).toRgbString();
- // Force to set the alpha value.
- if (
- convertedValue.includes("rgb") &&
- !convertedValue.includes("rgba")
- ) {
- convertedValue = convertedValue.replace("rgb", "rgba");
- convertedValue = convertedValue.replace(")", ", 1)");
- }
- }
+ // Force to set the alpha value.
+ if (
+ convertedValue.includes("rgb") &&
+ !convertedValue.includes("rgba")
+ ) {
+ convertedValue = convertedValue.replace("rgb", "rgba");
+ convertedValue = convertedValue.replace(")", ", 1)");
+ }
+ }
- break;
+ break;
- case "HslColorPicker":
- convertedValue =
- "string" === typeof value && value.includes("hsl(")
- ? value
- : colord(value).toHslString();
- break;
+ case "HslColorPicker":
+ convertedValue =
+ "string" === typeof value && value.includes("hsl(")
+ ? value
+ : colord(value).toHslString();
+ break;
- case "HslStringColorPicker":
- convertedValue =
- "string" === typeof value && value.includes("hsl(")
- ? value
- : colord(value).toHslString();
- break;
+ case "HslStringColorPicker":
+ convertedValue =
+ "string" === typeof value && value.includes("hsl(")
+ ? value
+ : colord(value).toHslString();
+ break;
- case "HslaColorPicker":
- convertedValue = colord(value).toHslString();
+ case "HslaColorPicker":
+ convertedValue = colord(value).toHslString();
- // Force to set the alpha value.
- if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
- convertedValue = convertedValue.replace("hsl", "hsla");
- convertedValue = convertedValue.replace(")", ", 1)");
- }
+ // Force to set the alpha value.
+ if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
+ convertedValue = convertedValue.replace("hsl", "hsla");
+ convertedValue = convertedValue.replace(")", ", 1)");
+ }
- break;
+ break;
- case "HslaStringColorPicker":
- convertedValue = colord(value).toHslString();
+ case "HslaStringColorPicker":
+ convertedValue = colord(value).toHslString();
- // Force to set the alpha value.
- if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
- convertedValue = convertedValue.replace("hsl", "hsla");
- convertedValue = convertedValue.replace(")", ", 1)");
- }
+ // Force to set the alpha value.
+ if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
+ convertedValue = convertedValue.replace("hsl", "hsla");
+ convertedValue = convertedValue.replace(")", ", 1)");
+ }
- break;
+ break;
- /**
- * The colord library doesn't provide .toHsvString() method yet.
- * This manual value-building will apply to "hsv" and "hsva" stuff below.
- */
- case "HsvColorPicker":
- hsv = colord(value).toHsv();
- convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
- break;
+ /**
+ * The colord library doesn't provide .toHsvString() method yet.
+ * This manual value-building will apply to "hsv" and "hsva" stuff below.
+ */
+ case "HsvColorPicker":
+ hsv = colord(value).toHsv();
+ convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
+ break;
- case "HsvStringColorPicker":
- hsv = colord(value).toHsv();
- convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
- break;
+ case "HsvStringColorPicker":
+ hsv = colord(value).toHsv();
+ convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
+ break;
- case "HsvaColorPicker":
- hsva = colord(value).toHsv();
- convertedValue =
- "hsva(" +
- hsva.h +
- ", " +
- hsva.s +
- "%, " +
- hsva.v +
- "%, " +
- hsva.a +
- ")";
- break;
+ case "HsvaColorPicker":
+ hsva = colord(value).toHsv();
+ convertedValue =
+ "hsva(" +
+ hsva.h +
+ ", " +
+ hsva.s +
+ "%, " +
+ hsva.v +
+ "%, " +
+ hsva.a +
+ ")";
+ break;
- case "HsvaStringColorPicker":
- hsva = colord(value).toHsv();
- convertedValue =
- "hsva(" +
- hsva.h +
- ", " +
- hsva.s +
- "%, " +
- hsva.v +
- "%, " +
- hsva.a +
- ")";
- break;
+ case "HsvaStringColorPicker":
+ hsva = colord(value).toHsv();
+ convertedValue =
+ "hsva(" +
+ hsva.h +
+ ", " +
+ hsva.s +
+ "%, " +
+ hsva.v +
+ "%, " +
+ hsva.a +
+ ")";
+ break;
- default:
- convertedValue = colord(value).toHex();
- break;
- }
+ default:
+ convertedValue = colord(value).toHex();
+ break;
+ }
- return convertedValue;
+ return convertedValue;
};
export default convertColorForInput;
diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js
index 7eef9f4..ac26605 100644
--- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js
+++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js
@@ -12,77 +12,86 @@ const convertColorForPicker = (value, pickerComponent) => {
let convertedValue;
switch (pickerComponent) {
- case 'HexColorPicker':
+ case "HexColorPicker":
convertedValue = colord(value).toHex();
break;
- case 'RgbColorPicker':
+ case "RgbColorPicker":
convertedValue = colord(value).toRgb();
delete convertedValue.a;
break;
- case 'RgbStringColorPicker':
+ case "RgbStringColorPicker":
convertedValue = colord(value).toRgbString();
break;
- case 'RgbaColorPicker':
+ case "RgbaColorPicker":
convertedValue = colord(value).toRgb();
break;
- case 'RgbaStringColorPicker':
+ case "RgbaStringColorPicker":
convertedValue = colord(value).toRgbString();
// Force to set the alpha channel value.
- if (convertedValue.includes('rgb') && !convertedValue.includes('rgba')) {
- convertedValue = convertedValue.replace('rgb', 'rgba');
- convertedValue = convertedValue.replace(')', ', 1)');
+ if (convertedValue.includes("rgb") && !convertedValue.includes("rgba")) {
+ convertedValue = convertedValue.replace("rgb", "rgba");
+ convertedValue = convertedValue.replace(")", ", 1)");
}
break;
- case 'HslColorPicker':
+ case "HslColorPicker":
convertedValue = colord(value).toHsl();
delete convertedValue.a;
break;
- case 'HslStringColorPicker':
+ case "HslStringColorPicker":
convertedValue = colord(value).toHslString();
break;
- case 'HslaColorPicker':
+ case "HslaColorPicker":
convertedValue = colord(value).toHsl();
break;
- case 'HslaStringColorPicker':
+ case "HslaStringColorPicker":
convertedValue = colord(value).toHslString();
// Force to set the alpha channel value.
- if (convertedValue.includes('hsl') && !convertedValue.includes('hsla')) {
- convertedValue = convertedValue.replace('hsl', 'hsla');
- convertedValue = convertedValue.replace(')', ', 1)');
+ if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) {
+ convertedValue = convertedValue.replace("hsl", "hsla");
+ convertedValue = convertedValue.replace(")", ", 1)");
}
break;
- case 'HsvColorPicker':
+ case "HsvColorPicker":
convertedValue = colord(value).toHsv();
delete convertedValue.a;
break;
- case 'HsvStringColorPicker':
+ case "HsvStringColorPicker":
const hsv = colord(value).toHsv();
- convertedValue = 'hsv(' + hsv.h + ', ' + hsv.s + '%, ' + hsv.v + '%)';
+ convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)";
break;
- case 'HsvaColorPicker':
+ case "HsvaColorPicker":
convertedValue = colord(value).toHsv();
break;
- case 'HsvaStringColorPicker':
+ case "HsvaStringColorPicker":
// colord library doesn't provide .toHsvString() method yet.
const hsva = colord(value).toHsv();
- convertedValue = 'hsva(' + hsva.h + ', ' + hsva.s + '%, ' + hsva.v + '%, ' + hsva.a + ')';
+ convertedValue =
+ "hsva(" +
+ hsva.h +
+ ", " +
+ hsva.s +
+ "%, " +
+ hsva.v +
+ "%, " +
+ hsva.a +
+ ")";
break;
diff --git a/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js b/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js
index c5d6ce0..96eea32 100644
--- a/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js
+++ b/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js
@@ -1,2 +1,2 @@
-!function(){var e=function(e,t,i,a){var r=this;this.rowIndex=e,this.container=t,this.label=i,this.header=this.container.find(".repeater-row-header"),this.header.on("click",(function(){r.toggleMinimize()})),this.container.on("click",".repeater-row-remove",(function(){r.remove()})),this.header.on("mousedown",(function(){r.container.trigger("row:start-dragging")})),this.container.on("keyup change","input, select, textarea",(function(e){r.container.trigger("row:update",[r.rowIndex,jQuery(e.target).data("field"),e.target])})),this.setRowIndex=function(e){this.rowIndex=e,this.container.attr("data-row",e),this.container.data("row",e),this.updateLabel()},this.toggleMinimize=function(){this.container.toggleClass("minimized"),this.header.find(".dashicons").toggleClass("dashicons-arrow-up").toggleClass("dashicons-arrow-down")},this.remove=function(){this.container.slideUp(300,(function(){jQuery(this).detach()})),this.container.trigger("row:remove",[this.rowIndex])},this.updateLabel=function(){var e,t,i;if("field"===this.label.type&&(e=this.container.find('.repeater-field [data-field="'+this.label.field+'"]'),_.isFunction(e.val)&&""!==(t=e.val())))return _.isUndefined(a.params.fields[this.label.field])||_.isUndefined(a.params.fields[this.label.field].type)||("select"===a.params.fields[this.label.field].type?_.isUndefined(a.params.fields[this.label.field].choices)||_.isUndefined(a.params.fields[this.label.field].choices[e.val()])||(t=a.params.fields[this.label.field].choices[e.val()]):"radio"!==a.params.fields[this.label.field].type&&"radio-image"!==a.params.fields[this.label.field].type||(i=a.selector+' [data-row="'+this.rowIndex+'"] .repeater-field [data-field="'+this.label.field+'"]:checked',t=jQuery(i).val())),void this.header.find(".repeater-row-label").text(t);this.header.find(".repeater-row-label").text(this.label.value+" "+(this.rowIndex+1))},this.updateLabel()};wp.customize.controlConstructor.repeater=wp.customize.Control.extend({ready:function(){!_.isUndefined(window.kirkiControlLoader)&&_.isFunction(kirkiControlLoader)?kirkiControlLoader(this):this.initKirkiControl()},initKirkiControl:function(e){var t,i,a;a=(e=e||this).params.value,e.settingField=e.container.find("[data-customize-setting-link]").first(),e.setValue([],!1),e.repeaterFieldsContainer=e.container.find(".repeater-fields").first(),e.currentIndex=0,e.rows=[],t=!1,_.isUndefined(e.params.choices.limit)||(t=!(0>=e.params.choices.limit)&&parseInt(e.params.choices.limit,10)),e.container.on("click","button.repeater-add",(function(a){a.preventDefault(),!t||e.currentIndex
+ {colors.map((clr, index) => {
const color = clr && clr.color ? clr.color : clr;
- return (
-
- );
- })}
-
- );
+ return (
+
+ );
+ })}
+