Import ChooserFactory classes in telepath endpoint files, rather than relying on them existing in the global scope

client/src/components/ChooserWidget/DocumentChooserWidget.js

@@ -0,0 +1,13 @@
+import { Chooser, ChooserFactory } from '.';
+
+export class DocumentChooser extends Chooser {
+  // eslint-disable-next-line no-undef
+  chooserModalClass = DocumentChooserModal;
+}
+window.DocumentChooser = DocumentChooser;
+
+export class DocumentChooserFactory extends ChooserFactory {
+  widgetClass = DocumentChooser;
+  // eslint-disable-next-line no-undef
+  chooserModalClass = DocumentChooserModal;
+}

client/src/components/ChooserWidget/ImageChooserWidget.js

@@ -0,0 +1,42 @@
+import { Chooser, ChooserFactory } from '.';
+
+export class ImageChooser extends Chooser {
+  // eslint-disable-next-line no-undef
+  chooserModalClass = ImageChooserModal;
+
+  initHTMLElements(id) {
+    super.initHTMLElements(id);
+    this.previewImage = this.chooserElement.querySelector(
+      '[data-chooser-image]',
+    );
+  }
+
+  getStateFromHTML() {
+    /*
+    Construct initial state of the chooser from the rendered (static) HTML.
+    State is either null (= no image chosen) or a dict of id, edit_url, title
+    and preview (= a dict of url, width, height).
+    */
+    const state = super.getStateFromHTML();
+    if (state) {
+      state.preview = {
+        url: this.previewImage.getAttribute('src'),
+        width: this.previewImage.getAttribute('width'),
+        height: this.previewImage.getAttribute('height'),
+      };
+    }
+    return state;
+  }
+
+  renderState(newState) {
+    super.renderState(newState);
+    this.previewImage.setAttribute('src', newState.preview.url);
+    this.previewImage.setAttribute('width', newState.preview.width);
+  }
+}
+
+export class ImageChooserFactory extends ChooserFactory {
+  widgetClass = ImageChooser;
+  // eslint-disable-next-line no-undef
+  chooserModalClass = ImageChooserModal;
+}

client/src/components/ChooserWidget/PageChooserWidget.js

@@ -0,0 +1,59 @@
+import { Chooser, ChooserFactory } from '.';
+
+export class PageChooser extends Chooser {
+  // eslint-disable-next-line no-undef
+  chooserModalClass = PageChooserModal;
+
+  titleStateKey = 'adminTitle';
+  editUrlStateKey = 'editUrl';
+
+  constructor(id, arg1, arg2) {
+    let opts;
+    if (arg2 || typeof arg1 === 'number') {
+      /* old-style args: (id, parentId, opts) */
+      opts = { parentId: arg1, ...arg2 };
+    } else {
+      /* new style args: (id, opts) where opts includes 'parentId' */
+      opts = arg1 || {};
+    }
+    super(id, opts);
+  }
+
+  getStateFromHTML() {
+    const state = super.getStateFromHTML();
+    if (state) {
+      state.parentId = this.opts.parentId;
+    }
+    return state;
+  }
+
+  getModalOptions() {
+    const opts = {
+      modelNames: this.opts.modelNames,
+      targetPages: this.opts.targetPages,
+      matchSubclass: this.opts.matchSubclass,
+      canChooseRoot: this.opts.canChooseRoot,
+      userPerms: this.opts.userPerms,
+    };
+    if (this.state && this.state.parentId) {
+      opts.parentId = this.state.parentId;
+    }
+    return opts;
+  }
+}
+
+export class PageChooserFactory extends ChooserFactory {
+  widgetClass = PageChooser;
+  // eslint-disable-next-line no-undef
+  chooserModalClass = PageChooserModal;
+
+  getModalOptions() {
+    return {
+      modelNames: this.opts.modelNames,
+      targetPages: this.opts.targetPages,
+      matchSubclass: this.opts.matchSubclass,
+      canChooseRoot: this.opts.canChooseRoot,
+      userPerms: this.opts.userPerms,
+    };
+  }
+}

client/src/components/ChooserWidget/SnippetChooserWidget.js

@@ -0,0 +1,28 @@
+import { ChooserModal } from '../../includes/chooserModal';
+import { Chooser, ChooserFactory } from '.';
+
+/* global wagtailConfig */
+
+class SnippetChooserModal extends ChooserModal {
+  getURLParams(opts) {
+    const params = super.getURLParams(opts);
+    if (wagtailConfig.ACTIVE_CONTENT_LOCALE) {
+      // The user is editing a piece of translated content.
+      // Pass the locale along as a request parameter. If this
+      // snippet is also translatable, the results will be
+      // pre-filtered by this locale.
+      params.locale = wagtailConfig.ACTIVE_CONTENT_LOCALE;
+    }
+    return params;
+  }
+}
+
+export class SnippetChooser extends Chooser {
+  titleStateKey = 'string';
+  chooserModalClass = SnippetChooserModal;
+}
+
+export class SnippetChooserFactory extends ChooserFactory {
+  widgetClass = SnippetChooser;
+  chooserModalClass = SnippetChooserModal;
+}

