Better auto initialization method for forms and resource displays

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

@@ -1,10 +1,5 @@
 Forms.CreateContributionForm = class CreateContributionForm extends Forms.BaseForm {
-  static autoInit() {
-    let createContributionFormElements = document.querySelectorAll('.create-contribution-form');
-    for (let createContributionFormElement of createContributionFormElements) {
-      new Forms.CreateContributionForm(createContributionFormElement);
-    }
-  }
+  static htmlClass = 'create-contribution-form';
 
   constructor(formElement) {
     super(formElement);

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

@@ -1,10 +1,5 @@
 Forms.CreateCorpusFileForm = class CreateCorpusFileForm extends Forms.BaseForm {
-  static autoInit() {
-    let createCorpusFileFormElements = document.querySelectorAll('.create-corpus-file-form');
-    for (let createCorpusFileFormElement of createCorpusFileFormElements) {
-      new Forms.CreateCorpusFileForm(createCorpusFileFormElement);
-    }
-  }
+  static htmlClass = 'create-corpus-file-form';
 
   constructor(formElement) {
     super(formElement);

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

@@ -1,10 +1,5 @@
 Forms.CreateJobForm = class CreateJobForm extends Forms.BaseForm {
-  static autoInit() {
-    let createJobFormElements = document.querySelectorAll('.create-job-form');
-    for (let createJobFormElement of createJobFormElements) {
-      new Forms.CreateJobForm(createJobFormElement);
-    }
-  }
+  static htmlClass = 'create-job-form';
 
   constructor(formElement) {
     super(formElement);

app/static/js/forms/index.js

@@ -3,15 +3,22 @@ var Forms = {};
 Forms.autoInit = () => {
   for (let propertyName in Forms) {
     let property = Forms[propertyName];
-    // Call the autoInit method of all properties that are subclasses of Forms.BaseForm
+    // Call autoInit of all properties that are subclasses of Forms.BaseForm.
+    // This does not include Forms.BaseForm itself.
     if (property.prototype instanceof Forms.BaseForm) {
-      property.autoInit();
+      // 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 formElements = document.querySelectorAll(`.${property.htmlClass}:not(.no-autoinit)`);
+      // Create an instance of this class for each form element.
+      for (let formElement of formElements) {new property(formElement);}
     }
   }
 };
 
 Forms.BaseForm = class BaseForm {
-  static autoInit() {throw 'Not implemented';}
+  static htmlClass;
 
   constructor(formElement) {
     this.formElement = formElement;

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

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

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

@@ -1,6 +1,28 @@
 var ResourceDisplays = {};
 
+ResourceDisplays.autoInit = () => {
+  console.log('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) {
+      console.log(property);
+      // 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 displayElements = document.querySelectorAll(`.${property.htmlClass}:not(.no-autoinit)`);
+      console.log(displayElements);
+      // Create an instance of this class for each display element.
+      for (let displayElement of displayElements) {new property(displayElement);}
+    }
+  }
+}
+
 ResourceDisplays.BaseDisplay = class BaseDisplay {
+  static htmlClass;
+
   constructor(displayElement) {
     this.displayElement = displayElement;
     this.userId = this.displayElement.dataset.userId;

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

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