feat(ScrollEnablement): enhance implementation to work on desktop (#1374)

- improve implementation
- add scroll enablement to tokenizer

FIXES: #1368

Author: MapTo0

packages/base/src/delegate/ScrollEnablement.js

@@ -1,15 +1,27 @@
+import { isPhone } from "../Device.js";
 import EventProvider from "../EventProvider.js";
 import scroll from "../animations/scroll.js";
 
 const scrollEventName = "scroll";
-const touchEndEventName = "touchend";
+const touchEndEventName = isPhone() ? "touchend" : "mouseup";
 
 class ScrollEnablement extends EventProvider {
 	constructor(containerComponent) {
 		super();
-		containerComponent.addEventListener("touchstart", this.ontouchstart.bind(this), { passive: true });
-		containerComponent.addEventListener("touchmove", this.ontouchmove.bind(this), { passive: true });
-		containerComponent.addEventListener("touchend", this.ontouchend.bind(this), { passive: true });
+		this.containerComponent = containerComponent;
+		this.mouseMove = this.ontouchmove.bind(this);
+		this.mouseUp = this.ontouchend.bind(this);
+		this.touchStart = this.ontouchstart.bind(this);
+
+		this.isPhone = isPhone();
+
+		if (this.isPhone) {
+			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) {
@@ -43,19 +55,25 @@ class ScrollEnablement extends EventProvider {
 
 	_isTouchInside(touch) {
 		const rect = this._container.getBoundingClientRect();
-		const x = touch.clientX;
-		const y = touch.clientY;
+		const x = this.isPhone ? touch.clientX : touch.x;
+		const y = this.isPhone ? touch.clientY : touch.y;
 
 		return x >= rect.left && x <= rect.right
 			&& y >= rect.top && y <= rect.bottom;
 	}
 
 	ontouchstart(event) {
-		const touch = event.touches[0];
-		this._prevDragX = touch.pageX;
-		this._prevDragY = touch.pageY;
+		const touch = this.isPhone ? event.touches[0] : null;
+
+		if (!this.isPhone) {
+			document.addEventListener("mouseup", this.mouseUp, { passive: true });
+			document.addEventListener("mousemove", this.mouseMove, { passive: true });
+		}
 
-		this._canScroll = this._isTouchInside(touch);
+		this._prevDragX = this.isPhone ? touch.pageX : event.x;
+		this._prevDragY = this.isPhone ? touch.pageY : event.y;
+
+		this._canScroll = this._isTouchInside(this.isPhone ? touch : event);
 	}
 
 	ontouchmove(event) {
@@ -64,10 +82,10 @@ class ScrollEnablement extends EventProvider {
 		}
 
 		const container = this._container;
-		const touch = event.touches[0];
+		const touch = this.isPhone ? event.touches[0] : null;
 
-		const dragX = touch.pageX;
-		const dragY = touch.pageY;
+		const dragX = this.isPhone ? touch.pageX : event.x;
+		const dragY = this.isPhone ? touch.pageY : event.y;
 
 		container.scrollLeft += this._prevDragX - dragX;
 		container.scrollTop += this._prevDragY - dragY;
@@ -87,8 +105,8 @@ class ScrollEnablement extends EventProvider {
 		}
 
 		const container = this._container;
-		const dragX = event.pageX;
-		const dragY = event.pageY;
+		const dragX = this.isPhone ? event.pageX : event.x;
+		const dragY = this.isPhone ? event.pageY : event.y;
 
 		container.scrollLeft += this._prevDragX - dragX;
 		container.scrollTop += this._prevDragY - dragY;
@@ -100,6 +118,11 @@ class ScrollEnablement extends EventProvider {
 
 		this._prevDragX = dragX;
 		this._prevDragY = dragY;
+
+		if (!this.isPhone) {
+			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
+			document.removeEventListener("mouseup", this.mouseUp);
+		}
 	}
 }
 

packages/main/src/MultiComboBox.js

@@ -425,6 +425,8 @@ class MultiComboBox extends UI5Element {
 
 		tokenizer.tokens.forEach(token => { token.selected = false; });
 
+		this._tokenizer.contentDom.scrollLeft = 0;
+
 		if (tokensCount === 0 && this._deleting) {
 			setTimeout(() => {
 				this.shadowRoot.querySelector("input").focus();

packages/main/src/Tokenizer.js

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TokenizerTemplate from "./generated/templates/TokenizerTemplate.lit.js";
 import { MULTIINPUT_SHOW_MORE_TOKENS, TOKENIZER_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
@@ -95,6 +96,7 @@ class Tokenizer extends UI5Element {
 		this._tokensCount = 0;
 		this._resizeHandler = this._handleResize.bind(this);
 		this._itemNav = new ItemNavigation(this);
+		this._scrollEnablement = new ScrollEnablement(this);
 
 		this._itemNav.getItemsCallback = () => {
 			if (this.disabled) {
@@ -142,6 +144,8 @@ class Tokenizer extends UI5Element {
 			this._invalidate();
 			this._tokensCount = this.tokens.length;
 		}
+
+		this._scrollEnablement.scrollContainer = this.expanded ? this.contentDom : this;
 	}
 
 	_tokenDelete(event) {

packages/main/src/themes/Tokenizer.css

@@ -32,6 +32,11 @@
 	height: 100%;
 }
 
+:host([expanded]) .ui5-tokenizer--content {
+	display: inline-block;
+	white-space: nowrap;
+}
+
 .ui5-tokenizer--content {
 	height: 100%;
 	display: flex;