@ui5/webcomponents-base 0.0.0-8db0ce01a → 0.0.0-918b4fbe7

package/src/delegate/{ItemNavigation.js → ItemNavigation.ts}

@@ -5,12 +5,32 @@ import {
 	isRight,
 	isHome,
 	isEnd,
+	isPageDown,
+	isPageUp,
 } from "../Keys.js";
 import getActiveElement from "../util/getActiveElement.js";
 
 import NavigationMode from "../types/NavigationMode.js";
 import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 
+import type UI5Element from "../UI5Element.js";
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+interface Tabbable {
+	id?: string,
+	_tabIndex?: string,
+}
+
+type ItemNavigationOptions = {
+	currentIndex?: number,
+	navigationMode?: NavigationMode,
+	rowSize?: number
+	skipItemsSize?: number,
+	behavior?: ItemNavigationBehavior,
+	getItemsCallback: () => Array<Tabbable>,
+	affectedPropertiesNames?: Array<string>,
+};
+
 /**
  * The ItemNavigation class manages the calculations to determine the correct "tabindex" for a group of related items inside a root component.
  * Important: ItemNavigation only does the calculations and does not change "tabindex" directly, this is a responsibility of the developer.
@@ -45,36 +65,47 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
  * @public
  */
 class ItemNavigation {
+	rootWebComponent: UI5Element;
+
+	_getItems: () => Array<Tabbable>;
+
+	_currentIndex: number;
+
+	_rowSize: number;
+
+	_behavior: ItemNavigationBehavior;
+
+	_navigationMode: NavigationMode;
+
+	_affectedPropertiesNames: Array<string>;
+
+	_skipItemsSize: number | null;
+
 	/**
 	 *
 	 * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
-	 * @param options Object with configuration options:
+	 * @param {ItemNavigationOptions} options Object with configuration options:
 	 *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
 	 *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
 	 *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
+	 * 	- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item
 	 *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
 	 *    Static means that nothing happens if the user tries to navigate beyond the first/last item.
 	 *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
 	 *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among
 	 *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
 	 */
-	constructor(rootWebComponent, options = {}) {
-		this._setRootComponent(rootWebComponent);
-		this._initOptions(options);
-	}
-
-	_setRootComponent(rootWebComponent) {
+	constructor(rootWebComponent: UI5Element, options: ItemNavigationOptions) {
 		if (!rootWebComponent.isUI5Element) {
 			throw new Error("The root web component must be a UI5 Element instance");
 		}
+
 		this.rootWebComponent = rootWebComponent;
 		this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this));
 		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
 		};
-	}
 
