| 1 |
import classnames from 'classnames/dedupe'; |
| 2 |
|
| 3 |
import { RichText, useBlockProps } from '@wordpress/block-editor'; |
| 4 |
import { applyFilters } from '@wordpress/hooks'; |
| 5 |
|
| 6 |
import { maybeDecode } from '../../utils/encode-decode'; |
| 7 |
import metadata from './block.json'; |
| 8 |
|
| 9 |
const { name } = metadata; |
| 10 |
|
| 11 |
/** |
| 12 |
* Block Save Class. |
| 13 |
* |
| 14 |
* @param props |
| 15 |
*/ |
| 16 |
export default function BlockSave(props) { |
| 17 |
const { |
| 18 |
height, |
| 19 |
zoom, |
| 20 |
lat, |
| 21 |
lng, |
| 22 |
showZoomButtons, |
| 23 |
showMapTypeButtons, |
| 24 |
showStreetViewButton, |
| 25 |
showFullscreenButton, |
| 26 |
optionScrollWheel, |
| 27 |
gestureHandling, |
| 28 |
optionDraggable, |
| 29 |
styleCustom, |
| 30 |
markers, |
| 31 |
fullHeight, |
| 32 |
} = props.attributes; |
| 33 |
|
| 34 |
let className = 'ghostkit-google-maps'; |
| 35 |
|
| 36 |
// add full height classname. |
| 37 |
if (fullHeight) { |
| 38 |
className = classnames(className, 'ghostkit-google-maps-fullheight'); |
| 39 |
} |
| 40 |
|
| 41 |
className = applyFilters('ghostkit.blocks.className', className, { |
| 42 |
name, |
| 43 |
...props, |
| 44 |
}); |
| 45 |
|
| 46 |
const attrs = { |
| 47 |
className, |
| 48 |
style: { minHeight: height }, |
| 49 |
'data-lat': lat, |
| 50 |
'data-lng': lng, |
| 51 |
'data-zoom': zoom, |
| 52 |
'data-show-zoom-buttons': showZoomButtons ? 'true' : 'false', |
| 53 |
'data-show-map-type-buttons': showMapTypeButtons ? 'true' : 'false', |
| 54 |
'data-show-street-view-button': showStreetViewButton ? 'true' : 'false', |
| 55 |
'data-show-fullscreen-button': showFullscreenButton ? 'true' : 'false', |
| 56 |
'data-option-scroll-wheel': optionScrollWheel ? 'true' : 'false', |
| 57 |
'data-option-draggable': optionDraggable ? 'true' : 'false', |
| 58 |
'data-styles': maybeDecode(styleCustom), |
| 59 |
}; |
| 60 |
|
| 61 |
if (gestureHandling !== 'greedy') { |
| 62 |
attrs['data-gesture-handling'] = gestureHandling; |
| 63 |
} |
| 64 |
|
| 65 |
const blockProps = useBlockProps.save(attrs); |
| 66 |
|
| 67 |
return ( |
| 68 |
<div {...blockProps}> |
| 69 |
{markers |
| 70 |
? markers.map((marker, i) => { |
| 71 |
const thereIsIcon = |
| 72 |
marker.iconImageURL && |
| 73 |
marker.iconImageCustomWidth && |
| 74 |
marker.iconImageWidth && |
| 75 |
marker.iconImageHeight; |
| 76 |
|
| 77 |
const markerData = { |
| 78 |
'data-title': marker.title, |
| 79 |
'data-lat': marker.lat, |
| 80 |
'data-lng': marker.lng, |
| 81 |
'data-address': marker.address, |
| 82 |
}; |
| 83 |
|
| 84 |
if (thereIsIcon) { |
| 85 |
const iconImageCustomHeight = |
| 86 |
marker.iconImageCustomWidth * |
| 87 |
(marker.iconImageHeight / |
| 88 |
marker.iconImageWidth); |
| 89 |
|
| 90 |
markerData['data-icon-url'] = marker.iconImageURL; |
| 91 |
markerData['data-icon-width'] = |
| 92 |
marker.iconImageCustomWidth; |
| 93 |
markerData['data-icon-height'] = |
| 94 |
iconImageCustomHeight; |
| 95 |
} |
| 96 |
|
| 97 |
if ( |
| 98 |
marker.infoWindowText && |
| 99 |
!RichText.isEmpty(marker.infoWindowText) |
| 100 |
) { |
| 101 |
markerData.children = ( |
| 102 |
<div |
| 103 |
key="ghostkit-pro-google-maps-marker-info-window-text" |
| 104 |
className="ghostkit-pro-google-maps-marker-info-window-text" |
| 105 |
style={{ display: 'none' }} |
| 106 |
> |
| 107 |
<RichText.Content |
| 108 |
value={marker.infoWindowText} |
| 109 |
/> |
| 110 |
</div> |
| 111 |
); |
| 112 |
} |
| 113 |
|
| 114 |
const markerName = `marker-${i}`; |
| 115 |
|
| 116 |
return ( |
| 117 |
<div |
| 118 |
key={markerName} |
| 119 |
className="ghostkit-google-maps-marker" |
| 120 |
{...markerData} |
| 121 |
/> |
| 122 |
); |
| 123 |
}) |
| 124 |
: ''} |
| 125 |
</div> |
| 126 |
); |
| 127 |
} |
| 128 |
|
