Replacing deprecated initCustomEvent() with modern method

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 = {

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 }));
     }
 }

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 };

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 }));
     }
 }

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'];

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 }));
     }
 }

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 = {

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 }));
     }
 }

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;

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) {

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 = {

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 }));
     }
 }