Huge List class update

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 CorpusTextInfoList(corpusTextInfoListElement);
+    let corpusTextInfoList = new ResourceLists.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 CorpusTokenList(corpusTokenListElement);
+    let corpusTokenList = new ResourceLists.CorpusTokenList(corpusTokenListElement);
     let filteredData = this.filterData();
     let stopwords = this.data.stopwords;
     if (this.data.stopwords === undefined) {

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.BaseDisplay`.
-    // This does not include `ResourceDisplays.BaseDisplay` itself.
-    if (property.prototype instanceof ResourceDisplays.BaseDisplay) {
+    // Call autoInit of all properties that are subclasses of `ResourceDisplays.ResourceDisplay`.
+    // This does not include `ResourceDisplays.ResourceDisplay` itself.
+    if (property.prototype instanceof ResourceDisplays.ResourceDisplay) {
       // 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-lists/admin-user-list.js

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

app/static/js/resource-lists/corpus-file-list.js

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

app/static/js/resource-lists/corpus-follower-list.js

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

app/static/js/resource-lists/corpus-list.js

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

app/static/js/resource-lists/corpus-text-info-list.js

@@ -1,10 +1,5 @@
-class CorpusTextInfoList extends ResourceList {
-
-  static autoInit() {
-    for (let corpusTextInfoListElement of document.querySelectorAll('.corpus-text-info-list:not(.no-autoinit)')) {
-      new CorpusTextInfoList(corpusTextInfoListElement);
-    }
-  }
+ResourceLists.CorpusTextInfoList = class CorpusTextInfoList extends ResourceLists.ResourceList {
+  static htmlClass = 'corpus-text-info-list';
 
   static defaultOptions = {
     page: 5
@@ -12,7 +7,7 @@ class CorpusTextInfoList extends ResourceList {
 
   constructor(listContainerElement, options = {}) {
     let _options = Utils.mergeObjectsDeep(
-      CorpusTextInfoList.defaultOptions,
+      ResourceLists.CorpusTextInfoList.defaultOptions,
       options
     );
     super(listContainerElement, _options);
@@ -109,4 +104,4 @@ class CorpusTextInfoList extends ResourceList {
     clickedSortElement.style.color = '#aa9cc9';
     clickedSortElement.innerHTML = clickedSortElement.classList.contains('asc') ? 'arrow_drop_down' : 'arrow_drop_up';
   }
-}
+};

app/static/js/resource-lists/corpus-token-list.js

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

app/static/js/resource-lists/detailed-public-corpus-list.js

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

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

@@ -0,0 +1,18 @@
+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/static/js/resource-lists/job-input-list.js

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

app/static/js/resource-lists/job-list.js

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

app/static/js/resource-lists/job-result-list.js

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

app/static/js/resource-lists/public-corpus-list.js

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

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

@@ -1,31 +1,4 @@
-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 {
+ResourceLists.ResourceList = class ResourceList {
   /* 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.
@@ -33,6 +6,14 @@ ResourceLists.BaseList = class BaseList {
 
   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';
@@ -42,7 +23,7 @@ ResourceLists.BaseList = class BaseList {
     }
     let _options = Utils.mergeObjectsDeep(
       {item: this.item, valueNames: this.valueNames},
-      ResourceLists.defaultOptions,
+      ResourceLists.ResourceList.defaultOptions,
       options
     );
     this.listContainerElement = listContainerElement;

app/static/js/resource-lists/spacy-nlp-pipeline-model-list.js

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

app/static/js/resource-lists/tesseract-ocr-pipeline-model-list.js

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

app/static/js/resource-lists/user-list.js

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

app/templates/_scripts.html.j2

@@ -57,22 +57,23 @@
 
 {%- assets
   filters='rjsmin',
-  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'
+  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'
 %}
 <script src="{{ ASSET_URL }}"></script>
 {%- endassets %}
@@ -143,7 +144,7 @@
     {alignment: 'right', constrainWidth: false, coverTrigger: false}
   );
   ResourceDisplays.autoInit();
-  ResourceList.autoInit();
+  ResourceLists.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 CorpusList(corpusListElement);
+  let corpusList = new ResourceLists.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 AdminUserList(adminUserListElement);
+  let adminUserList = new ResourceLists.AdminUserList(adminUserListElement);
   adminUserList.add(
     [
       {% for user in users %}

app/templates/corpora/public_corpus.html.j2

@@ -242,7 +242,7 @@
 {{ super() }}
 <script>
 
-let publicCorpusFileList = new CorpusFileList(document.querySelector('#corpus-file-list'));
+let publicCorpusFileList = new ResourceLists.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 CorpusFollowerList(document.querySelector('.corpus-follower-list'));
+let publicCorpusFollowerList = new ResourceLists.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 UserList(document.querySelector('.user-list'));
+  let userList = new ResourceLists.UserList(document.querySelector('.user-list'));
   userList.add(
     [
       {% for user in users %}
@@ -70,7 +70,7 @@
       {% endfor %}
     ]
   );
-  let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
+  let publicCorpusList = new ResourceLists.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 PublicCorpusList(document.querySelector('.followed-corpus-list'));
+let followedCorpusList = new ResourceLists.PublicCorpusList(document.querySelector('.followed-corpus-list'));
 followedCorpusList.add(
   [
     {% for corpus in user.followed_corpora %}
@@ -132,7 +132,7 @@ followedCorpusList.add(
     {% endfor %}
   ]
 );
-let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
+let publicCorpusList = new ResourceLists.PublicCorpusList(document.querySelector('.public-corpus-list'));
 publicCorpusList.add(
   [
     {% for corpus in user.corpora %}