qti3-item-player-vue3 0.2.4 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -127,6 +127,8 @@ const QTI_PCI_API = {
127
127
  properties: null,
128
128
  contextVariables: null,
129
129
  templateVariables: null,
130
+ stylesheets: null,
131
+ catalogInfo: null,
130
132
  moduleResolution: null,
131
133
  instance: null,
132
134
  response: null,
@@ -137,107 +139,125 @@ const QTI_PCI_API = {
137
139
  height: 0,
138
140
  onQtiInteractionChanged: null,
139
141
 
140
- getInstance: function () {
142
+ getInstance () {
141
143
  return this.instance;
142
144
  },
143
145
 
144
- setInstance: function (instance) {
146
+ setInstance (instance) {
145
147
  this.instance = instance;
146
148
  },
147
149
 
148
- getTypeIdentifier: function () {
150
+ getTypeIdentifier () {
149
151
  return this.typeIdentifier;
150
152
  },
151
153
 
152
- setTypeIdentifier: function (typeIdentifier) {
154
+ setTypeIdentifier (typeIdentifier) {
153
155
  this.typeIdentifier = typeIdentifier;
154
156
  },
155
157
 
156
- getResponseIdentifier: function () {
158
+ getResponseIdentifier () {
157
159
  return this.responseIdentifier;
158
160
  },
159
161
 
160
- setResponseIdentifier: function (responseIdentifier) {
162
+ setResponseIdentifier (responseIdentifier) {
161
163
  this.responseIdentifier = responseIdentifier;
162
164
  },
163
165
 
164
- getPci: function () {
166
+ getPci () {
165
167
  return this.pci;
166
168
  },
167
169
 
168
- setPci: function (pci) {
170
+ setPci (pci) {
169
171
  this.pci = pci;
170
172
  },
171
173
 
172
- getDom: function () {
174
+ getDom () {
173
175
  return this.dom;
174
176
  },
175
177
 
176
- setDom: function (dom) {
178
+ setDom (dom) {
177
179
  this.dom = dom;
178
180
  },
179
181
 
180
- getProperties: function () {
182
+ getProperties () {
181
183
  return this.properties;
182
184
  },
183
185
 
184
- setProperties: function (properties) {
186
+ setProperties (properties) {
185
187
  this.properties = properties;
186
188
  },
187
189
 
188
- getContextVariables: function () {
190
+ getContextVariables () {
189
191
  return this.contextVariables;
190
192
  },
191
193
 
192
- setContextVariables: function (contextVariables) {
194
+ setContextVariables (contextVariables) {
193
195
  this.contextVariables = contextVariables;
194
196
  },
195
197
 
196
- getTemplateVariables: function () {
198
+ getTemplateVariables () {
197
199
  return this.templateVariables;
198
200
  },
199
201
 
200
- setTemplateVariables: function (templateVariables) {
202
+ setTemplateVariables (templateVariables) {
201
203
  this.templateVariables = templateVariables;
202
204
  },
203
205
 
204
- getBoundTo: function () {
206
+ getStylesheets () {
207
+ return this.stylesheets;
208
+ },
209
+
210
+ setStylesheets (stylesheets) {
211
+ if (typeof stylesheets === 'undefined') return;
212
+ this.stylesheets = stylesheets;
213
+ },
214
+
215
+ getCatalogInfo () {
216
+ return this.catalogInfo;
217
+ },
218
+
219
+ setCatalogInfo (catalogInfo) {
220
+ if (typeof catalogInfo === 'undefined') return;
221
+ this.catalogInfo = catalogInfo;
222
+ },
223
+
224
+ getBoundTo () {
205
225
  return this.boundTo;
206
226
  },
207
227
 
208
- setBoundTo: function (boundTo) {
228
+ setBoundTo (boundTo) {
209
229
  this.boundTo = boundTo;
210
230
  },
211
231
 
212
- getStatus: function () {
232
+ getStatus () {
213
233
  return this.status;
214
234
  },
215
235
 
216
- setStatus: function (status) {
236
+ setStatus (status) {
217
237
  this.status = status;
218
238
  },
219
239
 
220
- getModuleResolution: function () {
240
+ getModuleResolution () {
221
241
  return this.moduleResolution;
222
242
  },
223
243
 
224
- setModuleResolution: function (moduleResolution) {
244
+ setModuleResolution (moduleResolution) {
225
245
  this.moduleResolution = moduleResolution;
226
246
  },
227
247
 
228
- getState: function () {
248
+ getState () {
229
249
  return this.state;
230
250
  },
231
251
 
232
- setState: function (state) {
252
+ setState (state) {
233
253
  this.state = (typeof state === 'undefined') ? null : JSON.parse(state);
234
254
  },
235
255
 
236
- getStateFromState: function () {
256
+ getStateFromState () {
237
257
  return (this.state === null) ? null : this.state.state;
238
258
  },
239
259
 
240
- getResponseFromState: function () {
260
+ getResponseFromState () {
241
261
  return (this.state === null) ? undefined : this.state.response;
242
262
  },
243
263
 
@@ -246,7 +266,7 @@ const QTI_PCI_API = {
246
266
  * Upon completion, call NotifyPciStateReady, passing the
247
267
  * stringified response and state as parameters.
248
268
  */
249
- getInteractionState: function () {
269
+ getInteractionState () {
250
270
  const obj = {
251
271
  response: null,
252
272
  state: null
@@ -265,21 +285,24 @@ const QTI_PCI_API = {
265
285
  this.NotifyPciStateReady(JSON.stringify(obj));
266
286
  },
267
287
 
268
- initialize: function (pci) {
288
+ initialize (pci) {
269
289
  this.setDom(document.getElementById('qti3-player-pci-element'));
270
290
  this.setPci(pci);
271
291
  this.setTypeIdentifier(pci.typeIdentifier);
272
- this.setProperties(pci.properties);
292
+ this.setProperties(this.transformProperties(pci.properties));
273
293
  this.setModuleResolution(pci.moduleResolution);
274
294
  this.setContextVariables(pci.contextVariables);
275
295
  this.setTemplateVariables(pci.templateVariables);
296
+ this.setStylesheets(pci.stylesheets);
297
+ this.setCatalogInfo(pci.catalogInfo);
276
298
  this.setBoundTo(pci.boundTo);
277
299
  this.setStatus(pci.status)
278
300
 
279
301
  this.trackResize(this.getDom());
280
302
  this.trackQtiInteractionChanged(this.getDom());
303
+ this.injectStylesheets();
281
304
  this.injectClassAttribute();
282
- this.injectMarkup();
305
+ this.injectMarkup();
283
306
  this.launchPci(
284
307
  this.getTypeIdentifier(),
285
308
  this.getDom(),
@@ -293,13 +316,13 @@ const QTI_PCI_API = {
293
316
  );
294
317
  },
295
318
 
296
- injectClassAttribute: function () {
319
+ injectClassAttribute () {
297
320
  if (this.getPci().classAttribute.length == 0) return
298
321
  let wrapperEl = document.getElementById('qti3-player-pci-wrapper');
299
322
  wrapperEl.classList.add(this.getPci().classAttribute);
300
323
  },
301
324
 
302
- injectMarkup: function () {
325
+ injectMarkup () {
303
326
  this.getDom().innerHTML =
304
327
  `<div
305
328
  id="qti3-player-pci-markup"
@@ -307,16 +330,53 @@ const QTI_PCI_API = {
307
330
  >${this.getPci().markup}</div>`;
308
331
  },
309
332
 
310
- getModuleDependencies: function () {
333
+ injectStylesheets () {
334
+ const stylesheets = this.getStylesheets()
335
+ if (stylesheets === null) return
336
+ stylesheets.forEach((stylesheet) => {
337
+ if (!stylesheet.hasOwnProperty('css')) return
338
+ // Stylesheet css property is base64. Decode it.
339
+ const cssText = this.decodeBase64ToBytes(stylesheet.css)
340
+ const style = document.createElement('style')
341
+ style.innerHTML = `${cssText}`
342
+ document.head.appendChild(style)
343
+ })
344
+ },
345
+
346
+ /**
347
+ * @description Transform the given properties object into a new object
348
+ * containing the same keys, but with base64-decoded values.
349
+ * @param {Object} properties
350
+ * @return {Object} transformed properties object with decoded values
351
+ */
352
+ transformProperties (properties) {
353
+ const props = {}
354
+ for (const [key, value] of Object.entries(properties)) {
355
+ props[`${key}`] = `${this.decodeBase64ToBytes(value)}`
356
+ }
357
+ return props
358
+ },
359
+
360
+ decodeBase64ToBytes (base64) {
361
+ const textDecoder = new TextDecoder()
362
+ return textDecoder.decode(this.base64ToBytes(base64))
363
+ },
364
+
365
+ base64ToBytes (base64) {
366
+ const binString = atob(base64)
367
+ return Uint8Array.from(binString, (m) => m.codePointAt(0))
368
+ },
369
+
370
+ getModuleDependencies () {
311
371
  // Init qtiCustomInteractionContext as the first dependency
312
- let dependencies = ['qtiCustomInteractionContext'];
372
+ let dependencies = ['qtiCustomInteractionContext']
313
373
 
314
- const paths = this.getModuleResolution().paths;
374
+ const paths = this.getModuleResolution().paths
315
375
  for (let property in paths) {
316
- dependencies.push(property);
317
- };
376
+ dependencies.push(property)
377
+ }
318
378
 
319
- return dependencies;
379
+ return dependencies
320
380
  },
321
381
 
322
382
  /**
@@ -333,7 +393,7 @@ const QTI_PCI_API = {
333
393
  * @param {Object} boundTo The response variable this PCI is bound to and its value
334
394
  * @param {String} status Item lifecycle status; e.g., 'interacting'
335
395
  */
336
- launchPci: function (
396
+ launchPci (
337
397
  typeIdentifier,
338
398
  dom,
339
399
  responseIdentifier,
@@ -374,7 +434,7 @@ const QTI_PCI_API = {
374
434
  });
375
435
  },
376
436
 
377
- NotifyPciChildLoaded: function () {
437
+ NotifyPciChildLoaded () {
378
438
  if (self == top) return;
379
439
 
380
440
  // Extract the identifier qs param
@@ -384,7 +444,7 @@ const QTI_PCI_API = {
384
444
  window.parent.postMessage({ message: 'PciChildLoaded', identifier: this.getResponseIdentifier(), success: true },'*');
385
445
  },
386
446
 
387
- NotifyPciReady: function (instance, state) {
447
+ NotifyPciReady (instance, state) {
388
448
  this.setInstance(instance);
389
449
 
390
450
  if (self == top) return;
@@ -397,7 +457,7 @@ const QTI_PCI_API = {
397
457
  window.parent.postMessage({ message: 'PciReady', identifier: this.getResponseIdentifier(), width: computedWidth, height: computedHeight, success: true },'*');
398
458
  },
399
459
 
400
- NotifyPciDone: function (instance, response, state, status) {
460
+ NotifyPciDone (instance, response, state, status) {
401
461
  if (self == top) return;
402
462
 
403
463
  const stringifiedState = JSON.stringify({
@@ -408,12 +468,12 @@ const QTI_PCI_API = {
408
468
  window.parent.postMessage({ message: 'PciDone', identifier: this.getResponseIdentifier(), state: stringifiedStateObject, status: status, success: true },'*');
409
469
  },
410
470
 
411
- NotifyPciStateReady: function(stringifiedStateObject) {
471
+ NotifyPciStateReady (stringifiedStateObject) {
412
472
  if (self == top) return;
413
473
  window.parent.postMessage({ message: 'PciGetState_Reply', identifier: this.getResponseIdentifier(), state: stringifiedStateObject, success: true },'*');
414
474
  },
415
475
 
416
- NotifyPciInteractionChanged: function(valid, value) {
476
+ NotifyPciInteractionChanged (valid, value) {
417
477
  if (self == top) return;
418
478
 
419
479
  const stringifiedState = JSON.stringify({
@@ -430,7 +490,7 @@ const QTI_PCI_API = {
430
490
  * @method getQueryParameterByName
431
491
  * @param {String} name The name of the paramter to get from the URL.
432
492
  */
433
- getQueryParameterByName: function (name) {
493
+ getQueryParameterByName (name) {
434
494
  let regex = new RegExp("[\\?&]" + name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]') + '=([^&#]*)');
435
495
  let results = regex.exec(window.location.search);
436
496
 
@@ -439,7 +499,7 @@ const QTI_PCI_API = {
439
499
  return decodeURIComponent(results[1].replace(/\+/g, " "));
440
500
  },
441
501
 
442
- bindWindowEventListener: function (element, eventName, eventHandler) {
502
+ bindWindowEventListener (element, eventName, eventHandler) {
443
503
  if (element.addEventListener) {
444
504
  element.addEventListener(eventName, eventHandler, false);
445
505
  } else if (element.attachEvent) {
@@ -448,7 +508,7 @@ const QTI_PCI_API = {
448
508
  }
449
509
  },
450
510
 
451
- trackResize: function (element) {
511
+ trackResize (element) {
452
512
  // create a mutation observer instance
453
513
  let observer = new MutationObserver(function(mutations) {
454
514
  mutations.forEach(function(mutation) {
@@ -475,12 +535,12 @@ const QTI_PCI_API = {
475
535
  });
476
536
  },
477
537
 
478
- trackQtiInteractionChanged: function (domElement) {
538
+ trackQtiInteractionChanged (domElement) {
479
539
  this.onQtiInteractionChanged = this.onQtiInteractionChangedHandler.bind(this);
480
540
  domElement.addEventListener('qti-interaction-changed', this.onQtiInteractionChanged);
481
541
  },
482
542
 
483
- onQtiInteractionChangedHandler: function(event) {
543
+ onQtiInteractionChangedHandler (event) {
484
544
  event.preventDefault();
485
545
 
486
546
  if (typeof event.detail === 'undefined') {