Replacing deprecated initCustomEvent() with modern method

weaverryan · tgalopin · commit c2710d85b75e · 2021-12-09T15:02:21.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }));
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -18,10 +18,8 @@ class default_1 extends Controller {`
`18`	`18`	`const chart = new Chart(canvasContext, payload);`
`19`	`19`	`this._dispatchEvent('chartjs:connect', { chart });`
`20`	`20`	`}`
`21`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`22`		`- const userEvent = document.createEvent('CustomEvent');`
`23`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`24`		`- this.element.dispatchEvent(userEvent);`
	`21`	`+ _dispatchEvent(name, payload) {`
	`22`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`25`	`23`	`}`
`26`	`24`	`}`
`27`	`25`	`default_1.values = {`
Original file line number	Diff line number	Diff line change
`@@ -38,10 +38,7 @@ export default class extends Controller {`
`38`	`38`	`this._dispatchEvent('chartjs:connect', { chart });`
`39`	`39`	`}`
`40`	`40`
`41`		`- _dispatchEvent(name: string, payload: any = null, canBubble = false, cancelable = false) {`
`42`		`- const userEvent = document.createEvent('CustomEvent');`
`43`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`44`		`-`
`45`		`- this.element.dispatchEvent(userEvent);`
	`41`	`+ _dispatchEvent(name: string, payload: any) {`
	`42`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`46`	`43`	`}`
`47`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,10 +45,7 @@ export default class CropperController extends Controller {`
`45`	`45`	`this._dispatchEvent('cropperjs:connect', { cropper, options, img });`
`46`	`46`	`}`
`47`	`47`
`48`		`- _dispatchEvent(name: string, payload: any = null, canBubble = false, cancelable = false) {`
`49`		`- const userEvent = document.createEvent('CustomEvent');`
`50`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`51`		`-`
`52`		`- this.element.dispatchEvent(userEvent);`
	`48`	`+ _dispatchEvent(name: string, payload: any) {`
	`49`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`53`	`50`	`}`
`54`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,10 +43,8 @@ class default_1 extends Controller {`
`43`	`43`	`});`
`44`	`44`	`reader.readAsDataURL(file);`
`45`	`45`	`}`
`46`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`47`		`- const userEvent = document.createEvent('CustomEvent');`
`48`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`49`		`- this.element.dispatchEvent(userEvent);`
	`46`	`+ _dispatchEvent(name, payload) {`
	`47`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`50`	`48`	`}`
`51`	`49`	`}`
`52`	`50`	`default_1.targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];`
Original file line number	Diff line number	Diff line change
`@@ -78,10 +78,7 @@ export default class extends Controller {`
`78`	`78`	`reader.readAsDataURL(file);`
`79`	`79`	`}`
`80`	`80`
`81`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`82`		`- const userEvent = document.createEvent('CustomEvent');`
`83`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`84`		`-`
`85`		`- this.element.dispatchEvent(userEvent);`
	`81`	`+ _dispatchEvent(name: string, payload: any) {`
	`82`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`86`	`83`	`}`
`87`	`84`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,10 +26,8 @@ class default_1 extends Controller {`
`26`	`26`	`});`
`27`	`27`	`return sets.join(', ').trimEnd();`
`28`	`28`	`}`
`29`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`30`		`- const userEvent = document.createEvent('CustomEvent');`
`31`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`32`		`- this.element.dispatchEvent(userEvent);`
	`29`	`+ _dispatchEvent(name, payload) {`
	`30`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`33`	`31`	`}`
`34`	`32`	`}`
`35`	`33`	`default_1.values = {`
Original file line number	Diff line number	Diff line change
`@@ -50,10 +50,7 @@ export default class extends Controller {`
`50`	`50`	`return sets.join(', ').trimEnd();`
`51`	`51`	`}`
`52`	`52`
`53`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`54`		`- const userEvent = document.createEvent('CustomEvent');`
`55`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`56`		`-`
`57`		`- this.element.dispatchEvent(userEvent);`
	`53`	`+ _dispatchEvent(name: string, payload: any) {`
	`54`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`58`	`55`	`}`
`59`	`56`	`}`
Original file line number	Diff line number	Diff line change
`@@ -629,13 +629,11 @@ export default class extends Controller {`
`629`	`629`	`}`
`630`	`630`
`631`	`631`	`_dispatchEvent(name: string, payload: object \| null = null, canBubble = true, cancelable = false) {`
`632`		`- const userEvent = new CustomEvent(name, {`
	`632`	`+ return this.element.dispatchEvent(new CustomEvent(name, {`
`633`	`633`	`bubbles: canBubble,`
`634`	`634`	`cancelable,`
`635`	`635`	`detail: payload,`
`636`		`- });`
`637`		`-`
`638`		`- return this.element.dispatchEvent(userEvent);`
	`636`	`+ }));`
`639`	`637`	`}`
`640`	`638`
`641`	`639`	`_handleChildComponentUpdateModel(event: any) {`
Original file line number	Diff line number	Diff line change
`@@ -33,10 +33,8 @@ class default_1 extends Controller {`
`33`	`33`	`const swup = new Swup(options);`
`34`	`34`	`this._dispatchEvent('swup:connect', { swup, options });`
`35`	`35`	`}`
`36`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`37`		`- const userEvent = document.createEvent('CustomEvent');`
`38`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`39`		`- this.element.dispatchEvent(userEvent);`
	`36`	`+ _dispatchEvent(name, payload) {`
	`37`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`40`	`38`	`}`
`41`	`39`	`}`
`42`	`40`	`default_1.values = {`
Original file line number	Diff line number	Diff line change
`@@ -61,10 +61,7 @@ export default class extends Controller {`
`61`	`61`	`this._dispatchEvent('swup:connect', { swup, options });`
`62`	`62`	`}`
`63`	`63`
`64`		`- _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {`
`65`		`- const userEvent = document.createEvent('CustomEvent');`
`66`		`- userEvent.initCustomEvent(name, canBubble, cancelable, payload);`
`67`		`-`
`68`		`- this.element.dispatchEvent(userEvent);`
	`64`	`+ _dispatchEvent(name: string, payload: any) {`
	`65`	`+ this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));`
`69`	`66`	`}`
`70`	`67`	`}`