-	_initOptions(options) {
 		if (typeof options.getItemsCallback !== "function") {
 			throw new Error("getItemsCallback is required");
 		}
@@ -85,6 +116,7 @@ class ItemNavigation {
 		this._behavior = options.behavior || ItemNavigationBehavior.Static;
 		this._navigationMode = options.navigationMode || NavigationMode.Auto;
 		this._affectedPropertiesNames = options.affectedPropertiesNames || [];
+		this._skipItemsSize = options.skipItemsSize || null;
 	}
 
 	/**
@@ -94,7 +126,7 @@ class ItemNavigation {
 	 * @public
 	 * @param current the new selected item
 	 */
-	setCurrentItem(current) {
+	setCurrentItem(current: Tabbable) {
 		const currentItemIndex = this._getItems().indexOf(current);
 
 		if (currentItemIndex === -1) {
@@ -112,7 +144,7 @@ class ItemNavigation {
 	 * @public
 	 * @param newRowSize
 	 */
-	setRowSize(newRowSize) {
+	setRowSize(newRowSize: number) {
 		this._rowSize = newRowSize;
 	}
 
@@ -122,26 +154,35 @@ class ItemNavigation {
 		});
 	}
 
-	_onkeydown(event) {
+	_onkeydown(event: KeyboardEvent) {
 		if (!this._canNavigate()) {
 			return;
 		}
 
 		const horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;
 		const verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;
+		const isRTL = this.rootWebComponent.effectiveDir === "rtl";
 
-		if (isUp(event) && verticalNavigationOn) {
-			this._handleUp();
-		} else if (isDown(event) && verticalNavigationOn) {
-			this._handleDown();
+		if (isRTL && isLeft(event) && horizontalNavigationOn) {
+			this._handleRight();
+		} else if (isRTL && isRight(event) && horizontalNavigationOn) {
+			this._handleLeft();
 		} else if (isLeft(event) && horizontalNavigationOn) {
 			this._handleLeft();
 		} else if (isRight(event) && horizontalNavigationOn) {
 			this._handleRight();
+		} else if (isUp(event) && verticalNavigationOn) {
+			this._handleUp();
+		} else if (isDown(event) && verticalNavigationOn) {
+			this._handleDown();
 		} else if (isHome(event)) {
 			this._handleHome();
 		} else if (isEnd(event)) {
 			this._handleEnd();
+		} else if (isPageUp(event)) {
+			this._handlePageUp();
+		} else if (isPageDown(event)) {
+			this._handlePageDown();
 		} else {
 			return; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation
 		}
@@ -222,6 +263,66 @@ class ItemNavigation {
 		this._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line
 	}
 
+	_handlePageUp() {
+		if (this._rowSize > 1) {
+			// eslint-disable-next-line
+			// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
+			return;
+		}
+		this._handlePageUpFlat();
+	}
+
+	_handlePageDown() {
+		if (this._rowSize > 1) {
+			// eslint-disable-next-line
+			// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
+			return;
+		}
+		this._handlePageDownFlat();
+	}
+
+	/**
+	 * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
+	 */
+	_handlePageUpFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
+			return;
+		}
+
+		if (this._currentIndex + 1 > this._skipItemsSize) {
+			// When there are more than "skipItemsSize" number of items to the top,
+			// move the focus up/left with the predefined number.
+			this._currentIndex -= this._skipItemsSize;
+		} else {
+			// Otherwise, move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
+		}
+	}
+
+	/**
+	 * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.
+	 */
+	_handlePageDownFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very bottom (as End).
+			this._currentIndex = this._getItems().length - 1;
+			return;
+		}
+
+		const currentToEndRange = this._getItems().length - this._currentIndex - 1;
+
+		if (currentToEndRange > this._skipItemsSize) {
+			// When there are more than "skipItemsSize" number of items until the bottom,
+			// move the focus down/right with the predefined number.
+			this._currentIndex += this._skipItemsSize;
+		} else {
+			// Otherwise, move the focus to the very bottom (as End).
+			this._currentIndex = this._getItems().length - 1;
+		}
+	}
+
 	_applyTabIndex() {
 		const items = this._getItems();
 		for (let i = 0; i < items.length; i++) {
@@ -229,8 +330,8 @@ class ItemNavigation {
 		}
 
 		this._affectedPropertiesNames.forEach(propName => {
-			const prop = this.rootWebComponent[propName];
-			this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
+			const prop = (this.rootWebComponent as Record<string, any>)[propName];
+			(this.rootWebComponent as Record<string, any>)[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
 		});
 	}
 
@@ -270,16 +371,23 @@ class ItemNavigation {
 			return;
 		}
 
-		if (currentItem.isUI5Element) {
+		if (instanceOfUI5Element(currentItem)) {
 			return currentItem.getFocusDomRef();
 		}
 
-		if (!this.rootWebComponent.getDomRef()) {
+		const currentItemDOMRef = this.rootWebComponent.getDomRef();
+		if (!currentItemDOMRef) {
 			return;
 		}
 
-		return this.rootWebComponent.getDomRef().querySelector(`#${currentItem.id}`);
+		if (currentItem.id) {
+			return currentItemDOMRef.querySelector(`#${currentItem.id}`) as HTMLElement;
+		}
 	}
 }
 
 export default ItemNavigation;
+
+export {
+	Tabbable,
+};

package/src/delegate/{ResizeHandler.js → ResizeHandler.ts}

@@ -1,19 +1,23 @@
-let resizeObserver;
-const observedElements = new Map();
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+type ResizeObserverCallback = () => void;
+
+let resizeObserver: ResizeObserver;
+const observedElements = new Map<HTMLElement, Array<ResizeObserverCallback>>();
 
 const getResizeObserver = () => {
 	if (!resizeObserver) {
 		resizeObserver = new window.ResizeObserver(entries => {
 			entries.forEach(entry => {
-				const callbacks = observedElements.get(entry.target);
-				callbacks.forEach(callback => callback());
+				const callbacks = observedElements.get(entry.target as HTMLElement);
+				callbacks?.forEach((callback: ResizeObserverCallback) => callback());
 			});
 		});
 	}
 	return resizeObserver;
 };
 
-let observe = (element, callback) => {
+const observe = (element: HTMLElement, callback: ResizeObserverCallback) => {
 	const callbacks = observedElements.get(element) || [];
 
 	// if no callbacks have been added for this element - start observing it
@@ -25,13 +29,13 @@ let observe = (element, callback) => {
 	observedElements.set(element, [...callbacks, callback]);
 };
 
-let unobserve = (element, callback) => {
+const unobserve = (element: HTMLElement, callback: ResizeObserverCallback) => {
 	const callbacks = observedElements.get(element) || [];
 	if (callbacks.length === 0) {
 		return;
 	}
 
-	const filteredCallbacks = callbacks.filter(fn => fn !== callback);
+	const filteredCallbacks = callbacks.filter((fn: ResizeObserverCallback) => fn !== callback);
 	if (filteredCallbacks.length === 0) {
 		getResizeObserver().unobserve(element);
 		observedElements.delete(element);
@@ -53,13 +57,15 @@ class ResizeHandler {
 	 * @param {*} element UI5 Web Component or DOM Element to be observed
 	 * @param {*} callback Callback to be executed
 	 */
-	static register(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
+	static register(element: HTMLElement, callback: ResizeObserverCallback) {
+		let effectiveElement: HTMLElement | undefined = element;
+
+		if (instanceOfUI5Element(effectiveElement)) {
+			effectiveElement = effectiveElement.getDomRef();
 		}
 
-		if (element instanceof HTMLElement) {
-			observe(element, callback);
+		if (effectiveElement instanceof HTMLElement) {
+			observe(effectiveElement, callback);
 		} else {
 			console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
 		}
@@ -71,36 +77,19 @@ class ResizeHandler {
 	 * @param {*} element UI5 Web Component or DOM Element to be unobserved
 	 * @param {*} callback Callback to be removed
 	 */
-	static deregister(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
+	static deregister(element: HTMLElement, callback: ResizeObserverCallback) {
+		let effectiveElement: HTMLElement | undefined = element;
+
+		if (instanceOfUI5Element(effectiveElement)) {
+			effectiveElement = effectiveElement.getDomRef();
 		}
 
-		if (element instanceof HTMLElement) {
-			unobserve(element, callback);
+		if (effectiveElement instanceof HTMLElement) {
+			unobserve(effectiveElement, callback);
 		} else {
 			console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
 		}
 	}
 }
 
-/**
- * Set a function to be executed whenever a DOM node needs to be observed for size change.
- * @public
- * @param fn
- */
-const setResizeHandlerObserveFn = fn => {
-	observe = fn;
-};
-
-/**
- * Set a function to be executed whenever a DOM node needs to no longer be observed for size changes
- * @public
- * @param fn
- */
-const setResizeHandlerUnobserveFn = fn => {
-	unobserve = fn;
-};
-
 export default ResizeHandler;
-export { setResizeHandlerObserveFn, setResizeHandlerUnobserveFn };

package/src/delegate/ScrollEnablement.ts

@@ -0,0 +1,215 @@
+import { supportsTouch } from "../Device.js";
+import EventProvider from "../EventProvider.js";
+import scroll from "../animations/scroll.js";
+import type UI5Element from "../UI5Element.js";
+
+const scrollEventName = "scroll";
+const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
+
+class ScrollEnablement<EventListenerParam, EventListenerReturn> extends EventProvider<EventListenerParam, EventListenerReturn> {
+	containerComponent: UI5Element;
+	mouseMove: (event: MouseEvent | TouchEvent) => void;
+	mouseUp: (event: MouseEvent | TouchEvent) => void;
+	touchStart: (event: MouseEvent | TouchEvent) => void;
+	cachedValue: { dragX: number, dragY: number };
+	startX: number;
+	startY: number;
+	_container?: HTMLElement;
+	supportsTouch = supportsTouch();
+	_canScroll?: boolean;
+	_prevDragX?: number;
+	_prevDragY?: number;
+
+	constructor(containerComponent: UI5Element) {
+		super();
+		this.containerComponent = containerComponent;
+		this.mouseMove = this.ontouchmove.bind(this);
+		this.mouseUp = this.ontouchend.bind(this);
+		this.touchStart = this.ontouchstart.bind(this);
+
+		this.supportsTouch = supportsTouch();
+
+		// On Android devices touchmove is thrown one more time than neccessary (together with touchend)
+		// so we have to cache the previus coordinates in order to provide correct parameters in the
+		// event for Android
+		this.cachedValue = { dragX: 0, dragY: 0 };
+
+		// In components like Carousel you need to know if the user has clicked on something or swiped
+		// in order to throw the needed event or not
+		this.startX = 0;
+		this.startY = 0;
+
+		if (this.supportsTouch) {
+			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
+			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
+			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
+		} else {
+			containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
+		}
+	}
+
+	set scrollContainer(container: HTMLElement) {
+		this._container = container;
+	}
+
+	get scrollContainer() {
+		return this._container!;
+	}
+
+	/**
+	 * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
+	 *
+	 * @param left
+	 * @param top
+	 * @param retryCount
+	 * @param retryInterval
+	 * @returns {Promise<void>} resolved when scrolled successfully
+	 */
+	async scrollTo(left: number, top: number, retryCount = 0, retryInterval = 0) {
+		let containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
+
+		/* eslint-disable no-loop-func, no-await-in-loop */
+		while (!containerPainted && retryCount > 0) {
+			await new Promise<void>(resolve => {
+				setTimeout(() => {
+					containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
+					retryCount--;
+					resolve();
+				}, retryInterval);
+			});
+		}
+		/* eslint-disable no-loop-func, no-await-in-loop */
+
+		this._container!.scrollLeft = left;
+		this._container!.scrollTop = top;
+	}
+
+	move(dx: number, dy: number, disableAnimation: boolean) {
+		if (disableAnimation) {
+			this._container!.scrollLeft += dx;
+			this._container!.scrollTop += dy;
+			return;
+		}
+
+		if (this._container) {
+			return scroll(this._container, dx, dy);
+		}
+	}
+
+	getScrollLeft() {
+		return this._container!.scrollLeft;
+	}
+
+	getScrollTop() {
+		return this._container!.scrollTop;
+	}
+
+	_isTouchInside(event: TouchEvent | MouseEvent) {
+		let touch = null;
+		if (this.supportsTouch && event instanceof TouchEvent) {
+			touch = event.touches[0];
+		}
+
+		const rect = this._container!.getBoundingClientRect();
+		const x = this.supportsTouch ? (touch as TouchInit).clientX : (event as MouseEvent).x;
+		const y = this.supportsTouch ? (touch as TouchInit).clientY : (event as MouseEvent).y;
+
+		return x! >= rect.left && x! <= rect.right
+			&& y! >= rect.top && y! <= rect.bottom;
+	}
+
+	ontouchstart(event: TouchEvent | MouseEvent) {
+		let touch = null;
+		if (this.supportsTouch && event instanceof TouchEvent) {
+			touch = event.touches[0];
+		}
+
+		if (!this.supportsTouch) {
+			document.addEventListener("mouseup", this.mouseUp, { passive: true });
+			document.addEventListener("mousemove", this.mouseMove, { passive: true });
+		} else {
+			// Needed only on mobile
+			this.startX = touch!.pageX;
+			this.startY = touch!.pageY;
+		}
+
+		if (this.supportsTouch && event instanceof TouchEvent) {
+			this._prevDragX = touch!.pageX;
+			this._prevDragY = touch!.pageY;
+		}
+
+		if (event instanceof MouseEvent) {
+			this._prevDragX = event.x;
+			this._prevDragY = event.y;
+		}
+
+		this._canScroll = this._isTouchInside(event);
+	}
+
+	ontouchmove(event: TouchEvent | MouseEvent) {
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const touch = this.supportsTouch ? (event as TouchEvent).touches[0] : null;
+
+		const dragX = this.supportsTouch ? (touch as TouchInit).pageX : (event as MouseEvent).x;
+		const dragY = this.supportsTouch ? (touch as TouchInit).pageY : (event as MouseEvent).y;
+
+		container!.scrollLeft += this._prevDragX! - dragX!;
+		container!.scrollTop += this._prevDragY! - dragY!;
+
+		this.fireEvent(scrollEventName, {
+			isLeft: dragX! > this._prevDragX!,
+			isRight: dragX! < this._prevDragX!,
+		} as unknown as EventListenerParam);
+
+		this.cachedValue.dragX = this._prevDragX!;
+		this.cachedValue.dragY = this._prevDragY!;
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+	}
+
+	ontouchend(event: TouchEvent | MouseEvent) {
+		if (this.supportsTouch) {
+			const deltaX = Math.abs((event as TouchEvent).changedTouches[0].pageX - this.startX);
+			const deltaY = Math.abs((event as TouchEvent).changedTouches[0].pageY - this.startY);
+
+			if (deltaX < 10 && deltaY < 10) {
+				return;
+			}
+		}
+
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const dragX = this.supportsTouch ? (event as TouchEvent).changedTouches[0].pageX : (event as MouseEvent).x;
+		const dragY = this.supportsTouch ? (event as TouchEvent).changedTouches[0].pageY : (event as MouseEvent).y;
+
+		container!.scrollLeft += this._prevDragX! - dragX;
+		container!.scrollTop += this._prevDragY! - dragY;
+
+		const useCachedValues = dragX === this._prevDragX;
+		const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
+		// const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
+
+		this.fireEvent(touchEndEventName, {
+			isLeft: _dragX < this._prevDragX!,
+			isRight: _dragX > this._prevDragX!,
+		} as unknown as EventListenerParam);
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+
+		if (!this.supportsTouch) {
+			document.removeEventListener("mousemove", this.mouseMove);
+			document.removeEventListener("mouseup", this.mouseUp);
+		}
+	}
+}
+
+export default ScrollEnablement;