Update: Make reload function configurable

CarbonPackages · Nov 7, 2024 · 3cebef8 · 3cebef8
1 parent bde76a2
commit 3cebef8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/Configuration/Settings.GeoMap.yaml b/Configuration/Settings.GeoMap.yaml
@@ -1,7 +1,9 @@
 Carbon:
   GeoMap:
+    reloadFunction: 'window.location.reload()' # JavaScript function to reload the map
+    reloadButtonLocation: 'after' # after or inside
     defaultCountry: CH # ISO-Code from country
-    defaultPinColor: '#009fe3' # Hex-Color
+    defaultPinColor: '#009fe3' # Any valid CSS color
     slipstream:
       css: true
       js: true

diff --git a/Resources/Private/Fusion/Presentation/Map.fusion b/Resources/Private/Fusion/Presentation/Map.fusion
@@ -12,6 +12,8 @@ prototype(Carbon.GeoMap:Presentation.Map) < prototype(Neos.Fusion:Component) {
     zoom = null
 
     showReloadButton = false
+    reloadFunction = ${Configuration.setting('Carbon.GeoMap.reloadFunction')}
+    reloadButtonLocation = ${Configuration.setting('Carbon.GeoMap.reloadButtonLocation')}
 
     coordinates = null
 
@@ -49,11 +51,11 @@ prototype(Carbon.GeoMap:Presentation.Map) < prototype(Neos.Fusion:Component) {
             <div
                 class="carbon-geomap__canvas"
                 data-effect={Type.isString(props.effect) ? props.effect : null}
-                style={"aspect-ratio:" + props.aspectRatio}>
+                style={"aspect-ratio:" + props.aspectRatio}
+            >
+                {props.reloadButtonLocation == 'inside' ? private.reload : ''}
             </div>
-            <button class="carbon-geomap__reload-button" @if={props.showReloadButton} type="button" onClick="window.location.reload()">
-                {Carbon.Backend.translate('reloadMap', 'Reload map', [], 'Main', 'Carbon.GeoMap')}
-            </button>
+            {props.reloadButtonLocation == 'after' ? private.reload : ''}
             <div class="carbon-geomap__addresses" @if={props.content}>{props.content}</div>
         </div>
     `