Skip to content

Commit 4b00ab0

Browse files
author
prconcepcion
committed
allow dynamic content in map location
1 parent f15ef35 commit 4b00ab0

File tree

3 files changed

+50
-10
lines changed

3 files changed

+50
-10
lines changed

src/block/map/edit.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
PanelAdvancedSettings,
2424
ResizerTooltip,
2525
StyleControl,
26+
getDynamicContent,
2627
} from '~stackable/components'
2728
import { useDeviceType } from '~stackable/hooks'
2829
import {
@@ -104,6 +105,7 @@ const Edit = props => {
104105

105106
const { stackable_google_maps_api_key: apiKey } = settings
106107
const userCanManageApiKey = useMemo( () => currentUserHasCapability( 'manage_options' ), [] )
108+
const mapAddress = address.startsWith( '!#stk_dynamic/' ) ? getDynamicContent( address ) : address
107109

108110
// This just forces the tooltip to update.
109111
const [ , setResizingHeight ] = useState( '' )
@@ -243,6 +245,9 @@ const Edit = props => {
243245
// Try geocoding the address.
244246
const [ useGeocoding, setUseGeocoding ] = useState( true )
245247
const geocodeAddress = useCallback( debounce( address => {
248+
if ( address.startsWith( '!#stk_dynamic/' ) ) {
249+
address = getDynamicContent( address )
250+
}
246251
if ( useGeocoding ) {
247252
geocoderRef.current.geocode( {
248253
address,
@@ -291,6 +296,7 @@ const Edit = props => {
291296
label={ __( 'Location', i18n ) }
292297
attribute="address"
293298
placeholder={ __( 'Enter an address or location', i18n ) }
299+
isDynamic={ true }
294300
/>
295301
</>
296302
) : (
@@ -537,7 +543,7 @@ const Edit = props => {
537543
) : (
538544
<iframe
539545
title={ __( 'Embedded content from Google Map Platform.', i18n ) }
540-
src={ `https://maps.google.com/maps?q=${ address || DEFAULT_ADDRESS }&t=&z=${ zoom || DEFAULT_ZOOM }&ie=UTF8&output=embed` }
546+
src={ `https://maps.google.com/maps?q=${ mapAddress || DEFAULT_ADDRESS }&t=&z=${ zoom || DEFAULT_ZOOM }&ie=UTF8&output=embed` }
541547
frameBorder="0"
542548
/>
543549
) }

src/block/map/editor.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737
}
3838
}
3939

40+
.stk-control__location-control {
41+
display: flex;
42+
43+
> :not(.stk--has-dynamic-content) {
44+
.stk-dynamic-content-control__button {
45+
margin-top: 23px;
46+
}
47+
}
48+
49+
.stk-control__reset-button {
50+
position: static;
51+
margin-left: 2px;
52+
margin-right: 2px;
53+
}
54+
}
55+
4056
.stk-block-map__api-key-notice {
4157
margin: 0 0 16px;
4258
}

src/block/map/location-control.js

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* External dependencies
33
*/
44
import { i18n } from 'stackable'
5+
import { DynamicContentControl, useDynamicContentControlProps } from '~stackable/components'
56

67
/**
78
* WordPress dependencies
@@ -20,6 +21,14 @@ import {
2021
const LocationControl = props => {
2122
const [ waitForGoogle, setWaitForGoogle ] = useState( 0 )
2223

24+
const dynamicContentProps = useDynamicContentControlProps( {
25+
value: props.value,
26+
onChange: value => {
27+
props.onTextChange( value )
28+
},
29+
isFormatType: false,
30+
} )
31+
2332
useEffect( () => {
2433
if ( ! window?.google?.maps ) {
2534
const interval = setInterval( () => {
@@ -54,21 +63,30 @@ const LocationControl = props => {
5463
}, [ ref.current, waitForGoogle ] )
5564

5665
return (
57-
<TextControl
58-
label={ __( 'Location', i18n ) }
59-
ref={ ref }
60-
value={ props.value }
61-
help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
62-
onChange={ value => {
63-
props.onTextChange( value )
64-
} }
65-
/>
66+
<div className="stk-control__location-control">
67+
<DynamicContentControl
68+
enable={ true }
69+
hasPanelModifiedIndicator={ true }
70+
{ ...dynamicContentProps }
71+
>
72+
<TextControl
73+
label={ __( 'Location', i18n ) }
74+
ref={ ref }
75+
value={ props.value }
76+
help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
77+
onChange={ value => {
78+
props.onTextChange( value )
79+
} }
80+
/>
81+
</DynamicContentControl>
82+
</div>
6683
)
6784
}
6885

6986
LocationControl.defaultProps = {
7087
onChange: null,
7188
value: '',
89+
hasPanelModifiedIndicator: true,
7290
}
7391

7492
export default LocationControl

0 commit comments

Comments
 (0)