qti3-item-player-vue3 0.2.3 → 0.2.5

package/dist/assets/pci/pci.html

@@ -127,6 +127,8 @@ const QTI_PCI_API = {
   properties: null,
   contextVariables: null,
   templateVariables: null,
+  stylesheets: null,
+  catalogInfo: null,
   moduleResolution: null,
   instance: null,
   response: null,
@@ -137,107 +139,125 @@ const QTI_PCI_API = {
   height: 0,
   onQtiInteractionChanged: null,
 
-  getInstance: function () {
+  getInstance () {
     return this.instance;
   },
 
-  setInstance: function (instance) {
+  setInstance (instance) {
     this.instance = instance;
   },
 	
-  getTypeIdentifier: function () {
+  getTypeIdentifier () {
 	  return this.typeIdentifier;
   },
 	
-  setTypeIdentifier: function (typeIdentifier) {
+  setTypeIdentifier (typeIdentifier) {
 	  this.typeIdentifier = typeIdentifier;
   },
 	
-  getResponseIdentifier: function () {
+  getResponseIdentifier () {
 	  return this.responseIdentifier;
   },
 
-  setResponseIdentifier: function (responseIdentifier) {
+  setResponseIdentifier (responseIdentifier) {
 	  this.responseIdentifier = responseIdentifier;
   },
 
-  getPci: function () {
+  getPci () {
 	  return this.pci;
   },
 
-  setPci: function (pci) {
+  setPci (pci) {
 	  this.pci = pci;
   },
 
-  getDom: function () {
+  getDom () {
 	  return this.dom;
   },
 
-  setDom: function (dom) {
+  setDom (dom) {
 	  this.dom = dom;
   },
 
-  getProperties: function () {
+  getProperties () {
 	  return this.properties;
   },
 
-  setProperties: function (properties) {
+  setProperties (properties) {
 	  this.properties = properties;
   },
 
-  getContextVariables: function () {
+  getContextVariables () {
 	  return this.contextVariables;
   },
 
-  setContextVariables: function (contextVariables) {
+  setContextVariables (contextVariables) {
 	  this.contextVariables = contextVariables;
   },
 
-  getTemplateVariables: function () {
+  getTemplateVariables () {
 	  return this.templateVariables;
   },
 
-  setTemplateVariables: function (templateVariables) {
+  setTemplateVariables (templateVariables) {
 	  this.templateVariables = templateVariables;
   },
 
-  getBoundTo: function () {
+  getStylesheets () {
+	  return this.stylesheets;
+  },
+
+  setStylesheets (stylesheets) {
+    if (typeof stylesheets === 'undefined') return;
+    this.stylesheets = stylesheets;
+  },
+
+  getCatalogInfo () {
+    return this.catalogInfo;
+  },
+
+  setCatalogInfo (catalogInfo) {
+    if (typeof catalogInfo === 'undefined') return;
+    this.catalogInfo = catalogInfo;
+  },
+
+  getBoundTo () {
     return this.boundTo;
   },
 
-  setBoundTo: function (boundTo) {
+  setBoundTo (boundTo) {
     this.boundTo =  boundTo;
   },
 
-  getStatus: function () {
+  getStatus () {
     return this.status;
   },
 
-  setStatus: function (status) {
+  setStatus (status) {
     this.status = status;
   },
 
-  getModuleResolution: function () {
+  getModuleResolution () {
 	  return this.moduleResolution;
   },
 	
-  setModuleResolution: function (moduleResolution) {
+  setModuleResolution (moduleResolution) {
 	  this.moduleResolution = moduleResolution;
   },
 
-  getState: function () {
+  getState () {
 	  return this.state;
   },
 
-  setState: function (state) {
+  setState (state) {
 	  this.state = (typeof state === 'undefined') ? null : JSON.parse(state);
   },
 
-  getStateFromState: function () {
+  getStateFromState () {
 	  return (this.state === null) ? null : this.state.state;
   },
 
-  getResponseFromState: function () {
+  getResponseFromState () {
     return (this.state === null) ? undefined : this.state.response;
   },
 
@@ -246,7 +266,7 @@ const QTI_PCI_API = {
    * Upon completion, call NotifyPciStateReady, passing the 
    * stringified response and state as parameters.
    */
-  getInteractionState: function () {
+  getInteractionState () {
     const obj = {
       response: null,
       state: null
@@ -265,7 +285,7 @@ const QTI_PCI_API = {
     this.NotifyPciStateReady(JSON.stringify(obj));
   },
 
-  initialize: function (pci) {
+  initialize (pci) {
     this.setDom(document.getElementById('qti3-player-pci-element'));
     this.setPci(pci);
     this.setTypeIdentifier(pci.typeIdentifier);
@@ -273,13 +293,16 @@ const QTI_PCI_API = {
     this.setModuleResolution(pci.moduleResolution);
     this.setContextVariables(pci.contextVariables);
     this.setTemplateVariables(pci.templateVariables);
+    this.setStylesheets(pci.stylesheets);
+    this.setCatalogInfo(pci.catalogInfo);
     this.setBoundTo(pci.boundTo);
     this.setStatus(pci.status)
 
     this.trackResize(this.getDom());
     this.trackQtiInteractionChanged(this.getDom());
+    this.injectStylesheets();
     this.injectClassAttribute();
-	  this.injectMarkup();
+    this.injectMarkup();
     this.launchPci(
       this.getTypeIdentifier(), 
       this.getDom(), 
@@ -293,13 +316,13 @@ const QTI_PCI_API = {
     );
   },
 
-  injectClassAttribute: function () {
+  injectClassAttribute () {
     if (this.getPci().classAttribute.length == 0) return
     let wrapperEl = document.getElementById('qti3-player-pci-wrapper');
     wrapperEl.classList.add(this.getPci().classAttribute);
   },
 
-  injectMarkup: function () {
+  injectMarkup () {
     this.getDom().innerHTML =
       `<div
         id="qti3-player-pci-markup"
@@ -307,7 +330,21 @@ const QTI_PCI_API = {
        >${this.getPci().markup}</div>`;
   },
 
-  getModuleDependencies: function () {
+  injectStylesheets () {
+    const stylesheets = this.getStylesheets();
+    if (stylesheets === null) return;
+    stylesheets.forEach((stylesheet) => {
+      // Get the head element
+      const head = document.head;
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = stylesheet.href;
+      link.type = stylesheet.type;
+      head.appendChild(link);
+    });
+  },
+
+  getModuleDependencies () {
     // Init qtiCustomInteractionContext as the first dependency
     let dependencies = ['qtiCustomInteractionContext'];
 
@@ -333,7 +370,7 @@ const QTI_PCI_API = {
    * @param {Object} boundTo The response variable this PCI is bound to and its value
    * @param {String} status Item lifecycle status; e.g., 'interacting'
    */
-  launchPci: function (
+  launchPci (
       typeIdentifier,
       dom,
       responseIdentifier,
@@ -374,7 +411,7 @@ const QTI_PCI_API = {
     });
   },
 
-  NotifyPciChildLoaded: function () {
+  NotifyPciChildLoaded () {
     if (self == top) return;
 
     // Extract the identifier qs param
@@ -384,7 +421,7 @@ const QTI_PCI_API = {
     window.parent.postMessage({ message: 'PciChildLoaded', identifier: this.getResponseIdentifier(), success: true },'*');
   },
 
-  NotifyPciReady: function (instance, state) {
+  NotifyPciReady (instance, state) {
     this.setInstance(instance);
 
     if (self == top) return;
@@ -397,7 +434,7 @@ const QTI_PCI_API = {
     window.parent.postMessage({ message: 'PciReady', identifier: this.getResponseIdentifier(), width: computedWidth, height: computedHeight, success: true },'*');
   },
 
-  NotifyPciDone: function (instance, response, state, status) {
+  NotifyPciDone (instance, response, state, status) {
     if (self == top) return;
 
     const stringifiedState = JSON.stringify({
@@ -408,12 +445,12 @@ const QTI_PCI_API = {
     window.parent.postMessage({ message: 'PciDone', identifier: this.getResponseIdentifier(), state: stringifiedStateObject, status: status, success: true },'*');
   },
 
-  NotifyPciStateReady: function(stringifiedStateObject) {
+  NotifyPciStateReady (stringifiedStateObject) {
     if (self == top) return;
     window.parent.postMessage({ message: 'PciGetState_Reply', identifier: this.getResponseIdentifier(), state: stringifiedStateObject, success: true },'*');
   },
 
-  NotifyPciInteractionChanged: function(valid, value) {
+  NotifyPciInteractionChanged (valid, value) {
     if (self == top) return;
 
     const stringifiedState = JSON.stringify({
@@ -430,7 +467,7 @@ const QTI_PCI_API = {
    * @method getQueryParameterByName
    * @param {String} name The name of the paramter to get from the URL.
    */
-  getQueryParameterByName: function (name) {
+  getQueryParameterByName (name) {
     let regex = new RegExp("[\\?&]" + name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]') + '=([^&#]*)');
     let results = regex.exec(window.location.search);
 
@@ -439,7 +476,7 @@ const QTI_PCI_API = {
     return decodeURIComponent(results[1].replace(/\+/g, " "));
   },
 
-  bindWindowEventListener: function (element, eventName, eventHandler) {
+  bindWindowEventListener (element, eventName, eventHandler) {
     if (element.addEventListener) {
       element.addEventListener(eventName, eventHandler, false);
     } else if (element.attachEvent) {
@@ -448,7 +485,7 @@ const QTI_PCI_API = {
     }
   },
 
-  trackResize: function (element) {
+  trackResize (element) {
     // create a mutation observer instance
     let observer = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {
@@ -475,12 +512,12 @@ const QTI_PCI_API = {
     });
   },
 
-  trackQtiInteractionChanged: function (domElement) {
+  trackQtiInteractionChanged (domElement) {
     this.onQtiInteractionChanged = this.onQtiInteractionChangedHandler.bind(this);
     domElement.addEventListener('qti-interaction-changed', this.onQtiInteractionChanged);
   },
 
-  onQtiInteractionChangedHandler: function(event) {
+  onQtiInteractionChangedHandler (event) {
     event.preventDefault();
 
     if (typeof event.detail === 'undefined') {

package/dist/qti3-item-player-vue3.js

@@ -1426,9 +1426,9 @@ class re {
       case "directedPair":
       case "pair":
       case "uri":
+      case "file":
         return s[i] = t, s;
       case "intOrIdentifier":
-      case "file":
         return s[i] = null, s;
       default:
         return s[i] = null, s;
@@ -1557,6 +1557,34 @@ class re {
   computeNodeContext(t) {
     return t === null || t.$options.name === "QtiAssessmentItem" ? "ITEM" : t.$options.name === "QtiAssessmentTest" ? "TEST" : this.computeNodeContext(t.$parent);
   }
+  base64ToBytes(t) {
+    const i = atob(t);
+    return Uint8Array.from(i, (s) => s.codePointAt(0));
+  }
+  bytesToBase64(t) {
+    const i = Array.from(
+      t,
+      (s) => String.fromCodePoint(s)
+    ).join("");
+    return btoa(i);
+  }
+  /**
+   * @description Utility method to base64-encode arbitrary bytes.
+   * @param {*} bytes 
+   * @returns base64-encoded string
+   */
+  encodeBytesToBase64(t) {
+    const i = new TextEncoder();
+    return this.bytesToBase64(i.encode(t));
+  }
+  /**
+   * @description Utility method to decode base64 bytes.
+   * @param {*} base64 
+   * @returns decoded string
+   */
+  decodeBase64ToBytes(t) {
+    return new TextDecoder().decode(this.base64ToBytes(t));
+  }
 }
 const yv = new re(), S = {
   player: null,
@@ -4915,8 +4943,11 @@ const D = (e, t) => {
     createTabs(e) {
       this.tabs.create(e);
     },
+    focusFirstTab() {
+      this.tabs !== null && this.tabs.focusFirstTab();
+    },
     show() {
-      this.state.hidden = !1, this.render(), this.state.isShown || (this.state.isShown = !0, this.center());
+      this.state.hidden = !1, this.render(), this.focusFirstTab(), this.state.isShown || (this.state.isShown = !0, this.center());
     },
     hide() {
       this.state.hidden = !0, this.render();
@@ -5757,9 +5788,13 @@ class ZT {
       },
       GLOSSARY_CLICKABLE_CLASS: "qti3-player-catalog-clickable-term",
       // No language specified
-      LANGUAGE_OFF: ""
+      LANGUAGE_OFF: "",
+      keys: {
+        ENTER: 13,
+        SPACE: 32
+      }
     });
-    return this.item = t, this.itemElement = t.$refs.item, this.store = i, this.nodeList = null, this.showGlossary = this.showGlossaryHandler.bind(this), this;
+    return this.item = t, this.itemElement = t.$refs.item, this.store = i, this.nodeList = null, this.showGlossary = this.showGlossaryHandler.bind(this), this.onKeyDown = this.keydownHandler.bind(this), this;
   }
   bindAll() {
     this.store.getCatalogs().length !== 0 && (this.resetAll(), this.nodeList = this.itemElement.querySelectorAll("[data-catalog-idref]"), this.nodeList.length !== 0 && this.bindGlossary(this.nodeList));
@@ -5808,7 +5843,7 @@ class ZT {
    * @param {DomElement} node
    */
   bindGlossaryDOM(t) {
-    t.classList.contains(this.constants.GLOSSARY_CLICKABLE_CLASS) || (t.classList.add(this.constants.GLOSSARY_CLICKABLE_CLASS), this.setGlossaryTerm(t), t.addEventListener("click", this.showGlossary), t.addEventListener("touchend", this.showGlossary));
+    t.classList.contains(this.constants.GLOSSARY_CLICKABLE_CLASS) || (t.classList.add(this.constants.GLOSSARY_CLICKABLE_CLASS), t.setAttribute("tabindex", "0"), this.setGlossaryTerm(t), t.addEventListener("click", this.showGlossary), t.addEventListener("touchend", this.showGlossary), t.addEventListener("keydown", this.onKeyDown));
   }
   /**
    * @description This unbinds a DOM element as a clickable
@@ -5816,7 +5851,7 @@ class ZT {
    * @param {DomElement} node
    */
   unbindGlossaryDOM(t) {
-    t.classList.contains(this.constants.GLOSSARY_CLICKABLE_CLASS) && (t.classList.remove(this.constants.GLOSSARY_CLICKABLE_CLASS), t.removeEventListener("click", this.showGlossary), t.removeEventListener("touchend", this.showGlossary));
+    t.classList.contains(this.constants.GLOSSARY_CLICKABLE_CLASS) && (t.classList.remove(this.constants.GLOSSARY_CLICKABLE_CLASS), t.setAttribute("tabindex", "-1"), t.removeEventListener("click", this.showGlossary), t.removeEventListener("touchend", this.showGlossary), t.removeEventListener("keydown", this.keyDownHandler));
   }
   /**
    * @description Set a data-glossary-term on a node in the DOM.
@@ -5831,6 +5866,29 @@ class ZT {
       t.setAttribute("data-glossary-term", t.innerText);
     }
   }
+  /**
+   * @description Handles a Show Glossary Click or Touch event.
+   * @param {Event} event - contains the event target and
+   *                        the data-catalog-idref
+   */
+  showGlossaryHandler(t) {
+    t.preventDefault(), t.stopPropagation(), this.emitShowGlossaryEvent(t);
+  }
+  /**
+   * @description Handles a Show Glossary Keydown  event.
+   * @param {Event} event - contains the event target and
+   *                        the data-catalog-idref
+   */
+  keydownHandler(t) {
+    let i = !1;
+    switch (t.keyCode) {
+      case this.constants.keys.SPACE:
+      case this.constants.keys.ENTER:
+        this.emitShowGlossaryEvent(t), i = !0;
+        break;
+    }
+    i && (t.stopPropagation(), t.preventDefault());
+  }
   /**
    * @description Does the heavy work of building a Glossary data payload.
    * Sends an 'itemCatalogEvent' to the parent and passes the Glossary data
@@ -5838,8 +5896,7 @@ class ZT {
    * @param {Event} event - contains the event target and
    *                        the data-catalog-idref
    */
-  showGlossaryHandler(t) {
-    t.preventDefault(), t.stopPropagation();
+  emitShowGlossaryEvent(t) {
     const i = t.target.getAttribute("data-catalog-idref"), s = this.createGlossaryData(i);
     this.item.$parent.$emit("itemCatalogEvent", {
       type: "glossary",
@@ -8997,6 +9054,12 @@ const J1 = {
     };
   },
   methods: {
+    getHref() {
+      return this.href;
+    },
+    getType() {
+      return this.type;
+    },
     /**
      * @description Pull the stylesheet from the Href URI.
      * Wrap stylesheet contents in a style element, then inject into the
@@ -28672,7 +28735,7 @@ class RO {
         a[o] !== null && !a[o].startsWith("http") && (s ? a[o] = `${this.getConfigurationRelativePath(t)}${a[o]}` : a[o] = `${this.getItemPathUri()}${a[o]}`);
       return r;
     } catch (n) {
-      return console.log((i ? "Primary" : "Fallback") + "configuration Fetch error:", n), null;
+      return console.log((i ? "Primary" : "Fallback") + " Configuration Fetch error:", n), null;
     }
   }
   async fetchDefaultModuleResolution(t, i) {
@@ -28808,6 +28871,8 @@ const ah = new j(), Nm = new re(), NO = {
       configuration: null,
       templateVariables: [],
       contextVariables: [],
+      stylesheets: [],
+      catalogInfoNode: null,
       uniqueId: null,
       pciIframe: null,
       isReady: !1,
@@ -28966,36 +29031,47 @@ const ah = new j(), Nm = new re(), NO = {
      */
     validateChildren() {
       if (!this.$slots.default) return;
-      let e = !1, t = !1, i = !1, s = !1, n = !1;
-      this.$slots.default().forEach((r) => {
-        if (ah.isValidSlot(r)) {
-          if (r.type.name === "QtiPrompt") {
-            if (t || i || s || n)
+      let e = !1, t = !1, i = !1, s = !1, n = !1, r = !1, a = !1;
+      this.$slots.default().forEach((o) => {
+        if (ah.isValidSlot(o)) {
+          if (o.type.name === "QtiPrompt") {
+            if (t || i || s || n || r || a)
               throw new l("Invalid element order. qti-prompt must be the first element");
             if (!e) return e = !0;
             throw new l("Maximum of 1 qti-prompt element permitted");
           }
-          if (r.type.name === "QtiInteractionModules") {
-            if (t || s || n)
+          if (o.type.name === "QtiInteractionModules") {
+            if (t || s || n || r || a)
               throw new l("Invalid element order: qti-interaction-modules");
             if (!i) return i = !0;
             throw new l("Maximum of 1 qti-interaction-modules element permitted");
           }
-          if (r.type.name === "QtiInteractionMarkup") {
-            if (s || n)
+          if (o.type.name === "QtiInteractionMarkup") {
+            if (s || n || r || a)
               throw new l("Invalid element order: qti-interaction-markup");
             if (!t) return t = !0;
             throw new l("Maximum of 1 qti-interaction-markup element permitted");
           }
-          if (r.type.name === "QtiTemplateVariable") {
-            if (s)
+          if (o.type.name === "QtiTemplateVariable") {
+            if (s || r || a)
               throw new l("Invalid element order: qti-template-variable");
-            if (!n) return n = !0;
-            throw new l("Maximum of 1 qti-interaction-markup element permitted");
+            return n = !0;
+          }
+          if (o.type.name === "QtiContextVariable") {
+            if (r || a)
+              throw new l("Invalid element order: qti-context-variable");
+            return s = !0;
           }
-          if (r.type.name === "QtiContextVariable") return s = !0;
-          if (r.type.name === "QtiStylesheet") return !0;
-          throw new l('Node is not permitted inside QtiPortableCustomInteraction: "' + r.type.name + '"');
+          if (o.type.name === "QtiStylesheet") {
+            if (a)
+              throw new l("Invalid element order: qti-stylesheet");
+            return r = !0;
+          }
+          if (o.type.name === "QtiCatalogInfo") {
+            if (!a) return a = !0;
+            throw new l("Maximum of 1 qti-catalog-info element permitted");
+          }
+          throw new l('Node is not permitted inside QtiPortableCustomInteraction: "' + o.type.name + '"');
         }
       });
     },
@@ -29017,6 +29093,12 @@ const ah = new j(), Nm = new re(), NO = {
           case "QtiContextVariable":
             this.contextVariables.push(i);
             break;
+          case "QtiStylesheet":
+            this.stylesheets.push(i);
+            break;
+          case "QtiCatalogInfo":
+            this.catalogInfoNode = i;
+            break;
         }
       }), this.priorState !== null && this.restoreValue(this.priorState.value, this.priorState.state), this.initialWidth = this.$refs.root.clientWidth);
     },
@@ -29087,6 +29169,17 @@ const ah = new j(), Nm = new re(), NO = {
         e[this.templateVariables[t].getIdentifier()] = this.templateVariables[t].evaluate();
       return e;
     },
+    getStylesheets() {
+      let e = [];
+      for (let t = 0; t < this.stylesheets.length; t++) {
+        const i = this.stylesheets[t];
+        e.push({ href: i.getHref(), type: i.getType() });
+      }
+      return e;
+    },
+    getCatalogInfo() {
+      return this.catalogInfoNode;
+    },
     getModules() {
       return this.modules;
     },
@@ -29129,6 +29222,8 @@ const ah = new j(), Nm = new re(), NO = {
         boundTo: this.getResponseVariable(),
         templateVariables: this.getTemplateVariables(),
         contextVariables: this.getContextVariables(),
+        stylesheets: this.getStylesheets(),
+        catalogInfo: this.getCatalogInfo(),
         module: this.module,
         modules: this.getModules(),
         moduleResolution: this.getConfiguration(),