| 1 |
import { useState, useEffect, useMemo } from "@wordpress/element"; |
| 2 |
import { jsonParse, randomSolidColor } from "../shared/helpFn"; |
| 3 |
|
| 4 |
export const hoverAnimate = (hoverAnimation, layout) => { |
| 5 |
let transformValue = ""; |
| 6 |
let initialValue = ""; |
| 7 |
|
| 8 |
switch (hoverAnimation) { |
| 9 |
case "zoomIn": |
| 10 |
transformValue = "scale(1.05)"; |
| 11 |
initialValue = "scale(1)"; |
| 12 |
break; |
| 13 |
case "zoomOut": |
| 14 |
transformValue = "scale(1)"; |
| 15 |
initialValue = "scale(1.05)"; |
| 16 |
break; |
| 17 |
case "slideLeft": |
| 18 |
transformValue = "scale(1.10) translateX(-10px)"; |
| 19 |
initialValue = "scale(1.10) translateX(3%)"; |
| 20 |
break; |
| 21 |
case "slideRight": |
| 22 |
transformValue = "scale(1.10) translateX(10px)"; |
| 23 |
initialValue = "scale(1.10) translateX(-3%)"; |
| 24 |
break; |
| 25 |
default: |
| 26 |
transformValue = "scale(1)"; |
| 27 |
initialValue = "scale(1)"; |
| 28 |
} |
| 29 |
|
| 30 |
if (layout === "taxonomy-layout-one") { |
| 31 |
return {}; |
| 32 |
} |
| 33 |
|
| 34 |
return { transformValue, initialValue }; |
| 35 |
}; |
| 36 |
|
| 37 |
export const useOverlay = (attributes) => { |
| 38 |
const { imageOverlayColor, imageOverlayHoverColor, imageOverlayCustomColor, imageOverlayCustomHoverColor, layout } = |
| 39 |
attributes; |
| 40 |
|
| 41 |
const [randomColor, setRandomColor] = useState(randomSolidColor(imageOverlayColor)); |
| 42 |
const [randomHoverColor, setRandomHoverColor] = useState(randomSolidColor(imageOverlayHoverColor)); |
| 43 |
|
| 44 |
useEffect(() => { |
| 45 |
setRandomColor(randomSolidColor(imageOverlayColor)); |
| 46 |
}, [imageOverlayColor]); |
| 47 |
|
| 48 |
useEffect(() => { |
| 49 |
setRandomHoverColor(randomSolidColor(imageOverlayHoverColor)); |
| 50 |
}, [imageOverlayHoverColor]); |
| 51 |
|
| 52 |
const gradientMap = { |
| 53 |
"warm-sunset": "linear-gradient(2deg, rgba(244, 66, 70, 0.4) 33.02%, rgba(221, 36, 118, 0.4) 98.51%)", |
| 54 |
"ocean-breeze": "linear-gradient(1deg, rgba(43, 88, 118, 0.4) 0.5%, rgba(78, 67, 118, 0.4) 99.51%)", |
| 55 |
"royal-gold": "linear-gradient(1deg, rgba(255, 215, 0, 0.4) 0.5%, rgba(184, 134, 11, 0.4) 99.51%)", |
| 56 |
"cool-blues": "linear-gradient(1deg, rgba(30, 60, 114, 0.4) 0.5%, rgba(42, 82, 152, 0.4) 99.51%)", |
| 57 |
"soft-pastel": "linear-gradient(1deg, rgba(252, 227, 138, 0.4) 0.5%, rgba(243, 129, 129, 0.4) 99.51%)", |
| 58 |
"elegant-purple": "linear-gradient(180deg, rgba(65, 41, 90, 0.4) 0%, rgba(47, 7, 67, 0.4) 100%)", |
| 59 |
"energetic-orange": "linear-gradient(180deg, rgba(255, 81, 47, 0.4) 0%, rgba(240, 152, 25, 0.4) 100%)", |
| 60 |
}; |
| 61 |
|
| 62 |
const overlayColor = useMemo(() => { |
| 63 |
if (["multi-gradient", "multi-solid"].includes(imageOverlayColor)) { |
| 64 |
return randomColor; |
| 65 |
} |
| 66 |
if (imageOverlayColor === "custom") { |
| 67 |
return imageOverlayCustomColor; |
| 68 |
} |
| 69 |
return gradientMap[imageOverlayColor] || "transparent"; |
| 70 |
}, [imageOverlayColor, imageOverlayCustomColor, randomColor]); |
| 71 |
|
| 72 |
const overlayHoverColor = useMemo(() => { |
| 73 |
if (["multi-gradient", "multi-solid"].includes(imageOverlayHoverColor)) { |
| 74 |
return randomHoverColor; |
| 75 |
} |
| 76 |
if (imageOverlayHoverColor === "custom") { |
| 77 |
return imageOverlayCustomHoverColor; |
| 78 |
} |
| 79 |
return gradientMap[imageOverlayHoverColor] || "transparent"; |
| 80 |
}, [imageOverlayHoverColor, imageOverlayCustomHoverColor, randomHoverColor]); |
| 81 |
|
| 82 |
if (layout === "taxonomy-layout-one") { |
| 83 |
return {}; |
| 84 |
} |
| 85 |
|
| 86 |
return { |
| 87 |
overlayColor, |
| 88 |
overlayHoverColor, |
| 89 |
}; |
| 90 |
}; |
| 91 |
|
