From c2710d85b75ea364c932581c9a87307b602ef1a8 Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Fri, 3 Dec 2021 15:30:52 -0500 Subject: [PATCH] Replacing deprecated initCustomEvent() with modern method --- .../Resources/assets/dist/controller.js | 6 +- .../Resources/assets/src/controller.ts | 7 +-- .../Resources/assets/dist/controller.js | 58 +++++-------------- .../Resources/assets/src/controller.ts | 7 +-- .../Resources/assets/dist/controller.js | 6 +- .../Resources/assets/src/controller.ts | 7 +-- .../Resources/assets/dist/controller.js | 6 +- .../Resources/assets/src/controller.ts | 7 +-- .../assets/dist/live_controller.js | 5 +- .../assets/src/live_controller.ts | 6 +- src/Swup/Resources/assets/dist/controller.js | 6 +- src/Swup/Resources/assets/src/controller.ts | 7 +-- 12 files changed, 36 insertions(+), 92 deletions(-) diff --git a/src/Chartjs/Resources/assets/dist/controller.js b/src/Chartjs/Resources/assets/dist/controller.js index 307d49fe53c..6e5ef6fd7c4 100644 --- a/src/Chartjs/Resources/assets/dist/controller.js +++ b/src/Chartjs/Resources/assets/dist/controller.js @@ -18,10 +18,8 @@ class default_1 extends Controller { const chart = new Chart(canvasContext, payload); this._dispatchEvent('chartjs:connect', { chart }); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - this.element.dispatchEvent(userEvent); + _dispatchEvent(name, payload) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } default_1.values = { diff --git a/src/Chartjs/Resources/assets/src/controller.ts b/src/Chartjs/Resources/assets/src/controller.ts index 03ed9269094..db24e956531 100644 --- a/src/Chartjs/Resources/assets/src/controller.ts +++ b/src/Chartjs/Resources/assets/src/controller.ts @@ -38,10 +38,7 @@ export default class extends Controller { this._dispatchEvent('chartjs:connect', { chart }); } - _dispatchEvent(name: string, payload: any = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - - this.element.dispatchEvent(userEvent); + _dispatchEvent(name: string, payload: any) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } diff --git a/src/Cropperjs/Resources/assets/dist/controller.js b/src/Cropperjs/Resources/assets/dist/controller.js index 109c4c2b60c..fbc2d8ea8e3 100644 --- a/src/Cropperjs/Resources/assets/dist/controller.js +++ b/src/Cropperjs/Resources/assets/dist/controller.js @@ -1,61 +1,31 @@ import { Controller } from '@hotwired/stimulus'; import Cropper from 'cropperjs'; -class controller extends Controller { +class CropperController extends Controller { connect() { const img = document.createElement('img'); img.classList.add('cropperjs-image'); - img.src = this.element.getAttribute('data-public-url'); + img.src = this.publicUrlValue; const parent = this.element.parentNode; - parent.appendChild(img); - const options = { - viewMode: parseInt(this.element.getAttribute('data-view-mode')), - dragMode: this.element.getAttribute('data-drag-mode'), - responsive: this.element.hasAttribute('data-responsive'), - restore: this.element.hasAttribute('data-restore'), - checkCrossOrigin: this.element.hasAttribute('data-check-cross-origin'), - checkOrientation: this.element.hasAttribute('data-check-orientation'), - modal: this.element.hasAttribute('data-modal'), - guides: this.element.hasAttribute('data-guides'), - center: this.element.hasAttribute('data-center'), - highlight: this.element.hasAttribute('data-highlight'), - background: this.element.hasAttribute('data-background'), - autoCrop: this.element.hasAttribute('data-auto-crop'), - autoCropArea: parseFloat(this.element.getAttribute('data-auto-crop-area')), - movable: this.element.hasAttribute('data-movable'), - rotatable: this.element.hasAttribute('data-rotatable'), - scalable: this.element.hasAttribute('data-scalable'), - zoomable: this.element.hasAttribute('data-zoomable'), - zoomOnTouch: this.element.hasAttribute('data-zoom-on-touch'), - zoomOnWheel: this.element.hasAttribute('data-zoom-on-wheel'), - wheelZoomRatio: parseFloat(this.element.getAttribute('data-wheel-zoom-ratio')), - cropBoxMovable: this.element.hasAttribute('data-crop-box-movable'), - cropBoxResizable: this.element.hasAttribute('data-crop-box-resizable'), - toggleDragModeOnDblclick: this.element.hasAttribute('data-toggle-drag-mode-on-dblclick'), - minContainerWidth: parseInt(this.element.getAttribute('data-min-container-width')), - minContainerHeight: parseInt(this.element.getAttribute('data-min-container-height')), - minCanvasWidth: parseInt(this.element.getAttribute('data-min-canvas-width')), - minCanvasHeight: parseInt(this.element.getAttribute('data-min-canvas-height')), - minCropBoxWidth: parseInt(this.element.getAttribute('data-min-crop-box-width')), - minCropBoxHeight: parseInt(this.element.getAttribute('data-min-crop-box-height')), - }; - if (this.element.getAttribute('data-aspect-ratio')) { - options.aspectRatio = parseFloat(this.element.getAttribute('data-aspect-ratio')); - } - if (this.element.getAttribute('data-initial-aspect-ratio')) { - options.initialAspectRatio = parseFloat(this.element.getAttribute('data-initial-aspect-ratio')); + if (!parent) { + throw new Error('Missing parent node for Cropperjs'); } + parent.appendChild(img); + const options = this.optionsValue; + this._dispatchEvent('cropperjs:pre-connect', { options, img }); const cropper = new Cropper(img, options); img.addEventListener('crop', (event) => { this.element.value = JSON.stringify(event.detail); }); this._dispatchEvent('cropperjs:connect', { cropper, options, img }); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - this.element.dispatchEvent(userEvent); + _dispatchEvent(name, payload) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } +CropperController.values = { + publicUrl: String, + options: Object, +}; -export { controller as default }; +export { CropperController as default }; diff --git a/src/Cropperjs/Resources/assets/src/controller.ts b/src/Cropperjs/Resources/assets/src/controller.ts index 0240ef7a6c1..1237da1a7a2 100644 --- a/src/Cropperjs/Resources/assets/src/controller.ts +++ b/src/Cropperjs/Resources/assets/src/controller.ts @@ -45,10 +45,7 @@ export default class CropperController extends Controller { this._dispatchEvent('cropperjs:connect', { cropper, options, img }); } - _dispatchEvent(name: string, payload: any = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - - this.element.dispatchEvent(userEvent); + _dispatchEvent(name: string, payload: any) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } diff --git a/src/Dropzone/Resources/assets/dist/controller.js b/src/Dropzone/Resources/assets/dist/controller.js index 14304b9235f..e31134956e4 100644 --- a/src/Dropzone/Resources/assets/dist/controller.js +++ b/src/Dropzone/Resources/assets/dist/controller.js @@ -43,10 +43,8 @@ class default_1 extends Controller { }); reader.readAsDataURL(file); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - this.element.dispatchEvent(userEvent); + _dispatchEvent(name, payload) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } default_1.targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage']; diff --git a/src/Dropzone/Resources/assets/src/controller.ts b/src/Dropzone/Resources/assets/src/controller.ts index 04409a247df..0c8470de522 100644 --- a/src/Dropzone/Resources/assets/src/controller.ts +++ b/src/Dropzone/Resources/assets/src/controller.ts @@ -78,10 +78,7 @@ export default class extends Controller { reader.readAsDataURL(file); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - - this.element.dispatchEvent(userEvent); + _dispatchEvent(name: string, payload: any) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js index df4c080dc7b..3dda83c1d1d 100644 --- a/src/LazyImage/Resources/assets/dist/controller.js +++ b/src/LazyImage/Resources/assets/dist/controller.js @@ -26,10 +26,8 @@ class default_1 extends Controller { }); return sets.join(', ').trimEnd(); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - this.element.dispatchEvent(userEvent); + _dispatchEvent(name, payload) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } default_1.values = { diff --git a/src/LazyImage/Resources/assets/src/controller.ts b/src/LazyImage/Resources/assets/src/controller.ts index 199c408bd46..50da30912ae 100644 --- a/src/LazyImage/Resources/assets/src/controller.ts +++ b/src/LazyImage/Resources/assets/src/controller.ts @@ -50,10 +50,7 @@ export default class extends Controller { return sets.join(', ').trimEnd(); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - - this.element.dispatchEvent(userEvent); + _dispatchEvent(name: string, payload: any) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js index 0ceee24363d..48e347776f5 100644 --- a/src/LiveComponent/assets/dist/live_controller.js +++ b/src/LiveComponent/assets/dist/live_controller.js @@ -1407,12 +1407,11 @@ class default_1 extends Controller { this.pollingIntervals.push(timer); } _dispatchEvent(name, payload = null, canBubble = true, cancelable = false) { - const userEvent = new CustomEvent(name, { + return this.element.dispatchEvent(new CustomEvent(name, { bubbles: canBubble, cancelable, detail: payload, - }); - return this.element.dispatchEvent(userEvent); + })); } _handleChildComponentUpdateModel(event) { const mainModelName = event.detail.modelName; diff --git a/src/LiveComponent/assets/src/live_controller.ts b/src/LiveComponent/assets/src/live_controller.ts index 318939928c8..8d1c9e96e36 100644 --- a/src/LiveComponent/assets/src/live_controller.ts +++ b/src/LiveComponent/assets/src/live_controller.ts @@ -629,13 +629,11 @@ export default class extends Controller { } _dispatchEvent(name: string, payload: object | null = null, canBubble = true, cancelable = false) { - const userEvent = new CustomEvent(name, { + return this.element.dispatchEvent(new CustomEvent(name, { bubbles: canBubble, cancelable, detail: payload, - }); - - return this.element.dispatchEvent(userEvent); + })); } _handleChildComponentUpdateModel(event: any) { diff --git a/src/Swup/Resources/assets/dist/controller.js b/src/Swup/Resources/assets/dist/controller.js index 7eb92054a01..06c509b6430 100644 --- a/src/Swup/Resources/assets/dist/controller.js +++ b/src/Swup/Resources/assets/dist/controller.js @@ -33,10 +33,8 @@ class default_1 extends Controller { const swup = new Swup(options); this._dispatchEvent('swup:connect', { swup, options }); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - this.element.dispatchEvent(userEvent); + _dispatchEvent(name, payload) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } } default_1.values = { diff --git a/src/Swup/Resources/assets/src/controller.ts b/src/Swup/Resources/assets/src/controller.ts index 2058f8f8079..f6c42039bea 100644 --- a/src/Swup/Resources/assets/src/controller.ts +++ b/src/Swup/Resources/assets/src/controller.ts @@ -61,10 +61,7 @@ export default class extends Controller { this._dispatchEvent('swup:connect', { swup, options }); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { - const userEvent = document.createEvent('CustomEvent'); - userEvent.initCustomEvent(name, canBubble, cancelable, payload); - - this.element.dispatchEvent(userEvent); + _dispatchEvent(name: string, payload: any) { + this.element.dispatchEvent(new CustomEvent(name, { detail: payload })); } }