@citolab/tspci-qbci 2.4.3 → 2.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci-qbci",
-  "version": "2.4.3",
+  "version": "2.4.6",
   "description": "create a .ci file that can be imported into Questify",
   "author": "patrick <patrick.deklein@cito.nl>, Marcel Hoekstra <marcel.hoekstra@cito.nl>",
   "repository": "",
@@ -10,7 +10,7 @@
     "archiver": "^5.3.0"
   },
   "scripts": {},
-  "gitHead": "332d6bc561050b4bd827c8abf9d9c0376b6870d7",
+  "gitHead": "ad870b11096e4c5d5b151143569c3bee51a12fc6",
   "publishConfig": {
     "access": "public"
   }

package/public/index.html

@@ -18,7 +18,7 @@
         font-size: 100%;
       }
       #pciContainer {
-        display:block;
+        display: block;
         width: 100%;
         /* min-width: 800px; */
         padding: 20px;
@@ -41,20 +41,28 @@
   </head>
   <body class="bg-light">
     <div class="container">
-      <iframe id="pciContainer" class="shadow-sm"> </iframe>
+      <div id="pciContainer" class="shadow-sm"></div>
       <div id="devtools"></div>
     </div>
 
     <script type="module">
       import { h, Component, render } from "https://unpkg.com/preact@latest?module";
-      import { useState, useEffect } from "https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module";
+      import { useState, useEffect, useRef } from "https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module";
       import htm from "https://unpkg.com/htm?module";
       // Initialize htm with Preact
       const html = htm.bind(h);
 
