diff --git a/aleksis/core/assets/components/LegacyBaseTemplate.vue b/aleksis/core/assets/components/LegacyBaseTemplate.vue index a295a24ffe104a5368f7e1a1bdae9f3108010134..b1dc8e215de0afc9238cce8df57dc17daa3cda37 100644 --- a/aleksis/core/assets/components/LegacyBaseTemplate.vue +++ b/aleksis/core/assets/components/LegacyBaseTemplate.vue @@ -1,3 +1,15 @@ +<!-- + Base component to load legacy views from Django. + + It loads the legacy view into an iframe and attaches some utility + code to it. The legacy application and the new Vue application can + communicate with each other through a message channel. + + This helps during the migration from the pure SSR Django application + in AlekSIS 2.x to the pure Vue and GraphQL based application. + It will be removed once legacy view get unsupported. +--> + <template> <div class="position: relative;"> <iframe @@ -27,15 +39,18 @@ export default { }, }, methods: { + /** Receives a message from the legacy app inside the iframe */ receiveMessage(event) { - if (!event.data.height) { - return; + if (event.data.height) { + // The iframe communicated us its render height + // Set iframe to full height to prevent an inner scroll bar + this.iFrameHeight = event.data.height; + this.$root.contentLoading = false; } - this.$root.contentLoading = false; - this.iFrameHeight = event.data.height; }, + /** Handle iframe data after inner page loaded */ load() { - // Write new location of iframe back to Vue Router and title of iframe to SPA window + // 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/, ""); @@ -48,20 +63,24 @@ export default { this.$router.push(path); } - // Show loader if iframe starts to change it's content, even if the $route stays the same + // Show loader if iframe starts to change its content, even if the $route stays the same this.$refs.contentIFrame.contentWindow.onpagehide = () => { this.$root.contentLoading = true; }; + + // Write title of iframe to SPA window const title = this.$refs.contentIFrame.contentWindow.document.title; this.$root.$setPageTitle(title); }, }, watch: { $route() { + // Show loading animation once route changes this.$root.contentLoading = true; }, }, mounted() { + // Subscribe to message channel to receive height from iframe window.addEventListener("message", this.receiveMessage); }, beforeDestroy() { diff --git a/aleksis/core/assets/components/Parent.vue b/aleksis/core/assets/components/Parent.vue index c6d90c52895a1e9fdff02d657bcdac9b00ffdf4b..5d0501418b6480fb5b6a069417fd92291dd50a32 100644 --- a/aleksis/core/assets/components/Parent.vue +++ b/aleksis/core/assets/components/Parent.vue @@ -1,3 +1,5 @@ +<!-- Parent template for Vue router views --> + <template> <router-view></router-view> </template>