Skip to content

Commit cb54eae

Browse files
weaverryanweaverryan
committed
feature #602 Making all events bubble - affects Chartjs, Cropperjs, Dropzone, LazyImage, Swup (weaverryan)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- Making all events bubble - affects Chartjs, Cropperjs, Dropzone, LazyImage, Swup | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | Tickets | Fix #30 | License | MIT Long-overdue fix for #30. This is a small behavior change, but I consider it a bug fix. The only way that you could be affected by this change in practice is if you have one of the UX components listed *inside* of itself - e.g. a chart inside a chart, so now the existing listener on the outer chart is fired twice. But I don't think that makes any practical sense for any of these components. Cheers! Commits ------- f122dcc Making all events bubble - affects Chartjs, Cropperjs, Dropzone, LazyImage, Swup
2 parents 0d14638 + f122dcc commit cb54eae

33 files changed

+107
-115
lines changed

‎src/Autocomplete/assets/dist/controller.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,6 @@ export default class extends Controller {
2828
disconnect(): void;
2929
get selectElement(): HTMLSelectElement | null;
3030
get formElement(): HTMLInputElement | HTMLSelectElement;
31+
private dispatchEvent;
3132
get preload(): string | boolean;
3233
}

‎src/Autocomplete/assets/dist/controller.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
2222
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
2323
}
2424

