Skip to content

Commit f0a460e

Browse files
tgalopintgalopin
committed
minor #187 Replacing deprecated initCustomEvent() with modern method (weaverryan)
This PR was merged into the 2.x branch. Discussion ---------- Replacing deprecated initCustomEvent() with modern method | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | Tickets | none | License | MIT The old method is deprecated - https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent - we were already using the new way in live component. Cheers! Commits ------- c2710d8 Replacing deprecated initCustomEvent() with modern method
2 parents 8711df7 + c2710d8 commit f0a460e

File tree

12 files changed

+36
-92
lines changed

12 files changed

+36
-92
lines changed

‎src/Chartjs/Resources/assets/dist/controller.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,8 @@ class default_1 extends Controller {
1818
const chart = new Chart(canvasContext, payload);
1919
this._dispatchEvent('chartjs:connect', { chart });
2020
}
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 }));
2523
}
2624
}
2725
default_1.values = {

‎src/Chartjs/Resources/assets/src/controller.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,7 @@ export default class extends Controller {
3838
this._dispatchEvent('chartjs:connect', { chart });
3939
}
4040

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

‎src/Cropperjs/Resources/assets/dist/controller.js‎

Lines changed: 14 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,31 @@
11
import { Controller } from '@hotwired/stimulus';
22
import Cropper from 'cropperjs';
33

4-
class controller extends Controller {
4+
class CropperController extends Controller {
55
connect() {
66
const img = document.createElement('img');
77
img.classList.add('cropperjs-image');
8-
img.src = this.element.getAttribute('data-public-url');
8+
img.src = this.publicUrlValue;
99
const parent = this.element.parentNode;
10-
parent.appendChild(img);
11-
const options = {
12-
viewMode: parseInt(this.element.getAttribute('data-view-mode')),
13-
dragMode: this.element.getAttribute('data-drag-mode'),
14-
responsive: this.element.hasAttribute('data-responsive'),
15-
restore: this.element.hasAttribute('data-restore'),
16-
checkCrossOrigin: this.element.hasAttribute('data-check-cross-origin'),
17-
checkOrientation: this.element.hasAttribute('data-check-orientation'),
18-
modal: this.element.hasAttribute('data-modal'),
19-
guides: this.element.hasAttribute('data-guides'),
20-
center: this.element.hasAttribute('data-center'),
21-
highlight: this.element.hasAttribute('data-highlight'),
22-
background: this.element.hasAttribute('data-background'),
23-
autoCrop: this.element.hasAttribute('data-auto-crop'),
24-
autoCropArea: parseFloat(this.element.getAttribute('data-auto-crop-area')),
25-
movable: this.element.hasAttribute('data-movable'),
26-
rotatable: this.element.hasAttribute('data-rotatable'),
27-
scalable: this.element.hasAttribute('data-scalable'),
28-
zoomable: this.element.hasAttribute('data-zoomable'),
29-
zoomOnTouch: this.element.hasAttribute('data-zoom-on-touch'),
30-
zoomOnWheel: this.element.hasAttribute('data-zoom-on-wheel'),
31-
wheelZoomRatio: parseFloat(this.element.getAttribute('data-wheel-zoom-ratio')),
32-
cropBoxMovable: this.element.hasAttribute('data-crop-box-movable'),
33-
cropBoxResizable: this.element.hasAttribute('data-crop-box-resizable'),
34-
toggleDragModeOnDblclick: this.element.hasAttribute('data-toggle-drag-mode-on-dblclick'),
35-
minContainerWidth: parseInt(this.element.getAttribute('data-min-container-width')),
36-
minContainerHeight: parseInt(this.element.getAttribute('data-min-container-height')),
37-
minCanvasWidth: parseInt(this.element.getAttribute('data-min-canvas-width')),
38-
minCanvasHeight: parseInt(this.element.getAttribute('data-min-canvas-height')),
39-
minCropBoxWidth: parseInt(this.element.getAttribute('data-min-crop-box-width')),
40-
minCropBoxHeight: parseInt(this.element.getAttribute('data-min-crop-box-height')),
41-
};
42-
if (this.element.getAttribute('data-aspect-ratio')) {
43-
options.aspectRatio = parseFloat(this.element.getAttribute('data-aspect-ratio'));
44-
}
45-
if (this.element.getAttribute('data-initial-aspect-ratio')) {
46-
options.initialAspectRatio = parseFloat(this.element.getAttribute('data-initial-aspect-ratio'));
10+
if (!parent) {
11+
throw new Error('Missing parent node for Cropperjs');
4712
}
13+
parent.appendChild(img);
14+
const options = this.optionsValue;
15+
this._dispatchEvent('cropperjs:pre-connect', { options, img });
4816
const cropper = new Cropper(img, options);
4917
img.addEventListener('crop', (event) => {
5018
this.element.value = JSON.stringify(event.detail);
5119
});
5220
this._dispatchEvent('cropperjs:connect', { cropper, options, img });
5321
}
54-
_dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
55-
const userEvent = document.createEvent('CustomEvent');
56-
userEvent.initCustomEvent(name, canBubble, cancelable, payload);
57-
this.element.dispatchEvent(userEvent);
22+
_dispatchEvent(name, payload) {
23+
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
5824
}
5925
}
26+
CropperController.values = {
27+
publicUrl: String,
28+
options: Object,
29+
};
6030

61-
export { controller as default };
31+
export { CropperController as default };

‎src/Cropperjs/Resources/assets/src/controller.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,7 @@ export default class CropperController extends Controller {
4545
this._dispatchEvent('cropperjs:connect', { cropper, options, img });
4646
}
4747

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

‎src/Dropzone/Resources/assets/dist/controller.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,8 @@ class default_1 extends Controller {
4343
});
4444
reader.readAsDataURL(file);
4545
}
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 }));
5048
}
5149
}
5250
default_1.targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];

‎src/Dropzone/Resources/assets/src/controller.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,7 @@ export default class extends Controller {
7878
reader.readAsDataURL(file);
7979
}
8080

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

‎src/LazyImage/Resources/assets/dist/controller.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,8 @@ class default_1 extends Controller {
2626
});
2727
return sets.join(', ').trimEnd();
2828
}
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 }));
3331
}
3432
}
3533
default_1.values = {

‎src/LazyImage/Resources/assets/src/controller.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,7 @@ export default class extends Controller {
5050
return sets.join(', ').trimEnd();
5151
}
5252

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

‎src/LiveComponent/assets/dist/live_controller.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1407,12 +1407,11 @@ class default_1 extends Controller {
14071407
this.pollingIntervals.push(timer);
14081408
}
14091409
_dispatchEvent(name, payload = null, canBubble = true, cancelable = false) {
1410-
const userEvent = new CustomEvent(name, {
1410+
return this.element.dispatchEvent(new CustomEvent(name, {
14111411
bubbles: canBubble,
14121412
cancelable,
14131413
detail: payload,
1414-
});
1415-
return this.element.dispatchEvent(userEvent);
1414+
}));
14161415
}
14171416
_handleChildComponentUpdateModel(event) {
14181417
const mainModelName = event.detail.modelName;

‎src/LiveComponent/assets/src/live_controller.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -629,13 +629,11 @@ export default class extends Controller {
629629
}
630630

631631
_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, {
633633
bubbles: canBubble,
634634
cancelable,
635635
detail: payload,
636-
});
637-
638-
return this.element.dispatchEvent(userEvent);
636+
}));
639637
}
640638

641639
_handleChildComponentUpdateModel(event: any) {

0 commit comments

Comments
 (0)