From f9dd249a2172658ff30ef81b86222946346bc21f Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Thu, 4 Jul 2024 13:54:10 +0200
Subject: [PATCH 1/6] PB-704 : remove embed shortlink generation

the old viewer was letting the param go unchanged/unshorten, and this will ease the update of the iframe code snippet (no need to trigger a shortlink for every little change in the preview)
---
 .../menu/components/share/MenuShareEmbed.vue  | 16 +++++----------
 .../components/share/MenuShareSection.vue     |  3 +--
 src/store/modules/share.store.js              | 20 -------------------
 3 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index c1af4bea1..9c2fea3a9 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -9,12 +9,13 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
 import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
-import { computed, nextTick, ref, toRefs } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import log from '@/utils/logging'
+import { transformUrlMapToEmbed } from '@/utils/utils'
 
 /**
  * Different pre-defined sizes that an iFrame can take
@@ -45,14 +46,6 @@ const EmbedSizes = {
 
 useTippyTooltip('.menu-share-embed [data-tippy-content]')
 
-const props = defineProps({
-    shortLink: {
-        type: String,
-        default: null,
-    },
-})
-const { shortLink } = toRefs(props)
-
 const embedInput = ref(null)
 const showEmbedSharing = ref(false)
 const showPreviewModal = ref(false)
@@ -64,6 +57,7 @@ const customSize = ref({
 })
 const copied = ref(false)
 
+const embedSource = ref(transformUrlMapToEmbed(window.location.href))
 const embedPreviewModalWidth = computed(() => {
     // Uses the iframe's width as maximal width for the entire modal window
     let style = { 'max-width': iFrameWidth.value }
@@ -96,7 +90,7 @@ const iFrameStyle = computed(
 )
 const iFrameLink = computed(
     () =>
-        `<iframe src="${shortLink.value}" style="${iFrameStyle.value}" allow="geolocation"></iframe>`
+        `<iframe src="${embedSource.value}" style="${iFrameStyle.value}" allow="geolocation"></iframe>`
 )
 const buttonIcon = computed(() => {
     if (copied.value) {
@@ -270,7 +264,7 @@ async function copyValue() {
                     <iframe
                         ref="iFramePreview"
                         :title="$t('embed_map')"
-                        :src="shortLink"
+                        :src="embedSource"
                         :style="iFrameStyle"
                         allow="geolocation"
                     ></iframe>
diff --git a/src/modules/menu/components/share/MenuShareSection.vue b/src/modules/menu/components/share/MenuShareSection.vue
index d9f8290de..7f5c5d573 100644
--- a/src/modules/menu/components/share/MenuShareSection.vue
+++ b/src/modules/menu/components/share/MenuShareSection.vue
@@ -19,7 +19,7 @@
                 :small="compact"
             />
         </div>
-        <MenuShareEmbed :short-link="embeddedShortLink" class="menu-share-embed border-top" />
+        <MenuShareEmbed class="menu-share-embed border-top" />
     </MenuSection>
 </template>
 
@@ -55,7 +55,6 @@ export default {
     computed: {
         ...mapState({
             shortLink: (state) => state.share.shortLink,
-            embeddedShortLink: (state) => state.share.embeddedShortLink,
             isSectionShown: (state) => state.share.isMenuSectionShown,
             isTrackingGeolocation: (state) =>
                 state.geolocation.active && state.geolocation.tracking,
diff --git a/src/store/modules/share.store.js b/src/store/modules/share.store.js
index 0ce4f17d5..24a0cedf9 100644
--- a/src/store/modules/share.store.js
+++ b/src/store/modules/share.store.js
@@ -1,6 +1,5 @@
 import { createShortLink } from '@/api/shortlink.api'
 import log from '@/utils/logging'
-import { transformUrlMapToEmbed } from '@/utils/utils'
 
 export default {
     state: {
@@ -12,11 +11,6 @@ export default {
          * @type String
          */
         shortLink: null,
