Merge pull request #16 in LFOR/questionnaire-viewer from extract_lforms_loader to master

* commit '982f646cd19db4a6e0c20408048cefca2d684b2a':
  Updated the change log and set the version to 0.5.1
  Removed usage of jQuery
  Now uses lforms-loader

Author: plynchnlm

CHANGELOG.md

@@ -3,6 +3,13 @@
 This log documents the significant changes for each release.
 This project follows [Semantic Versioning](http://semver.org/).
 
+## [0.5.1] - 2023-08-15
+### Changed
+- Extracted the code for automatically loading lforms into an "lforms-loader"
+  package which can be used by other apps as well as this one.
+- No longer uses jQuery (in preparation for the soon to be released version of
+  lforms which does not leak its version of jQuery to the window object).
+
 ## [0.5.0] - 2023-06-29
 ### Added
 - The viewer now has the ability to specify, via an 'lfv' parameter, the version

docs/index.625900fc.js

@@ -2,4 +2,4 @@
     <p class=alert><b>Note:</b> It appears you are using an unsupported
      version of the IE browser. This website will not work properly with
      IE 8 or below.</p>
-    <![endif]-->  <div id="header"> <div id="siteNameBox"> <h1 id="siteName">FHIR Questionnaire Viewer</h1><br> <span id="tagLine">Using <a href="https://lhcforms.nlm.nih.gov/" target="_blank" rel="noreferrer">LHC-Forms Widget</a> <span id="lformsVersionMenu"> version <input id="lformsVersion" type="text" size="16"> </span> </span></div> </div>  <div id="qv-form-input" style="display:none"> <div id="qv-form-input-intro"> <p>This is a tool that allows you to render a FHIR Questionnaire (JSON), with its needed resources from either a FHIR resource package file or a FHIR server. (See the <a href="https://confluence.hl7.org/display/FHIR/NPM+Package+Specification" target="_blank" rel="noreferrer">FHIR NPM package specification</a>.)</p> </div> <div id="qv-form-input-settings"> <div class="qv-url-row"> <div class="qv-url-name"><label for="urlQuestionnaire">URL of a FHIR Questionnaire:</label></div> <div class="qv-url-value"><input type="text" id="urlQuestionnaire"></div> </div> <div class="qv-url-row"> <div class="qv-url-name"> <input type="radio" id="radioPackage" name="resourceURL" value="package" checked onclick="app.toggleInputFields('urlFhirServer', 'urlPackage')"> <label for="radioPackage">URL of a FHIR resource package:</label> </div> <div class="qv-url-value"><input type="text" id="urlPackage"></div> </div> <div class="qv-url-row"> <div class="qv-url-name"> <input type="radio" id="radioFhirServer" name="resourceURL" value="fhirServer" onclick="app.toggleInputFields('urlPackage', 'urlFhirServer')"> <label for="radioFhirServer">URL of a FHIR server for resources:</label> </div> <div class="qv-url-value"><input type="text" id="urlFhirServer" disabled></div> </div> <div id="qv-param-notes">*Note: These field values can be specified in the URL. Use URL parameter "q" to provide the URL for a Questionnaire JSON, and optionally either parameter "p" to provide the URL for a FHIR resource package (package.tgz), or parameter "s" to provide the URL for a FHIR server. The parameter "lfv" can be used to set the version of LHC-Forms being used to render the form.</div> </div> <button id="qv-btn-load" onclick="app.viewQuestionnaire()">Load Data</button> </div> <div role="alert" id="qv-error" style="display:none"> <div id="qv-error-header">Errors</div> <div id="qv-error-message"></div> </div> <div role="alert" id="qv-loading" style="display:none"> Loading ... </div> <div id="qv-form-view"> <div id="qv-form-notes"> <span role="alert" id="qv-form-info"></span> <span><button id="qv-btn-show-warning" style="display:none" onclick="app.toggleWarning()">Show Warning Messages</button></span> <div role="alert" style="display:none" id="qv-form-warning"></div> </div> <div id="qv-lforms"></div> </div> <script src="index.625900fc.js" type="module"></script> </body></html>
+    <![endif]-->  <div id="header"> <div id="siteNameBox"> <h1 id="siteName">FHIR Questionnaire Viewer</h1><br> <span id="tagLine">Using <a href="https://lhcforms.nlm.nih.gov/" target="_blank" rel="noreferrer">LHC-Forms Widget</a> <span id="lformsVersionMenu"> version <input id="lformsVersion" type="text" size="16"> </span> </span></div> </div>  <div id="qv-form-input" style="display:none"> <div id="qv-form-input-intro"> <p>This is a tool that allows you to render a FHIR Questionnaire (JSON), with its needed resources from either a FHIR resource package file or a FHIR server. (See the <a href="https://confluence.hl7.org/display/FHIR/NPM+Package+Specification" target="_blank" rel="noreferrer">FHIR NPM package specification</a>.)</p> </div> <div id="qv-form-input-settings"> <div class="qv-url-row"> <div class="qv-url-name"><label for="urlQuestionnaire">URL of a FHIR Questionnaire:</label></div> <div class="qv-url-value"><input type="text" id="urlQuestionnaire"></div> </div> <div class="qv-url-row"> <div class="qv-url-name"> <input type="radio" id="radioPackage" name="resourceURL" value="package" checked onclick="app.toggleInputFields('urlFhirServer', 'urlPackage')"> <label for="radioPackage">URL of a FHIR resource package:</label> </div> <div class="qv-url-value"><input type="text" id="urlPackage"></div> </div> <div class="qv-url-row"> <div class="qv-url-name"> <input type="radio" id="radioFhirServer" name="resourceURL" value="fhirServer" onclick="app.toggleInputFields('urlPackage', 'urlFhirServer')"> <label for="radioFhirServer">URL of a FHIR server for resources:</label> </div> <div class="qv-url-value"><input type="text" id="urlFhirServer" disabled></div> </div> <div id="qv-param-notes">*Note: These field values can be specified in the URL. Use URL parameter "q" to provide the URL for a Questionnaire JSON, and optionally either parameter "p" to provide the URL for a FHIR resource package (package.tgz), or parameter "s" to provide the URL for a FHIR server. The parameter "lfv" can be used to set the version of LHC-Forms being used to render the form.</div> </div> <button id="qv-btn-load" onclick="app.viewQuestionnaire()">Load Data</button> </div> <div role="alert" id="qv-error" style="display:none"> <div id="qv-error-header">Errors</div> <div id="qv-error-message"></div> </div> <div role="alert" id="qv-loading" style="display:none"> Loading ... </div> <div id="qv-form-view"> <div id="qv-form-notes"> <span role="alert" id="qv-form-info"></span> <span><button id="qv-btn-show-warning" style="display:none" onclick="app.toggleWarning()">Show Warning Messages</button></span> <div role="alert" style="display:none" id="qv-form-warning"></div> </div> <div id="qv-lforms"></div> </div> <script src="index.dab007f6.js" type="module"></script> </body></html>

docs/index.625900fc.js.map

@@ -1,6 +1,6 @@
 {
   "name": "questionnaire-viewer",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A website for rendering a FHIR Questionnaire using the LHC-Forms widget",
   "config": {
     "testServerPort": 4029,
@@ -29,6 +29,10 @@
   ],
   "author": "wangye@nih.gov",
   "license": "MIT",
+  "aliasComment": "alias is used below to prevent Parcel from adding a polyfill for 'process'",
+  "alias": {
+    "process": false
+  },
   "devDependencies": {
     "cypress": "^10.10.0",
     "http-server": "^14.1.1",
@@ -41,9 +45,9 @@
   "dependencies": {
     "fhirclient": "^2.3.10",
     "js-untar-lhc": "^2.1.1",
+    "lforms-loader": "^1.0.0",
     "lforms-updater": "^29.0.1",
     "pako": "^1.0.11",
-    "semver": "^7.5.2",
     "string-to-arraybuffer": "^1.0.2",
     "url-parse": "^1.5.3",
     "whatwg-fetch": "^3.0.0"

docs/index.dab007f6.js

@@ -3,8 +3,7 @@
 // this file contained the code only used by viewer.html.  The code here is
 // mostly for the lforms version menu, and it includes app.js.
 
-import {loadLForms} from './lformsLoader.js'
-import semverSort from 'semver/functions/rsort';
+import {loadLForms, getSupportedLFormsVersions, changeLFormsVersion} from 'lforms-loader'
 import * as app from './app.js';
 
 let params = new URL(document.location).searchParams;
@@ -39,43 +38,18 @@ function showHeader() {
  */
 function initLFormsVersionMenu() {
   // Get the list of lforms versions
-  fetch('https://clinicaltables.nlm.nih.gov/lforms-versions').then(response=>{
-    // https://clinicaltables.nlm.nih.gov/lforms-versions contains output like:
-    // <span class="name">lforms-9.0.2.zip</span>
-    if (response.ok) { // otherwise, don't show the menu
-      response.text().then(pageText=>{
-        const versions  =
-          [...pageText.matchAll(/<span class="name">lforms-(.*)\.zip<\/span>/g)].map(
-            m=>m[1]).filter(v=>v.split('.')[0]>=29);
-        semverSort(versions);
-        const ac = new LForms.Def.Autocompleter.Prefetch('lformsVersion', versions,
-          {defaultValue: LForms.lformsVersion, matchListValue: true, addSeqNum: false});
-        ac.setFieldToListValue(LForms.lformsVersion);
-        $('#lformsVersionMenu')[0].style.display='inline';
-        LForms.Def.Autocompleter.Event.observeListSelections('lformsVersion', (data)=>{
-          if (data.final_val && data.on_list && data.final_val != LForms.lformsVersion)
-            changeLFormsVersion(data.final_val);
-        });
-      });
-    }
+  getSupportedLFormsVersions().then(versions=>{
+    const ac = new LForms.Def.Autocompleter.Prefetch('lformsVersion', versions,
+      {defaultValue: LForms.lformsVersion, matchListValue: true, addSeqNum: false});
+    ac.setFieldToListValue(LForms.lformsVersion);
+    document.getElementById('lformsVersionMenu').style.display='inline';
+    LForms.Def.Autocompleter.Event.observeListSelections('lformsVersion', (data)=>{
+      if (data.final_val && data.on_list && data.final_val != LForms.lformsVersion)
+        changeLFormsVersion(data.final_val);
+    });
   });
 }
 
-/**
- *  Handles a selection of a new LForms version.
- * @param newLFormsVersion the new version to switch to (assumed valid)
- */
-function changeLFormsVersion(newLFormsVersion) {
-  // We need to reload the page.
-  // The menu only shows if parameters were not set for the questionnaire, so
-  // we can't preserve any field values the user might have filled in for the
-  // questionnaire.
-  let pageURL = window.location.origin + window.location.pathname;
-  const params = new URLSearchParams(window.location.search);
-  params.set('lfv', newLFormsVersion);
-  window.location = pageURL + '?' + params;
-}
-
 
 /**
  *  Initializes the app after everything has loaded.