feat: pointerdownPosition service, used in drawer and slider

Author: divdavem

angular/bootstrap/src/components/drawer/drawer.component.ts

@@ -224,7 +224,7 @@ export class DrawerComponent extends BaseWidgetDirective<DrawerWidget> {
 	readonly resizable = input(undefined, {alias: 'auResizable', transform: auBooleanAttribute});
 
 	/**
-	 * An event emitted when the drawer size (width or height depending on the orientation).
+	 * An event emitted when the drawer size changes (width or height depending on the orientation).
 	 *
 	 * Event payload is equal to the newly selected width or height.
 	 *
@@ -268,7 +268,7 @@ export class DrawerComponent extends BaseWidgetDirective<DrawerWidget> {
 	readonly maximizedChange = output<boolean>({alias: 'auMaximizedChange'});
 
 	/**
-	 * Event to be triggered when the user start or stop resizing the drawer.
+	 * Event to be triggered when the user starts or stops resizing the drawer.
 	 *
 	 * @defaultValue
 	 * ```ts

core-bootstrap/src/scss/slider.scss

@@ -171,6 +171,7 @@
 		}
 
 		.au-slider-handle {
+			touch-action: none;
 			background-color: var(--#{variables.$prefix}slider-handle-color);
 			border: var(--#{variables.$prefix}slider-handle-border);
 			border-radius: var(--#{variables.$prefix}slider-handle-border-radius);

core/src/components/components.spec-utils.ts

@@ -22,26 +22,19 @@ export function getAttributes(node: HTMLElement) {
  * @param args - the args of the directive
  * @param sendEvent - the event dispatcher function
  * @param nodeType - the type of the DOM element to create
- * @param destroyAfterEvent - automatically destroy the directive after use
- * @returns the element and the destroy reference
  */
 export function attachDirectiveAndSendEvent<T = void>(
 	directive: Directive<T>,
 	args: T,
 	sendEvent: (node: HTMLElement) => void,
 	nodeType: string = 'div',
-	destroyAfterEvent = true,
-): {element: HTMLElement; destroy: void | {destroy?: () => void}} {
+) {
 	const element = document.createElement(nodeType);
+	document.body.appendChild(element);
 	const destroy = directive(element, args);
 	sendEvent(element);
-	if (destroyAfterEvent) {
-		destroy?.destroy?.();
-	}
-	return {
-		element,
-		destroy,
-	};
+	destroy?.destroy?.();
+	element.remove();
 }
 
 /**

core/src/components/drawer/drawer.ts

@@ -152,7 +152,7 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
 	 */
 	onShown: () => void;
 	/**
-	 * An event emitted when the drawer size (width or height depending on the orientation).
+	 * An event emitted when the drawer size changes (width or height depending on the orientation).
 	 *
 	 * Event payload is equal to the newly selected width or height.
 	 *
@@ -192,7 +192,7 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
 	 */
 	onMaximizedChange: (isMaximized: boolean) => void;
 	/**
-	 * Event to be triggered when the user start or stop resizing the drawer.
+	 * Event to be triggered when the user starts or stops resizing the drawer.
 	 *
 	 * @defaultValue
 	 * ```ts
@@ -445,9 +445,8 @@ export const createDrawer: WidgetFactory<DrawerWidget> = createWidgetFactory('dr
 		},
 	}));
 
-	const direction = computed(() => (['inline-start', 'block-start'].some((placement) => className$().includes(placement)) ? 1 : -1));
+	const direction$ = computed(() => (['inline-start', 'block-start'].some((placement) => className$().includes(placement)) ? 1 : -1));
 
-	let startSize = 0;
 	const isMinimized$ = writable(<boolean | undefined>undefined);
 	const isMaximized$ = writable(<boolean | undefined>undefined);
 
@@ -465,23 +464,24 @@ export const createDrawer: WidgetFactory<DrawerWidget> = createWidgetFactory('dr
 	}
 
 	const splitterDirective = mergeDirectives(
-		createPointerdownPositionDirective({
-			onMoveStart() {
-				const isVertical = isVertical$();
-				startSize = drawerElement$()![isVertical ? 'offsetHeight' : 'offsetWidth'];
-				onResizingChange$()(true);
-			},
-			onMove(position) {
-				setSize(startSize + direction() * position[isVertical$() ? 'dy' : 'dx']);
-			},
-			onMoveEnd() {
-				const isVertical = isVertical$();
-				const drawerElement = drawerElement$()!;
-				const newSize = drawerElement[isVertical ? 'offsetHeight' : 'offsetWidth'];
-				drawerElement.style[isVertical ? 'height' : 'width'] = '';
-				size$.set(newSize);
-				onResizingChange$()(false);
-			},
+		createPointerdownPositionDirective((event) => {
+			const drawerElement = drawerElement$()!;
+			const isVertical = isVertical$();
+			const startSize = drawerElement[isVertical ? 'offsetHeight' : 'offsetWidth'];
+			const clientXorY = isVertical ? 'clientY' : 'clientX';
+			const startPos = event[clientXorY];
+			const direction = direction$();
+			onResizingChange$()(true);
+
+			return {
+				onMove(event) {
+					setSize(startSize + direction * (event[clientXorY] - startPos));
+				},
+				onEnd() {
+					drawerElement.style[isVertical ? 'height' : 'width'] = '';
+					onResizingChange$()(false);
+				},
+			};
 		}),
 		createAttributesDirective(() => ({
 			events: {

core/src/components/slider/slider.spec.ts

@@ -27,6 +27,18 @@ function keyboardEvent(key: string): KeyboardEvent {
 	return new KeyboardEvent('keydown', {key});
 }
 
+function pointerEvent(type: 'pointerdown' | 'pointerup', pointerType: 'mouse' | 'touch', clientX: number): PointerEvent {
+	return new PointerEvent(type, {
+		pointerId: 1,
+		clientX,
+		clientY: 0,
+		pointerType,
+		isPrimary: true,
+		bubbles: true,
+		cancelable: true,
+	});
+}
+
 const defaultHandle: SliderHandle = {id: 0, value: 0, ariaLabel: 'Value', ariaValueText: undefined, ariaLabelledBy: undefined};
 
 const defaultState: () => SliderState = () => ({
@@ -83,15 +95,17 @@ describe(`Slider basic`, () => {
 	let defConfig: WritableSignal<Partial<SliderProps>>;
 
 	const clickAreaX = (clientX: number) => {
-		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) =>
-			node.dispatchEvent(new MouseEvent('mousedown', {clientX})),
-		);
+		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) => {
+			node.dispatchEvent(pointerEvent('pointerdown', 'mouse', clientX));
+			node.dispatchEvent(pointerEvent('pointerup', 'mouse', clientX));
+		});
 	};
 
 	const touchAreaX = (clientX: number) => {
-		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) =>
-			node.dispatchEvent(new TouchEvent('touchstart', {touches: [new Touch({clientX, identifier: 0, target: new EventTarget()})]})),
-		);
+		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) => {
+			node.dispatchEvent(pointerEvent('pointerdown', 'touch', clientX));
+			node.dispatchEvent(pointerEvent('pointerup', 'touch', clientX));
+		});
 	};
 	const useKeyOnHandle = (key: string) => {
 		attachDirectiveAndSendEvent(slider.directives.handleEventsDirective, {item: {id: 0}}, (node) => node.dispatchEvent(keyboardEvent(key)));
@@ -1790,9 +1804,10 @@ describe(`Slider range`, () => {
 	let defConfig: WritableSignal<Partial<SliderProps>>;
 	let currentLowLabel: HTMLDivElement, currentHighLabel: HTMLDivElement, combinedLabel: HTMLDivElement;
 	const clickAreaX = (clientX: number) => {
-		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) =>
-			node.dispatchEvent(new MouseEvent('mousedown', {clientX})),
-		);
+		attachDirectiveAndSendEvent(slider.directives.clickableAreaDirective, undefined, (node) => {
+			node.dispatchEvent(pointerEvent('pointerdown', 'mouse', clientX));
+			node.dispatchEvent(pointerEvent('pointerup', 'mouse', clientX));
+		});
 	};
 	const useKeyOnHandle = (key: string, handleId = 0) => {
 		attachDirectiveAndSendEvent(slider.directives.handleEventsDirective, {item: {id: handleId}}, (node) => node.dispatchEvent(keyboardEvent(key)));