diff --git a/ghost/admin/app/components/modal-portal-settings.js b/ghost/admin/app/components/modal-portal-settings.js index c50550540f..b967ab9ebd 100644 --- a/ghost/admin/app/components/modal-portal-settings.js +++ b/ghost/admin/app/components/modal-portal-settings.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import ModalComponent from 'ghost-admin/components/modal-base'; import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard'; import {action, computed} from '@ember/object'; @@ -222,12 +221,7 @@ export default ModalComponent.extend({ * @param {MouseEvent} event - MouseEvent fired by the button click */ triggerFileDialog(event) { - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(event.target) - .closest('.gh-setting-action') - .find('input[type="file"]') - .click(); + event?.target.closest('.gh-setting-action')?.find('input[type="file"]')?.click(); }, deleteCustomIcon() { diff --git a/ghost/admin/app/controllers/settings/general.js b/ghost/admin/app/controllers/settings/general.js index 159a3f8640..c73a7c61ad 100644 --- a/ghost/admin/app/controllers/settings/general.js +++ b/ghost/admin/app/controllers/settings/general.js @@ -2,7 +2,6 @@ import classic from 'ember-classic-decorator'; import {action, computed} from '@ember/object'; import {inject as service} from '@ember/service'; /* eslint-disable ghost/ember/alias-model-in-controller */ -import $ from 'jquery'; import Controller from '@ember/controller'; import generatePassword from 'ghost-admin/utils/password-generator'; import validator from 'validator'; @@ -67,12 +66,7 @@ export default class GeneralController extends Controller { */ @action triggerFileDialog(event) { - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(event.target) - .closest('.gh-setting-action') - .find('input[type="file"]') - .click(); + event?.target.closest('.gh-setting-action')?.find('input[type="file"]')?.click(); } /** diff --git a/ghost/admin/app/controllers/settings/labs.js b/ghost/admin/app/controllers/settings/labs.js index b4ab751e95..695f82a3d2 100644 --- a/ghost/admin/app/controllers/settings/labs.js +++ b/ghost/admin/app/controllers/settings/labs.js @@ -1,7 +1,6 @@ import classic from 'ember-classic-decorator'; import {inject as service} from '@ember/service'; /* eslint-disable ghost/ember/alias-model-in-controller */ -import $ from 'jquery'; import Controller from '@ember/controller'; import RSVP from 'rsvp'; import config from 'ghost-admin/config/environment'; @@ -161,11 +160,7 @@ export default class LabsController extends Controller { @action triggerFileDialog(event) { // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(event.target) - .closest('.gh-setting-action') - .find('input[type="file"]') - .click(); + event?.target.closest('.gh-setting-action')?.find('input[type="file"]')?.click(); } // TODO: convert to ember-concurrency task diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.js index ba6f50762f..cbb5ee924d 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import Component from '@glimmer/component'; import { IMAGE_EXTENSIONS, @@ -82,17 +81,6 @@ export default class KoenigCardBeforeAfterComponent extends Component { } } - _triggerFileDialog(event) { - let target = event && event.target || this.element; - - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(target) - .closest('.__mobiledoc-card') - .find('input[type="file"]') - .trigger('click'); - } - setupListeners() { this.updateImageDimensions(); const handleResize = () => { @@ -189,6 +177,15 @@ export default class KoenigCardBeforeAfterComponent extends Component { this._triggerFileDialog(); } + _triggerFileDialog(event) { + const target = event?.target || this.element; + + const cardElem = target.closest('.__mobiledoc-card'); + const fileInput = cardElem?.querySelector('input[type="file"]'); + + fileInput?.click(); + } + @action uploadFailed() { } diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.js index 9d586defc3..57e6a6b0b8 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.js @@ -123,9 +123,7 @@ export default class KoenigCardFileComponent extends Component { const cardElem = target.closest('.__mobiledoc-card'); const fileInput = cardElem?.querySelector('input[type="file"]'); - if (fileInput) { - fileInput.click(); - } + fileInput?.click(); } @action diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js index 1145565a56..349de1c8d5 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import Component from '@ember/component'; import EmberObject, {action, computed, set} from '@ember/object'; import classic from 'ember-classic-decorator'; @@ -68,7 +67,7 @@ export default class KoenigCardGallery extends Component { title: 'Add images', icon: 'koenig/kg-add', iconClass: 'fill-white', - action: run.bind(this, this._triggerFileDialog) + action: this.triggerFileDialog }] }; } @@ -184,7 +183,12 @@ export default class KoenigCardGallery extends Component { @action triggerFileDialog(event) { - this._triggerFileDialog(event); + const target = event?.target || this.element; + + const cardElem = target.closest('.__mobiledoc-card'); + const fileInput = cardElem?.querySelector('input[type="file"]'); + + fileInput?.click(); } @action @@ -340,17 +344,6 @@ export default class KoenigCardGallery extends Component { this._registerOrRefreshDragDropHandler(); } - _triggerFileDialog(event) { - let target = event && event.target || this.element; - - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(target) - .closest('.__mobiledoc-card') - .find('input[type="file"]') - .click(); - } - // - rename container so that it's more explicit when we have an initial file // drop container vs a drag reorder+file drop container? _registerOrRefreshDragDropHandler() { diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js index d6b80515f9..d4d271d7bc 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import Component from '@ember/component'; import classic from 'ember-classic-decorator'; import { @@ -137,7 +136,7 @@ export default class KoenigCardImage extends Component { title: 'Replace image', icon: 'koenig/kg-replace', iconClass: 'fill-white', - action: run.bind(this, this._triggerFileDialog) + action: this.triggerFileDialog }]; } @@ -219,7 +218,12 @@ export default class KoenigCardImage extends Component { */ @action triggerFileDialog(event) { - this._triggerFileDialog(event); + const target = event?.target || this.element; + + const cardElem = target.closest('.__mobiledoc-card'); + const fileInput = cardElem?.querySelector('input[type="file"]'); + + fileInput?.click(); } @action @@ -377,17 +381,6 @@ export default class KoenigCardImage extends Component { save(payload, false); } - _triggerFileDialog(event) { - let target = event && event.target || this.element; - - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(target) - .closest('.__mobiledoc-card') - .find('input[type="file"]') - .click(); - } - _editLink(event) { event.preventDefault(); event.stopPropagation(); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js index b31711d1ad..1829d7be3e 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import Browser from 'mobiledoc-kit/utils/browser'; import Component from '@glimmer/component'; import { @@ -276,18 +275,12 @@ export default class KoenigCardProductComponent extends Component { */ @action triggerFileDialog(event) { - this._triggerFileDialog(event); - } + const target = event?.target || this.element; - _triggerFileDialog(event) { - let target = event && event.target || this.element; + const cardElem = target.closest('.__mobiledoc-card'); + const fileInput = cardElem?.querySelector('input[type="file"]'); - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(target) - .closest('.__mobiledoc-card') - .find('input[type="file"]') - .click(); + fileInput?.click(); } @action