labmaker-plugin 0.0.10-dev → 0.0.11

package/dist/labmaker-plugin.js

@@ -1,10 +1,10 @@
-import { openBlock as s, createElementBlock as c, Fragment as u, createElementVNode as n, toDisplayString as p, normalizeClass as m, createCommentVNode as l } from "vue";
-const _ = (e, o) => {
-  const t = e.__vccOpts || e;
-  for (const [i, a] of o)
-    t[i] = a;
-  return t;
-}, g = {
+import { openBlock as s, createElementBlock as o, Fragment as k, createElementVNode as r, toDisplayString as p, normalizeClass as _, createCommentVNode as l, resolveComponent as b, normalizeStyle as y, createBlock as w, withModifiers as x, withCtx as f, createTextVNode as T, createVNode as H, renderList as L } from "vue";
+const g = (t, n) => {
+  const e = t.__vccOpts || t;
+  for (const [d, a] of n)
+    e[d] = a;
+  return e;
+}, S = {
   props: ["custom-img"],
   data() {
     return {
@@ -13,54 +13,54 @@ const _ = (e, o) => {
   },
   computed: {},
   methods: {
-    fileUpload(e) {
-      const t = e.target.files[0];
-      this.fileProcess(t);
+    fileUpload(t) {
+      const e = t.target.files[0];
+      this.fileProcess(e);
     },
-    fileProcess(e) {
-      this.imgSRC = URL.createObjectURL(e);
+    fileProcess(t) {
+      this.imgSRC = URL.createObjectURL(t);
     }
   },
   mounted() {
   }
-}, h = /* @__PURE__ */ n("h1", null, "File Uploader", -1), f = { class: "image-uploader" }, y = /* @__PURE__ */ n("h1", null, "File Uploader", -1), v = { class: "your-file" }, L = ["src"];
-function H(e, o, t, i, a, r) {
-  return s(), c(u, null, [
-    h,
-    n("div", f, [
-      y,
-      n("input", {
-        onChange: o[0] || (o[0] = (...d) => r.fileUpload && r.fileUpload(...d)),
+}, C = /* @__PURE__ */ r("h1", null, "File Uploader", -1), F = { class: "image-uploader" }, M = /* @__PURE__ */ r("h1", null, "File Uploader", -1), I = { class: "your-file" }, V = ["src"];
+function A(t, n, e, d, a, i) {
+  return s(), o(k, null, [
+    C,
+    r("div", F, [
+      M,
+      r("input", {
+        onChange: n[0] || (n[0] = (...u) => i.fileUpload && i.fileUpload(...u)),
         type: "file",
         id: "file-upload",
         name: "fileUpload",
         accept: "image/*"
       }, null, 32),
-      n("div", v, [
-        n("img", {
+      r("div", I, [
+        r("img", {
           src: a.imgSRC,
           alt: "",
           scrset: ""
-        }, null, 8, L)
+        }, null, 8, V)
       ])
     ])
   ], 64);
 }
-const U = /* @__PURE__ */ _(g, [["render", H]]);
-const $ = {
+const K = /* @__PURE__ */ g(S, [["render", A]]);
+const B = {
   props: ["title"],
   data() {
     return {};
   },
   computed: {}
 };
-function k(e, o, t, i, a, r) {
-  return s(), c("header", null, [
-    n("h1", null, p(t.title), 1)
+function P(t, n, e, d, a, i) {
+  return s(), o("header", null, [
+    r("h1", null, p(e.title), 1)
   ]);
 }
-const x = /* @__PURE__ */ _($, [["render", k]]);
-const b = {
+const U = /* @__PURE__ */ g(B, [["render", P]]);
+const W = {
   props: ["content"],
   data() {
     return {};
@@ -71,8 +71,8 @@ const b = {
     }
   },
   methods: {
-    pixelFormat(e) {
-      return typeof e == "number" ? e + "px" : e;
+    pixelFormat(t) {
+      return typeof t == "number" ? t + "px" : t;
     },
     checkStepper() {
       this.$store.dispatch("lastPageFocus", {});
@@ -81,38 +81,384 @@ const b = {
   mounted() {
     this.checkStepper();
   }
-}, S = { class: "image-container" }, C = { class: "image" }, M = ["src", "alt"], P = ["innerHTML"], T = ["innerHTML"], F = ["innerHTML"];
-function R(e, o, t, i, a, r) {
-  return s(), c("div", S, [
-    n("div", C, [
-      n("img", {
-        src: t.content.src,
-        alt: t.content.alt,
-        class: m(t.content.class)
-      }, null, 10, M),
-      t.content.captionHeader ? (s(), c("span", {
+}, E = { class: "image-container" }, z = { class: "image" }, D = ["src", "alt"], N = ["innerHTML"], R = ["innerHTML"], O = ["innerHTML"];
+function $(t, n, e, d, a, i) {
+  return s(), o("div", E, [
+    r("div", z, [
+      r("img", {
+        src: e.content.src,
+        alt: e.content.alt,
+        class: _(e.content.class)
+      }, null, 10, D),
+      e.content.captionHeader ? (s(), o("span", {
         key: 0,
         class: "captionHeader",
-        innerHTML: t.content.captionHeader
-      }, null, 8, P)) : l("", !0),
-      t.content.caption ? (s(), c("span", {
+        innerHTML: e.content.captionHeader
+      }, null, 8, N)) : l("", !0),
+      e.content.caption ? (s(), o("span", {
         key: 1,
         class: "caption",
-        innerHTML: t.content.caption
-      }, null, 8, T)) : l("", !0),
-      t.content.copyright ? (s(), c("span", {
+        innerHTML: e.content.caption
+      }, null, 8, R)) : l("", !0),
+      e.content.copyright ? (s(), o("span", {
         key: 2,
-        innerHTML: t.content.copyright,
+        innerHTML: e.content.copyright,
         class: "copyright"
-      }, null, 8, F)) : l("", !0)
+      }, null, 8, O)) : l("", !0)
     ])
   ]);
 }
-const I = /* @__PURE__ */ _(b, [["render", R], ["__scopeId", "data-v-6d545532"]]), E = {
-  install: (e, o) => {
-    e.component("special-uploader", U), e.component("lab-header", x), e.component("lab-image", I);
+const j = /* @__PURE__ */ g(W, [["render", $], ["__scopeId", "data-v-6d545532"]]);
+const Y = {
+  props: ["content"],
+  //moduleLessonPage
+  data() {
+    return {
+      showingKaltura: !1,
+      showingText: !1,
+      buttonText: !1,
+      hasText: !1,
+      video: { width: 640, height: 480 },
+      audio: { width: 260, height: 80 },
+      audioBtn: { width: 40, height: 40 },
+      textversionArray: {}
+    };
+  },
+  watch: {
+    content: function() {
+      this.tvCleaner();
+    }
+  },
+  computed: {
+    kHeight() {
+      if (this.content.kalturaType === "video")
+        if (this.content.height && this.content.height != "") {
+          let t = this.content.height;
+          return t.slice(-2) === "px" ? t.slice(0, -2) : this.content.height;
+        } else
+          return this.video.height;
+      else if (this.content.kalturaType === "audio")
+        if (this.content.height && this.content.height != "") {
+          let t = this.content.height;
+          return t.slice(-2) === "px" ? t.slice(0, -2) : this.content.height;
+        } else
+          return this.audio.height;
+      else if (this.content.kalturaType === "audiobtn")
+        return this.audioBtn.height;
+    },
+    kWidth() {
+      if (this.content.kalturaType === "video")
+        if (this.content.width && this.content.width != "") {
+          let t = this.content.width;
+          return t.slice(-2) === "px" ? t.slice(0, -2) : this.content.width;
+        } else
+          return this.video.width;
+      else {
+        if (this.content.kalturaType === "audio")
+          return this.audio.width;
+        if (this.content.kalturaType === "audiobtn")
+          return this.audioBtn.width;
+      }
+    }
+  },
+  methods: {
+    getButtonText(t) {
+      return t === "video" ? this.showingText ? "Show Video" : "Show Text Version" : this.showingText ? "Show Audio" : "Show Text Version";
+    },
+    textVersionCheck() {
+      this.content.textVersion && this.content.textVersion.length > 1 && (this.hasText = !0);
+    },
+    kalturaLoad() {
+      this.textVersionCheck();
+    },
+    kalturaMedia(t) {
+      let n = {
+        uiconf_id: "35766781",
+        partner_id: "2061901",
+        entry_id: "",
+        height: "400",
+        width: "640",
+        type: "video"
+      };
+      return n.entry_id = this.content.kalturaEntryId, this.content.kalturaType && (n.type = this.content.kalturaType), n.type === "audio" ? n.uiconf_id = "36511471" : n.type === "audiobtn" ? n.uiconf_id = "36582731" : n.type === "videocc" && (n.uiconf_id = "35766781"), this.content.standalone && this.$store.commit("setStepHold", !1), "https://cdnapisec.kaltura.com/p/" + n.partner_id + "/sp/" + n.partner_id + "00/embedIframeJs/uiconf_id/" + n.uiconf_id + "/partner_id/" + n.partner_id + "?iframeembed=true&playerId=Kaltura&entry_id=" + n.entry_id;
+    },
+    showKaltura() {
+      this.showingKaltura = !0;
+    },
+    showText() {
+      this.showingText = !this.showingText, this.buttonText = !this.buttonText;
+    },
+    tvCleaner() {
+      let t = document.createElement("div");
+      t.innerHTML = this.content.textVersion;
+      for (let n = 0; n < t.children.length; n++) {
+        let e = t.children[n];
+        if (e.tagName == "DIV" && e.className == "panel-default" && e.children[0].dataset.toggle)
+          for (let d = 0; d < e.children.length; d++) {
+            let a = e.children[d];
+            if (a.dataset.toggle == "collapse") {
+              let i = {
+                heading: a.innerHTML,
+                body: e.children[d + 1].innerHTML
+              };
+              this.textversionArray[n] = i;
+            }
+          }
+        else
+          this.textversionArray[n] = e.outerHTML;
+      }
+    }
+  },
+  beforeMount() {
+    this.kalturaLoad(), this.tvCleaner();
+  },
+  mounted() {
+  }
+}, G = {
+  key: 0,
+  class: "textVersion"
+}, J = /* @__PURE__ */ r("h1", null, "Text Version", -1), X = ["innerHTML"], q = ["src", "width", "height"], Q = ["src", "width", "height"], Z = ["src", "width", "height"], ee = {
+  key: 2,
+  class: "alert alert-danger"
+};
+function te(t, n, e, d, a, i) {
+  const u = b("el-button");
+  return s(), o("div", {
+    class: _(["kContainer", e.content.class])
+  }, [
+    e.content.textVersion && a.showingText ? (s(), o("div", G, [
+      J,
+      r("div", {
+        innerHTML: e.content.textVersion
+      }, null, 8, X)
+    ])) : l("", !0),
+    !a.showingText && e.content.kalturaEntryId ? (s(), o("div", {
+      key: 1,
+      class: "mainVersion",
+      style: y({ width: i.kWidth + "px", height: i.kHeight + "px" })
+    }, [
+      e.content.kalturaType == "video" && !a.showingKaltura ? (s(), o("div", {
+        key: 0,
+        class: _(["kPoster", { active: a.showingKaltura == !0 }]),
+        style: y({ width: i.kWidth + "px", height: i.kHeight + "px" })
+      }, [
+        r("iframe", {
+          onClick: n[0] || (n[0] = (...h) => i.showKaltura && i.showKaltura(...h)),
+          class: "videoIframe",
+          src: i.kalturaMedia(e.content),
+          width: i.kWidth + "px",
+          height: i.kHeight + "px",
+          allowfullscreen: "",
+          webkitallowfullscreen: "",
+          mozAllowFullScreen: "",
+          frameborder: "0"
+        }, null, 8, q)
+      ], 6)) : l("", !0),
+      e.content.kalturaType == "audio" ? (s(), o("div", {
+        key: 1,
+        class: _(["kAudio", { active: a.showingKaltura == !0 }]),
+        onClick: n[1] || (n[1] = (...h) => i.showKaltura && i.showKaltura(...h))
+      }, [
+        r("iframe", {
+          id: "my_iframe",
+          src: i.kalturaMedia(e.content),
+          width: i.kWidth + "px",
+          height: i.kHeight + "px",
+          allowfullscreen: "",
+          webkitallowfullscreen: "",
+          mozAllowFullScreen: "",
+          frameborder: "0"
+        }, null, 8, Q)
+      ], 2)) : l("", !0),
+      e.content.kalturaType == "audiobtn" ? (s(), o("div", {
+        key: 2,
+        class: _(["kAudiobtn", { active: a.showingKaltura == !0 }]),
+        onClick: n[2] || (n[2] = (...h) => i.showKaltura && i.showKaltura(...h))
+      }, [
+        r("iframe", {
+          src: i.kalturaMedia(e.content),
+          width: a.audioBtn.width + "px",
+          height: a.audioBtn.height + "px",
+          allowfullscreen: "",
+          webkitallowfullscreen: "",
+          mozAllowFullScreen: "",
+          frameborder: "0"
+        }, null, 8, Z)
+      ], 2)) : l("", !0)
+    ], 4)) : l("", !0),
+    e.content.kalturaEntryId == "" ? (s(), o("div", ee, "There is no Kaltura Entry ID")) : l("", !0),
+    e.content.textVersion ? (s(), w(u, {
+      key: 3,
+      size: "medium",
+      type: "primary",
+      "aria-label": "text version",
+      class: "toggleSwitch ftSwitch btn btn-primary vidText",
+      onClick: n[3] || (n[3] = x((h) => i.showText(e.content.kalturaType), ["stop"]))
+    }, {
+      default: f(() => [
+        T(p(i.getButtonText(e.content.kalturaType)), 1)
+      ]),
+      _: 1
+    })) : l("", !0)
+  ], 2);
+}
+const ne = /* @__PURE__ */ g(Y, [["render", te]]);
+const ie = {
+  props: ["content"],
+  data() {
+    return {
+      show: !0
+    };
+  },
+  computed: {
+    getShowFeedbackAttempts() {
+      return this.$store.getters.getShowFeedbackAttempts;
+    },
+    feedbackHeader() {
+      return this.$store.getters.getShowFeedbackAttempts ? "Too many Attempts" : this.content.feedbackHeader;
+    },
+    feedbackWidth() {
+      return this.content.feedbackWidth ? this.content.feedbackWidth : "50%";
+    }
+  },
+  methods: {
+    feedbackClose() {
+      this.content.finalInstructions && this.$store.commit("updateFinishDirections", !1), this.content.instructions && this.$store.commit("updateDirections", !1), this.$store.commit("setShowFeedback", !1), this.$store.commit("setShowFeedbackAttempts", !1), this.$store.dispatch("lastPageFocus", {});
+    }
+  },
+  mounted() {
+  }
+}, se = { class: "my-header" }, oe = ["id", "innerHTML"], ae = ["innerHTML"], re = { key: 1 }, ce = ["src"], le = ["innerHTML"], de = { class: "dialog-footer" };
+function he(t, n, e, d, a, i) {
+  const u = b("el-button"), h = b("el-dialog");
+  return s(), w(h, {
+    width: i.feedbackWidth,
+    modelValue: a.show,
+    "onUpdate:modelValue": n[1] || (n[1] = (c) => a.show = c),
+    "before-close": i.feedbackClose
+  }, {
+    header: f(({ close: c, titleId: m, titleClass: v }) => [
+      r("div", se, [
+        r("h4", {
+          id: m,
+          class: _(v),
+          innerHTML: i.feedbackHeader
+        }, null, 10, oe)
+      ])
+    ]),
+    footer: f(() => [
+      r("span", de, [
+        H(u, {
+          size: "small",
+          id: "feedbackClose",
+          type: "primary",
+          onClick: n[0] || (n[0] = x((c) => i.feedbackClose(), ["stop"]))
+        }, {
+          default: f(() => [
+            T("Close")
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    default: f(() => [
+      i.getShowFeedbackAttempts ? (s(), o(k, { key: 0 }, [
+        e.content.feedbackAttempts ? (s(), o("p", {
+          key: 0,
+          innerHTML: e.content.feedbackAttempts
+        }, null, 8, ae)) : (s(), o("p", re, "You have tried too many times, the correct answer has been provided for you."))
+      ], 64)) : (s(), o(k, { key: 1 }, [
+        e.content.feedbackImage ? (s(), o("img", {
+          key: 0,
+          class: "im-ButtonImage",
+          src: e.content.feedbackImage,
+          alt: "button image"
+        }, null, 8, ce)) : l("", !0),
+        r("p", {
+          innerHTML: e.content.feedback
+        }, null, 8, le)
+      ], 64))
+    ]),
+    _: 1
+  }, 8, ["width", "modelValue", "before-close"]);
+}
+const ue = /* @__PURE__ */ g(ie, [["render", he]]);
+const _e = {
+  components: {
+    Feedback: ue
+  },
+  inject: ["message"],
+  props: ["content"],
+  data() {
+    return {
+      dialogVisible: !1,
+      feedbackVisibility: [],
+      feedbackIndex: 0
+    };
+  },
+  computed: {
+    getLastPage() {
+      return !!this.$store.getters.getLastPage;
+    }
+  },
+  methods: {
+    pixelFormat(t) {
+      return typeof t == "number" ? t + "px" : t;
+    },
+    changePage(t, n) {
+      t.pageLink ? this.$store.commit("setCurrentPage", t.pageLink) : t.feedback && (this.feedbackIndex = n, this.feedbackVisibility.indexOf(n) === -1 && this.feedbackVisibility.push(n), this.$store.commit("setShowFeedback", !0), this.content.hotspots.length - 1 === this.feedbackVisibility.length - 1 && (this.$store.commit("setStepHold", !1), this.$store.commit("setStepDone", !0)), setTimeout(() => {
+        document.getElementById("feedbackClose") && document.getElementById("feedbackClose").focus();
+      }));
+    },
+    showFeedback(t) {
+      return !!(this.$store.getters.getShowFeedback && this.feedbackIndex === t);
+    }
+  },
+  beforeMount() {
+    this.$store.commit("setStepDone", !1), this.$store.commit("setStepHold", !0);
+  }
+}, me = { class: "imageMarker" }, fe = ["src", "alt"], ge = { class: "hotspotArea" }, ke = ["src", "alt"], be = { class: "im-buttonText" };
+function ye(t, n, e, d, a, i) {
+  const u = b("el-button"), h = b("Feedback");
+  return s(), o("div", me, [
+    r("img", {
+      src: e.content.image,
+      alt: e.content.imageAlt
+    }, null, 8, fe),
+    r("div", ge, [
+      (s(!0), o(k, null, L(e.content.hotspots, (c, m) => (s(), o(k, null, [
+        H(u, {
+          type: c.buttonType,
+          onClick: x((v) => i.changePage(c, m), ["stop"]),
+          id: "hotspot_" + m,
+          class: _([["is-" + c.buttonShape, { noBG: c.buttonImage }, c.class], "hotspot"]),
+          style: y({ top: i.pixelFormat(c.cordinatesX), left: i.pixelFormat(c.cordinatesY), width: i.pixelFormat(c.dimensionsW), height: i.pixelFormat(c.dimensionsH) }),
+          icon: c.buttonIcon
+        }, {
+          default: f(() => [
+            c.buttonImage ? (s(), o("img", {
+              key: 0,
+              class: "im-ButtonImage",
+              src: c.buttonImage,
+              alt: "image marker " + Number(m + 1)
+            }, null, 8, ke)) : l("", !0),
+            r("span", be, p(c.name), 1)
+          ]),
+          _: 2
+        }, 1032, ["type", "onClick", "id", "class", "style", "icon"]),
+        i.showFeedback(m) ? (s(), w(h, {
+          key: 0,
+          content: c
+        }, null, 8, ["content"])) : l("", !0)
+      ], 64))), 256))
+    ])
+  ]);
+}
+const pe = /* @__PURE__ */ g(_e, [["render", ye], ["__scopeId", "data-v-3897bfb2"]]), xe = {
+  install: (t, n) => {
+    t.component("special-uploader", K), t.component("lab-header", U), t.component("lab-image", j), t.component("lab-kaltura", ne), t.component("lab-image-marker", pe);
   }
 };
 export {
-  E as default
+  xe as default
 };

package/dist/labmaker-plugin.umd.cjs

@@ -1 +1 @@
-(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.LabmakerPlugin=a(e.Vue))})(this,function(e){"use strict";const a="",r=(t,o)=>{const n=t.__vccOpts||t;for(const[s,c]of o)n[s]=c;return n},i={props:["custom-img"],data(){return{imgSRC:this.customImg}},computed:{},methods:{fileUpload(t){const n=t.target.files[0];this.fileProcess(n)},fileProcess(t){this.imgSRC=URL.createObjectURL(t)}},mounted(){}},d=e.createElementVNode("h1",null,"File Uploader",-1),_={class:"image-uploader"},m=e.createElementVNode("h1",null,"File Uploader",-1),p={class:"your-file"},u=["src"];function f(t,o,n,s,c,l){return e.openBlock(),e.createElementBlock(e.Fragment,null,[d,e.createElementVNode("div",_,[m,e.createElementVNode("input",{onChange:o[0]||(o[0]=(...x)=>l.fileUpload&&l.fileUpload(...x)),type:"file",id:"file-upload",name:"fileUpload",accept:"image/*"},null,32),e.createElementVNode("div",p,[e.createElementVNode("img",{src:c.imgSRC,alt:"",scrset:""},null,8,u)])])],64)}const h=r(i,[["render",f]]),C="",g={props:["title"],data(){return{}},computed:{}};function k(t,o,n,s,c,l){return e.openBlock(),e.createElementBlock("header",null,[e.createElementVNode("h1",null,e.toDisplayString(n.title),1)])}const y=r(g,[["render",k]]),P="",E={props:["content"],data(){return{}},computed:{getLastPage(){return!!this.$store.getters.getLastPage}},methods:{pixelFormat(t){return typeof t=="number"?t+"px":t},checkStepper(){this.$store.dispatch("lastPageFocus",{})}},mounted(){this.checkStepper()}},L={class:"image-container"},V={class:"image"},B=["src","alt"],N=["innerHTML"],H=["innerHTML"],U=["innerHTML"];function $(t,o,n,s,c,l){return e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",V,[e.createElementVNode("img",{src:n.content.src,alt:n.content.alt,class:e.normalizeClass(n.content.class)},null,10,B),n.content.captionHeader?(e.openBlock(),e.createElementBlock("span",{key:0,class:"captionHeader",innerHTML:n.content.captionHeader},null,8,N)):e.createCommentVNode("",!0),n.content.caption?(e.openBlock(),e.createElementBlock("span",{key:1,class:"caption",innerHTML:n.content.caption},null,8,H)):e.createCommentVNode("",!0),n.content.copyright?(e.openBlock(),e.createElementBlock("span",{key:2,innerHTML:n.content.copyright,class:"copyright"},null,8,U)):e.createCommentVNode("",!0)])])}const b=r(E,[["render",$],["__scopeId","data-v-6d545532"]]);return{install:(t,o)=>{t.component("special-uploader",h),t.component("lab-header",y),t.component("lab-image",b)}}});
+(function(e,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("vue")):typeof define=="function"&&define.amd?define(["vue"],m):(e=typeof globalThis<"u"?globalThis:e||self,e.LabmakerPlugin=m(e.Vue))})(this,function(e){"use strict";const m="",d=(n,o)=>{const t=n.__vccOpts||n;for(const[l,a]of o)t[l]=a;return t},k={props:["custom-img"],data(){return{imgSRC:this.customImg}},computed:{},methods:{fileUpload(n){const t=n.target.files[0];this.fileProcess(t)},fileProcess(n){this.imgSRC=URL.createObjectURL(n)}},mounted(){}},_=e.createElementVNode("h1",null,"File Uploader",-1),u={class:"image-uploader"},g=e.createElementVNode("h1",null,"File Uploader",-1),p={class:"your-file"},b=["src"];function y(n,o,t,l,a,i){return e.openBlock(),e.createElementBlock(e.Fragment,null,[_,e.createElementVNode("div",u,[g,e.createElementVNode("input",{onChange:o[0]||(o[0]=(...s)=>i.fileUpload&&i.fileUpload(...s)),type:"file",id:"file-upload",name:"fileUpload",accept:"image/*"},null,32),e.createElementVNode("div",p,[e.createElementVNode("img",{src:a.imgSRC,alt:"",scrset:""},null,8,b)])])],64)}const w=d(k,[["render",y]]),ce="",x={props:["title"],data(){return{}},computed:{}};function B(n,o,t,l,a,i){return e.openBlock(),e.createElementBlock("header",null,[e.createElementVNode("h1",null,e.toDisplayString(t.title),1)])}const V=d(x,[["render",B]]),se="",T={props:["content"],data(){return{}},computed:{getLastPage(){return!!this.$store.getters.getLastPage}},methods:{pixelFormat(n){return typeof n=="number"?n+"px":n},checkStepper(){this.$store.dispatch("lastPageFocus",{})}},mounted(){this.checkStepper()}},C={class:"image-container"},E={class:"image"},N=["src","alt"],S=["innerHTML"],H=["innerHTML"],L=["innerHTML"];function F(n,o,t,l,a,i){return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",E,[e.createElementVNode("img",{src:t.content.src,alt:t.content.alt,class:e.normalizeClass(t.content.class)},null,10,N),t.content.captionHeader?(e.openBlock(),e.createElementBlock("span",{key:0,class:"captionHeader",innerHTML:t.content.captionHeader},null,8,S)):e.createCommentVNode("",!0),t.content.caption?(e.openBlock(),e.createElementBlock("span",{key:1,class:"caption",innerHTML:t.content.caption},null,8,H)):e.createCommentVNode("",!0),t.content.copyright?(e.openBlock(),e.createElementBlock("span",{key:2,innerHTML:t.content.copyright,class:"copyright"},null,8,L)):e.createCommentVNode("",!0)])])}const M=d(T,[["render",F],["__scopeId","data-v-6d545532"]]),de="",I={props:["content"],data(){return{showingKaltura:!1,showingText:!1,buttonText:!1,hasText:!1,video:{width:640,height:480},audio:{width:260,height:80},audioBtn:{width:40,height:40},textversionArray:{}}},watch:{content:function(){this.tvCleaner()}},computed:{kHeight(){if(this.content.kalturaType==="video")if(this.content.height&&this.content.height!=""){let n=this.content.height;return n.slice(-2)==="px"?n.slice(0,-2):this.content.height}else return this.video.height;else if(this.content.kalturaType==="audio")if(this.content.height&&this.content.height!=""){let n=this.content.height;return n.slice(-2)==="px"?n.slice(0,-2):this.content.height}else return this.audio.height;else if(this.content.kalturaType==="audiobtn")return this.audioBtn.height},kWidth(){if(this.content.kalturaType==="video")if(this.content.width&&this.content.width!=""){let n=this.content.width;return n.slice(-2)==="px"?n.slice(0,-2):this.content.width}else return this.video.width;else{if(this.content.kalturaType==="audio")return this.audio.width;if(this.content.kalturaType==="audiobtn")return this.audioBtn.width}}},methods:{getButtonText(n){return n==="video"?this.showingText?"Show Video":"Show Text Version":this.showingText?"Show Audio":"Show Text Version"},textVersionCheck(){this.content.textVersion&&this.content.textVersion.length>1&&(this.hasText=!0)},kalturaLoad(){this.textVersionCheck()},kalturaMedia(n){let o={uiconf_id:"35766781",partner_id:"2061901",entry_id:"",height:"400",width:"640",type:"video"};return o.entry_id=this.content.kalturaEntryId,this.content.kalturaType&&(o.type=this.content.kalturaType),o.type==="audio"?o.uiconf_id="36511471":o.type==="audiobtn"?o.uiconf_id="36582731":o.type==="videocc"&&(o.uiconf_id="35766781"),this.content.standalone&&this.$store.commit("setStepHold",!1),"https://cdnapisec.kaltura.com/p/"+o.partner_id+"/sp/"+o.partner_id+"00/embedIframeJs/uiconf_id/"+o.uiconf_id+"/partner_id/"+o.partner_id+"?iframeembed=true&playerId=Kaltura&entry_id="+o.entry_id},showKaltura(){this.showingKaltura=!0},showText(){this.showingText=!this.showingText,this.buttonText=!this.buttonText},tvCleaner(){let n=document.createElement("div");n.innerHTML=this.content.textVersion;for(let o=0;o<n.children.length;o++){let t=n.children[o];if(t.tagName=="DIV"&&t.className=="panel-default"&&t.children[0].dataset.toggle)for(let l=0;l<t.children.length;l++){let a=t.children[l];if(a.dataset.toggle=="collapse"){let i={heading:a.innerHTML,body:t.children[l+1].innerHTML};this.textversionArray[o]=i}}else this.textversionArray[o]=t.outerHTML}}},beforeMount(){this.kalturaLoad(),this.tvCleaner()},mounted(){}},A={key:0,class:"textVersion"},K=e.createElementVNode("h1",null,"Text Version",-1),z=["innerHTML"],P=["src","width","height"],U=["src","width","height"],W=["src","width","height"],D={key:2,class:"alert alert-danger"};function R(n,o,t,l,a,i){const s=e.resolveComponent("el-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kContainer",t.content.class])},[t.content.textVersion&&a.showingText?(e.openBlock(),e.createElementBlock("div",A,[K,e.createElementVNode("div",{innerHTML:t.content.textVersion},null,8,z)])):e.createCommentVNode("",!0),!a.showingText&&t.content.kalturaEntryId?(e.openBlock(),e.createElementBlock("div",{key:1,class:"mainVersion",style:e.normalizeStyle({width:i.kWidth+"px",height:i.kHeight+"px"})},[t.content.kalturaType=="video"&&!a.showingKaltura?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["kPoster",{active:a.showingKaltura==!0}]),style:e.normalizeStyle({width:i.kWidth+"px",height:i.kHeight+"px"})},[e.createElementVNode("iframe",{onClick:o[0]||(o[0]=(...c)=>i.showKaltura&&i.showKaltura(...c)),class:"videoIframe",src:i.kalturaMedia(t.content),width:i.kWidth+"px",height:i.kHeight+"px",allowfullscreen:"",webkitallowfullscreen:"",mozAllowFullScreen:"",frameborder:"0"},null,8,P)],6)):e.createCommentVNode("",!0),t.content.kalturaType=="audio"?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["kAudio",{active:a.showingKaltura==!0}]),onClick:o[1]||(o[1]=(...c)=>i.showKaltura&&i.showKaltura(...c))},[e.createElementVNode("iframe",{id:"my_iframe",src:i.kalturaMedia(t.content),width:i.kWidth+"px",height:i.kHeight+"px",allowfullscreen:"",webkitallowfullscreen:"",mozAllowFullScreen:"",frameborder:"0"},null,8,U)],2)):e.createCommentVNode("",!0),t.content.kalturaType=="audiobtn"?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["kAudiobtn",{active:a.showingKaltura==!0}]),onClick:o[2]||(o[2]=(...c)=>i.showKaltura&&i.showKaltura(...c))},[e.createElementVNode("iframe",{src:i.kalturaMedia(t.content),width:a.audioBtn.width+"px",height:a.audioBtn.height+"px",allowfullscreen:"",webkitallowfullscreen:"",mozAllowFullScreen:"",frameborder:"0"},null,8,W)],2)):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),t.content.kalturaEntryId==""?(e.openBlock(),e.createElementBlock("div",D,"There is no Kaltura Entry ID")):e.createCommentVNode("",!0),t.content.textVersion?(e.openBlock(),e.createBlock(s,{key:3,size:"medium",type:"primary","aria-label":"text version",class:"toggleSwitch ftSwitch btn btn-primary vidText",onClick:o[3]||(o[3]=e.withModifiers(c=>i.showText(t.content.kalturaType),["stop"]))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.getButtonText(t.content.kalturaType)),1)]),_:1})):e.createCommentVNode("",!0)],2)}const j=d(I,[["render",R]]),he="",O={props:["content"],data(){return{show:!0}},computed:{getShowFeedbackAttempts(){return this.$store.getters.getShowFeedbackAttempts},feedbackHeader(){return this.$store.getters.getShowFeedbackAttempts?"Too many Attempts":this.content.feedbackHeader},feedbackWidth(){return this.content.feedbackWidth?this.content.feedbackWidth:"50%"}},methods:{feedbackClose(){this.content.finalInstructions&&this.$store.commit("updateFinishDirections",!1),this.content.instructions&&this.$store.commit("updateDirections",!1),this.$store.commit("setShowFeedback",!1),this.$store.commit("setShowFeedbackAttempts",!1),this.$store.dispatch("lastPageFocus",{})}},mounted(){}},$={class:"my-header"},Y=["id","innerHTML"],q=["innerHTML"],G={key:1},J=["src"],X=["innerHTML"],Q={class:"dialog-footer"};function Z(n,o,t,l,a,i){const s=e.resolveComponent("el-button"),c=e.resolveComponent("el-dialog");return e.openBlock(),e.createBlock(c,{width:i.feedbackWidth,modelValue:a.show,"onUpdate:modelValue":o[1]||(o[1]=r=>a.show=r),"before-close":i.feedbackClose},{header:e.withCtx(({close:r,titleId:h,titleClass:f})=>[e.createElementVNode("div",$,[e.createElementVNode("h4",{id:h,class:e.normalizeClass(f),innerHTML:i.feedbackHeader},null,10,Y)])]),footer:e.withCtx(()=>[e.createElementVNode("span",Q,[e.createVNode(s,{size:"small",id:"feedbackClose",type:"primary",onClick:o[0]||(o[0]=e.withModifiers(r=>i.feedbackClose(),["stop"]))},{default:e.withCtx(()=>[e.createTextVNode("Close")]),_:1})])]),default:e.withCtx(()=>[i.getShowFeedbackAttempts?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.content.feedbackAttempts?(e.openBlock(),e.createElementBlock("p",{key:0,innerHTML:t.content.feedbackAttempts},null,8,q)):(e.openBlock(),e.createElementBlock("p",G,"You have tried too many times, the correct answer has been provided for you."))],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.content.feedbackImage?(e.openBlock(),e.createElementBlock("img",{key:0,class:"im-ButtonImage",src:t.content.feedbackImage,alt:"button image"},null,8,J)):e.createCommentVNode("",!0),e.createElementVNode("p",{innerHTML:t.content.feedback},null,8,X)],64))]),_:1},8,["width","modelValue","before-close"])}const v=d(O,[["render",Z]]),me="",ee={components:{Feedback:v},inject:["message"],props:["content"],data(){return{dialogVisible:!1,feedbackVisibility:[],feedbackIndex:0}},computed:{getLastPage(){return!!this.$store.getters.getLastPage}},methods:{pixelFormat(n){return typeof n=="number"?n+"px":n},changePage(n,o){n.pageLink?this.$store.commit("setCurrentPage",n.pageLink):n.feedback&&(this.feedbackIndex=o,this.feedbackVisibility.indexOf(o)===-1&&this.feedbackVisibility.push(o),this.$store.commit("setShowFeedback",!0),this.content.hotspots.length-1===this.feedbackVisibility.length-1&&(this.$store.commit("setStepHold",!1),this.$store.commit("setStepDone",!0)),setTimeout(()=>{document.getElementById("feedbackClose")&&document.getElementById("feedbackClose").focus()}))},showFeedback(n){return!!(this.$store.getters.getShowFeedback&&this.feedbackIndex===n)}},beforeMount(){this.$store.commit("setStepDone",!1),this.$store.commit("setStepHold",!0)}},te={class:"imageMarker"},ne=["src","alt"],oe={class:"hotspotArea"},ie=["src","alt"],ae={class:"im-buttonText"};function re(n,o,t,l,a,i){const s=e.resolveComponent("el-button"),c=e.resolveComponent("Feedback");return e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("img",{src:t.content.image,alt:t.content.imageAlt},null,8,ne),e.createElementVNode("div",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.content.hotspots,(r,h)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(s,{type:r.buttonType,onClick:e.withModifiers(f=>i.changePage(r,h),["stop"]),id:"hotspot_"+h,class:e.normalizeClass([["is-"+r.buttonShape,{noBG:r.buttonImage},r.class],"hotspot"]),style:e.normalizeStyle({top:i.pixelFormat(r.cordinatesX),left:i.pixelFormat(r.cordinatesY),width:i.pixelFormat(r.dimensionsW),height:i.pixelFormat(r.dimensionsH)}),icon:r.buttonIcon},{default:e.withCtx(()=>[r.buttonImage?(e.openBlock(),e.createElementBlock("img",{key:0,class:"im-ButtonImage",src:r.buttonImage,alt:"image marker "+Number(h+1)},null,8,ie)):e.createCommentVNode("",!0),e.createElementVNode("span",ae,e.toDisplayString(r.name),1)]),_:2},1032,["type","onClick","id","class","style","icon"]),i.showFeedback(h)?(e.openBlock(),e.createBlock(c,{key:0,content:r},null,8,["content"])):e.createCommentVNode("",!0)],64))),256))])])}const le=d(ee,[["render",re],["__scopeId","data-v-3897bfb2"]]);return{install:(n,o)=>{n.component("special-uploader",w),n.component("lab-header",V),n.component("lab-image",M),n.component("lab-kaltura",j),n.component("lab-image-marker",le)}}});

package/dist/style.css

@@ -1 +1 @@
-.image-uploader{display:flex;flex-direction:column;align-items:center;border:1px solid gray;width:53%;background-color:#cecece;margin:0 auto;height:300px;box-shadow:#0000001a 0 4px 12px}.your-file{display:flex;justify-content:center;align-items:center;margin-top:20px}img{width:80%}header{display:flex;justify-content:center;align-items:center;height:40px;margin-top:10px;margin-bottom:10px}#app .image-container[data-v-6d545532]{position:relative;display:block;margin-bottom:10px;height:100%}#app .image-container .image[data-v-6d545532]{height:100%}#app .image-container .image img[data-v-6d545532]{max-height:100%;max-width:100%}#app .image-container.copyright[data-v-6d545532],#app .image-container.captions[data-v-6d545532]{margin-bottom:20px}#app .image-container.copyright[data-v-6d545532],#app .image-container.captions[data-v-6d545532]{margin-bottom:40px}#app .image-container .captionHeader[data-v-6d545532]{font-size:20px;text-align:center;display:block;margin-bottom:10px}#app .image-container .caption[data-v-6d545532]{font-size:13px;font-style:italic;text-align:center;display:block;margin-bottom:10px}#app .image-container .copyright[data-v-6d545532]{font-size:10px;line-height:10px;margin-top:10px;text-align:center;display:block;margin-bottom:10px}
+.image-uploader{display:flex;flex-direction:column;align-items:center;border:1px solid gray;width:53%;background-color:#cecece;margin:0 auto;height:300px;box-shadow:#0000001a 0 4px 12px}.your-file{display:flex;justify-content:center;align-items:center;margin-top:20px}img{width:80%}header{display:flex;justify-content:center;align-items:center;height:40px;margin-top:10px;margin-bottom:10px}#app .image-container[data-v-6d545532]{position:relative;display:block;margin-bottom:10px;height:100%}#app .image-container .image[data-v-6d545532]{height:100%}#app .image-container .image img[data-v-6d545532]{max-height:100%;max-width:100%}#app .image-container.copyright[data-v-6d545532],#app .image-container.captions[data-v-6d545532]{margin-bottom:20px}#app .image-container.copyright[data-v-6d545532],#app .image-container.captions[data-v-6d545532]{margin-bottom:40px}#app .image-container .captionHeader[data-v-6d545532]{font-size:20px;text-align:center;display:block;margin-bottom:10px}#app .image-container .caption[data-v-6d545532]{font-size:13px;font-style:italic;text-align:center;display:block;margin-bottom:10px}#app .image-container .copyright[data-v-6d545532]{font-size:10px;line-height:10px;margin-top:10px;text-align:center;display:block;margin-bottom:10px}.kContainer{position:relative;height:90%}.kContainer iframe{margin:0}.kContainer .mainVersion{margin:auto;position:relative;display:block}.kContainer .mainVersion .kAudiobtn{width:30px;height:30px;position:relative;transition:opacity .4s ease;left:50%;transform:translate(-50%)}.kContainer .mainVersion .kAudiobtn .kButton.audiobtn{position:absolute;height:30px;width:30px;background:url(//cdn.flvs.net/course_view/1_0/dist/images/kaltura_audio_button.png) 0 0 no-repeat;z-index:900;cursor:pointer}.kContainer .mainVersion .kAudio{width:260px;height:38px;position:relative;transition:opacity .4s ease;left:50%;transform:translate(-50%)}.kContainer .mainVersion .kAudio .kButton.audio{position:absolute;height:40px;width:260px;background:url(//cdn.flvs.net/course_view/1_0/dist/images/kaltura_audio_standard.png) 0 0 no-repeat;z-index:900;cursor:pointer}.kContainer .mainVersion .audioIframe,.kContainer .mainVersion .audiobtnIframe{position:relative;transition:opacity .4s ease;left:50%;transform:translate(-50%)}.kContainer .mainVersion .kPoster{position:absolute;transition:opacity .4s ease;left:50%;transform:translate(-50%)}.kContainer .mainVersion .kPoster .active{display:none;visibility:hidden}.kContainer .mainVersion .kPoster .kButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:url(//cdn.flvs.net/course_view/1_0/dist/images/player_big_play_button.png) 0 0 no-repeat;z-index:900;width:70px;height:53px;cursor:pointer}.kContainer .mainVersion .kPoster img{position:absolute;top:0;left:0;z-index:899;height:100%;width:100%;border:1px solid #000;max-height:100%;max-width:100%}.kContainer .mainVersion .kPoster .videoIframe{z-index:897}.kContainer .mainVersion .videoIframe{position:absolute;transition:opacity .4s ease;left:50%;transform:translate(-50%);z-index:897}.kContainer button.toggleSwitch,.kContainer button.toggleSwitchFT{margin-top:0;min-width:180px;position:relative;left:50%;transform:translate(-50%)}.kContainer .kCopyright{font-size:10px;text-align:right;width:200px;position:absolute;bottom:-30px;right:0;padding:8px}.kContainer .kCopyright.kCopyrightAudio{bottom:4px}.kContainer .largePlayBtn{display:none}.kContainer .textVersion{overflow-y:auto;height:calc(100% - 10px);margin-bottom:6px}.fade-enter-active,.fade-leave-active{transition:opacity .8s}.fade-enter,.fade-leave-to{opacity:0}.el-dialog{border-radius:6px}.el-dialog .el-dialog__header .el-dialog__title{color:#000;font-size:1.5rem}.el-dialog .el-dialog__header .el-dialog__headerbtn{top:8px;right:8px;border:1px solid #404040;border-radius:4px;background:#feec86;color:#000;font-weight:400;box-shadow:2px 2px 6px #0000004d;transition:background .5s,color .5s}.el-dialog .el-dialog__header .el-dialog__headerbtn:hover,.el-dialog .el-dialog__header .el-dialog__headerbtn:focus,.el-dialog .el-dialog__header .el-dialog__headerbtn:active{color:#404040;background:#fff;border-color:#2a2a2a}.el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close{color:#000;font-size:18px}.el-dialog .el-dialog__body{color:#212529;font-size:1rem;word-break:normal}#app div.imageMarker[data-v-3897bfb2]{position:relative;height:100%;border-radius:6px}#app div.imageMarker img[data-v-3897bfb2]{width:100%;max-width:100%;max-height:100%;border-radius:6px}#app div.imageMarker .hotspotArea[data-v-3897bfb2]{width:100%;height:100%;position:absolute;top:0;left:0}#app div.imageMarker .hotspotArea .el-button.hotspot[data-v-3897bfb2]{position:absolute;min-height:unset;padding:4px 4px 4px 7px;margin:unset}#app div.imageMarker .hotspotArea .el-button.hotspot.noBG[data-v-3897bfb2]{background-color:transparent}#app div.imageMarker .hotspotArea .el-button.hotspot img.im-ButtonImage[data-v-3897bfb2]{position:absolute;top:0;left:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labmaker-plugin",
-  "version": "0.0.10-dev",
+  "version": "0.0.11",
   "type": "module",
   "files": [
     "dist"
@@ -21,7 +21,8 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "vue": "^3.3.2"
+    "vue": "^3.3.2",
+    "@element-plus/icons": "^0.0.11"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",