client/src/entrypoints/admin/page-chooser-telepath.js

@@ -1,4 +1,3 @@
-window.telepath.register(
-  'wagtail.widgets.PageChooser',
-  window.PageChooserFactory,
-);
+import { PageChooserFactory } from '../../components/ChooserWidget/PageChooserWidget';
+
+window.telepath.register('wagtail.widgets.PageChooser', PageChooserFactory);

client/src/entrypoints/admin/page-chooser-telepath.test.js

@@ -1,5 +1,4 @@
 import './telepath/telepath';
-import './page-chooser';
 import './page-chooser-telepath';
 
 describe('telepath: wagtail.widgets.PageChooser', () => {

client/src/entrypoints/admin/page-chooser.js

@@ -1,65 +1,7 @@
-import { Chooser, ChooserFactory } from '../../components/ChooserWidget';
+import { PageChooser } from '../../components/ChooserWidget/PageChooserWidget';
 
-class PageChooser extends Chooser {
-  // eslint-disable-next-line no-undef
-  chooserModalClass = PageChooserModal;
-
-  titleStateKey = 'adminTitle';
-  editUrlStateKey = 'editUrl';
-
-  constructor(id, arg1, arg2) {
-    let opts;
-    if (arg2 || typeof arg1 === 'number') {
-      /* old-style args: (id, parentId, opts) */
-      opts = { parentId: arg1, ...arg2 };
-    } else {
-      /* new style args: (id, opts) where opts includes 'parentId' */
-      opts = arg1 || {};
-    }
-    super(id, opts);
-  }
-
-  getStateFromHTML() {
-    const state = super.getStateFromHTML();
-    if (state) {
-      state.parentId = this.opts.parentId;
-    }
-    return state;
-  }
-
-  getModalOptions() {
-    const opts = {
-      modelNames: this.opts.modelNames,
-      targetPages: this.opts.targetPages,
-      matchSubclass: this.opts.matchSubclass,
-      canChooseRoot: this.opts.canChooseRoot,
-      userPerms: this.opts.userPerms,
-    };
-    if (this.state && this.state.parentId) {
-      opts.parentId = this.state.parentId;
-    }
-    return opts;
-  }
-}
 window.PageChooser = PageChooser;
 
-class PageChooserFactory extends ChooserFactory {
-  widgetClass = PageChooser;
-  // eslint-disable-next-line no-undef
-  chooserModalClass = PageChooserModal;
-
-  getModalOptions() {
-    return {
-      modelNames: this.opts.modelNames,
-      targetPages: this.opts.targetPages,
-      matchSubclass: this.opts.matchSubclass,
-      canChooseRoot: this.opts.canChooseRoot,
-      userPerms: this.opts.userPerms,
-    };
-  }
-}
-window.PageChooserFactory = PageChooserFactory;
-
 function createPageChooser(id, parentId, options) {
   /* RemovedInWagtail50Warning */
   return new PageChooser(id, parentId, options);

client/src/entrypoints/documents/document-chooser-telepath.js

@@ -1,4 +1,6 @@
+import { DocumentChooserFactory } from '../../components/ChooserWidget/DocumentChooserWidget';
+
 window.telepath.register(
   'wagtail.documents.widgets.DocumentChooser',
-  window.DocumentChooserFactory,
+  DocumentChooserFactory,
 );

client/src/entrypoints/documents/document-chooser.js

@@ -1,18 +1,7 @@
-import { Chooser, ChooserFactory } from '../../components/ChooserWidget';
+import { DocumentChooser } from '../../components/ChooserWidget/DocumentChooserWidget';
 
-class DocumentChooser extends Chooser {
-  // eslint-disable-next-line no-undef
-  chooserModalClass = DocumentChooserModal;
-}
 window.DocumentChooser = DocumentChooser;
 
-class DocumentChooserFactory extends ChooserFactory {
-  widgetClass = DocumentChooser;
-  // eslint-disable-next-line no-undef
-  chooserModalClass = DocumentChooserModal;
-}
-window.DocumentChooserFactory = DocumentChooserFactory;
-
 function createDocumentChooser(id) {
   /* RemovedInWagtail50Warning */
   return new DocumentChooser(id);

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

@@ -1,4 +1,6 @@
+import { ImageChooserFactory } from '../../components/ChooserWidget/ImageChooserWidget';
+
 window.telepath.register(
   'wagtail.images.widgets.ImageChooser',
-  window.ImageChooserFactory,
+  ImageChooserFactory,
 );

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

@@ -1,48 +1,7 @@
-import { Chooser, ChooserFactory } from '../../components/ChooserWidget';
+import { ImageChooser } from '../../components/ChooserWidget/ImageChooserWidget';
 
-class ImageChooser extends Chooser {
-  // eslint-disable-next-line no-undef
-  chooserModalClass = ImageChooserModal;
-
-  initHTMLElements(id) {
-    super.initHTMLElements(id);
-    this.previewImage = this.chooserElement.querySelector(
-      '[data-chooser-image]',
-    );
-  }
-
-  getStateFromHTML() {
-    /*
-    Construct initial state of the chooser from the rendered (static) HTML.
-    State is either null (= no image chosen) or a dict of id, edit_url, title
-    and preview (= a dict of url, width, height).
-    */
-    const state = super.getStateFromHTML();
-    if (state) {
-      state.preview = {
-        url: this.previewImage.getAttribute('src'),
-        width: this.previewImage.getAttribute('width'),
-        height: this.previewImage.getAttribute('height'),
-      };
-    }
-    return state;
-  }
-
-  renderState(newState) {
-    super.renderState(newState);
-    this.previewImage.setAttribute('src', newState.preview.url);
-    this.previewImage.setAttribute('width', newState.preview.width);
-  }
-}
 window.ImageChooser = ImageChooser;
 
-class ImageChooserFactory extends ChooserFactory {
-  widgetClass = ImageChooser;
-  // eslint-disable-next-line no-undef
-  chooserModalClass = ImageChooserModal;
-}
-window.ImageChooserFactory = ImageChooserFactory;
-
 function createImageChooser(id) {
   /* RemovedInWagtail50Warning */
   return new ImageChooser(id);

client/src/entrypoints/snippets/snippet-chooser-telepath.js

@@ -1,4 +1,6 @@
+import { SnippetChooserFactory } from '../../components/ChooserWidget/SnippetChooserWidget';
+
 window.telepath.register(
   'wagtail.snippets.widgets.SnippetChooser',
-  window.SnippetChooserFactory,
+  SnippetChooserFactory,
 );

client/src/entrypoints/snippets/snippet-chooser.js

@@ -1,34 +1,7 @@
-import { ChooserModal } from '../../includes/chooserModal';
-import { Chooser, ChooserFactory } from '../../components/ChooserWidget';
+import { SnippetChooser } from '../../components/ChooserWidget/SnippetChooserWidget';
 
-/* global wagtailConfig */
-
-class SnippetChooserModal extends ChooserModal {
-  getURLParams(opts) {
-    const params = super.getURLParams(opts);
-    if (wagtailConfig.ACTIVE_CONTENT_LOCALE) {
-      // The user is editing a piece of translated content.
-      // Pass the locale along as a request parameter. If this
-      // snippet is also translatable, the results will be
-      // pre-filtered by this locale.
-      params.locale = wagtailConfig.ACTIVE_CONTENT_LOCALE;
-    }
-    return params;
-  }
-}
-
-class SnippetChooser extends Chooser {
-  titleStateKey = 'string';
-  chooserModalClass = SnippetChooserModal;
-}
 window.SnippetChooser = SnippetChooser;
 
-class SnippetChooserFactory extends ChooserFactory {
-  widgetClass = SnippetChooser;
-  chooserModalClass = SnippetChooserModal;
-}
-window.SnippetChooserFactory = SnippetChooserFactory;
-
 function createSnippetChooser(id) {
   /* RemovedInWagtail50Warning */
   return new SnippetChooser(id);

wagtail/admin/widgets/chooser.py

@@ -384,7 +384,6 @@ class PageChooserAdapter(BaseChooserAdapter):
         return forms.Media(
             js=[
                 versioned_static("wagtailadmin/js/page-chooser-modal.js"),
-                versioned_static("wagtailadmin/js/page-chooser.js"),
                 versioned_static("wagtailadmin/js/page-chooser-telepath.js"),
             ]
         )

wagtail/documents/views/chooser.py

@@ -172,7 +172,6 @@ class DocumentChooserAdapter(BaseChooserAdapter):
         return forms.Media(
             js=[
                 versioned_static("wagtaildocs/js/document-chooser-modal.js"),
-                versioned_static("wagtaildocs/js/document-chooser.js"),
                 versioned_static("wagtaildocs/js/document-chooser-telepath.js"),
             ]
         )

wagtail/images/widgets.py

@@ -56,7 +56,6 @@ class ImageChooserAdapter(BaseChooserAdapter):
         return forms.Media(
             js=[
                 versioned_static("wagtailimages/js/image-chooser-modal.js"),
-                versioned_static("wagtailimages/js/image-chooser.js"),
                 versioned_static("wagtailimages/js/image-chooser-telepath.js"),
             ]
         )

wagtail/snippets/widgets.py

@@ -48,7 +48,6 @@ class AdminSnippetChooser(BaseChooser):
     def media(self):
         return forms.Media(
             js=[
-                versioned_static("wagtailadmin/js/chooser-modal.js"),
                 versioned_static("wagtailsnippets/js/snippet-chooser.js"),
             ]
         )
@@ -61,8 +60,6 @@ class SnippetChooserAdapter(BaseChooserAdapter):
     def media(self):
         return forms.Media(
             js=[
-                versioned_static("wagtailadmin/js/chooser-modal.js"),
-                versioned_static("wagtailsnippets/js/snippet-chooser.js"),
                 versioned_static("wagtailsnippets/js/snippet-chooser-telepath.js"),
             ]
         )