Merge pull request #993 from dpc-sdp/bugfix/R20-1730

[R20-1730] Fixed icon not changing when exiting fullscreen map via keyboard
dpc-sdp · Jan 21, 2024 · 0ff6b3a · 0ff6b3a
2 parents 64340ac + 3e79adc
commit 0ff6b3a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 15 deletions.
diff --git a/packages/ripple-ui-maps/src/components/map/RplMap.vue b/packages/ripple-ui-maps/src/components/map/RplMap.vue
@@ -2,6 +2,7 @@
 import { RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
 import type { IRplMapFeature } from './../../types'
 import { onMounted, onUnmounted, ref, inject, computed, watch } from 'vue'
+import { useFullscreen } from '@vueuse/core'
 import { Map } from 'ol'
 import { Point } from 'ol/geom'
 import Icon from 'ol/style/Icon'
@@ -78,13 +79,10 @@ const center = computed(() => {
   }
 })
 
-const {
-  onHomeClick,
-  onZoomInClick,
-  onZoomOutClick,
-  onFullScreenClick,
-  isFullScreenRef
-} = useMapControls(mapRef, center, props.initialZoom)
+const { isFullscreen } = useFullscreen()
+
+const { onHomeClick, onZoomInClick, onZoomOutClick, onFullScreenClick } =
+  useMapControls(mapRef, center, props.initialZoom)
 
 const mapFeatures = computed(() => {
   if (Array.isArray(props.features)) {
@@ -295,7 +293,7 @@ const noResultsRef = ref(null)
       </slot>
       <div class="rpl-map__control rpl-map__control-fullscreen">
         <button title="View map fullscreen" @click="onFullScreenClick">
-          <RplIcon v-if="isFullScreenRef" name="icon-cancel"></RplIcon>
+          <RplIcon v-if="isFullscreen" name="icon-cancel"></RplIcon>
           <RplIcon v-else name="icon-enlarge" size="m"></RplIcon>
         </button>
       </div>

diff --git a/packages/ripple-ui-maps/src/composables/useMapControls.ts b/packages/ripple-ui-maps/src/composables/useMapControls.ts
@@ -1,9 +1,7 @@
 import { easeOut } from 'ol/easing'
 import { centerMap } from './../components/map/utils.ts'
-import { ref } from 'vue'
-export default (mapRef, center, initialZoom) => {
-  const isFullScreenRef = ref(false)
 
+export default (mapRef, center, initialZoom) => {
   /**
    * @param {number} delta Zoom delta.
    * @private
@@ -98,17 +96,16 @@ export default (mapRef, center, initialZoom) => {
     if (!isFullScreenSupported(doc)) {
       return
     }
+
     if (isFullScreen(doc)) {
       exitFullScreen(doc)
-      isFullScreenRef.value = false
     } else {
       const element = map.getTargetElement()
       if (withKeys) {
         requestFullScreenWithKeys(element)
       } else {
         requestFullScreen(element)
       }
-      isFullScreenRef.value = true
     }
   }
 
@@ -129,7 +126,6 @@ export default (mapRef, center, initialZoom) => {
     onHomeClick,
     onZoomInClick,
     onZoomOutClick,
-    onFullScreenClick,
-    isFullScreenRef
+    onFullScreenClick
   }
 }