fix(@dpc-sdp/ripple-ui-maps): move isFullScreen check and add support…

…sFullScreen

examples/nuxt-app/test/features/maps/maps.feature

@@ -119,3 +119,15 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And I wait 2 seconds
     Then the map matches the image snapshot "map-custom-default-extent"
+
+  @mockserver
+  Scenario: Map can be viewed fullscreen
+    Given I load the page fixture with "/maps/basic-page"
+    And the page endpoint for path "/map" returns the loaded fixture
+    And I visit the page "/map"
+    When I click the view fullscreen button
+    And I wait 100 milliseconds
+    Then the map should be fullscreen
+    When I click the exit fullscreen button
+    And I wait 100 milliseconds
+    Then the map should not be fullscreen

examples/nuxt-app/test/support/step_definitions/index.ts

@@ -1,5 +1,7 @@
+import 'cypress-real-events'
 import '@dpc-sdp/ripple-test-utils/step_definitions'
 import '@frsource/cypress-plugin-visual-regression-diff'
+
 Cypress.on('uncaught:exception', (err) => {
   // https://stackoverflow.com/a/50387233
   // Ignore Resize observer loop issue in expand search filters for now

packages/ripple-test-utils/package.json

@@ -28,6 +28,7 @@
     "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@testing-library/cypress": "^10.0.1",
     "cypress": "^13.6.6",
+    "cypress-real-events": "^1.13.0",
     "mockttp": "^3.9.1",
     "start-server-and-test": "^2.0.3"
   }

packages/ripple-test-utils/step_definitions/components/maps.ts

@@ -237,3 +237,23 @@ Given('the following default extent is used', (dataTable: DataTable) => {
     ])
   })
 })
+
+When('I click the view fullscreen button', () => {
+  cy.get('.rpl-map__control button[title="View full screen"]').realClick()
+})
+
+When('I click the exit fullscreen button', () => {
+  cy.get('.rpl-map__control button[title="Exit full screen"]').realClick()
+})
+
+Then('the map should be fullscreen', () => {
+  cy.document().then((doc) => {
+    expect(doc.fullscreenElement).to.not.be.null
+  })
+})
+
+Then('the map should not be fullscreen', () => {
+  cy.document().then((doc) => {
+    expect(doc.fullscreenElement).to.be.null
+  })
+})

packages/ripple-ui-maps/src/components/map/RplMap.vue

@@ -16,7 +16,6 @@ import {
   watch,
   nextTick
 } from 'vue'
-import { useFullscreen } from '@vueuse/core'
 import { withDefaults, defineExpose } from '@vue/composition-api'
 import { Map } from 'ol'
 import { Zoom } from 'ol/control'
@@ -140,10 +139,14 @@ const selectedPinStyle = (feature, style) => {
   return style
 }
 
-const { isFullscreen } = useFullscreen()
-
-const { onHomeClick, onZoomInClick, onZoomOutClick, onFullScreenClick } =
-  useMapControls(mapRef)
+const {
+  onHomeClick,
+  onZoomInClick,
+  onZoomOutClick,
+  onFullScreenClick,
+  isFullScreen,
+  supportsFullScreen
+} = useMapControls(mapRef)
 
 const mapFeatures = computed(() => {
   if (Array.isArray(props.features)) {
@@ -288,6 +291,10 @@ onMounted(() => {
 })
 
 const noResultsRef = ref(null)
+
+const fullScreenLabel = computed(() =>
+  isFullScreen.value ? 'Exit full screen' : 'View full screen'
+)
 </script>
 
 <template>
@@ -406,9 +413,12 @@ const noResultsRef = ref(null)
           </RplMapPopUp>
         </ol-overlay>
       </slot>
-      <div class="rpl-map__control rpl-map__control-fullscreen">
-        <button title="View map fullscreen" @click="onFullScreenClick">
-          <RplIcon v-if="isFullscreen" name="icon-cancel"></RplIcon>
+      <div
+        v-if="supportsFullScreen"
+        class="rpl-map__control rpl-map__control-fullscreen"
+      >
+        <button :title="fullScreenLabel" @click="onFullScreenClick">
+          <RplIcon v-if="isFullScreen" name="icon-cancel"></RplIcon>
           <RplIcon v-else name="icon-enlarge" size="m"></RplIcon>
         </button>
       </div>

packages/ripple-ui-maps/src/composables/useMapControls.ts

@@ -1,10 +1,14 @@
-import { inject } from 'vue'
+import { inject, ref, onMounted } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { easeOut } from 'ol/easing'
 import { fitDefaultExtent } from './../components/map/utils.ts'
 
 export default (mapRef) => {
   const { deadSpace, defaultExtent } = inject('rplMapInstance')
 
+  const isFullScreen = ref(false)
+  const supportsFullScreen = ref(false)
+
   /**
    * @param {number} delta Zoom delta.
    * @private
@@ -50,7 +54,7 @@ export default (mapRef) => {
    * @param {Document} doc The root document to check.
    * @return {boolean} Element is currently in fullscreen.
    */
-  function isFullScreen(doc) {
+  function isFullScreenActive(doc) {
     return !!(doc['webkitIsFullScreen'] || doc.fullscreenElement)
   }
 
@@ -100,7 +104,7 @@ export default (mapRef) => {
       return
     }
 
-    if (isFullScreen(doc)) {
+    if (isFullScreenActive(doc)) {
       exitFullScreen(doc)
     } else {
       const element = map.getTargetElement()
@@ -125,10 +129,27 @@ export default (mapRef) => {
     handleFullScreen()
   }
 
+  function handleFullScreenChange() {
+    if (!mapRef.value.map) return
+
+    const doc = mapRef.value.map.getOwnerDocument()
+    isFullScreen.value = isFullScreenActive(doc)
+  }
+
+  onMounted(() => {
+    // Listen to fullscreen change events and update isFullScreen
+    useEventListener(document, 'fullscreenchange', handleFullScreenChange)
+    useEventListener(document, 'webkitfullscreenchange', handleFullScreenChange)
+
+    supportsFullScreen.value = isFullScreenSupported(document)
+  })
+
   return {
     onHomeClick,
     onZoomInClick,
     onZoomOutClick,
-    onFullScreenClick
+    onFullScreenClick,
+    supportsFullScreen,
+    isFullScreen
   }
 }