diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 7bfad512cb98ec185e6fb6b1dec95196d5ec9f61..e9c9c0c9f1494a2a28cc3c839a98749d489e82cf 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -13,6 +13,7 @@ Fixed ~~~~~ * Notifications were not properly shown in the frontend. +* When navigating from legacy to legacy page, the latter would reload once for no reason. `3.1.1` - 2023-07-01 -------------------- diff --git a/aleksis/core/frontend/components/LegacyBaseTemplate.vue b/aleksis/core/frontend/components/LegacyBaseTemplate.vue index 0105952fd08792c2cb4a472465d435a1f94a0eb3..a0521f07ab974428f9bc2cfe0722874d485c6c54 100644 --- a/aleksis/core/frontend/components/LegacyBaseTemplate.vue +++ b/aleksis/core/frontend/components/LegacyBaseTemplate.vue @@ -21,7 +21,7 @@ </message-box> <iframe v-else - :src="'/django' + $route.path + queryString" + :src="iFrameSrc" :height="iFrameHeight + 'px'" class="iframe-fullsize" @load="load" @@ -41,6 +41,7 @@ export default { data: function () { return { iFrameHeight: 0, + iFrameSrc: undefined, }; }, computed: { @@ -53,13 +54,16 @@ export default { }, }, methods: { + getIFrameURL() { + const location = this.$refs.contentIFrame.contentWindow.location; + const url = new URL(location); + return url; + }, /** Handle iframe data after inner page loaded */ load() { // Write new location of iframe back to Vue Router - const location = this.$refs.contentIFrame.contentWindow.location; - const url = new URL(location); - const path = url.pathname.replace(/^\/django/, ""); - const pathWithQueryString = path + encodeURI(url.search); + const path = this.getIFrameURL().pathname.replace(/^\/django/, ""); + const pathWithQueryString = path + encodeURI(this.getIFrameURL().search); const routePath = path.charAt(path.length - 1) === "/" && this.$route.path.charAt(path.length - 1) !== "/" @@ -103,15 +107,33 @@ export default { }, }, watch: { - $route() { + $route(newRoute) { // Show loading animation once route changes this.$root.contentLoading = true; + // Only reload iFrame content when navigation comes from outsite the iFrame + const path = this.getIFrameURL().pathname.replace(/^\/django/, ""); + const routePath = + path.charAt(path.length - 1) === "/" && + newRoute.path.charAt(path.length - 1) !== "/" + ? newRoute.path + "/" + : newRoute.path; + + if (path !== routePath) { + this.$refs.contentIFrame.contentWindow.location = + "/django" + this.$route.path + this.queryString; + } else { + this.$root.contentLoading = false; + } + // Scroll to top only when route changes to not affect form submits etc. // A small duration to avoid flashing of the UI this.$vuetify.goTo(0, { duration: 10 }); }, }, + mounted() { + this.iFrameSrc = "/django" + this.$route.path + this.queryString; + }, name: "LegacyBaseTemplate", }; </script>