STACK: Fix relative links returned by API in JS library (PR #2701)

Author: geoo89

js/pretext-stack/stackapicalls.js

@@ -33,7 +33,7 @@ async function collectData(qfile, qname, qprefix) {
       };
     });
   // }
-  return res
+  return res;
 }
 
 // Get the different input elements by tag and return object with values.
@@ -85,12 +85,16 @@ function send(qfile, qname, qprefix) {
         renameIframeHolders();
         let question = json.questionrender;
         const inputs = json.questioninputs;
+        const seed = json.questionseed;
         let correctAnswers = '';
         // Show correct answers.
         for (const [name, input] of Object.entries(inputs)) {
           question = question.replace(`[[input:${name}]]`, input.render);
           // question = question.replaceAll(`${inputPrefix}`,`${qprefix+inputPrefix}`);
           question = question.replace(`[[validation:${name}]]`, `<span name='${qprefix+validationPrefix + name}'></span>`);
+          // This is a bit of a hack. The question render returns an <a href="..."> calling the download function with
+          // two arguments. We add the additional arguments that we need for context (question definition) here.
+          question = question.replace(/javascript:download\(([^,]+?),([^,]+?)\)/, `javascript:download($1,$2, '${qfile}', '${qname}', '${qprefix}', ${seed})`);
           if (input.samplesolutionrender && name !== 'remember') {
             // Display render of answer and matching user input to produce the answer.
             correctAnswers += `<p>
@@ -113,9 +117,10 @@ function send(qfile, qname, qprefix) {
         }
         // Convert Moodle plot filenames to API filenames.
         for (const [name, file] of Object.entries(json.questionassets)) {
-          question = question.replace(name, `plots/${file}`);
-          json.questionsamplesolutiontext = json.questionsamplesolutiontext.replace(name, `plots/${file}`);
-          correctAnswers = correctAnswers.replace(name, `plots/${file}`);
+          const plotUrl = getPlotUrl(file);
+          question = question.replace(name, plotUrl);
+          json.questionsamplesolutiontext = json.questionsamplesolutiontext.replace(name, plotUrl);
+          correctAnswers = correctAnswers.replace(name, plotUrl);
         }
 
         question = replaceFeedbackTags(question,qprefix);
@@ -135,7 +140,6 @@ function send(qfile, qname, qprefix) {
               if (currentTimeout) {
                 window.clearTimeout(currentTimeout);
               }
-              console.log(event.target);
               timeOutHandler[event.target.id] = window.setTimeout(validate.bind(null, event.target, qfile, qname, qprefix), 1000);
             };
           }
@@ -203,7 +207,6 @@ function validate(element, qfile, qname, qprefix) {
         renameIframeHolders();
         const validationHTML = json.validation;
         const element = document.getElementsByName(`${qprefix+validationPrefix + answerName}`)[0];
-        console.log(element);
         element.innerHTML = validationHTML;
         if (validationHTML) {
           element.classList.add('validation');
@@ -268,7 +271,7 @@ function answer(qfile, qname, qprefix, seed) {
         // Replace tags and plots in specific feedback and then display.
         if (json.specificfeedback) {
           for (const [name, file] of Object.entries(json.gradingassets)) {
-            json.specificfeedback = json.specificfeedback.replace(name, `plots/${file}`);
+            json.specificfeedback = json.specificfeedback.replace(name, getPlotUrl(file));
           }
           json.specificfeedback = replaceFeedbackTags(json.specificfeedback,qprefix);
           specificFeedbackElement.innerHTML = json.specificfeedback;
@@ -279,7 +282,7 @@ function answer(qfile, qname, qprefix, seed) {
         // Replace plots in tagged feedback and then display.
         for (let [name, fb] of Object.entries(feedback)) {
           for (const [name, file] of Object.entries(json.gradingassets)) {
-            fb = fb.replace(name, `plots/${file}`);
+            fb = fb.replace(name, getPlotUrl(file));
           }
           const elements = document.getElementsByName(`${qprefix+feedbackPrefix + name}`);
           if (elements.length > 0) {
@@ -326,6 +329,43 @@ function answer(qfile, qname, qprefix, seed) {
   });
 }
 
+function download(filename, fileid, qfile, qname, qprefix, seed) {
+  const http = new XMLHttpRequest();
+  const url = stack_api_url + '/download';
+  http.open("POST", url, true);
+  http.setRequestHeader('Content-Type', 'application/json');
+  // Something funky going on with closures and callbacks. This seems
+  // to be the easiest way to pass through the file details.
+  http.filename = filename;
+  http.fileid = fileid;
+  http.onreadystatechange = function() {
+    if(http.readyState == 4) {
+      try {
+        // Only download the file once. Replace call to download controller with link
+        // to downloaded file.
+        const blob = new Blob([http.responseText], {type: 'application/octet-binary', endings: 'native'});
+        // We're matching the three additional arguments that are added in the send function here.
+        const selector = CSS.escape(`javascript\:download\(\'${http.filename}\'\, ${http.fileid}\, \'${qfile}\'\, \'${qname}\'\, \'${qprefix}\'\, ${seed}\)`);
+        const linkElements = document.querySelectorAll(`a[href^=${selector}]`);
+        const link = linkElements[0];
+        link.setAttribute('href', URL.createObjectURL(blob));
+        link.setAttribute('download', filename);
+        link.click();
+      }
+      catch(e) {
+        document.getElementById('errors').innerText = http.responseText;
+        return;
+      }
+    }
+  };
+  collectData(qfile, qname, qprefix).then((data)=>{
+    data.filename = filename;
+    data.fileid = fileid;
+    data.seed = seed;
+    http.send(JSON.stringify(data));
+  });
+}
+
 // Save contents of question editor locally.
 function saveState(key, value) {
   if (typeof(Storage) !== "undefined") {
@@ -350,15 +390,21 @@ function renameIframeHolders() {
 }
 
 function createIframes (iframes) {
+  const corsFragment = "/cors.php?name=";
+
   for (const iframe of iframes) {
-    create_iframe(...iframe);
+    create_iframe(
+      iframe[0],
+      iframe[1].replaceAll(corsFragment, stack_api_url + corsFragment),
+      ...iframe.slice(2)
+    );
   }
 }
 
 // Replace feedback tags in some text with an approproately named HTML div.
 function replaceFeedbackTags(text, qprefix) {
   let result = text;
-  const feedbackTags = text.match(/\[\[feedback:.*\]\]/g);
+  const feedbackTags = text.match(/\[\[feedback:.*?\]\]/g);
   if (feedbackTags) {
     for (const tag of feedbackTags) {
       // Part name is between '[[feedback:' and ']]'.
@@ -377,7 +423,7 @@ async function getQuestionFile(questionURL, questionName) {
           res = loadQuestionFromFile(result, questionName);
         });
   }
-  return res
+  return res;
 }
 
 function loadQuestionFromFile(fileContents, questionName) {
@@ -451,7 +497,7 @@ function createQuestionBlocks() {
 function addCollapsibles(){
   var collapsibles = document.querySelectorAll(".level2>h2, .stack>h2");
   for (let i=0; i<collapsibles.length; i++) {
-    collapsibles[i].addEventListener("click", function(){collapseFunc(this)});
+    collapsibles[i].addEventListener("click", () => collapseFunc(this));
   }
 }
 
@@ -462,4 +508,8 @@ function collapseFunc(e){
 function stackSetup(){
   createQuestionBlocks();
   addCollapsibles();
-}
+}
+
+function getPlotUrl(file) {
+  return `${stack_api_url}/plots/${file}`;
+}