diff --git a/client/src/components/ChooserWidget/DocumentChooserWidget.js b/client/src/components/ChooserWidget/DocumentChooserWidget.js new file mode 100644 index 0000000000..60de44d25a --- /dev/null +++ b/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; +} diff --git a/client/src/components/ChooserWidget/ImageChooserWidget.js b/client/src/components/ChooserWidget/ImageChooserWidget.js new file mode 100644 index 0000000000..268bb91f20 --- /dev/null +++ b/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; +} diff --git a/client/src/components/ChooserWidget/PageChooserWidget.js b/client/src/components/ChooserWidget/PageChooserWidget.js new file mode 100644 index 0000000000..70f621fb73 --- /dev/null +++ b/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, + }; + } +} diff --git a/client/src/components/ChooserWidget/SnippetChooserWidget.js b/client/src/components/ChooserWidget/SnippetChooserWidget.js new file mode 100644 index 0000000000..001d5c83f1 --- /dev/null +++ b/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; +} diff --git a/client/src/entrypoints/admin/page-chooser-telepath.js b/client/src/entrypoints/admin/page-chooser-telepath.js index c806a836cc..e56215ba30 100644 --- a/client/src/entrypoints/admin/page-chooser-telepath.js +++ b/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); diff --git a/client/src/entrypoints/admin/page-chooser-telepath.test.js b/client/src/entrypoints/admin/page-chooser-telepath.test.js index ed0b7fc9f6..84c85c23fe 100644 --- a/client/src/entrypoints/admin/page-chooser-telepath.test.js +++ b/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', () => { diff --git a/client/src/entrypoints/admin/page-chooser.js b/client/src/entrypoints/admin/page-chooser.js index 4dc794563a..1eedd5b3ac 100644 --- a/client/src/entrypoints/admin/page-chooser.js +++ b/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); diff --git a/client/src/entrypoints/documents/document-chooser-telepath.js b/client/src/entrypoints/documents/document-chooser-telepath.js index 19b38fe7ad..03b46f1a96 100644 --- a/client/src/entrypoints/documents/document-chooser-telepath.js +++ b/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, ); diff --git a/client/src/entrypoints/documents/document-chooser.js b/client/src/entrypoints/documents/document-chooser.js index 7d23953da5..aeda611480 100644 --- a/client/src/entrypoints/documents/document-chooser.js +++ b/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); diff --git a/client/src/entrypoints/images/image-chooser-telepath.js b/client/src/entrypoints/images/image-chooser-telepath.js index 2a9fa2bb79..d7f848fb03 100644 --- a/client/src/entrypoints/images/image-chooser-telepath.js +++ b/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, ); diff --git a/client/src/entrypoints/images/image-chooser.js b/client/src/entrypoints/images/image-chooser.js index 71df2c1eac..536facaac1 100644 --- a/client/src/entrypoints/images/image-chooser.js +++ b/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); diff --git a/client/src/entrypoints/snippets/snippet-chooser-telepath.js b/client/src/entrypoints/snippets/snippet-chooser-telepath.js index 1fa5f966bd..4219993541 100644 --- a/client/src/entrypoints/snippets/snippet-chooser-telepath.js +++ b/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, ); diff --git a/client/src/entrypoints/snippets/snippet-chooser.js b/client/src/entrypoints/snippets/snippet-chooser.js index a5f453d350..e8e4569a20 100644 --- a/client/src/entrypoints/snippets/snippet-chooser.js +++ b/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); diff --git a/wagtail/admin/widgets/chooser.py b/wagtail/admin/widgets/chooser.py index 41974d8dd9..79dca8b22e 100644 --- a/wagtail/admin/widgets/chooser.py +++ b/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"), ] ) diff --git a/wagtail/documents/views/chooser.py b/wagtail/documents/views/chooser.py index 972c0cb0ef..411c7e0538 100644 --- a/wagtail/documents/views/chooser.py +++ b/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"), ] ) diff --git a/wagtail/images/widgets.py b/wagtail/images/widgets.py index 925f299ad7..634c906a23 100644 --- a/wagtail/images/widgets.py +++ b/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"), ] ) diff --git a/wagtail/snippets/widgets.py b/wagtail/snippets/widgets.py index 9901705e0b..0bc9583b9c 100644 --- a/wagtail/snippets/widgets.py +++ b/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"), ] )