| 1 |
/** |
| 2 |
* Builds the per-instance, scoped CSS for a countdown block. |
| 3 |
* |
| 4 |
* Returns three raw CSS strings (no media-query wrapping): |
| 5 |
* { desktop, tab, mobile } |
| 6 |
* |
| 7 |
* The editor wraps tab/mobile in media queries for the live preview and the |
| 8 |
* PHP render_callback does the same on the frontend, so this stays the single |
| 9 |
* source of truth for styling across both contexts. |
| 10 |
*/ |
| 11 |
|
| 12 |
import { |
| 13 |
BOX_PADDING, |
| 14 |
BOX_BORDER, |
| 15 |
DIGITS_PADDING, |
| 16 |
DIGITS_BORDER, |
| 17 |
UNITS, |
| 18 |
} from "./constants"; |
| 19 |
import { |
| 20 |
DIGITS_TYPO, |
| 21 |
LABEL_TYPO, |
| 22 |
EXPIRE_TITLE_TYPO, |
| 23 |
EXPIRE_TEXT_TYPO, |
| 24 |
} from "./typographyConstants"; |
| 25 |
|
| 26 |
const { |
| 27 |
softMinifyCssStrings, |
| 28 |
generateTypographyStyles, |
| 29 |
generateDimensionsControlStyles, |
| 30 |
generateBorderShadowStyles, |
| 31 |
} = window.EBControls; |
| 32 |
|
| 33 |
export default function getCountdownStyles(blockId, attributes) { |
| 34 |
const W = `.${blockId}`; |
| 35 |
|
| 36 |
const { |
| 37 |
alignment, |
| 38 |
boxBgColor, |
| 39 |
boxBgGradient, |
| 40 |
boxSpacing, |
| 41 |
digitsColor, |
| 42 |
digitsBgColor, |
| 43 |
labelColor, |
| 44 |
separatorColor, |
| 45 |
expireAlignment, |
| 46 |
expireTitleColor, |
| 47 |
expireTextColor, |
| 48 |
} = attributes; |
| 49 |
|
| 50 |
// Typography (desktop/tab/mobile fragments). |
| 51 |
const digitsTypo = generateTypographyStyles({ attributes, prefixConstant: DIGITS_TYPO }); |
| 52 |
const labelTypo = generateTypographyStyles({ attributes, prefixConstant: LABEL_TYPO }); |
| 53 |
const expTitleTypo = generateTypographyStyles({ attributes, prefixConstant: EXPIRE_TITLE_TYPO }); |
| 54 |
const expTextTypo = generateTypographyStyles({ attributes, prefixConstant: EXPIRE_TEXT_TYPO }); |
| 55 |
|
| 56 |
// Paddings. |
| 57 |
const boxPad = generateDimensionsControlStyles({ controlName: BOX_PADDING, styleFor: "padding", attributes }); |
| 58 |
const digitsPad = generateDimensionsControlStyles({ controlName: DIGITS_PADDING, styleFor: "padding", attributes }); |
| 59 |
|
| 60 |
// Border + shadow. |
| 61 |
const boxBorder = generateBorderShadowStyles({ controlName: BOX_BORDER, attributes }); |
| 62 |
const digitsBorder = generateBorderShadowStyles({ controlName: DIGITS_BORDER, attributes }); |
| 63 |
|
| 64 |
const boxBg = boxBgGradient |
| 65 |
? `background: ${boxBgGradient};` |
| 66 |
: boxBgColor |
| 67 |
? `background-color: ${boxBgColor};` |
| 68 |
: ""; |
| 69 |
|
| 70 |
const spacing = Number.isFinite(parseFloat(boxSpacing)) ? parseFloat(boxSpacing) : 15; |
| 71 |
|
| 72 |
// Per-unit color rules. |
| 73 |
const unitStyles = UNITS.map((unit) => { |
| 74 |
const bg = attributes[`${unit}BgColor`]; |
| 75 |
const digit = attributes[`${unit}DigitColor`]; |
| 76 |
const label = attributes[`${unit}LabelColor`]; |
| 77 |
const border = attributes[`${unit}BorderColor`]; |
| 78 |
let css = ""; |
| 79 |
if (bg) css += `${W} .nx-countdown-item > div.nx-countdown-${unit} { background-color: ${bg}; }`; |
| 80 |
if (border) css += `${W} .nx-countdown-item > div.nx-countdown-${unit} { border-color: ${border}; }`; |
| 81 |
if (digit) css += `${W} .nx-countdown-item > div.nx-countdown-${unit} .nx-countdown-digits { color: ${digit}; }`; |
| 82 |
if (label) css += `${W} .nx-countdown-item > div.nx-countdown-${unit} .nx-countdown-label { color: ${label}; }`; |
| 83 |
return css; |
| 84 |
}).join(""); |
| 85 |
|
| 86 |
const desktop = softMinifyCssStrings(` |
| 87 |
${alignment ? `${W} .nx-countdown-item > div { text-align: ${alignment}; }` : ""} |
| 88 |
|
| 89 |
${W} .nx-countdown-item > div { |
| 90 |
${boxBg} |
| 91 |
margin-right: ${spacing}px; |
| 92 |
margin-left: ${spacing}px; |
| 93 |
${boxPad.dimensionStylesDesktop} |
| 94 |
${boxBorder.styesDesktop} |
| 95 |
} |
| 96 |
${W} .nx-countdown-container { |
| 97 |
margin-right: -${spacing}px; |
| 98 |
margin-left: -${spacing}px; |
| 99 |
--nx-countdown-box-spacing: ${spacing}px; |
| 100 |
} |
| 101 |
|
| 102 |
${W} .nx-countdown-digits { |
| 103 |
${digitsColor ? `color: ${digitsColor};` : ""} |
| 104 |
${digitsBgColor ? `background-color: ${digitsBgColor};` : ""} |
| 105 |
${digitsTypo.typoStylesDesktop} |
| 106 |
${digitsPad.dimensionStylesDesktop} |
| 107 |
${digitsBorder.styesDesktop} |
| 108 |
} |
| 109 |
|
| 110 |
${W} .nx-countdown-label { |
| 111 |
${labelColor ? `color: ${labelColor};` : ""} |
| 112 |
${labelTypo.typoStylesDesktop} |
| 113 |
} |
| 114 |
|
| 115 |
${separatorColor ? `${W} .nx-countdown-digits::after { color: ${separatorColor}; }` : ""} |
| 116 |
|
| 117 |
${unitStyles} |
| 118 |
|
| 119 |
${expireAlignment ? `${W} .nx-countdown-finish-message { text-align: ${expireAlignment}; }` : ""} |
| 120 |
${W} .nx-countdown-finish-message .nx-expiry-title { |
| 121 |
${expireTitleColor ? `color: ${expireTitleColor};` : ""} |
| 122 |
${expTitleTypo.typoStylesDesktop} |
| 123 |
} |
| 124 |
${W} .nx-expiry-text { |
| 125 |
${expireTextColor ? `color: ${expireTextColor};` : ""} |
| 126 |
${expTextTypo.typoStylesDesktop} |
| 127 |
} |
| 128 |
`); |
| 129 |
|
| 130 |
const tab = softMinifyCssStrings(` |
| 131 |
${W} .nx-countdown-item > div { |
| 132 |
${boxPad.dimensionStylesTab} |
| 133 |
${boxBorder.styesTab} |
| 134 |
} |
| 135 |
${W} .nx-countdown-digits { |
| 136 |
${digitsTypo.typoStylesTab} |
| 137 |
${digitsPad.dimensionStylesTab} |
| 138 |
${digitsBorder.styesTab} |
| 139 |
} |
| 140 |
${W} .nx-countdown-label { ${labelTypo.typoStylesTab} } |
| 141 |
${W} .nx-countdown-finish-message .nx-expiry-title { ${expTitleTypo.typoStylesTab} } |
| 142 |
${W} .nx-expiry-text { ${expTextTypo.typoStylesTab} } |
| 143 |
`); |
| 144 |
|
| 145 |
const mobile = softMinifyCssStrings(` |
| 146 |
${W} .nx-countdown-item > div { |
| 147 |
${boxPad.dimensionStylesMobile} |
| 148 |
${boxBorder.styesMobile} |
| 149 |
} |
| 150 |
${W} .nx-countdown-digits { |
| 151 |
${digitsTypo.typoStylesMobile} |
| 152 |
${digitsPad.dimensionStylesMobile} |
| 153 |
${digitsBorder.styesMobile} |
| 154 |
} |
| 155 |
${W} .nx-countdown-label { ${labelTypo.typoStylesMobile} } |
| 156 |
${W} .nx-countdown-finish-message .nx-expiry-title { ${expTitleTypo.typoStylesMobile} } |
| 157 |
${W} .nx-expiry-text { ${expTextTypo.typoStylesMobile} } |
| 158 |
`); |
| 159 |
|
| 160 |
return { desktop, tab, mobile }; |
| 161 |
} |
| 162 |
|