25-
var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect, _default_1_dispatchEvent;
25+
var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect;
2626
class default_1 extends Controller {
2727
constructor() {
2828
super(...arguments);
@@ -64,6 +64,9 @@ class default_1 extends Controller {
6464
}
6565
return this.element;
6666
}
67+
dispatchEvent(name, payload) {
68+
this.dispatch(name, { detail: payload, prefix: 'autocomplete' });
69+
}
6770
get preload() {
6871
if (!this.hasPreloadValue) {
6972
return 'focus';
@@ -180,12 +183,10 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
180183
}, _default_1_mergeObjects = function _default_1_mergeObjects(object1, object2) {
181184
return Object.assign(Object.assign({}, object1), object2);
182185
}, _default_1_createTomSelect = function _default_1_createTomSelect(options) {
183-
__classPrivateFieldGet(this, _default_1_instances, "m", _default_1_dispatchEvent).call(this, 'autocomplete:pre-connect', { options });
186+
this.dispatchEvent('pre-connect', { options });
184187
const tomSelect = new TomSelect(this.formElement, options);
185-
__classPrivateFieldGet(this, _default_1_instances, "m", _default_1_dispatchEvent).call(this, 'autocomplete:connect', { tomSelect, options });
188+
this.dispatchEvent('connect', { tomSelect, options });
186189
return tomSelect;
187-
}, _default_1_dispatchEvent = function _default_1_dispatchEvent(name, payload) {
188-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
189190
};
190191
default_1.values = {
191192
url: String,

‎src/Autocomplete/assets/src/controller.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -213,15 +213,15 @@ export default class extends Controller {
213213
}
214214

215215
#createTomSelect(options: RecursivePartial<TomSettings>): TomSelect {
216-
this.#dispatchEvent('autocomplete:pre-connect', { options });
216+
this.dispatchEvent('pre-connect', { options });
217217
const tomSelect = new TomSelect(this.formElement, options);
218-
this.#dispatchEvent('autocomplete:connect', { tomSelect, options });
218+
this.dispatchEvent('connect', { tomSelect, options });
219219

220220
return tomSelect;
221221
}
222222

223-
#dispatchEvent(name: string, payload: any): void {
224-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
223+
private dispatchEvent(name: string, payload: any): void {
224+
this.dispatch(name, { detail: payload, prefix: 'autocomplete' });
225225
}
226226

227227
get preload() {

‎src/Chartjs/assets/dist/controller.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ export default class extends Controller {
55
view: ObjectConstructor;
66
};
77
connect(): void;
8-
_dispatchEvent(name: string, payload: any): void;
8+
private dispatchEvent;
99
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@ class default_1 extends Controller {
1010
if (Array.isArray(payload.options) && 0 === payload.options.length) {
1111
payload.options = {};
1212
}
13-
this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
13+
this.dispatchEvent('pre-connect', { options: payload.options });
1414
const canvasContext = this.element.getContext('2d');
1515
if (!canvasContext) {
1616
throw new Error('Could not getContext() from Element');
1717
}
1818
const chart = new Chart(canvasContext, payload);
19-
this._dispatchEvent('chartjs:connect', { chart });
19+
this.dispatchEvent('connect', { chart });
2020
}
21-
_dispatchEvent(name, payload) {
22-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
21+
dispatchEvent(name, payload) {
22+
this.dispatch(name, { detail: payload, prefix: 'chartjs' });
2323
}
2424
}
2525
default_1.values = {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,18 @@ export default class extends Controller {
2929
payload.options = {};
3030
}
3131

32-
this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
32+
this.dispatchEvent('pre-connect', { options: payload.options });
3333

3434
const canvasContext = this.element.getContext('2d');
3535
if (!canvasContext) {
3636
throw new Error('Could not getContext() from Element');
3737
}
3838
const chart = new Chart(canvasContext, payload);
3939

40-
this._dispatchEvent('chartjs:connect', { chart });
40+
this.dispatchEvent('connect', { chart });
4141
}
4242

43-
_dispatchEvent(name: string, payload: any) {
44-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
43+
private dispatchEvent(name: string, payload: any) {
44+
this.dispatch(name, { detail: payload, prefix: 'chartjs' });
4545
}
4646
}

‎src/Cropperjs/assets/dist/controller.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export default class CropperController extends Controller {
77
options: ObjectConstructor;
88
};
99
connect(): void;
10-
_dispatchEvent(name: string, payload: any): void;
10+
private dispatchEvent;
1111
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ class CropperController extends Controller {
1212
}
1313
parent.appendChild(img);
1414
const options = this.optionsValue;
15-
this._dispatchEvent('cropperjs:pre-connect', { options, img });
15+
this.dispatchEvent('pre-connect', { options, img });
1616
const cropper = new Cropper(img, options);
1717
img.addEventListener('crop', (event) => {
1818
this.element.value = JSON.stringify(event.detail);
1919
});
20-
this._dispatchEvent('cropperjs:connect', { cropper, options, img });
20+
this.dispatchEvent('connect', { cropper, options, img });
2121
}
22-
_dispatchEvent(name, payload) {
23-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
22+
dispatchEvent(name, payload) {
23+
this.dispatch(name, { detail: payload, prefix: 'cropperjs' });
2424
}
2525
}
2626
CropperController.values = {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default class CropperController extends Controller {
3636
parent.appendChild(img);
3737

3838
const options = this.optionsValue;
39-
this._dispatchEvent('cropperjs:pre-connect', { options, img });
39+
this.dispatchEvent('pre-connect', { options, img });
4040

4141
// Build the cropper
4242
const cropper = new Cropper(img, options);
@@ -45,10 +45,10 @@ export default class CropperController extends Controller {
4545
(this.element as HTMLInputElement).value = JSON.stringify((event as CropEvent).detail);
4646
});
4747

48-
this._dispatchEvent('cropperjs:connect', { cropper, options, img });
48+
this.dispatchEvent('connect', { cropper, options, img });
4949
}
5050

51-
_dispatchEvent(name: string, payload: any) {
52-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
51+
private dispatchEvent(name: string, payload: any) {
52+
this.dispatch(name, { detail: payload, prefix: 'cropperjs' });
5353
}
5454
}

‎src/Dropzone/assets/dist/controller.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export default class extends Controller {
1111
clear(): void;
1212
onInputChange(event: any): void;
1313
_populateImagePreview(file: Blob): void;
14-
_dispatchEvent(name: string, payload?: any): void;
14+
private dispatchEvent;
1515
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ class default_1 extends Controller {
55
this.clear();
66
this.previewClearButtonTarget.addEventListener('click', () => this.clear());
77
this.inputTarget.addEventListener('change', (event) => this.onInputChange(event));
8-
this._dispatchEvent('dropzone:connect');
8+
this.dispatchEvent('connect');
99
}
1010
clear() {
1111
this.inputTarget.value = '';
@@ -15,7 +15,7 @@ class default_1 extends Controller {
1515
this.previewImageTarget.style.display = 'none';
1616
this.previewImageTarget.style.backgroundImage = 'none';
1717
this.previewFilenameTarget.textContent = '';
18-
this._dispatchEvent('dropzone:clear');
18+
this.dispatchEvent('clear');
1919
}
2020
onInputChange(event) {
2121
const file = event.target.files[0];
@@ -30,7 +30,7 @@ class default_1 extends Controller {
3030
if (file.type && file.type.indexOf('image') !== -1) {
3131
this._populateImagePreview(file);
3232
}
33-
this._dispatchEvent('dropzone:change', file);
33+
this.dispatchEvent('change', file);
3434
}
3535
_populateImagePreview(file) {
3636
if (typeof FileReader === 'undefined') {
@@ -43,8 +43,8 @@ class default_1 extends Controller {
4343
});
4444
reader.readAsDataURL(file);
4545
}
46-
_dispatchEvent(name, payload = {}) {
47-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
46+
dispatchEvent(name, payload = {}) {
47+
this.dispatch(name, { detail: payload, prefix: 'dropzone' });
4848
}
4949
}
5050
default_1.targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default class extends Controller {
3131
// Listen on input change and display preview
3232
this.inputTarget.addEventListener('change', (event) => this.onInputChange(event));
3333

34-
this._dispatchEvent('dropzone:connect');
34+
this.dispatchEvent('connect');
3535
}
3636

3737
clear() {
@@ -43,7 +43,7 @@ export default class extends Controller {
4343
this.previewImageTarget.style.backgroundImage = 'none';
4444
this.previewFilenameTarget.textContent = '';
4545

46-
this._dispatchEvent('dropzone:clear');
46+
this.dispatchEvent('clear');
4747
}
4848

4949
onInputChange(event: any) {
@@ -66,7 +66,7 @@ export default class extends Controller {
6666
this._populateImagePreview(file);
6767
}
6868

69-
this._dispatchEvent('dropzone:change', file);
69+
this.dispatchEvent('change', file);
7070
}
7171

7272
_populateImagePreview(file: Blob) {
@@ -85,7 +85,7 @@ export default class extends Controller {
8585
reader.readAsDataURL(file);
8686
}
8787

88-
_dispatchEvent(name: string, payload: any = {}) {
89-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
88+
private dispatchEvent(name: string, payload: any = {}) {
89+
this.dispatch(name, { detail: payload, prefix: 'dropzone' });
9090
}
9191
}

‎src/LazyImage/assets/dist/controller.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ export default class extends Controller {
99
};
1010
connect(): void;
1111
_calculateSrcsetString(): string;
12-
_dispatchEvent(name: string, payload: any): void;
12+
private dispatchEvent;
1313
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ class default_1 extends Controller {
1010
if (srcsetString) {
1111
element.srcset = srcsetString;
1212
}
13-
this._dispatchEvent('lazy-image:ready', { image: hd });
13+
this.dispatchEvent('ready', { image: hd });
1414
});
1515
hd.src = this.srcValue;
1616
if (srcsetString) {
1717
hd.srcset = srcsetString;
1818
}
19-
this._dispatchEvent('lazy-image:connect', { image: hd });
19+
this.dispatchEvent('connect', { image: hd });
2020
}
2121
_calculateSrcsetString() {
2222
if (!this.hasSrcsetValue) {
@@ -27,8 +27,8 @@ class default_1 extends Controller {
2727
});
2828
return sets.join(', ').trimEnd();
2929
}
30-
_dispatchEvent(name, payload) {
31-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
30+
dispatchEvent(name, payload) {
31+
this.dispatch(name, { detail: payload, prefix: 'lazy-image' });
3232
}
3333
}
3434
default_1.values = {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ export default class extends Controller {
3232
if (srcsetString) {
3333
element.srcset = srcsetString;
3434
}
35-
this._dispatchEvent('lazy-image:ready', { image: hd });
35+
this.dispatchEvent('ready', { image: hd });
3636
});
3737

3838
hd.src = this.srcValue;
3939
if (srcsetString) {
4040
hd.srcset = srcsetString;
4141
}
4242

43-
this._dispatchEvent('lazy-image:connect', { image: hd });
43+
this.dispatchEvent('connect', { image: hd });
4444
}
4545

4646
_calculateSrcsetString(): string {
@@ -55,7 +55,7 @@ export default class extends Controller {
5555
return sets.join(', ').trimEnd();
5656
}
5757

58-
_dispatchEvent(name: string, payload: any) {
59-
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
58+
private dispatchEvent(name: string, payload: any) {
59+
this.dispatch(name, { detail: payload, prefix: 'lazy-image' });
6060
}
6161
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,5 @@ export default class extends Controller<HTMLElement> implements LiveController {
4848
private updateModelFromElementEvent;
4949
handleConnectedControllerEvent(event: LiveEvent): void;
5050
handleDisconnectedChildControllerEvent(event: LiveEvent): void;
51-
_dispatchEvent(name: string, detail?: any, canBubble?: boolean, cancelable?: boolean): boolean;
51+
private dispatchEvent;
5252
}

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2238,15 +2238,15 @@ class default_1 extends Controller {
22382238
this.component.element.addEventListener(event, callback);
22392239
});
22402240
ComponentRegistry$1.registerComponent(this.element, this.component);
2241-
this._dispatchEvent('live:connect');
2241+
this.dispatchEvent('connect');
22422242
}
22432243
disconnect() {
22442244
this.component.disconnect();
22452245
this.elementEventListeners.forEach(({ event, callback }) => {
22462246
this.component.element.removeEventListener(event, callback);
22472247
});
22482248
ComponentRegistry$1.unregisterComponent(this.element);
2249-
this._dispatchEvent('live:disconnect');
2249+
this.dispatchEvent('disconnect');
22502250
}
22512251
update(event) {
22522252
if (event.type === 'input' || event.type === 'change') {
@@ -2365,14 +2365,10 @@ class default_1 extends Controller {
23652365
}
23662366
this.component.removeChild(childController.component);
23672367
}
2368-
_dispatchEvent(name, detail = {}, canBubble = true, cancelable = false) {
2368+
dispatchEvent(name, detail = {}, canBubble = true, cancelable = false) {
23692369
detail.controller = this;
23702370
detail.component = this.proxiedComponent;
2371-
return this.element.dispatchEvent(new CustomEvent(name, {
2372-
bubbles: canBubble,
2373-
cancelable,
2374-
detail,
2375-
}));
2371+
this.dispatch(name, { detail, prefix: 'live', cancelable, bubbles: canBubble });
23762372
}
23772373
}
23782374
default_1.values = {

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default class extends Controller<HTMLElement> implements LiveController {
107107
});
108108

109109
ComponentRegistry.registerComponent(this.element, this.component);
110-
this._dispatchEvent('live:connect');
110+
this.dispatchEvent('connect');
111111
}
112112

113113
disconnect() {
@@ -118,7 +118,7 @@ export default class extends Controller<HTMLElement> implements LiveController {
118118
});
119119

120120
ComponentRegistry.unregisterComponent(this.element);
121-
this._dispatchEvent('live:disconnect');
121+
this.dispatchEvent('disconnect');
122122
}
123123

124124
/**
@@ -348,16 +348,10 @@ export default class extends Controller<HTMLElement> implements LiveController {
348348
this.component.removeChild(childController.component);
349349
}
350350

351-
_dispatchEvent(name: string, detail: any = {}, canBubble = true, cancelable = false) {
351+
private dispatchEvent(name: string, detail: any = {}, canBubble = true, cancelable = false) {
352352
detail.controller = this;
353353
detail.component = this.proxiedComponent;
354354

355-
return this.element.dispatchEvent(
356-
new CustomEvent(name, {
357-
bubbles: canBubble,
358-
cancelable,
359-
detail,
360-
})
361-
);
355+
this.dispatch(name, { detail, prefix: 'live', cancelable, bubbles: canBubble });
362356
}
363357
}

‎src/Notify/assets/dist/controller.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ export default class extends Controller {
99
connect(): void;
1010
disconnect(): void;
1111
_notify(content: string | undefined): void;
12-
_dispatchEvent(name: string, payload: any): void;
12+
private dispatchEvent;
1313
}

0 commit comments

Comments
 (0)