-      function App() {
+      function App({ item }) {
         const [show, setShow] = useState(false);
 
+        let keyArray = [];
+        if (item.config && item.config.properties) {
+          keyArray = Object.keys(item.config.properties).map((keyName, keyIndex) => ({
+            key: keyName,
+            value: item.config.properties[keyName],
+          }));
+        }
+
         function resetlocalstorage() {
           localStorage.removeItem(item.typeIdentifier + "_props");
           localStorage.removeItem(item.typeIdentifier + "_response");
@@ -68,7 +76,7 @@
 
         function changeConfig(key, value) {
           item.config.properties[key] = value;
-          item.trigger(`change${key}`, value);
+          item.trigger && item.trigger(`change${key}`, value);
         }
 
         function reConfig(key, value) {
@@ -78,9 +86,46 @@
 
         return html`
           <div>
+            <div style="width:300px" class="shadow offcanvas offcanvas-end ${show ? "show visible" : ""}">
+              <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="offcanvasExampleLabel">properties</h5>
+                <button
+                  type="button"
+                  onClick="${() => setShow(false)}"
+                  disabled="${!item.config}"
+                  class="btn-close text-reset"
+                ></button>
+              </div>
+              <div class="offcanvas-body">
+                <ul class="card-body">
+                  ${keyArray.map(
+                    ({ key, value }) => html`<div>
+                      <div>${key}</div>
+                      <input
+                        type="text"
+                        class="form-control"
+                        value="${value}"
+                        onkeyup="${(e) => changeConfig(key, e.target.value)}"
+                      />
+                    </div>`
+                  )}
+                </ul>
+                <button class="btn btn-primary" onClick="${() => reConfig()}">save and reload</button>
+              </div>
+            </div>
+
             <div class="d-flex justify-content-start mt-3" role="toolbar" aria-label="Toolbar with button groups">
-              <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
-                <button class="btn btn-outline-secondary" onClick="${() => reload()}">reload</button>
+              <div class="d-flex flex-column">
+                <small class="text-muted">configuration</small>
+                <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
+                  <button class="btn btn-outline-secondary" onClick="${() => setShow(true)}">config</button>
+                </div>
+              </div>
+              <div class="d-flex flex-column">
+                <small class="text-muted">state</small>
+                <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
+                  <button class="btn btn-outline-secondary" onClick="${() => reload()}">reload</button>
+                </div>
               </div>
             </div>
           </div>
@@ -96,25 +141,38 @@
       window["CES"] = {
         response: response,
         setResponse: (data) => {
-          console.log("setting the data", data)
+          console.log("setting the data", data);
           response = data;
         },
-        getResponse: () => {
+        getResponse: (itemInstance = null) => {
           console.log("getting the data");
           return response;
         },
       };
-      var iframe = document.getElementById("pciContainer"),
-        iframeWin = iframe.contentWindow || iframe,
-        iframeDoc = iframe.contentDocument || iframeWin.document;
 
-      iframe.onload = () => {
-        render(html`<${App} />`, document.getElementById("devtools"));
-      };
+      const pciContainer = document.getElementById("pciContainer");
+
+      define("qtiCustomInteractionContext", (qtiCustomInteractionContext) => {
+        // return { register: (ctxA) => register(ctxA) };
+      });
+
+      function loadItem() {
+        requirejs(["index.js"], (itemInstance) => {
+          render(html`<${App} item="${new itemInstance.App(pciContainer)}" />`, document.getElementById("devtools"));
+        });
+      }
+
+      window.onload = loadItem;
+
+      // if (itemInstance) render(html`<${App} item="${itemInstance}" />`, document.getElementById("devtools"));
+
+      // const iframe = pciContainer;
+      // const iframeWin = iframe.contentWindow || iframe;
+      // const iframeDoc = iframe.contentDocument || iframeWin.document;
 
-      iframeDoc.open();
-      iframeDoc.write("\<html>\<head>\<script src='index.js'>\<\/script>\<\/head>\<body>\<\/body>\<\/html>");
-      iframeDoc.close();
+      // iframeDoc.open();
+      // iframeDoc.write("\<html>\<head>\<script src='index.js'>\<\/script>\<\/head>\<body>\<\/body>\<\/html>");
+      // iframeDoc.close();
 
       localStorage.removeItem("ci_response");
     </script>

package/questify-default/metadata.json

@@ -1,7 +1,7 @@
 {
-    "title": "###___title___###",
-    "typeIdentifier": "###___typeIdentifier___###",
-    "width": 500,
-    "height": 500,
-    "scalable": true
-}
+  "title": "###___title___###",
+  "typeIdentifier": "###___typeIdentifier___###",
+  "width": 500,
+  "height": 500,
+  "scalable": true
+}

package/src/createPackage.mjs

@@ -30,34 +30,28 @@ export const bundle = () => {
   const rawConfigData = fs.readFileSync(config);
   const packageData = JSON.parse(rawConfigData);
 
-  const questifyMetadata = path.join(path.join(PACKAGER_PATH, "questify-default"), "metadata.json");
-  if (!fs.existsSync(config)) {
+  // PACKAGE_ROOT_PATH
+  let questifyMetadata = path.join(PACKAGE_ROOT_PATH, "metadata.json");
+  if (!fs.existsSync(questifyMetadata)) {
     console.error(`cannot find metadata.json: ${questifyMetadata}`);
-    process.exit();
+    questifyMetadata = path.join(path.join(PACKAGER_PATH, "questify-default"), "metadata.json");
   }
+
   const rawMetadata = fs.readFileSync(questifyMetadata);
   const questifyMetadataData = JSON.parse(rawMetadata);
 
   const propertiesToReplace = {
-    typeIdentifier: "emptytypeIdentifier",
-    width: "500",
-    height: "500",
+    typeIdentifier: "emptytypeIdentifier"
   };
   copyDirectoryRecursiveSync(path.join(PACKAGER_PATH, "questify-default"), outputDirectoryTemp, false);
 
   const name = packageData.label
     ? packageData.label
     : packageData.name
-    ? packageData.name.split("/")[packageData.name.split("/").length - 1]
-    : "ci";
+      ? packageData.name.split("/")[packageData.name.split("/").length - 1]
+      : "ci";
 
   for (const propertyName in propertiesToReplace) {
-    if (!packageData.config?.tspci[propertyName]) {
-      console.error(
-        "'typeIdentifier' should be added as an option in package.json and should match the typeIdentifier of the PCI code file."
-      );
-      return;
-    }
     if (propertyName === "typeIdentifier") {
       if (!packageData.config?.tspci[propertyName]) {
         console.error(
@@ -71,12 +65,12 @@ export const bundle = () => {
           );
       }
     }
-    if ( packageData.config.tspci[propertyName]) {
+    if (packageData.config.tspci[propertyName]) {
       propertiesToReplace[propertyName] = packageData.config.tspci[propertyName];
     }
   }
 
-  for(const propertyName in propertiesToReplace) {
+  for (const propertyName in propertiesToReplace) {
     questifyMetadataData[propertyName] = propertiesToReplace[propertyName];
   }
 

package/types/index.d.ts

@@ -20,12 +20,12 @@ export interface CES {
   //  */
   // getMedia: () => [];
 
-  // /** 
+  // /**
   //  * @access public
   //  * @deprecated not really deprecated, but bundled ci does not contain media ever again
-  //  * Convenience function to adjust the height of the generated iframe 
+  //  * Convenience function to adjust the height of the generated iframe
   //  * to the current height of the custom interaction’s content height;
-  //  * if that content’s visual size exceeds its layout box (e.g. by using box-shadow), 
+  //  * if that content’s visual size exceeds its layout box (e.g. by using box-shadow),
   //  * an optional vertical margin can be specified.
   //  * @method setStageHeight
   //  * @arg NumberverticalMargin
@@ -46,9 +46,9 @@ export interface CI<ConfigProperties> {
    *  This must have been obtained from a prior call to getState on an
    *  instance of this type (same typeIdentifier)
    */
-   getInstance: (dom: HTMLElement, configuration: Configuration<ConfigProperties>, state: string) => void;
+  getInstance: (dom: HTMLElement, configuration: Configuration<ConfigProperties>, state: string) => void;
 }
 
 export declare type Configuration<T> = {
   properties: T;
-};
+};