Add custom template functionality for exported document

create-document.js

@@ -17,9 +17,11 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
     this.inputFields = inputFields;
     this.inputGoals = inputGoals;
     this.template = template;
-
     this.params = params;
     this.title = title;
+
+    this.customElements = {};
+    this.customGoals = [];
   }
 
   /**
@@ -29,7 +31,7 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
    */
   CreateDocument.prototype.attach = function ($container) {
     var exportString = this.getExportString();
-    exportString += this.createGoalsOutput();
+    exportString = this.createGoalsOutput(exportString);
     var exportObject = this.getExportObject();
     var $exportPage = new ExportPage(this.title,
       exportString,
@@ -46,9 +48,10 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
    * @returns {Object} exportObject Exportable content for filling template
    */
   CreateDocument.prototype.getExportObject = function () {
+    var self = this;
     var sortedGoalsList = [];
 
-    this.inputGoals.inputArray.forEach(function (inputGoalPage) {
+    self.inputGoals.inputArray.forEach(function (inputGoalPage) {
       inputGoalPage.forEach(function (inputGoal) {
         // Do not include unassessed goals
         if (inputGoal.goalAnswer() === -1) {
@@ -82,7 +85,7 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
     });
 
     var flatInputsList = [];
-    this.inputFields.forEach(function (inputFieldPage) {
+    self.inputFields.forEach(function (inputFieldPage) {
       if (inputFieldPage.inputArray && inputFieldPage.inputArray.length) {
         var standardPage = {title: '', inputArray: []};
         if (inputFieldPage.title) {
@@ -96,12 +99,15 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
     });
 
     var exportObject = {
-      title: this.title,
-      goalsTitle: this.inputGoals.title,
+      title: self.title,
+      goalsTitle: self.inputGoals.title,
       flatInputList: flatInputsList,
-      sortedGoalsList: sortedGoalsList
+      sortedGoalsList: sortedGoalsList,
+      customGoalsList: self.customGoals
     };
 
+    Object.assign(exportObject, self.customElements);
+
     return exportObject;
   };
 
@@ -121,55 +127,105 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
    * @returns {string} inputBlocksString Html string from input fields
    */
   CreateDocument.prototype.getInputBlocksString = function () {
+    var self = this;
     var inputBlocksString = '<div class="textfields-output">';
+    var applyCustomTemplate = function(template, inputFields) {
+      var templateContent = template;
+      inputFields.forEach(function (inputPage) {
+        if (inputPage.inputArray && inputPage.inputArray.length) {
+          inputPage.inputArray.forEach(function (inputInstance) {
+            if (inputInstance && inputInstance.elementId !== '') {
+              elementId = inputInstance.elementId;  
+              templateContent = 
+                templateContent.replace("{" + elementId  + "}", inputInstance.value);
+              self.customElements[elementId] =  inputInstance.value;
+            }
+          });
+        }
+      });
+      return templateContent;
+    };
 
-    this.inputFields.forEach(function (inputPage) {
-      if (inputPage.inputArray && inputPage.inputArray.length && inputPage.title.length) {
-        inputBlocksString +=
-          '<h2>' + inputPage.title + '</h2>';
-      }
-      if (inputPage.inputArray && inputPage.inputArray.length) {
-        inputPage.inputArray.forEach(function (inputInstance) {
-          if (inputInstance) {
-            // remove paragraph tags
-            inputBlocksString +=
-              '<p>' +
-                '<strong>' + inputInstance.description + '</strong>' +
-                '\n' +
-                inputInstance.value +
-              '</p>';
-          }
-        });
-      }
-    });
-
+    if (self.params.customHtmlTemplate && self.params.customHtmlTemplate !=='') {
+      inputBlocksString += applyCustomTemplate(self.params.customHtmlTemplate, self.inputFields);
+    } else {
+      self.inputFields.forEach(function (inputPage) {
+        if (inputPage.inputArray && inputPage.inputArray.length && inputPage.title.length) {
+          inputBlocksString +=
+            '<h2>' + inputPage.title + '</h2>';
+        }
+        if (inputPage.inputArray && inputPage.inputArray.length) {
+          inputPage.inputArray.forEach(function (inputInstance) {
+            if (inputInstance) {
+              // remove paragraph tags
+              inputBlocksString +=
+                '<p>' +
+                  '<strong>' + inputInstance.description + '</strong>' +
+                  '\n' +
+                  inputInstance.value +
+                '</p>';
+            }
+          });
+        }
+      });
+    }
     inputBlocksString += '</div>';
-
     return inputBlocksString;
   };
 
   /**
    * Generates html string for all goals
    * @returns {string} goalsOutputString Html string from all goals
    */
-  CreateDocument.prototype.createGoalsOutput = function () {
+  CreateDocument.prototype.createGoalsOutput = function (exportString) {
+    var self = this;
+    if (self.inputGoals === undefined) {
+      return;
+    }
 
-    var goalsOutputString = '<div class="goals-output">';
+    if (self.params.customHtmlTemplate && self.params.customHtmlTemplate !=='' &&
+      self.inputGoals.inputArray) {
 
-    if (this.inputGoals === undefined) {
-      return;
+      self.customGoals = {};
+
+      var goalLists = self.inputGoals.inputArray;
+      var goalListItems;
+      var goalListId;
+      var goalListHtml;
+
+      for(var listIndex=0; listIndex < goalLists.length; listIndex++) {
+        goalListItems = goalLists[listIndex];
+
+        if (goalListItems.length) {
+          goalListId = goalListItems[0].goalListId;
+          self.customGoals[goalListId] = [];
+          goalListHtml = '<ul>';   // for preview template
+
+          for(var itemIndex=0; itemIndex < goalListItems.length; itemIndex++) {
+            goalInstance = goalListItems[itemIndex];
+            self.customGoals[goalListId].push({ value: goalInstance.text });
+            goalListHtml += '<li>' +  goalInstance.text + '</li>';
+          }
+
+          goalListHtml += '</ul>'
+          exportString = exportString.replace('{' + goalListId + '}', goalListHtml);
+        }
+      }
+
+      return exportString;
     }
 
-    if (this.inputGoals.inputArray && this.inputGoals.inputArray.length && this.inputGoals.title.length) {
+    var goalsOutputString = '<div class="goals-output">';
+    if (self.inputGoals.inputArray && self.inputGoals.inputArray.length && self.inputGoals.title.length) {
       goalsOutputString +=
-        '<h2>' + this.inputGoals.title + '</h2>';
+        '<h2>' + self.inputGoals.title + '</h2>';
     }
 
-    if (!this.inputGoals.inputArray) {
+    if (!self.inputGoals.inputArray) {
       return;
     }
 
-    this.inputGoals.inputArray.forEach(function (inputGoalPage) {
+    self.inputGoals.inputArray.forEach(function (inputGoalPage) {
       var goalOutputArray = [];
 
       inputGoalPage.forEach(function (inputGoalInstance) {
@@ -204,7 +260,7 @@ H5P.DocumentExportPage.CreateDocument = (function ($, ExportPage) {
 
     goalsOutputString += '</div>';
 
-    return goalsOutputString;
+    return exportString + goalsOutputString;
   };
 
   return CreateDocument;

document-export-page.js

@@ -32,7 +32,8 @@ H5P.DocumentExportPage = (function ($, JoubelUI) {
       exportTextLabel: 'Export text',
       requiresInputErrorMessage: 'One or more required input fields need to be filled.',
       helpTextLabel: 'Read more',
-      helpText: 'Help text'
+      helpText: 'Help text',
+      customHtmlTemplate: ''
     }, params);
   }
 
@@ -79,7 +80,13 @@ H5P.DocumentExportPage = (function ($, JoubelUI) {
       .click(function () {
         // Check if all required input fields are filled
         if (self.isRequiredInputsFilled()) {
-          var exportDocument = new H5P.DocumentExportPage.CreateDocument(self.params, self.exportTitle, self.inputArray, self.inputGoals, self.getLibraryFilePath('exportTemplate.docx'));
+          var docxTemplate = self.getLibraryFilePath('exportTemplate.docx');
+          if (self.params.customDocxTemplate) {
+            docxTemplate = H5P.getPath(self.params.customDocxTemplate.path, self.id);
+          }
+
+          var exportDocument = new H5P.DocumentExportPage.CreateDocument(self.params, self.exportTitle, 
+            self.inputArray, self.inputGoals, docxTemplate);
           exportDocument.attach(self.$wrapper.parent().parent());
         }
       });

library.json

@@ -3,7 +3,7 @@
   "description": "A page you can export all input fields from parent application.",
   "majorVersion": 1,
   "minorVersion": 1,
-  "patchVersion": 5,
+  "patchVersion": 8,
   "runnable": 0,
   "author": "Joubel",
   "license": "MIT",

semantics.json

@@ -89,5 +89,34 @@
     "type": "text",
     "description": "An error message which will be displayed if one or more required input fields have not been filled.",
     "default": "One or more required input fields need to be filled."
+  },
+  {
+    "name": "customHtmlTemplate",
+    "label": "Custom Template",
+    "importance": "medium",
+    "type": "text",
+    "widget": "html",
+    "description": "Custom HTML template for preview of the document. Use Element IDs for placeholders.",
+    "default": "",
+    "enterMode": "p",
+    "tags": [
+      "strong",
+      "em",
+      "u",
+      "a",
+      "ul",
+      "ol",
+      "h2",
+      "h3",
+      "hr"
+    ],
+    "optional": true
+  },
+  {
+    "name": "customDocxTemplate",
+    "type": "file",
+    "label": "Upload a *.docx template file",
+    "description": "Custom *.docx template. Refer to http://javascript-ninja.fr/docxgenjs/examples/demo.html",
+    "optional": true
   }
 ]