Added support for Iframe-based extension interfaces

package-lock.json

@@ -16198,6 +16198,23 @@
         }
       }
     },
+    "vue-friendly-iframe": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/vue-friendly-iframe/-/vue-friendly-iframe-0.17.0.tgz",
+      "integrity": "sha512-2IEHRpz2KIZ7wSXd3h1n6EEQ9HEU6GRC4DNdQ7w5Dm31Udf/xGjWfHErXJUsUw3Qal0fga8SrA6aOPTOX7mg+Q==",
+      "dev": true,
+      "requires": {
+        "uuid": "3.1.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
+          "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
+          "dev": true
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -53,6 +53,7 @@
     "mdns-js": "^1.0.3",
     "uikit": "^3.4.2",
     "vue": "^2.6.11",
+    "vue-friendly-iframe": "^0.17.0",
     "vue-plugin-load-script": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
     "vue-tour": "^1.3.0",

src/components/appContent.vue

@@ -141,6 +141,7 @@
       >
         <extensionContent
           :forms="plugin.forms"
+          :frame="plugin.frame"
           :web-component="plugin.wc"
           :view-panel="plugin.viewPanel"
           @reloadForms="updatePlugins()"

src/components/tabContentComponents/extensionContent.vue

@@ -2,7 +2,8 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component">
-      <div v-if="webComponent">
+      <vue-friendly-iframe v-if="frame" :src="frame.href"></vue-friendly-iframe>
+      <div v-else-if="webComponent">
         <WebComponentLoader
           :component-u-r-l="webComponent.href"
           :component-name="webComponent.name"
@@ -11,6 +12,7 @@
       <!-- Handle OpenFlexure eV Forms -->
       <div
         v-for="form in forms"
+        v-else-if="forms"
         :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
         class="uk-height-1-1 uk-width-1-1"
       >
@@ -62,6 +64,11 @@ export default {
       required: false,
       default: null
     },
+    frame: {
+      type: Object,
+      required: false,
+      default: null
+    },
     viewPanel: {
       type: String,
       required: false,
@@ -70,3 +77,13 @@ export default {
   }
 };
 </script>
+
+<style>
+.vue-friendly-iframe {
+  height: 100%;
+}
+
+.vue-friendly-iframe iframe {
+  height: 100%;
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import store from "./store";
 import UIkit from "uikit";
 import VueTour from "vue-tour";
 import LoadScript from "vue-plugin-load-script";
+import VueFriendlyIframe from "vue-friendly-iframe";
 
 require("vue-tour/dist/vue-tour.css");
 
@@ -16,6 +17,9 @@ Vue.use(LoadScript);
 // Use vue-tour module
 Vue.use(VueTour);
 
+// Use Friendly Iframe module
+Vue.use(VueFriendlyIframe);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({