app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js

@@ -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 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 CorpusTokenList(corpusTokenListElement);
     let filteredData = this.filterData();
     let stopwords = this.data.stopwords;
     if (this.data.stopwords === undefined) {

app/static/js/ResourceLists/AdminUserList.js

@@ -1,5 +1,9 @@
-ResourceLists.AdminUserList = class AdminUserList extends ResourceLists.ResourceList {
-  static htmlClass = 'admin-user-list';
+class AdminUserList extends ResourceList {
+  static autoInit() {
+    for (let adminUserListElement of document.querySelectorAll('.admin-user-list:not(.no-autoinit)')) {
+      new AdminUserList(adminUserListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -104,4 +108,4 @@ ResourceLists.AdminUserList = class AdminUserList extends ResourceLists.Resource
       }
     }
   }
-};
+}

app/static/js/ResourceLists/CorpusFileList.js

@@ -1,5 +1,9 @@
-ResourceLists.CorpusFileList = class CorpusFileList extends ResourceLists.ResourceList {
-  static htmlClass = 'corpus-file-list';
+class CorpusFileList extends ResourceList {
+  static autoInit() {
+    for (let corpusFileListElement of document.querySelectorAll('.corpus-file-list:not(.no-autoinit)')) {
+      new CorpusFileList(corpusFileListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -365,4 +369,4 @@ ResourceLists.CorpusFileList = class CorpusFileList extends ResourceLists.Resour
       }
     }
   }
-};
+}

app/static/js/ResourceLists/CorpusFollowerList.js

@@ -1,5 +1,9 @@
-ResourceLists.CorpusFollowerList = class CorpusFollowerList extends ResourceLists.ResourceList {
-  static htmlClass = 'corpus-follower-list';
+class CorpusFollowerList extends ResourceList {
+  static autoInit() {
+    for (let corpusFollowerListElement of document.querySelectorAll('.corpus-follower-list:not(.no-autoinit)')) {
+      new CorpusFollowerList(corpusFollowerListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -192,4 +196,4 @@ ResourceLists.CorpusFollowerList = class CorpusFollowerList extends ResourceList
       }
     }
   }
-};
+}

app/static/js/ResourceLists/CorpusList.js

@@ -1,5 +1,9 @@
-ResourceLists.CorpusList = class CorpusList extends ResourceLists.ResourceList {
-  static htmlClass = 'corpus-list';
+class CorpusList extends ResourceList {
+  static autoInit() {
+    for (let corpusListElement of document.querySelectorAll('.corpus-list:not(.no-autoinit)')) {
+      new CorpusList(corpusListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -366,4 +370,4 @@ ResourceLists.CorpusList = class CorpusList extends ResourceLists.ResourceList {
       }
     }
   }
-};
+}

app/static/js/ResourceLists/CorpusTextInfoList.js

@@ -1,5 +1,10 @@
-ResourceLists.CorpusTextInfoList = class CorpusTextInfoList extends ResourceLists.ResourceList {
-  static htmlClass = 'corpus-text-info-list';
+class CorpusTextInfoList extends ResourceList {
+
+  static autoInit() {
+    for (let corpusTextInfoListElement of document.querySelectorAll('.corpus-text-info-list:not(.no-autoinit)')) {
+      new CorpusTextInfoList(corpusTextInfoListElement);
+    }
+  }
 
   static defaultOptions = {
     page: 5
@@ -7,7 +12,7 @@ ResourceLists.CorpusTextInfoList = class CorpusTextInfoList extends ResourceList
 
   constructor(listContainerElement, options = {}) {
     let _options = Utils.mergeObjectsDeep(
-      ResourceLists.CorpusTextInfoList.defaultOptions,
+      CorpusTextInfoList.defaultOptions,
       options
     );
     super(listContainerElement, _options);
@@ -21,7 +26,7 @@ ResourceLists.CorpusTextInfoList = class CorpusTextInfoList extends ResourceList
   get item() {
     return (values) => {
       return `
-        <tr class="list-item hoverable">
+        <tr class="list-item clickable hoverable">
           <td><span class="title"></span> (<span class="publishing_year"></span>)</td>
           <td><span class="num_tokens"></span></td>
           <td><span class="num_sentences"></span></td>
@@ -104,4 +109,4 @@ ResourceLists.CorpusTextInfoList = class CorpusTextInfoList extends ResourceList
     clickedSortElement.style.color = '#aa9cc9';
     clickedSortElement.innerHTML = clickedSortElement.classList.contains('asc') ? 'arrow_drop_down' : 'arrow_drop_up';
   }
-};
+}

app/static/js/ResourceLists/CorpusTokenList.js

@@ -1,5 +1,9 @@
-ResourceLists.CorpusTokenList = class CorpusTokenList extends ResourceLists.ResourceList {
-  static htmlClass = 'corpus-token-list';
+class CorpusTokenList extends ResourceList {
+  static autoInit() {
+    for (let corpusTokenListElement of document.querySelectorAll('.corpus-token-list:not(.no-autoinit)')) {
+      new CorpusTokenList(corpusTokenListElement);
+    }
+  }
 
   static defaultOptions = {
     page: 7
@@ -7,7 +11,7 @@ ResourceLists.CorpusTokenList = class CorpusTokenList extends ResourceLists.Reso
 
   constructor(listContainerElement, options = {}) {
     let _options = Utils.mergeObjectsDeep(
-      ResourceLists.CorpusTokenList.defaultOptions,
+      CorpusTokenList.defaultOptions,
       options
     );
     super(listContainerElement, _options);
@@ -134,4 +138,4 @@ ResourceLists.CorpusTokenList = class CorpusTokenList extends ResourceLists.Reso
     }
   }
 
-};
+}

app/static/js/ResourceLists/DetailledPublicCorpusList.js

@@ -1,6 +1,4 @@
-ResourceLists.DetailedPublicCorpusList = class DetailedPublicCorpusList extends ResourceLists.ResourceList {
-  static htmlClass = 'detailed-public-corpus-list';
-
+class DetailledPublicCorpusList extends CorpusList {
   get item() {
     return (values) => {
       return `
@@ -70,4 +68,4 @@ ResourceLists.DetailedPublicCorpusList = class DetailedPublicCorpusList extends
       'current-user-is-following': Object.values(corpus.corpus_follower_associations).some(association => association.follower.id === currentUserId)
     };
   }
-};
+}

app/static/js/ResourceLists/JobInputList.js

@@ -1,5 +1,9 @@
-ResourceLists.JobInputList = class JobInputList extends ResourceLists.ResourceList {
-  static htmlClass = 'job-input-list';
+class JobInputList extends ResourceList {
+  static autoInit() {
+    for (let jobInputListElement of document.querySelectorAll('.job-input-list:not(.no-autoinit)')) {
+      new JobInputList(jobInputListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -86,4 +90,4 @@ ResourceLists.JobInputList = class JobInputList extends ResourceLists.ResourceLi
       }
     }
   }
-};
+}

app/static/js/ResourceLists/JobList.js

@@ -1,5 +1,9 @@
-ResourceLists.JobList = class JobList extends ResourceLists.ResourceList {
-  static htmlClass = 'job-list';
+class JobList extends ResourceList {
+  static autoInit() {
+    for (let jobListElement of document.querySelectorAll('.job-list:not(.no-autoinit)')) {
+      new JobList(jobListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -319,4 +323,4 @@ ResourceLists.JobList = class JobList extends ResourceLists.ResourceList {
       }
     }
   }
-};
+}

app/static/js/ResourceLists/JobResultList.js

@@ -1,5 +1,9 @@
-ResourceLists.JobResultList = class JobResultList extends ResourceLists.ResourceList {
-  static htmlClass = 'job-result-list';
+class JobResultList extends ResourceList {
+  static autoInit() {
+    for (let jobResultListElement of document.querySelectorAll('.job-result-list:not(.no-autoinit)')) {
+      new JobResultList(jobResultListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -111,4 +115,4 @@ ResourceLists.JobResultList = class JobResultList extends ResourceLists.Resource
       }
     }
   }
-};
+}

app/static/js/ResourceLists/PublicCorpusList.js

@@ -1,6 +1,4 @@
-ResourceLists.PublicCorpusList = class PublicCorpusList extends ResourceLists.ResourceList {
-  static htmlClass = 'public-corpus-list';
-
+class PublicCorpusList extends CorpusList {
   get item() {
     return (values) => {
       return `
@@ -54,4 +52,4 @@ ResourceLists.PublicCorpusList = class PublicCorpusList extends ResourceLists.Re
       <ul class="pagination"></ul>
     `.trim();
   }
-};
+}

app/static/js/ResourceLists/ResourceList.js

@@ -1,4 +1,31 @@
-ResourceLists.ResourceList = class ResourceList {
+var ResourceLists = {};
+
+ResourceLists.autoInit = () => {
+  for (let propertyName in ResourceLists) {
+    let property = ResourceLists[propertyName];
+    // Call autoInit of all properties that are subclasses of `ResourceLists.BaseList`.
+    // This does not include `ResourceLists.BaseList` itself.
+    if (property.prototype instanceof ResourceLists.BaseList) {
+      // Check if the static `htmlClass` property is defined.
+      if (property.htmlClass === undefined) {return;}
+      // Gather all HTML elements that have the `this.htmlClass` class
+      // and do not have the `no-autoinit` class.
+      let listElements = document.querySelectorAll(`.${property.htmlClass}:not(.no-autoinit)`);
+      // Create an instance of this class for each display element.
+      for (let listElement of listElements) {new property(listElement);}
+    }
+  }
+};
+
+ResourceLists.defaultOptions = {
+  page: 5,
+  pagination: {
+    innerWindow: 2,
+    outerWindow: 2
+  }
+};
+
+ResourceLists.BaseList = class BaseList {
   /* A wrapper class for the list.js list.
    * This class is not meant to be used directly, instead it should be used as
    * a base class for concrete resource list implementations.
@@ -6,14 +33,6 @@ ResourceLists.ResourceList = class ResourceList {
 
   static htmlClass;
 
-  static defaultOptions = {
-    page: 5,
-    pagination: {
-      innerWindow: 2,
-      outerWindow: 2
-    }
-  };
-
   constructor(listContainerElement, options = {}) {
     if ('items' in options) {
       throw '"items" is not supported as an option, define it as a getter in the list class';
@@ -23,7 +42,7 @@ ResourceLists.ResourceList = class ResourceList {
     }
     let _options = Utils.mergeObjectsDeep(
       {item: this.item, valueNames: this.valueNames},
-      ResourceLists.ResourceList.defaultOptions,
+      ResourceLists.defaultOptions,
       options
     );
     this.listContainerElement = listContainerElement;

app/static/js/ResourceLists/SpacyNLPPipelineModelList.js

@@ -1,5 +1,9 @@
-ResourceLists.SpaCyNLPPipelineModelList = class SpaCyNLPPipelineModelList extends ResourceLists.ResourceList {
-  static htmlClass = 'spacy-nlp-pipeline-model-list';
+class SpaCyNLPPipelineModelList extends ResourceList {
+  static autoInit() {
+    for (let spaCyNLPPipelineModelListElement of document.querySelectorAll('.spacy-nlp-pipeline-model-list:not(.no-autoinit)')) {
+      new SpaCyNLPPipelineModelList(spaCyNLPPipelineModelListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -216,4 +220,4 @@ ResourceLists.SpaCyNLPPipelineModelList = class SpaCyNLPPipelineModelList extend
       }
     }
   }
-};
+}

app/static/js/ResourceLists/TesseractOCRPipelineModelList.js

@@ -1,5 +1,9 @@
-ResourceLists.TesseractOCRPipelineModelList = class TesseractOCRPipelineModelList extends ResourceLists.ResourceList {
-  static htmlClass = 'tesseract-ocr-pipeline-model-list';
+class TesseractOCRPipelineModelList extends ResourceList {
+  static autoInit() {
+    for (let tesseractOCRPipelineModelListElement of document.querySelectorAll('.tesseract-ocr-pipeline-model-list:not(.no-autoinit)')) {
+      new TesseractOCRPipelineModelList(tesseractOCRPipelineModelListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -225,4 +229,4 @@ ResourceLists.TesseractOCRPipelineModelList = class TesseractOCRPipelineModelLis
       }
     }
   }
-};
+}

app/static/js/ResourceLists/UserList.js

@@ -1,5 +1,9 @@
-ResourceLists.UserList = class UserList extends ResourceLists.ResourceList {
-  static htmlClass = 'user-list';
+class UserList extends ResourceList {
+  static autoInit() {
+    for (let userListElement of document.querySelectorAll('.user-list:not(.no-autoinit)')) {
+      new UserList(userListElement);
+    }
+  }
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
@@ -97,4 +101,4 @@ ResourceLists.UserList = class UserList extends ResourceLists.ResourceList {
       }
     }
   }
-};
+}

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

@@ -1,4 +1,4 @@
-ResourceDisplays.CorpusDisplay = class CorpusDisplay extends ResourceDisplays.ResourceDisplay {
+ResourceDisplays.CorpusDisplay = class CorpusDisplay extends ResourceDisplays.BaseDisplay {
   static htmlClass = 'corpus-display';
 
   constructor(displayElement) {

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

@@ -3,9 +3,9 @@ var ResourceDisplays = {};
 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) {
+    // Call autoInit of all properties that are subclasses of `ResourceDisplays.BaseDisplay`.
+    // This does not include `ResourceDisplays.BaseDisplay` itself.
+    if (property.prototype instanceof ResourceDisplays.BaseDisplay) {
       // Check if the static `htmlClass` property is defined.
       if (property.htmlClass === undefined) {return;}
       // Gather all HTML elements that have the `this.htmlClass` class
@@ -15,4 +15,4 @@ ResourceDisplays.autoInit = () => {
       for (let displayElement of displayElements) {new property(displayElement);}
     }
   }
-};
+}

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

@@ -1,4 +1,4 @@
-ResourceDisplays.JobDisplay = class JobDisplay extends ResourceDisplays.ResourceDisplay {
+ResourceDisplays.JobDisplay = class JobDisplay extends ResourceDisplays.BaseDisplay {
   static htmlClass = 'job-display';
 
   constructor(displayElement) {

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

@@ -1,4 +1,4 @@
-ResourceDisplays.ResourceDisplay = class ResourceDisplay {
+ResourceDisplays.BaseDisplay = class BaseDisplay {
   static htmlClass;
 
   constructor(displayElement) {

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

@@ -1,18 +0,0 @@
-var ResourceLists = {};
-
-ResourceLists.autoInit = () => {
-  for (let propertyName in ResourceLists) {
-    let property = ResourceLists[propertyName];
-    // Call autoInit of all properties that are subclasses of `ResourceLists.ResourceList`.
-    // This does not include `ResourceLists.ResourceList` itself.
-    if (property.prototype instanceof ResourceLists.ResourceList) {
-      // Check if the static `htmlClass` property is defined.
-      if (property.htmlClass === undefined) {return;}
-      // Gather all HTML elements that have the `this.htmlClass` class
-      // and do not have the `no-autoinit` class.
-      let listElements = document.querySelectorAll(`.${property.htmlClass}:not(.no-autoinit)`);
-      // Create an instance of this class for each display element.
-      for (let listElement of listElements) {new property(listElement);}
-    }
-  }
-};

app/templates/_scripts.html.j2

@@ -36,7 +36,7 @@
   filters='rjsmin',
   output='gen/Forms.%(version)s.js',
   'js/forms/index.js',
-  'js/forms/base-form.js',
+  'js/forms/form.js'
   'js/forms/create-contribution-form.js',
   'js/forms/create-corpus-file-form.js',
   'js/forms/create-job-form.js'
@@ -48,7 +48,7 @@
   filters='rjsmin',
   output='gen/resource-displays.%(version)s.js',
   'js/resource-displays/index.js',
-  'js/resource-displays/resource-display.js',
+  'js/resource-displays/base-display.js',
   'js/resource-displays/corpus-display.js',
   'js/resource-displays/job-display.js'
 %}
@@ -57,23 +57,22 @@
 
 {%- assets
   filters='rjsmin',
-  output='gen/resource-lists.%(version)s.js',
-  'js/resource-lists/index.js',
-  'js/resource-lists/resource-list.js',
-  'js/resource-lists/admin-user-list.js',
-  'js/resource-lists/corpus-file-list.js',
-  'js/resource-lists/corpus-follower-list.js',
-  'js/resource-lists/corpus-list.js',
-  'js/resource-lists/corpus-text-info-list.js',
-  'js/resource-lists/corpus-token-list.js',
-  'js/resource-lists/detailed-public-corpus-list.js',
-  'js/resource-lists/job-input-list.js',
-  'js/resource-lists/job-list.js',
-  'js/resource-lists/job-result-list.js',
-  'js/resource-lists/public-corpus-list.js',
-  'js/resource-lists/spacy-nlp-pipeline-model-list.js',
-  'js/resource-lists/tesseract-ocr-pipeline-model-list.js',
-  'js/resource-lists/user-list.js'
+  output='gen/ResourceLists.%(version)s.js',
+  'js/ResourceLists/ResourceList.js',
+  'js/ResourceLists/CorpusFileList.js',
+  'js/ResourceLists/CorpusList.js',
+  'js/ResourceLists/PublicCorpusList.js',
+  'js/ResourceLists/JobList.js',
+  'js/ResourceLists/JobInputList.js',
+  'js/ResourceLists/JobResultList.js',
+  'js/ResourceLists/SpacyNLPPipelineModelList.js',
+  'js/ResourceLists/TesseractOCRPipelineModelList.js',
+  'js/ResourceLists/UserList.js',
+  'js/ResourceLists/AdminUserList.js',
+  'js/ResourceLists/CorpusFollowerList.js',
+  'js/ResourceLists/CorpusTextInfoList.js',
+  'js/ResourceLists/DetailledPublicCorpusList.js',
+  'js/ResourceLists/CorpusTokenList.js'
 %}
 <script src="{{ ASSET_URL }}"></script>
 {%- endassets %}
@@ -144,7 +143,7 @@
     {alignment: 'right', constrainWidth: false, coverTrigger: false}
   );
   ResourceDisplays.autoInit();
-  ResourceLists.autoInit();
+  ResourceList.autoInit();
   Forms.autoInit();
 
   // Display flashed messages

app/templates/admin/corpora.html.j2

@@ -17,7 +17,7 @@
 {{ super() }}
 <script>
   let corpusListElement = document.querySelector('#corpus-list');
-  let corpusList = new ResourceLists.CorpusList(corpusListElement);
+  let corpusList = new CorpusList(corpusListElement);
   corpusList.add(
     [
       {% for corpus in corpora %}

app/templates/admin/users.html.j2

@@ -22,7 +22,7 @@
 {{ super() }}
 <script>
   let adminUserListElement = document.querySelector('#admin-user-list');
-  let adminUserList = new ResourceLists.AdminUserList(adminUserListElement);
+  let adminUserList = new AdminUserList(adminUserListElement);
   adminUserList.add(
     [
       {% for user in users %}

app/templates/corpora/public_corpus.html.j2

@@ -242,7 +242,7 @@
 {{ super() }}
 <script>
 
-let publicCorpusFileList = new ResourceLists.CorpusFileList(document.querySelector('#corpus-file-list'));
+let publicCorpusFileList = new CorpusFileList(document.querySelector('#corpus-file-list'));
 publicCorpusFileList.add(
   [
     {% for corpus_file in corpus.files %}
@@ -259,7 +259,7 @@ refreshButton.addEventListener('click', () => {
 {% endif %}
 
 {% if cfr.has_permission('MANAGE_FOLLOWERS') %}
-let publicCorpusFollowerList = new ResourceLists.CorpusFollowerList(document.querySelector('.corpus-follower-list'));
+let publicCorpusFollowerList = new CorpusFollowerList(document.querySelector('.corpus-follower-list'));
 publicCorpusFollowerList.add(
   [
     {% for cfa in cfas %}

app/templates/main/social_area.html.j2

@@ -62,7 +62,7 @@
 {% block scripts %}
 {{ super() }}
 <script>
-  let userList = new ResourceLists.UserList(document.querySelector('.user-list'));
+  let userList = new UserList(document.querySelector('.user-list'));
   userList.add(
     [
       {% for user in users %}
@@ -70,7 +70,7 @@
       {% endfor %}
     ]
   );
-  let publicCorpusList = new ResourceLists.PublicCorpusList(document.querySelector('.public-corpus-list'));
+  let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
   publicCorpusList.add(
     [
       {% for corpus in corpora %}

app/templates/users/user.html.j2

@@ -122,7 +122,7 @@
 {% block scripts %}
 {{ super() }}
 <script>
-let followedCorpusList = new ResourceLists.PublicCorpusList(document.querySelector('.followed-corpus-list'));
+let followedCorpusList = new PublicCorpusList(document.querySelector('.followed-corpus-list'));
 followedCorpusList.add(
   [
     {% for corpus in user.followed_corpora %}
@@ -132,7 +132,7 @@ followedCorpusList.add(
     {% endfor %}
   ]
 );
-let publicCorpusList = new ResourceLists.PublicCorpusList(document.querySelector('.public-corpus-list'));
+let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
 publicCorpusList.add(
   [
     {% for corpus in user.corpora %}