Skip to content

Commit b01fb41

Browse files
committed
fixup! refactor: event managers
1 parent 89cb225 commit b01fb41

File tree

3 files changed

+17
-29
lines changed

3 files changed

+17
-29
lines changed

src/cdk-experimental/listbox/listbox.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import {toSignal} from '@angular/core/rxjs-interop';
4646
'[attr.aria-multiselectable]': 'pattern.multiselectable()',
4747
'[attr.aria-activedescendant]': 'pattern.activedescendant()',
4848
'(keydown)': 'pattern.onKeydown($event)',
49-
'(mousedown)': 'pattern.onMousedown($event)',
49+
'(pointerdown)': 'pattern.onPointerdown($event)',
5050
},
5151
})
5252
export class CdkListbox {

src/cdk-experimental/ui-patterns/behaviors/event-manager/mouse-event-manager.ts renamed to src/cdk-experimental/ui-patterns/behaviors/event-manager/pointer-event-manager.ts

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
import {
1010
EventHandler,
11-
EventHandlerConfig,
1211
EventHandlerOptions,
1312
EventManager,
1413
hasModifiers,
@@ -17,27 +16,16 @@ import {
1716
} from './event-manager';
1817

1918
/**
20-
* The different mouse buttons that may appear on a mouse event.
19+
* The different mouse buttons that may appear on a pointer event.
2120
*/
2221
export enum MouseButton {
2322
Main = 0,
2423
Auxiliary = 1,
2524
Secondary = 2,
2625
}
2726

28-
/**
29-
* A config that specifies how to handle a particular mouse event.
30-
*/
31-
export interface MouseEventHandlerConfig extends EventHandlerConfig<MouseEvent> {
32-
button: number;
33-
modifiers: number | number[];
34-
}
35-
36-
/**
37-
* An event manager that is specialized for handling mouse events. By default this manager stops
38-
* propagation and prevents default on all events it handles.
39-
*/
40-
export class MouseEventManager<T extends MouseEvent> extends EventManager<T> {
27+
/** An event manager that is specialized for handling pointer events. */
28+
export class PointerEventManager<T extends PointerEvent> extends EventManager<T> {
4129
options: EventHandlerOptions = {
4230
preventDefault: false,
4331
stopPropagation: false,
@@ -97,7 +85,7 @@ export class MouseEventManager<T extends MouseEvent> extends EventManager<T> {
9785
};
9886
}
9987

100-
_isMatch(event: MouseEvent, button: MouseButton, modifiers: ModifierInputs) {
88+
_isMatch(event: PointerEvent, button: MouseButton, modifiers: ModifierInputs) {
10189
return button === (event.button ?? 0) && hasModifiers(event, modifiers);
10290
}
10391
}

src/cdk-experimental/ui-patterns/listbox/listbox.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {ModifierKey as Modifier} from '../behaviors/event-manager/event-manager';
1010
import {KeyboardEventManager} from '../behaviors/event-manager/keyboard-event-manager';
11-
import {MouseEventManager} from '../behaviors/event-manager/mouse-event-manager';
11+
import {PointerEventManager} from '../behaviors/event-manager/pointer-event-manager';
1212
import {OptionPattern} from './option';
1313
import {ListSelection, ListSelectionInputs} from '../behaviors/list-selection/list-selection';
1414
import {ListTypeahead, ListTypeaheadInputs} from '../behaviors/list-typeahead/list-typeahead';
@@ -139,24 +139,24 @@ export class ListboxPattern {
139139
return manager;
140140
});
141141

142-
/** The mousedown event manager for the listbox. */
143-
mousedown = computed(() => {
144-
const manager = new MouseEventManager();
142+
/** The pointerdown event manager for the listbox. */
143+
pointerdown = computed(() => {
144+
const manager = new PointerEventManager();
145145

146146
if (!this.followFocus()) {
147-
manager.on((e: MouseEvent) => this.goto(e));
147+
manager.on((e: PointerEvent) => this.goto(e));
148148
}
149149

150150
if (this.followFocus()) {
151-
manager.on((e: MouseEvent) => this.goto(e, {selectOne: true}));
151+
manager.on((e: PointerEvent) => this.goto(e, {selectOne: true}));
152152
}
153153

154154
if (this.inputs.multiselectable() && this.followFocus()) {
155-
manager.on(Modifier.Ctrl, (e: MouseEvent) => this.goto(e));
155+
manager.on(Modifier.Ctrl, (e: PointerEvent) => this.goto(e));
156156
}
157157

158158
if (this.inputs.multiselectable()) {
159-
manager.on(Modifier.Shift, (e: MouseEvent) => this.goto(e, {selectFromActive: true}));
159+
manager.on(Modifier.Shift, (e: PointerEvent) => this.goto(e, {selectFromActive: true}));
160160
}
161161

162162
return manager;
@@ -183,9 +183,9 @@ export class ListboxPattern {
183183
}
184184
}
185185

186-
onMousedown(event: MouseEvent) {
186+
onPointerdown(event: PointerEvent) {
187187
if (!this.disabled()) {
188-
this.mousedown().handle(event);
188+
this.pointerdown().handle(event);
189189
}
190190
}
191191

@@ -218,7 +218,7 @@ export class ListboxPattern {
218218
}
219219

220220
/** Navigates to the given item in the listbox. */
221-
goto(event: MouseEvent, opts?: SelectOptions) {
221+
goto(event: PointerEvent, opts?: SelectOptions) {
222222
const item = this._getItem(event);
223223

224224
if (item) {
@@ -260,7 +260,7 @@ export class ListboxPattern {
260260
}
261261
}
262262

263-
private _getItem(e: MouseEvent) {
263+
private _getItem(e: PointerEvent) {
264264
if (!(e.target instanceof HTMLElement)) {
265265
return;
266266
}

0 commit comments

Comments
 (0)