Use a single js namespace as parent for all other nopaque namespaces.

app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js

@@ -33,7 +33,7 @@ class CorpusAnalysisConcordance {
 
   async submitForm(queryModeId) {
     this.app.disableActionElements();
-    let queryBuilderQuery = Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
+    let queryBuilderQuery = nopaque.Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
     let expertModeQuery = this.elements.expertModeForm.query.value.trim();
     let query = queryModeId === 'corpus-analysis-concordance-expert-mode-form' ? expertModeQuery : queryBuilderQuery;
     let form = queryModeId === 'corpus-analysis-concordance-expert-mode-form' ? this.elements.expertModeForm : this.elements.queryBuilderForm;
@@ -171,11 +171,11 @@ class CorpusAnalysisConcordance {
     this.elements.subcorpusActions.querySelector('.subcorpus-export-trigger').addEventListener('click', (event) => {
       event.preventDefault();
       let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
-      let modalElementId = Utils.generateElementId('export-subcorpus-modal-');
-      let exportFormatSelectElementId = Utils.generateElementId('export-format-select-');
-      let exportSelectedMatchesOnlyCheckboxElementId = Utils.generateElementId('export-selected-matches-only-checkbox-');
-      let exportFileNameInputElementId = Utils.generateElementId('export-file-name-input-');
-      let modalElement = Utils.HTMLToElement(
+      let modalElementId = nopaque.Utils.generateElementId('export-subcorpus-modal-');
+      let exportFormatSelectElementId = nopaque.Utils.generateElementId('export-format-select-');
+      let exportSelectedMatchesOnlyCheckboxElementId = nopaque.Utils.generateElementId('export-selected-matches-only-checkbox-');
+      let exportFileNameInputElementId = nopaque.Utils.generateElementId('export-file-name-input-');
+      let modalElement = nopaque.Utils.HTMLToElement(
         `
           <div class="modal" id="${modalElementId}">
             <div class="modal-content">

app/static/js/CorpusAnalysis/CorpusAnalysisReader.js

@@ -112,7 +112,7 @@ class CorpusAnalysisReader {
     if (this.data.corpus.p.pages === 0) {return;}
     let pageElement;
     // First page button. Disables first page button if on first page
-    pageElement = Utils.HTMLToElement(
+    pageElement = nopaque.Utils.HTMLToElement(
       `
         <li class="${this.data.corpus.p.page === 1 ? 'disabled' : 'waves-effect'}">
           <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === 1 ? '' : 'data-target="1"'}>
@@ -123,7 +123,7 @@ class CorpusAnalysisReader {
     );
     this.elements.corpusPagination.appendChild(pageElement);
     // Previous page button. Disables previous page button if on first page
-    pageElement = Utils.HTMLToElement(
+    pageElement = nopaque.Utils.HTMLToElement(
       `
         <li class="${this.data.corpus.p.has_prev ? 'waves-effect' : 'disabled'}">
           <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_prev ? 'data-target="' + this.data.corpus.p.prev_num + '"' : ''}>
@@ -135,7 +135,7 @@ class CorpusAnalysisReader {
     this.elements.corpusPagination.appendChild(pageElement);
     // First page as number. Hides first page button if on first page
     if (this.data.corpus.p.page > 6) {
-      pageElement = Utils.HTMLToElement(
+      pageElement = nopaque.Utils.HTMLToElement(
         `
           <li class="waves-effect">
             <a class="corpus-analysis-action pagination-trigger" data-target="1">1</a>
@@ -143,14 +143,14 @@ class CorpusAnalysisReader {
         `
       );
       this.elements.corpusPagination.appendChild(pageElement);
-      pageElement = Utils.HTMLToElement("<li style='margin-top: 5px;'>&hellip;</li>");
+      pageElement = nopaque.Utils.HTMLToElement("<li style='margin-top: 5px;'>&hellip;</li>");
       this.elements.corpusPagination.appendChild(pageElement);
     }
 
     // render page buttons (5 before and 5 after current page)
     for (let i = this.data.corpus.p.page - this.settings.pagination.innerWindow; i <= this.data.corpus.p.page; i++) {
       if (i <= 0) {continue;}
-      pageElement = Utils.HTMLToElement(
+      pageElement = nopaque.Utils.HTMLToElement(
         `
           <li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
           <a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
@@ -161,7 +161,7 @@ class CorpusAnalysisReader {
     };
     for (let i = this.data.corpus.p.page +1; i <= this.data.corpus.p.page + this.settings.pagination.innerWindow; i++) {
       if (i > this.data.corpus.p.pages) {break;}
-      pageElement = Utils.HTMLToElement(
+      pageElement = nopaque.Utils.HTMLToElement(
         `
           <li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
           <a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
@@ -172,9 +172,9 @@ class CorpusAnalysisReader {
     };
     // Last page as number. Hides last page button if on last page
     if (this.data.corpus.p.page < this.data.corpus.p.pages - 6) {
-      pageElement = Utils.HTMLToElement("<li style='margin-top: 5px;'>&hellip;</li>");
+      pageElement = nopaque.Utils.HTMLToElement("<li style='margin-top: 5px;'>&hellip;</li>");
       this.elements.corpusPagination.appendChild(pageElement);
-      pageElement = Utils.HTMLToElement(
+      pageElement = nopaque.Utils.HTMLToElement(
         `
           <li class="waves-effect">
             <a class="corpus-analysis-action pagination-trigger" data-target="${this.data.corpus.p.pages}">${this.data.corpus.p.pages}</a>
@@ -184,7 +184,7 @@ class CorpusAnalysisReader {
       this.elements.corpusPagination.appendChild(pageElement);
     }
     // Next page button. Disables next page button if on last page
-    pageElement = Utils.HTMLToElement(
+    pageElement = nopaque.Utils.HTMLToElement(
       `
         <li class="${this.data.corpus.p.has_next ? 'waves-effect' : 'disabled'}">
           <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_next ? 'data-target="' + this.data.corpus.p.next_num + '"' : ''}>
@@ -195,7 +195,7 @@ class CorpusAnalysisReader {
     );
     this.elements.corpusPagination.appendChild(pageElement);
     // Last page button. Disables last page button if on last page
-    pageElement = Utils.HTMLToElement(
+    pageElement = nopaque.Utils.HTMLToElement(
       `
         <li class="${this.data.corpus.p.page === this.data.corpus.p.pages ? 'disabled' : 'waves-effect'}">
           <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === this.data.corpus.p.pages ? '' : 'data-target="' + this.data.corpus.p.pages + '"'}>

app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js

@@ -75,7 +75,7 @@ class CorpusAnalysisStaticVisualization {
 
   getStopwords() {
     this.data.promises.getStopwords = new Promise((resolve, reject) => {
-      Requests.corpora.entity.getStopwords()
+      nopaque.requests.corpora.entity.getStopwords()
         .then((response) => {
           response.json()
             .then((json) => {
@@ -104,7 +104,7 @@ class CorpusAnalysisStaticVisualization {
   renderTextInfoList() {
     let corpusData = this.data.corpus.o.staticData;
     let corpusTextInfoListElement = document.querySelector('.corpus-text-info-list');
-    let corpusTextInfoList = new ResourceLists.CorpusTextInfoList(corpusTextInfoListElement);
+    let corpusTextInfoList = new nopaque.resource_lists.CorpusTextInfoList(corpusTextInfoListElement);
     let texts = corpusData.s_attrs.text.lexicon;
     let textData = [];
     for (let i = 0; i < Object.entries(texts).length; i++) {
@@ -213,7 +213,7 @@ class CorpusAnalysisStaticVisualization {
 
   async renderTokenList() {
     let corpusTokenListElement = document.querySelector('.corpus-token-list');
-    let corpusTokenList = new ResourceLists.CorpusTokenList(corpusTokenListElement);
+    let corpusTokenList = new nopaque.resource_lists.CorpusTokenList(corpusTokenListElement);
     let filteredData = this.filterData();
     let stopwords = this.data.stopwords;
     if (this.data.stopwords === undefined) {
@@ -358,7 +358,7 @@ class CorpusAnalysisStaticVisualization {
     if (stopwordLanguageSelection.children.length === 0) {
       Object.keys(stopwords).forEach(language => {
         if (language !== 'user_stopwords') {
-          let optionElement = Utils.HTMLToElement(`<option value="${language}" ${language === 'english' ? 'selected' : ''}>${language}</option>`);
+          let optionElement = nopaque.Utils.HTMLToElement(`<option value="${language}" ${language === 'english' ? 'selected' : ''}>${language}</option>`);
           stopwordLanguageSelection.appendChild(optionElement);
         }
       });
@@ -367,7 +367,7 @@ class CorpusAnalysisStaticVisualization {
     // Render user stopwords over input field.
     if (this.data.stopwords['user_stopwords'].length > 0) {
       for (let word of this.data.stopwords['user_stopwords']) {
-        let chipElement = Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
+        let chipElement = nopaque.Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
         chipElement.addEventListener('click', (event) => {
           let removedListItem = event.target.closest('.chip').firstChild.textContent;
           this.data.stopwords['user_stopwords'] = structuredClone(this.data.stopwords['user_stopwords'].filter(item => item !== removedListItem));
@@ -433,7 +433,7 @@ class CorpusAnalysisStaticVisualization {
     let stopwordLanguageChipList = document.querySelector('#stopword-language-chip-list');
     stopwordLanguageChipList.innerHTML = '';
     for (let word of stopwords) {
-      let chipElement = Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
+      let chipElement = nopaque.Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
       chipElement.addEventListener('click', (event) => {
         let removedListItem = event.target.closest('.chip').firstChild.textContent;
         this.data.stopwords[language] = structuredClone(this.data.stopwords[language].filter(item => item !== removedListItem));

app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js

@@ -28,7 +28,7 @@ class GeneralFunctionsQueryBuilder {
   }
 
   addPlaceholder() {
-    let placeholder = Utils.HTMLToElement('<span id="corpus-analysis-concordance-query-builder-input-field-placeholder">Click on a button to add a query component</span>');
+    let placeholder = nopaque.Utils.HTMLToElement('<span id="corpus-analysis-concordance-query-builder-input-field-placeholder">Click on a button to add a query component</span>');
     this.elements.queryInputField.appendChild(placeholder);
   }
   
@@ -58,9 +58,9 @@ class GeneralFunctionsQueryBuilder {
 
   queryChipFactory(dataType, prettyQueryText, queryText, index = null, isClosingTag = false, isEditable = false) {
     // Creates a new query chip element, adds Eventlisteners for selection, deletion and drag and drop and appends it to the query input field.
-    queryText = Utils.escape(queryText);
-    prettyQueryText = Utils.escape(prettyQueryText);
-    let queryChipElement = Utils.HTMLToElement(
+    queryText = nopaque.Utils.escape(queryText);
+    prettyQueryText = nopaque.Utils.escape(prettyQueryText);
+    let queryChipElement = nopaque.Utils.HTMLToElement(
       `
         <span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true" data-closing-tag="${isClosingTag}">
           ${prettyQueryText}${isEditable ? '<i class="material-icons chip-action-button" data-chip-action="edit" style="padding-left:5px; font-size:18px; cursor:pointer;">edit</i>': ''}
@@ -265,7 +265,7 @@ class GeneralFunctionsQueryBuilder {
     // is called when a query chip is dragged. It creates a dropzone (in form of a chip) for the dragged chip and adds it to the query input field.
     let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
     setTimeout(() => {
-      let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
+      let targetChipElement = nopaque.Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
       for (let element of queryChips) {
         if (element === queryChipElement.nextSibling) {continue;}
         let targetChipClone = targetChipElement.cloneNode(true);
@@ -310,7 +310,7 @@ class GeneralFunctionsQueryBuilder {
     this.elements.queryChipElements.forEach(element => {
       let queryElement = element.dataset.query;
       if (queryElement !== undefined) {
-        queryElement = Utils.escape(queryElement);
+        queryElement = nopaque.Utils.escape(queryElement);
       }
       queryInputFieldContent.push(queryElement);
     });
@@ -374,7 +374,7 @@ class GeneralFunctionsQueryBuilder {
   switchToExpertModeParser() {
     let expertModeInputField = document.querySelector('#corpus-analysis-concordance-form-query');
     expertModeInputField.value = '';
-    let queryBuilderInputFieldValue = Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
+    let queryBuilderInputFieldValue = nopaque.Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
     if (queryBuilderInputFieldValue !== "" && queryBuilderInputFieldValue !== ";") {
       expertModeInputField.value = queryBuilderInputFieldValue;
     }

app/static/js/nopaque/app.js → app/static/js/app.js

@@ -188,9 +188,9 @@ nopaque.App = class App {
 
     /* Initialize nopaque Components */
     // #region 
-    ResourceDisplays.AutoInit();
-    ResourceLists.AutoInit();
-    Forms.AutoInit();
+    nopaque.resource_displays.AutoInit();
+    nopaque.resource_lists.AutoInit();
+    nopaque.forms.AutoInit();
     // #endregion
   }
 };

app/static/js/forms/base-form.js

-Forms.BaseForm = class BaseForm {
+nopaque.forms.BaseForm = class BaseForm {
   static htmlClass;
 
   constructor(formElement) {
@@ -28,7 +28,7 @@ Forms.BaseForm = class BaseForm {
 
   submit(event) {
     let request = new XMLHttpRequest();
-    let modalElement = Utils.HTMLToElement(
+    let modalElement = nopaque.Utils.HTMLToElement(
       `
         <div class="modal">
           <div class="modal-content">
@@ -67,7 +67,7 @@ Forms.BaseForm = class BaseForm {
     for (let selectElement of this.formElement.querySelectorAll('select')) {
       if (selectElement.value === '') {
         let inputFieldElement = selectElement.closest('.input-field');
-        let errorHelperTextElement = Utils.HTMLToElement(
+        let errorHelperTextElement = nopaque.Utils.HTMLToElement(
           '<span class="helper-text error-color-text" data-helper-text-type="error">Please select an option.</span>'
         );
         inputFieldElement.appendChild(errorHelperTextElement);
@@ -93,7 +93,7 @@ Forms.BaseForm = class BaseForm {
             .querySelector(`input[name$="${inputName}"], select[name$="${inputName}"]`)
             .closest('.input-field');
           for (let inputError of inputErrors) {
-            let errorHelperTextElement = Utils.HTMLToElement(
+            let errorHelperTextElement = nopaque.Utils.HTMLToElement(
               `<span class="helper-text error-color-text" data-helper-type="error">${inputError}</span>`
             );
             inputFieldElement.appendChild(errorHelperTextElement);

app/static/js/forms/create-contribution-form.js

-Forms.CreateContributionForm = class CreateContributionForm extends Forms.BaseForm {
+nopaque.forms.CreateContributionForm = class CreateContributionForm extends nopaque.forms.BaseForm {
   static htmlClass = 'create-contribution-form';
 
   constructor(formElement) {

app/static/js/forms/create-corpus-file-form.js

-Forms.CreateCorpusFileForm = class CreateCorpusFileForm extends Forms.BaseForm {
+nopaque.forms.CreateCorpusFileForm = class CreateCorpusFileForm extends nopaque.forms.BaseForm {
   static htmlClass = 'create-corpus-file-form';
 
   constructor(formElement) {

app/static/js/forms/create-job-form.js

-Forms.CreateJobForm = class CreateJobForm extends Forms.BaseForm {
+nopaque.forms.CreateJobForm = class CreateJobForm extends nopaque.forms.BaseForm {
   static htmlClass = 'create-job-form';
 
   constructor(formElement) {

app/static/js/forms/index.js

-var Forms = {};
+nopaque.forms = {};
 
-Forms.AutoInit = () => {
-  for (let propertyName in Forms) {
-    let property = Forms[propertyName];
-    // Call autoInit of all properties that are subclasses of Forms.BaseForm.
-    // This does not include Forms.BaseForm itself.
-    if (property.prototype instanceof Forms.BaseForm) {
+nopaque.forms.AutoInit = () => {
+  for (let propertyName in nopaque.forms) {
+    let property = nopaque.forms[propertyName];
+    // Call autoInit of all properties that are subclasses of nopaque.forms.BaseForm.
+    // This does not include nopaque.forms.BaseForm itself.
+    if (property.prototype instanceof nopaque.forms.BaseForm) {
       // Check if the static htmlClass property is defined.
       if (property.htmlClass === undefined) {return;}
       // Gather all HTML elements that have the `this.htmlClass` class

app/static/js/index.js

+/*
+ * This object functions as a global namespace for nopaque.
+ * All components of nopaque should be attached to this object.
+ */
+var nopaque = {};

app/static/js/nopaque/index.js

-var nopaque = {};

app/static/js/requests/admin.js

 /*****************************************************************************
  * Requests for /admin routes                                                *
 *****************************************************************************/
-Requests.admin = {};
+nopaque.requests.admin = {};
 
-Requests.admin.users = {};
+nopaque.requests.admin.users = {};
 
-Requests.admin.users.entity = {};
+nopaque.requests.admin.users.entity = {};
 
-Requests.admin.users.entity.confirmed = {};
+nopaque.requests.admin.users.entity.confirmed = {};
 
-Requests.admin.users.entity.confirmed.update = (userId, value) => {
+nopaque.requests.admin.users.entity.confirmed.update = (userId, value) => {
   let input = `/admin/users/${userId}/confirmed`;
   let init = {
     method: 'PUT',
     body: JSON.stringify(value)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };

app/static/js/requests/contributions.js

 /*****************************************************************************
 * Requests for /contributions routes                                         *
 *****************************************************************************/
-Requests.contributions = {};
+nopaque.requests.contributions = {};
 
 
 /*****************************************************************************
 * Requests for /contributions/spacy-nlp-pipeline-models routes               *
 *****************************************************************************/
-Requests.contributions.spacy_nlp_pipeline_models = {};
+nopaque.requests.contributions.spacy_nlp_pipeline_models = {};
 
-Requests.contributions.spacy_nlp_pipeline_models.entity = {};
+nopaque.requests.contributions.spacy_nlp_pipeline_models.entity = {};
 
-Requests.contributions.spacy_nlp_pipeline_models.entity.delete = (spacyNlpPipelineModelId) => {
+nopaque.requests.contributions.spacy_nlp_pipeline_models.entity.delete = (spacyNlpPipelineModelId) => {
   let input = `/contributions/spacy-nlp-pipeline-models/${spacyNlpPipelineModelId}`;
   let init = {
     method: 'DELETE'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.contributions.spacy_nlp_pipeline_models.entity.isPublic = {};
+nopaque.requests.contributions.spacy_nlp_pipeline_models.entity.isPublic = {};
 
-Requests.contributions.spacy_nlp_pipeline_models.entity.isPublic.update = (spacyNlpPipelineModelId, value) => {
+nopaque.requests.contributions.spacy_nlp_pipeline_models.entity.isPublic.update = (spacyNlpPipelineModelId, value) => {
   let input = `/contributions/spacy-nlp-pipeline-models/${spacyNlpPipelineModelId}/is_public`;
   let init = {
     method: 'PUT',
     body: JSON.stringify(value)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
 
 /*****************************************************************************
 * Requests for /contributions/tesseract-ocr-pipeline-models routes           *
 *****************************************************************************/
-Requests.contributions.tesseract_ocr_pipeline_models = {};
+nopaque.requests.contributions.tesseract_ocr_pipeline_models = {};
 
-Requests.contributions.tesseract_ocr_pipeline_models.entity = {};
+nopaque.requests.contributions.tesseract_ocr_pipeline_models.entity = {};
 
-Requests.contributions.tesseract_ocr_pipeline_models.entity.delete = (tesseractOcrPipelineModelId) => {
+nopaque.requests.contributions.tesseract_ocr_pipeline_models.entity.delete = (tesseractOcrPipelineModelId) => {
   let input = `/contributions/tesseract-ocr-pipeline-models/${tesseractOcrPipelineModelId}`;
   let init = {
     method: 'DELETE'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.contributions.tesseract_ocr_pipeline_models.entity.isPublic = {};
+nopaque.requests.contributions.tesseract_ocr_pipeline_models.entity.isPublic = {};
 
-Requests.contributions.tesseract_ocr_pipeline_models.entity.isPublic.update = (tesseractOcrPipelineModelId, value) => {
+nopaque.requests.contributions.tesseract_ocr_pipeline_models.entity.isPublic.update = (tesseractOcrPipelineModelId, value) => {
   let input = `/contributions/tesseract-ocr-pipeline-models/${tesseractOcrPipelineModelId}/is_public`;
   let init = {
     method: 'PUT',
     body: JSON.stringify(value)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };

app/static/js/requests/corpora.js

 /*****************************************************************************
 * Requests for /corpora routes                                               *
 *****************************************************************************/
-Requests.corpora = {};
+nopaque.requests.corpora = {};
 
-Requests.corpora.entity = {};
+nopaque.requests.corpora.entity = {};
 
-Requests.corpora.entity.delete = (corpusId) => {
+nopaque.requests.corpora.entity.delete = (corpusId) => {
   let input = `/corpora/${corpusId}`;
   let init = {
     method: 'DELETE'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.corpora.entity.build = (corpusId) => {
+nopaque.requests.corpora.entity.build = (corpusId) => {
   let input = `/corpora/${corpusId}/build`;
   let init = {
     method: 'POST',
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.corpora.entity.generateShareLink = (corpusId, role, expiration) => {
+nopaque.requests.corpora.entity.generateShareLink = (corpusId, role, expiration) => {
   let input = `/corpora/${corpusId}/generate-share-link`;
   let init = {
     method: 'POST',
     body: JSON.stringify({role: role, expiration: expiration})
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.corpora.entity.getStopwords = () => {
+nopaque.requests.corpora.entity.getStopwords = () => {
   let input = `/corpora/stopwords`;
   let init = {
     method: 'GET'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.corpora.entity.isPublic = {};
+nopaque.requests.corpora.entity.isPublic = {};
 
-Requests.corpora.entity.isPublic.update = (corpusId, isPublic) => {
+nopaque.requests.corpora.entity.isPublic.update = (corpusId, isPublic) => {
   let input = `/corpora/${corpusId}/is_public`;
   let init = {
     method: 'PUT',
     body: JSON.stringify(isPublic)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
 
 /*****************************************************************************
 * Requests for /corpora/<entity>/files routes                                *
 *****************************************************************************/
-Requests.corpora.entity.files = {};
+nopaque.requests.corpora.entity.files = {};
 
-Requests.corpora.entity.files.ent = {};
+nopaque.requests.corpora.entity.files.ent = {};
 
-Requests.corpora.entity.files.ent.delete = (corpusId, corpusFileId) => {
+nopaque.requests.corpora.entity.files.ent.delete = (corpusId, corpusFileId) => {
   let input = `/corpora/${corpusId}/files/${corpusFileId}`;
   let init = {
     method: 'DELETE',
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
 
 /*****************************************************************************
 * Requests for /corpora/<entity>/followers routes                            *
 *****************************************************************************/
-Requests.corpora.entity.followers = {};
+nopaque.requests.corpora.entity.followers = {};
 
-Requests.corpora.entity.followers.add = (corpusId, usernames) => {
+nopaque.requests.corpora.entity.followers.add = (corpusId, usernames) => {
   let input = `/corpora/${corpusId}/followers`;
   let init = {
     method: 'POST',
     body: JSON.stringify(usernames)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.corpora.entity.followers.entity = {};
+nopaque.requests.corpora.entity.followers.entity = {};
 
-Requests.corpora.entity.followers.entity.delete = (corpusId, followerId) => {
+nopaque.requests.corpora.entity.followers.entity.delete = (corpusId, followerId) => {
   let input = `/corpora/${corpusId}/followers/${followerId}`;
   let init = {
     method: 'DELETE',
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.corpora.entity.followers.entity.role = {};
+nopaque.requests.corpora.entity.followers.entity.role = {};
 
-Requests.corpora.entity.followers.entity.role.update = (corpusId, followerId, value) => {
+nopaque.requests.corpora.entity.followers.entity.role.update = (corpusId, followerId, value) => {
   let input = `/corpora/${corpusId}/followers/${followerId}/role`;
   let init = {
     method: 'PUT',
     body: JSON.stringify(value)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };

app/static/js/requests/index.js

-var Requests = {};
+nopaque.requests = {};
 
-Requests.JSONfetch = (input, init={}) => {
+nopaque.requests.JSONfetch = (input, init={}) => {
   return new Promise((resolve, reject) => {
     let fixedInit = {};
     fixedInit.headers = {};
@@ -8,7 +8,7 @@ Requests.JSONfetch = (input, init={}) => {
     if (init.hasOwnProperty('body')) {
       fixedInit.headers['Content-Type'] = 'application/json';
     }
-    fetch(input, Utils.mergeObjectsDeep(init, fixedInit))
+    fetch(input, nopaque.Utils.mergeObjectsDeep(init, fixedInit))
       .then(
         (response) => {
           if (response.ok) {

app/static/js/requests/jobs.js

 /*****************************************************************************
 * Requests for /jobs routes                                                  *
 *****************************************************************************/
-Requests.jobs = {};
+nopaque.requests.jobs = {};
 
-Requests.jobs.entity = {};
+nopaque.requests.jobs.entity = {};
 
-Requests.jobs.entity.delete = (jobId) => {
+nopaque.requests.jobs.entity.delete = (jobId) => {
   let input = `/jobs/${jobId}`;
   let init = {
     method: 'DELETE'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.jobs.entity.log = (jobId) => {
+nopaque.requests.jobs.entity.log = (jobId) => {
   let input = `/jobs/${jobId}/log`;
   let init = {
     method: 'GET'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.jobs.entity.restart = (jobId) => {
+nopaque.requests.jobs.entity.restart = (jobId) => {
   let input = `/jobs/${jobId}/restart`;
   let init = {
     method: 'POST'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };

app/static/js/requests/users.js

@@ -2,50 +2,50 @@
 * Users                                                                      *
 * Fetch requests for /users routes                                           *
 *****************************************************************************/
-Requests.users = {};
+nopaque.requests.users = {};
 
-Requests.users.entity = {};
+nopaque.requests.users.entity = {};
 
-Requests.users.entity.delete = (userId) => {
+nopaque.requests.users.entity.delete = (userId) => {
   let input = `/users/${userId}`;
   let init = {
     method: 'DELETE'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.users.entity.acceptTermsOfUse = () => {
+nopaque.requests.users.entity.acceptTermsOfUse = () => {
   let input = `/users/accept-terms-of-use`;
   let init = {
     method: 'POST'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 
-Requests.users.entity.avatar = {};
+nopaque.requests.users.entity.avatar = {};
 
-Requests.users.entity.avatar.delete = (userId) => {
+nopaque.requests.users.entity.avatar.delete = (userId) => {
   let input = `/users/${userId}/avatar`;
   let init = {
     method: 'DELETE'
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 }
 
 
 /*****************************************************************************
 * Requests for /users/<entity>/settings routes                               *
 *****************************************************************************/
-Requests.users.entity.settings = {};
+nopaque.requests.users.entity.settings = {};
 
-Requests.users.entity.settings.profilePrivacy = {};
+nopaque.requests.users.entity.settings.profilePrivacy = {};
 
-Requests.users.entity.settings.profilePrivacy.update = (userId, profilePrivacySetting, enabled) => {
+nopaque.requests.users.entity.settings.profilePrivacy.update = (userId, profilePrivacySetting, enabled) => {
   let input = `/users/${userId}/settings/profile-privacy/${profilePrivacySetting}`;
   let init = {
     method: 'PUT',
     body: JSON.stringify(enabled)
   };
-  return Requests.JSONfetch(input, init);
+  return nopaque.requests.JSONfetch(input, init);
 };
 

app/static/js/resource-displays/corpus-display.js

-ResourceDisplays.CorpusDisplay = class CorpusDisplay extends ResourceDisplays.ResourceDisplay {
+nopaque.resource_displays.CorpusDisplay = class CorpusDisplay extends nopaque.resource_displays.ResourceDisplay {
   static htmlClass = 'corpus-display';
 
   constructor(displayElement) {
@@ -7,7 +7,7 @@ ResourceDisplays.CorpusDisplay = class CorpusDisplay extends ResourceDisplays.Re
     this.displayElement
       .querySelector('.action-button[data-action="build-request"]')
       .addEventListener('click', (event) => {
-        Requests.corpora.entity.build(this.corpusId);
+        nopaque.requests.corpora.entity.build(this.corpusId);
       });
   }
 

app/static/js/resource-displays/index.js

-var ResourceDisplays = {};
+nopaque.resource_displays = {};
 
-ResourceDisplays.AutoInit = () => {
-  for (let propertyName in ResourceDisplays) {
-    let property = ResourceDisplays[propertyName];
-    // Call autoInit of all properties that are subclasses of `ResourceDisplays.ResourceDisplay`.
-    // This does not include `ResourceDisplays.ResourceDisplay` itself.
-    if (property.prototype instanceof ResourceDisplays.ResourceDisplay) {
+nopaque.resource_displays.AutoInit = () => {
+  for (let propertyName in nopaque.resource_displays) {
+    let property = nopaque.resource_displays[propertyName];
+    // Call autoInit of all properties that are subclasses of `nopaque.resource_displays.ResourceDisplay`.
+    // This does not include `nopaque.resource_displays.ResourceDisplay` itself.
+    if (property.prototype instanceof nopaque.resource_displays.ResourceDisplay) {
       // Check if the static `htmlClass` property is defined.
       if (property.htmlClass === undefined) {return;}
       // Gather all HTML elements that have the `this.htmlClass` class