fix: wordpress plugin not initializing when elevatorPlugin window o… (#…

…281)

package.json

@@ -91,5 +91,6 @@
     "typescript": "^5.0.4",
     "vite": "^4.3.9",
     "vue-tsc": "^1.7.8"
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/App.vue

@@ -8,10 +8,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, onUnmounted } from "vue";
 import { useInstanceStore } from "./stores/instanceStore";
 import { useDrawerStore } from "./stores/drawerStore";
 import { useTheming } from "./helpers/useTheming";
+import { useElevatorSessionStorage } from "./helpers/useElevatorSessionStorage";
 import ErrorModal from "@/components/ErrorModal/ErrorModal.vue";
 import ToastRoot from "@/components/ToastRoot/ToastRoot.vue";
 
@@ -21,13 +22,26 @@ import ToastRoot from "@/components/ToastRoot/ToastRoot.vue";
 // has returned specifics about the available search fields
 const instanceStore = useInstanceStore();
 const drawerStore = useDrawerStore();
+const elevatorSessionStorage = useElevatorSessionStorage();
 
 onMounted(() => {
   console.log("app mounted");
   instanceStore.init();
   drawerStore.init();
 
+  if (window.name === "elevatorPlugin") {
+    window.addEventListener("message", elevatorSessionStorage.init);
+    window.opener.postMessage("parentLoaded", "*");
+  }
+
   useTheming();
 });
+
+onUnmounted(() => {
+  console.log("app unmounted");
+  if (window.name === "elevatorPlugin") {
+    window.removeEventListener("message", elevatorSessionStorage.init);
+  }
+});
 </script>
 <style scoped></style>

src/components/AddToEmbeddedPluginButton/AddToEmbeddedPluginButton.vue

@@ -114,8 +114,6 @@ async function onConfirmedToAdd() {
   }
 
   if (elevatorCallbackType.value === "lti") {
-
-
     if (elevatorLTIVersion.value == "1.3") {
       const data = await api.postLtiPayload13({
         fileObjectId: props.fileHandlerId,
@@ -127,13 +125,12 @@ async function onConfirmedToAdd() {
 
       document.body.innerHTML += data;
       // autosubmit name comes from he packbackbooks package we use, create a deeplink payload to post back to canvas
-      (document.getElementById('auto_submit') as HTMLFormElement)?.submit();
-    }
-    else {
+      (document.getElementById("auto_submit") as HTMLFormElement)?.submit();
+    } else {
       const data = await api.postLtiPayload({
         fileObjectId: props.fileHandlerId,
         excerptId: "",
-        returnUrl: returnUrl.value ?? ""
+        returnUrl: returnUrl.value ?? "",
       });
       ltiContentItems.value = JSON.stringify(data);
 
@@ -157,15 +154,15 @@ async function onConfirmedToAdd() {
     window.opener.postMessage(
       {
         pluginResponse: true,
-        fileObjectId: assetStore.activeFileObjectId,
-        objectId: assetStore.activeObjectId,
+        fileObjectId: props.fileHandlerId,
+        objectId: assetStore.activeAssetId,
         currentLink: window.location.href,
       },
       "*"
     );
     addingToPluginStatus.value = "success";
     toastStore.addToast({ message: "Added to WordPress" });
-    window.close();
+    nextTick(() => window.close());
   }
 }
 

src/helpers/useElevatorSessionStorage.ts

@@ -1,6 +1,13 @@
 import { computed } from "vue";
 import { useSessionStorage } from "@vueuse/core";
-import { ElevatorPluginType, ElevatorCallbackType } from "@/types";
+import {
+  ElevatorPluginType,
+  ElevatorCallbackType,
+  ElevatorLTIId,
+  ElevatorUserID,
+  ElevatorLTIVersion,
+  ElevatorPluginInitMessageData,
+} from "@/types";
 
 export function useElevatorSessionStorage() {
   const returnUrl = useSessionStorage<string | null>("returnURL", null);
@@ -32,6 +39,19 @@ export function useElevatorSessionStorage() {
     elevatorCallbackType.value = null;
   }
 
+  function init(event: MessageEvent<ElevatorPluginInitMessageData>) {
+    // if we're already setup, ignore
+    if (elevatorPlugin.value) {
+      return;
+    }
+
+    elevatorPlugin.value = event.data.elevatorPlugin;
+    elevatorCallbackType.value = event.data.elevatorCallbackType;
+    elevatorLTIVersion.value = event.data.ltiVersion;
+    elevatorLaunchId.value = event.data.launchId;
+    userId.value = event.data.userId;
+  }
+
   return {
     returnUrl,
     isInEmbedMode,
@@ -41,5 +61,6 @@ export function useElevatorSessionStorage() {
     elevatorLaunchId,
     userId,
     clear,
+    init,
   };
 }

src/types/index.ts

@@ -508,6 +508,21 @@ export type ElevatorPluginType = "Canvas" | "Wordpress" | string;
 export type ElevatorCallbackType = "lti" | "JS";
 export type ElevatorLTIVersion = "1.1" | "1.3";
 export type ElevatorLTIId = string;
+export type ElevatorUserID = string;
+
+export interface ElevatorPluginInitMessageData {
+  pluginSetup: boolean;
+  elevatorPlugin: ElevatorPluginType;
+  elevatorCallbackType: ElevatorCallbackType;
+  apiKey: string;
+  timeStamp: string;
+  entangledSecret: string;
+  includeMetadata: boolean;
+  ltiVersion?: ElevatorLTIVersion;
+  launchId?: ElevatorLTIId;
+  userId?: ElevatorUserID;
+  returnUrl?: string;
+}
 
 export interface RawSortableField {
   label: string;