Deprecate createImageChooser

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

@@ -1,4 +1,4 @@
-class ImageChooser {
+class ImageChooserFactory {
   constructor(html, idPattern) {
     this.html = html;
     this.idPattern = idPattern;
@@ -8,11 +8,14 @@ class ImageChooser {
     const html = this.html.replace(/__NAME__/g, name).replace(/__ID__/g, id);
     // eslint-disable-next-line no-param-reassign
     placeholder.outerHTML = html;
-    /* the chooser object returned by createImageChooser also serves as the JS widget representation */
+    /* the ImageChooser object also serves as the JS widget representation */
     // eslint-disable-next-line no-undef
-    const chooser = createImageChooser(id);
+    const chooser = new ImageChooser(id);
     chooser.setState(initialState);
     return chooser;
   }
 }
-window.telepath.register('wagtail.images.widgets.ImageChooser', ImageChooser);
+window.telepath.register(
+  'wagtail.images.widgets.ImageChooser',
+  ImageChooserFactory,
+);

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

@@ -36,8 +36,10 @@ class ImageChooser extends Chooser {
     this.previewImage.setAttribute('title', newState.title);
   }
 }
+window.ImageChooser = ImageChooser;
 
 function createImageChooser(id) {
+  /* RemovedInWagtail50Warning */
   return new ImageChooser(id);
 }
 

docs/releases/4.0.md

@@ -209,9 +209,13 @@ The `move_breadcrumb` template tag is no longer used and has been removed.
 
 The `wagtail.contrib.modeladmin.menus.SubMenu` class should no longer be used for constructing submenus of the admin sidebar menu. Instead, import `wagtail.admin.menu.Menu` and pass the list of menu items as the `items` keyword argument.
 
-### `createSnippetChooser` and `createDocumentChooser` replaced with classes
+### `createSnippetChooser`, `createDocumentChooser` and `createImageChooser` replaced with classes
 
-The JavaScript function `createSnippetChooser(id)` has been deprecated; user code should call `new SnippetChooser(id)` instead.
+The internal JavaScript functions `createSnippetChooser`, `createDocumentChooser` and `createImageChooser` used for initialising chooser widgets have been replaced by classes, and user code that calls them needs to be updated accordingly:
+
+* `createSnippetChooser(id)` should be replaced with `new SnippetChooser(id)`
+* `createDocumentChooser(id)` should be replaced with `new DocumentChooser(id)`
+* `createImageChooser(id)` should be replaced with `new ImageChooser(id)`
 
 Likewise, the JavaScript function `createDocumentChooser(id)` has been deprecated; user code should call `new DocumentChooser(id)` instead.
 
@@ -240,25 +244,25 @@ Customising which actions are available and adding extra actions is still possib
 
 As part of our support for theming across all colors, we’ve had to rename or remove some of the pre-existing CSS variables. Wagtail’s indigo is now customisable with `--w-color-primary`, and the teal is customisable as `--w-color-secondary`. See [](custom_user_interface_colours) for an overview of all customisable colours. Here are replaced variables:
 
-- `--color-primary` is now `--w-color-secondary`
-- `--color-primary-hue` is now `--w-color-secondary-hue`
-- `--color-primary-saturation` is now `--w-color-secondary-saturation`
-- `--color-primary-lightness` is now `--w-color-secondary-lightness`
-- `--color-primary-darker` is now `--w-color-secondary-400`
-- `--color-primary-darker-hue` is now `--w-color-secondary-400-hue`
-- `--color-primary-darker-saturation` is now `--w-color-secondary-400-saturation`
-- `--color-primary-darker-lightness` is now `--w-color-secondary-400-lightness`
-- `--color-primary-dark` is now `--w-color-secondary-600`
-- `--color-primary-dark-hue` is now `--w-color-secondary-600-hue`
-- `--color-primary-dark-saturation` is now `--w-color-secondary-600-saturation`
-- `--color-primary-dark-lightness` is now `--w-color-secondary-600-lightness`
-- `--color-primary-lighter` is now `--w-color-secondary-100`
-- `--color-primary-lighter-hue` is now `--w-color-secondary-100-hue`
-- `--color-primary-lighter-saturation` is now `--w-color-secondary-100-saturation`
-- `--color-primary-lighter-lightness` is now `--w-color-secondary-100-lightness`
-- `--color-primary-light` is now `--w-color-secondary-50`
-- `--color-primary-light-hue` is now `--w-color-secondary-50-hue`
-- `--color-primary-light-saturation` is now `--w-color-secondary-50-saturation`
-- `--color-primary-light-lightness` is now `--w-color-secondary-50-lightness`
+-   `--color-primary` is now `--w-color-secondary`
+-   `--color-primary-hue` is now `--w-color-secondary-hue`
+-   `--color-primary-saturation` is now `--w-color-secondary-saturation`
+-   `--color-primary-lightness` is now `--w-color-secondary-lightness`
+-   `--color-primary-darker` is now `--w-color-secondary-400`
+-   `--color-primary-darker-hue` is now `--w-color-secondary-400-hue`
+-   `--color-primary-darker-saturation` is now `--w-color-secondary-400-saturation`
+-   `--color-primary-darker-lightness` is now `--w-color-secondary-400-lightness`
+-   `--color-primary-dark` is now `--w-color-secondary-600`
+-   `--color-primary-dark-hue` is now `--w-color-secondary-600-hue`
+-   `--color-primary-dark-saturation` is now `--w-color-secondary-600-saturation`
+-   `--color-primary-dark-lightness` is now `--w-color-secondary-600-lightness`
+-   `--color-primary-lighter` is now `--w-color-secondary-100`
+-   `--color-primary-lighter-hue` is now `--w-color-secondary-100-hue`
+-   `--color-primary-lighter-saturation` is now `--w-color-secondary-100-saturation`
+-   `--color-primary-lighter-lightness` is now `--w-color-secondary-100-lightness`
+-   `--color-primary-light` is now `--w-color-secondary-50`
+-   `--color-primary-light-hue` is now `--w-color-secondary-50-hue`
+-   `--color-primary-light-saturation` is now `--w-color-secondary-50-saturation`
+-   `--color-primary-light-lightness` is now `--w-color-secondary-50-lightness`
 
 We’ve additionally removed all `--color-input-focus` and `--color-input-focus-border` variables, as Wagtail’s form fields no longer have a different color on focus.

wagtail/images/widgets.py

@@ -41,7 +41,7 @@ class AdminImageChooser(BaseChooser):
         return context
 
     def render_js_init(self, id_, name, value_data):
-        return "createImageChooser({0});".format(json.dumps(id_))
+        return "new ImageChooser({0});".format(json.dumps(id_))
 
     @property
     def media(self):