Make ImageChooserModalOnloadHandlerFactory inherit from base implementation

client/src/entrypoints/images/image-chooser-modal.js

@@ -1,66 +1,9 @@
 import $ from 'jquery';
-import { initTabs } from '../../includes/tabs';
-import {
-  submitCreationForm,
-  validateCreationForm,
-  initPrefillTitleFromFilename,
-  SearchController,
-} from '../../includes/chooserModal';
-
-class ImageChooserModalOnloadHandlerFactory {
-  constructor() {
-    this.searchController = null;
-  }
-
-  ajaxifyLinks(modal, containerElement) {
-    $('a.image-choice', containerElement).on('click', (event) => {
-      modal.loadUrl(event.currentTarget.href);
-      return false;
-    });
-
-    $('.pagination a', containerElement).on('click', (event) => {
-      this.searchController.fetchResults(event.currentTarget.href);
-      return false;
-    });
-  }
-
-  initSearchController(modal) {
-    this.searchController = new SearchController({
-      form: $('form.image-search', modal.body),
-      containerElement: modal.body,
-      resultsContainerSelector: '#search-results',
-      onLoadResults: (containerElement) => {
-        this.ajaxifyLinks(modal, containerElement);
-      },
-    });
-    this.searchController.attachSearchInput('#id_q');
-    this.searchController.attachSearchFilter('#id_collection_id');
-  }
-
-  ajaxifyImageUploadForm(modal) {
-    $('form[data-chooser-modal-creation-form]', modal.body).on(
-      'submit',
-      (event) => {
-        if (validateCreationForm(event.currentTarget)) {
-          submitCreationForm(modal, event.currentTarget, {
-            errorContainerSelector: '#tab-upload',
-          });
-        }
-        return false;
-      },
-    );
-
-    initPrefillTitleFromFilename(modal, {
-      fileFieldSelector: '#id_image-chooser-upload-file',
-      titleFieldSelector: '#id_image-chooser-upload-title',
-      eventName: 'wagtail:images-upload',
-    });
-  }
+import { ChooserModalOnloadHandlerFactory } from '../../includes/chooserModal';
 
+class ImageChooserModalOnloadHandlerFactory extends ChooserModalOnloadHandlerFactory {
   onLoadChooseStep(modal) {
-    this.initSearchController(modal);
-    this.ajaxifyLinks(modal, modal.body);
-    this.ajaxifyImageUploadForm(modal);
+    super.onLoadChooseStep(modal);
 
     $('a.suggested-tag').on('click', (event) => {
       $('#id_q').val('');
@@ -70,14 +13,6 @@ class ImageChooserModalOnloadHandlerFactory {
       });
       return false;
     });
-
-    // Reinitialize tabs to hook up tab event listeners in the modal
-    initTabs();
-  }
-
-  onLoadChosenStep(modal, jsonData) {
-    modal.respond('chosen', jsonData.result);
-    modal.close();
   }
 
   onLoadDuplicateFoundStep(modal, jsonData) {
@@ -96,12 +31,6 @@ class ImageChooserModalOnloadHandlerFactory {
     });
   }
 
-  onLoadReshowCreationFormStep(modal, jsonData) {
-    $('#tab-upload', modal.body).replaceWith(jsonData.htmlFragment);
-    initTabs();
-    this.ajaxifyImageUploadForm(modal);
-  }
-
   onLoadSelectFormatStep(modal) {
     var decorativeImage = document.querySelector(
       '#id_image-chooser-insertion-image_is_decorative',
@@ -150,25 +79,24 @@ class ImageChooserModalOnloadHandlerFactory {
   }
 
   getOnLoadHandlers() {
-    return {
-      choose: (modal, jsonData) => {
-        this.onLoadChooseStep(modal, jsonData);
-      },
-      chosen: (modal, jsonData) => {
-        this.onLoadChosenStep(modal, jsonData);
-      },
-      duplicate_found: (modal, jsonData) => {
-        this.onLoadDuplicateFoundStep(modal, jsonData);
-      },
-      reshow_creation_form: (modal, jsonData) => {
-        this.onLoadReshowCreationFormStep(modal, jsonData);
-      },
-      select_format: (modal, jsonData) => {
-        this.onLoadSelectFormatStep(modal, jsonData);
-      },
+    const handlers = super.getOnLoadHandlers();
+    handlers.duplicate_found = (modal, jsonData) => {
+      this.onLoadDuplicateFoundStep(modal, jsonData);
     };
+    handlers.select_format = (modal, jsonData) => {
+      this.onLoadSelectFormatStep(modal, jsonData);
+    };
+    return handlers;
   }
 }
 
 window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS =
-  new ImageChooserModalOnloadHandlerFactory().getOnLoadHandlers();
+  new ImageChooserModalOnloadHandlerFactory({
+    chosenLinkSelector: 'a.image-choice',
+    searchFormSelector: 'form.image-search',
+    searchFilterSelectors: ['#id_collection_id'],
+    creationFormFileFieldSelector: '#id_image-chooser-upload-file',
+    creationFormTitleFieldSelector: '#id_image-chooser-upload-title',
+    creationFormEventName: 'wagtail:images-upload',
+    creationFormTabSelector: '#tab-upload',
+  }).getOnLoadHandlers();