| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { type AnyColor, colord } from 'colord'; |
| 3 |
import type { Attributes } from '../../../types'; |
| 4 |
import { findBackgroundColor, findTextColor } from '../../../util/colors'; |
| 5 |
|
| 6 |
export const RoundCenter = ( |
| 7 |
attributes: Partial<Attributes> & { context?: string }, |
| 8 |
) => { |
| 9 |
const { |
| 10 |
bgColor, |
| 11 |
textColor, |
| 12 |
seeMoreString, |
| 13 |
context, |
| 14 |
footerType, |
| 15 |
seeMoreCollapse, |
| 16 |
seeMoreCollapseString, |
| 17 |
} = attributes; |
| 18 |
let bgTop, color, bg; |
| 19 |
if (bgColor?.startsWith('var(')) { |
| 20 |
bgTop = findBackgroundColor(attributes) ?? bgColor; |
| 21 |
bg = bgTop; |
| 22 |
color = findTextColor(attributes) ?? textColor; |
| 23 |
} else { |
| 24 |
const bgC = colord(bgColor as AnyColor); |
| 25 |
const textC = colord(textColor as AnyColor); |
| 26 |
color = bgC.isDark() |
| 27 |
? textC.lighten(0.15).toHex() |
| 28 |
: textC.darken(0.15).toHex(); |
| 29 |
bg = bgC.isDark() ? bgC.lighten(0.1).toHex() : bgC.darken(0.1).toHex(); |
| 30 |
bgTop = bgC.toHex(); |
| 31 |
} |
| 32 |
const hasFooter = footerType !== 'none'; |
| 33 |
const inEditor = context === 'editor'; |
| 34 |
const seeMore = seeMoreString || __('Expand', 'code-block-pro'); |
| 35 |
|
| 36 |
return ( |
| 37 |
<div |
| 38 |
className="cbp-see-more-container" |
| 39 |
// If the user opted to collapse, store strings |
| 40 |
data-see-more-collapse-string={ |
| 41 |
seeMoreCollapse |
| 42 |
? seeMoreCollapseString || __('Collapse', 'code-block-pro') |
| 43 |
: undefined |
| 44 |
} |
| 45 |
data-see-more-string={seeMoreCollapse ? seeMore : undefined} |
| 46 |
style={{ |
| 47 |
display: context === 'front' ? 'none' : 'flex', |
| 48 |
flexDirection: 'column', |
| 49 |
alignItems: 'center', |
| 50 |
width: '100%', |
| 51 |
fontSize: '12px', |
| 52 |
lineHeight: '1', |
| 53 |
position: 'relative', |
| 54 |
paddingTop: hasFooter ? 0 : '4px', |
| 55 |
marginBottom: hasFooter || inEditor ? 0 : '-16px', |
| 56 |
height: hasFooter && !inEditor ? 0 : '32px', |
| 57 |
}} |
| 58 |
> |
| 59 |
{/* bg 50% height at top */} |
| 60 |
{!hasFooter && ( |
| 61 |
<div |
| 62 |
style={{ |
| 63 |
backgroundColor: bgTop, |
| 64 |
height: '50%', |
| 65 |
position: 'absolute', |
| 66 |
top: 0, |
| 67 |
left: 0, |
| 68 |
right: 0, |
| 69 |
}} |
| 70 |
aria-hidden="true" |
| 71 |
/> |
| 72 |
)} |
| 73 |
{/* span is used to avoid theme button styling */} |
| 74 |
<span |
| 75 |
role={inEditor ? 'presentation' : 'button'} |
| 76 |
tabIndex={inEditor ? -1 : 0} |
| 77 |
className="cbp-see-more-simple-btn cbp-see-more-simple-btn-hover" |
| 78 |
style={{ |
| 79 |
color, |
| 80 |
backgroundColor: bg, |
| 81 |
padding: '6px 14px', |
| 82 |
cursor: 'default', |
| 83 |
position: 'relative', |
| 84 |
borderRadius: '6px', |
| 85 |
transform: hasFooter ? 'translateY(-50%)' : undefined, |
| 86 |
}} |
| 87 |
> |
| 88 |
{seeMore} |
| 89 |
</span> |
| 90 |
</div> |
| 91 |
); |
| 92 |
}; |
| 93 |
|
