Merge remote-tracking branch 'origin/759-finalise-vuetify-app-as-spa' into...

Merge remote-tracking branch 'origin/759-finalise-vuetify-app-as-spa' into 759-finalise-vuetify-app-as-spa

aleksis/core/assets/components/LegacyBaseTemplate.vue

+<!--
+  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() {

aleksis/core/assets/components/Parent.vue

+<!-- Parent template for Vue router views -->
+
 <template>
   <router-view></router-view>
 </template>