-        /**
-         * Same thing as shortLink, but with the flag embed=true send to the backend before
-         * shortening
-         */
-        embeddedShortLink: null,
         /**
          * The state of the shortlink share menu section. As we need to be able to change this
          * whenever the user moves the map, and it should only be done within mutations.
@@ -37,16 +31,6 @@ export default {
                 log.error('Error while creating short link for', window.location.href, err)
                 commit('setShortLink', { shortLink: window.location.href, dispatcher })
             }
-            const embedUrl = transformUrlMapToEmbed(window.location.href)
-            try {
-                const embeddedShortLink = await createShortLink(embedUrl)
-                if (embeddedShortLink) {
-                    commit('setEmbeddedShortLink', { shortLink: embeddedShortLink, dispatcher })
-                }
-            } catch (err) {
-                log.error('Error while creating embedded short link for', embedUrl, err)
-                commit('setEmbeddedShortLink', { shortLink: embedUrl, dispatcher })
-            }
         },
         closeShareMenuAndRemoveShortLinks({ commit, dispatch }, { dispatcher }) {
             commit('setIsMenuSectionShown', { show: false, dispatcher })
@@ -57,16 +41,12 @@ export default {
         },
         clearShortLinks({ commit }, { dispatcher }) {
             commit('setShortLink', { shortLink: null, dispatcher })
-            commit('setEmbeddedShortLink', { shortLink: null, dispatcher })
         },
     },
     mutations: {
         setShortLink(state, { shortLink }) {
             state.shortLink = shortLink
         },
-        setEmbeddedShortLink(state, { shortLink }) {
-            state.embeddedShortLink = shortLink
-        },
         setIsMenuSectionShown(state, { show }) {
             state.isMenuSectionShown = show
         },

From 431ae78af76ddfba597d5b9e4efcff8a7318512a Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Thu, 4 Jul 2024 13:54:51 +0200
Subject: [PATCH 2/6] PB-704 : cleanup old i18n use

---
 .../menu/components/share/MenuShareEmbed.vue  | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index 9c2fea3a9..efc41242f 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
 import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
 import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
@@ -57,6 +58,8 @@ const customSize = ref({
 })
 const copied = ref(false)
 
+const { t } = useI18n()
+
 const embedSource = ref(transformUrlMapToEmbed(window.location.href))
 const embedPreviewModalWidth = computed(() => {
     // Uses the iframe's width as maximal width for the entire modal window
@@ -143,7 +146,7 @@ async function copyValue() {
                 :class="{ 'text-primary': showEmbedSharing }"
                 :icon="`caret-${showEmbedSharing ? 'down' : 'right'}`"
             />
-            <span class="px-1">{{ $t('share_more') }}</span>
+            <span class="px-1">{{ t('share_more') }}</span>
         </a>
         <CollapseTransition :duration="200">
             <div v-show="showEmbedSharing" class="p-2 ps-4 card border-light">
@@ -176,17 +179,17 @@ async function copyValue() {
                         data-cy="menu-share-embed-preview-button"
                         @click="togglePreviewModal"
                     >
-                        {{ $t('show_more_options') }}
+                        {{ t('show_more_options') }}
                     </button>
                 </div>
                 <!-- eslint-disable vue/no-v-html-->
-                <div class="py-2" v-html="$t('share_disclaimer')"></div>
+                <div class="py-2" v-html="t('share_disclaimer')"></div>
                 <!-- eslint-enable vue/no-v-html-->
             </div>
         </CollapseTransition>
         <ModalWithBackdrop
             v-if="showPreviewModal"
-            :title="$t('embed_map')"
+            :title="t('embed_map')"
             fluid
             @close="togglePreviewModal"
         >
@@ -204,7 +207,7 @@ async function copyValue() {
                             class="embed-preview-modal-size-selector-option"
                             :data-cy="`menu-share-embed-iframe-size-${size.i18nKey.toLowerCase()}`"
                         >
-                            {{ $t(size.i18nKey) }}
+                            {{ t(size.i18nKey) }}
                         </option>
                     </select>
                     <div v-if="isPreviewSizeCustom" class="d-flex flex-row ms-2">
@@ -243,7 +246,7 @@ async function copyValue() {
                                     data-cy="menu-share-embed-iframe-full-width"
                                 />
                                 <label class="form-check-label" for="fullWidthCheckbox">
-                                    {{ $t('full_width') }}
+                                    {{ t('full_width') }}
                                 </label>
                             </div>
                         </div>
@@ -262,15 +265,14 @@ async function copyValue() {
                 <!-- so I've opted to keep this piece of code for a better user experience -->
                 <div class="d-flex justify-content-center mb-2">
                     <iframe
-                        ref="iFramePreview"
-                        :title="$t('embed_map')"
+                        :title="t('embed_map')"
                         :src="embedSource"
                         :style="iFrameStyle"
                         allow="geolocation"
                     ></iframe>
                 </div>
                 <!-- eslint-disable vue/no-v-html-->
-                <div class="small text-wrap text-center" v-html="$t('share_disclaimer')"></div>
+                <div class="small text-wrap text-center" v-html="t('share_disclaimer')"></div>
                 <!-- eslint-enable vue/no-v-html-->
             </div>
         </ModalWithBackdrop>

From fdbbc8619823fa744e005f36e26d8e5787d8c971 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Thu, 4 Jul 2024 13:56:05 +0200
Subject: [PATCH 3/6] PB-704 : add new change event triggered to iframe parent

it will be triggered when route query changes, as it is not possible with VueJS to get the current SRC attribute of an iframe (it always returns the value that was set with :src, without updating it...)

This way we can receive the new state of the iframe and update the code snippet accordingly
---
 src/api/iframeFeatureEvent.api.js             | 30 ++++++++++++++++++-
 .../menu/components/share/MenuShareEmbed.vue  | 12 ++++++++
 src/views/EmbedView.vue                       |  7 ++++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/api/iframeFeatureEvent.api.js b/src/api/iframeFeatureEvent.api.js
index 5f14753ac..979ffd6ed 100644
--- a/src/api/iframeFeatureEvent.api.js
+++ b/src/api/iframeFeatureEvent.api.js
@@ -1,5 +1,7 @@
 import log from '@/utils/logging.js'
 
+const targetWindow = parent ?? window.parent ?? window.opener ?? window.top
+
 /**
  * Sends information to the iFrame's parent about features, through the use of the postMessage
  * HTML/Javascript API.
@@ -7,9 +9,9 @@ import log from '@/utils/logging.js'
  * @param {LayerFeature[]} features List of features for which we want to send information to the
  *   iFrame's parent
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
+ * @see https://codepen.io/geoadmin/pen/yOBzqM?editors=0010
  */
 export function sendFeatureInformationToIFrameParent(features) {
-    const targetWindow = parent ?? window.parent ?? window.opener ?? window.top
     if (!targetWindow) {
         log.debug(
             'Embed view loaded as root document of a browser tab, cannot communicate with opener/parent'
@@ -43,3 +45,29 @@ export function sendFeatureInformationToIFrameParent(features) {
         // so let's not implement this format in the new viewer and see what happens.
     })
 }
+
+/**
+ * Is used to notify the parent the state of the app has changed. While embedding with VueJS, it's
+ * not possible to watch the iFrame src attribute, so an event is required to be notified of a
+ * children change.
+ *
+ * This is mainly used so that the iframe generator (menu share -> embed) can change the iframe
+ * snippet if the user decide to move / zoom the map while looking at the preview
+ */
+export function sendChangeEventToParent() {
+    if (!targetWindow) {
+        log.debug(
+            'Embed view loaded as root document of a browser tab, cannot communicate with opener/parent'
+        )
+        return
+    }
+    targetWindow.postMessage(
+        {
+            type: 'gaChange',
+            payload: {
+                newUrl: window.location.href,
+            },
+        },
+        '*'
+    )
+}
diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index efc41242f..d4827a267 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -117,6 +117,18 @@ function toggleEmbedSharing() {
 
 function togglePreviewModal() {
     showPreviewModal.value = !showPreviewModal.value
+    if (showPreviewModal.value) {
+        window.addEventListener('message', onPreviewChange)
+    } else {
+        window.removeEventListener('message', onPreviewChange)
+    }
+}
+
+function onPreviewChange(e) {
+    if (e?.data?.type === 'gaChange') {
+        // see iframeFeatureEvent.api.js -> sendChangeEventToParent
+        embedSource.value = e.data.payload.newUrl
+    }
 }
 
 async function copyValue() {
diff --git a/src/views/EmbedView.vue b/src/views/EmbedView.vue
index 68c6990aa..d6042bdba 100644
--- a/src/views/EmbedView.vue
+++ b/src/views/EmbedView.vue
@@ -1,7 +1,9 @@
 <script setup>
-import { computed, onBeforeMount, onMounted } from 'vue'
+import { computed, onBeforeMount, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 
+import { sendChangeEventToParent } from '@/api/iframeFeatureEvent.api'
 import I18nModule from '@/modules/i18n/I18nModule.vue'
 import InfoboxModule from '@/modules/infobox/InfoboxModule.vue'
 import MapFooter from '@/modules/map/components/footer/MapFooter.vue'
@@ -15,6 +17,7 @@ import log from '@/utils/logging'
 const dispatcher = { dispatcher: 'EmbedView.vue' }
 
 const store = useStore()
+const route = useRoute()
 
 const is3DActive = computed(() => store.state.cesium.active)
 
@@ -25,6 +28,8 @@ onBeforeMount(() => {
 onMounted(() => {
     log.info(`Embedded map view mounted`)
 })
+
+watch(() => route.query, sendChangeEventToParent)
 </script>
 
 <template>

From 10e66040bcd71508a89c7b06d9be088f3754bfaf Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Thu, 4 Jul 2024 15:08:45 +0200
Subject: [PATCH 4/6] PB-704 : remove wait on shortlink generation in e2e test

iframe do not use a shortlink anymore
---
 tests/cypress/tests-e2e/shareShortLink.cy.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/tests/cypress/tests-e2e/shareShortLink.cy.js b/tests/cypress/tests-e2e/shareShortLink.cy.js
index 96eee0445..6d77e2b28 100644
--- a/tests/cypress/tests-e2e/shareShortLink.cy.js
+++ b/tests/cypress/tests-e2e/shareShortLink.cy.js
@@ -171,14 +171,8 @@ describe('Testing the share menu', () => {
                 cy.get('[data-cy="menu-share-section"]').click()
                 cy.get('[data-cy="menu-share-embed-button"]').click()
             })
-            it('uses the embedded shortlink url to generate the iFrame code snippet', () => {
-                cy.get('[data-cy="menu-share-embed-simple-iframe-snippet"]')
-                    .should('contain.value', dummyEmbeddedShortLink)
-                    .should('not.contain.value', dummyShortLink)
-            })
             it('enables the user to choose pre-made sizes for the generated iframe code snippet', () => {
                 cy.get('[data-cy="menu-share-embed-preview-button"]').click()
-                cy.wait('@dummyShortLinkAccess')
                 // checking that the iframe code snippet is set to the Small size by default
                 checkIFrameSnippetSize(400, 300)
                 // Checking that the name of the size is displayed in the selector, then switching to the Medium size
@@ -195,7 +189,6 @@ describe('Testing the share menu', () => {
             })
             it('enables the user to customize the size of the generated iframe code snippet', () => {
                 cy.get('[data-cy="menu-share-embed-preview-button"]').click()
-                cy.wait('@dummyShortLinkAccess')
                 cy.get('[data-cy="menu-share-embed-iframe-custom-width"]').should('not.exist')
                 cy.get('[data-cy="menu-share-embed-iframe-custom-height"]').should('not.exist')
                 cy.get('[data-cy="menu-share-embed-iframe-size-selector"]').select('Custom size')
@@ -217,7 +210,6 @@ describe('Testing the share menu', () => {
             })
             it('enables the user to create a full width iframe code snippet', () => {
                 cy.get('[data-cy="menu-share-embed-preview-button"]').click()
-                cy.wait('@dummyShortLinkAccess')
                 cy.get('[data-cy="menu-share-embed-iframe-size-selector"]').select('Custom size')
                 cy.get('[data-cy="menu-share-embed-iframe-custom-width"]')
                     .should('be.visible')

From 07b207ac4281299de3f1b12451eb768cc94546af Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 12 Jul 2024 13:45:42 +0200
Subject: [PATCH 5/6] PB-704 : adding an enum to keep track of iframe event

and a bit of documentation on what each event does
---
 src/api/iframeFeatureEvent.api.js             | 27 ++++++++++++++++---
 .../menu/components/share/MenuShareEmbed.vue  |  3 ++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/api/iframeFeatureEvent.api.js b/src/api/iframeFeatureEvent.api.js
index 979ffd6ed..482765e4a 100644
--- a/src/api/iframeFeatureEvent.api.js
+++ b/src/api/iframeFeatureEvent.api.js
@@ -1,7 +1,28 @@
-import log from '@/utils/logging.js'
+import log from '@/utils/logging'
 
 const targetWindow = parent ?? window.parent ?? window.opener ?? window.top
 
+/**
+ * All events fired by the iFrame postMessage implementation.
+ *
+ * @enum
+ */
+export const IFRAME_EVENTS = {
+    /**
+     * Event raised whenever the app changes its state (the URL changed).
+     *
+     * Payload of this event : a String with the new URL of the viewer
+     */
+    CHANGE: 'gaChange',
+    /**
+     * Event raised when a feature has been selected. Will fire as many events as there are feature
+     * selected on the map (won't bundle all features into one event)
+     *
+     * Payload of this event : a JSON containing the layerId and featureId of the selected feature
+     */
+    FEATURE_SELECTION: 'gaFeatureSelection',
+}
+
 /**
  * Sends information to the iFrame's parent about features, through the use of the postMessage
  * HTML/Javascript API.
@@ -28,7 +49,7 @@ export function sendFeatureInformationToIFrameParent(features) {
         targetWindow.postMessage(
             {
                 // see codepen above, for backward compatibility reasons we need to use the same type as mf-geoadmin3
-                type: 'gaFeatureSelection',
+                type: IFRAME_EVENTS.FEATURE_SELECTION,
                 payload: {
                     layerId: feature.layer.id,
                     featureId: feature.id,
@@ -63,7 +84,7 @@ export function sendChangeEventToParent() {
     }
     targetWindow.postMessage(
         {
-            type: 'gaChange',
+            type: IFRAME_EVENTS.CHANGE,
             payload: {
                 newUrl: window.location.href,
             },
diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index d4827a267..212c49fd0 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -12,6 +12,7 @@ import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTrans
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { IFRAME_EVENTS } from '@/api/iframeFeatureEvent.api'
 import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
@@ -125,7 +126,7 @@ function togglePreviewModal() {
 }
 
 function onPreviewChange(e) {
-    if (e?.data?.type === 'gaChange') {
+    if (e?.data?.type === IFRAME_EVENTS.CHANGE) {
         // see iframeFeatureEvent.api.js -> sendChangeEventToParent
         embedSource.value = e.data.payload.newUrl
     }

From f756533726db9e3317d2ecbc790a9990b7f3d4f1 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 12 Jul 2024 13:53:44 +0200
Subject: [PATCH 6/6] PB-704 : also change the main iframe code snippet on
 route change

---
 src/modules/menu/components/share/MenuShareEmbed.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index 212c49fd0..5adbd4a5b 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -9,8 +9,9 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
 import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 
 import { IFRAME_EVENTS } from '@/api/iframeFeatureEvent.api'
 import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
@@ -60,6 +61,7 @@ const customSize = ref({
 const copied = ref(false)
 
 const { t } = useI18n()
+const route = useRoute()
 
 const embedSource = ref(transformUrlMapToEmbed(window.location.href))
 const embedPreviewModalWidth = computed(() => {
@@ -144,6 +146,13 @@ async function copyValue() {
         log.error(`Failed to copy to clipboard:`, error)
     }
 }
+
+watch(
+    () => route.query,
+    () => {
+        embedSource.value = transformUrlMapToEmbed(window.location.href)
+    }
+)
 </script>
 
 <template>