@lynx-js/web-elements-canary 0.11.0 → 0.11.1-canary-20260127-1fa1ddc7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/web-elements
 
+## 0.11.1-canary-20260127122712-1fa1ddc77447704d6865509a884aa71ea72cd56e
+
+### Patch Changes
+
+- feat: add wheel event handling and corresponding tests for x-foldview-ng ([#2145](https://github.com/lynx-family/lynx-stack/pull/2145))
+
 ## 0.11.0
 
 ### Minor Changes
@@ -11,11 +17,11 @@
   Now we integrated the `LinearCompat` into @lynx-js/web-elements. Developers can safely remove the following imports:
 
   ```js
-  import '@lynx-js/web-elements/compat/LinearContainer';
+  import "@lynx-js/web-elements/compat/LinearContainer";
   ```
 
   ```js
-  import '@lynx-js/web-elements-compat/LinearContainer';
+  import "@lynx-js/web-elements-compat/LinearContainer";
   ```
 
 ### Patch Changes
@@ -41,15 +47,15 @@
   ### Before
 
   ```js
-  import '@lynx-js/web-elements-template';
-  import '@lynx-js/web-elements-compat/LinearContainer';
+  import "@lynx-js/web-elements-template";
+  import "@lynx-js/web-elements-compat/LinearContainer";
   ```
 
   ### After
 
   ```js
-  import '@lynx-js/web-elements/html-templates';
-  import '@lynx-js/web-elements/compat/LinearContainer';
+  import "@lynx-js/web-elements/html-templates";
+  import "@lynx-js/web-elements/compat/LinearContainer";
   ```
 
 ### Patch Changes
@@ -734,8 +740,8 @@
   For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
 
   ```javascript
-  import '@lynx-js/web-elements-compat/LinearContainer';
-  import '@lynx-js/web-elements/all';
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  import "@lynx-js/web-elements/all";
   ```
 
 - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
@@ -757,11 +763,11 @@
   There is also a simple way to use this feature
 
   ```javascript
-  import { LynxCard } from '@lynx-js/web-core';
-  import { loadElement } from '@lynx-js/web-elements/lazy';
-  import '@lynx-js/web-elements/index.css';
-  import '@lynx-js/web-core/index.css';
-  import './index.css';
+  import { LynxCard } from "@lynx-js/web-core";
+  import { loadElement } from "@lynx-js/web-elements/lazy";
+  import "@lynx-js/web-elements/index.css";
+  import "@lynx-js/web-core/index.css";
+  import "./index.css";
 
   const lynxcard = new LynxCard({
     ...beforeConfigs,

package/dist/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -12,7 +12,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
     static observedAttributes = [];
     constructor(dom) {
         this.#dom = dom;
-        this.#dom.addEventListener('touchmove', this.#scroller, {
+        this.#dom.addEventListener('touchmove', this.#handleTouch, {
             passive: false,
         });
         this.#dom.addEventListener('touchstart', this.#touchStart, {
@@ -21,6 +21,9 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#dom.addEventListener('touchend', this.#touchEnd, {
             passive: true,
         });
+        this.#dom.addEventListener('wheel', this.#handleWheel, {
+            passive: false,
+        });
     }
     #getTheMostScrollableKid(delta) {
         const scrollableKid = this.#elements?.find((element) => {
@@ -42,8 +45,11 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#childrenElemsntsScrollTop.set(scrollableKid, targetKidScrollDistance);
         scrollableKid.scrollTop = targetKidScrollDistance;
     }
-    #scroller = (event) => {
+    #handleTouch = (event) => {
         const parentElement = this.#getParentElement();
+        if (!parentElement) {
+            return;
+        }
         const touch = event.touches.item(0);
         const { pageY, pageX } = touch;
         const deltaY = this.#previousPageY - pageY;
@@ -54,33 +60,34 @@ export class XFoldviewSlotNgTouchEventsHandler {
         if (this.#scrollingVertically === false) {
             return;
         }
-        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
-        if (parentElement) {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            if ((parentElement[isHeaderShowing] && deltaY > 0
-                || (deltaY < 0 && !scrollableKidY))
-                // deltaY > 0: swipe up (folding header)
-                // scroll the foldview if its scrollable
-                || (!parentElement[isHeaderShowing] && !scrollableKidY)
-            // all sub doms are scrolled
-            ) {
-                parentElement.scrollBy({
-                    top: deltaY,
-                    behavior: 'smooth',
-                });
-                this.#parentScrollTop += deltaY;
-                parentElement.scrollTop = this.#parentScrollTop;
-                this.#currentScrollingElement = parentElement;
-            }
-            else if (scrollableKidY) {
-                this.#currentScrollingElement = scrollableKidY;
-                this.#scrollKid(scrollableKidY, deltaY);
-            }
+        if (event.cancelable) {
+            event.preventDefault();
         }
+        this.#handleScrollDelta(deltaY, parentElement);
         this.#previousPageY = pageY;
-        this.#deltaY = deltaY;
+    };
+    #handleWheel = (event) => {
+        const parentElement = this.#getParentElement();
+        if (!parentElement) {
+            return;
+        }
+        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+            return;
+        }
+        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element));
+        const { clientX, clientY } = event;
+        const pointElements = document.elementsFromPoint(clientX, clientY).filter(e => this.#dom.contains(e));
+        this.#elements = [...new Set([...pathElements, ...pointElements])];
+        this.#parentScrollTop = parentElement.scrollTop;
+        if (this.#elements) {
+            for (const element of this.#elements) {
+                this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
+            }
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        this.#handleScrollDelta(event.deltaY, parentElement);
     };
     #getParentElement() {
         const parentElement = this.#dom.parentElement;
@@ -114,5 +121,28 @@ export class XFoldviewSlotNgTouchEventsHandler {
             });
         }
     };
+    #handleScrollDelta(deltaY, parentElement) {
+        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
+        if ((parentElement[isHeaderShowing] && deltaY > 0
+            || (deltaY < 0 && !scrollableKidY))
+            // deltaY > 0: swipe up (folding header)
+            // scroll the foldview if its scrollable
+            || (!parentElement[isHeaderShowing] && !scrollableKidY)
+        // all sub doms are scrolled
+        ) {
+            parentElement.scrollBy({
+                top: deltaY,
+                behavior: 'smooth',
+            });
+            this.#parentScrollTop += deltaY;
+            parentElement.scrollTop = this.#parentScrollTop;
+            this.#currentScrollingElement = parentElement;
+        }
+        else if (scrollableKidY) {
+            this.#currentScrollingElement = scrollableKidY;
+            this.#scrollKid(scrollableKidY, deltaY);
+        }
+        this.#deltaY = deltaY;
+    }
 }
 //# sourceMappingURL=XFoldviewSlotNgTouchEventsHandler.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.11.0",
+  "version": "0.11.1-canary-20260127-1fa1ddc7",
   "private": false,
   "repository": {
     "type": "git",
@@ -128,7 +128,7 @@
   ],
   "devDependencies": {
     "@playwright/test": "^1.57.0",
-    "@rsbuild/core": "1.7.1",
+    "@rsbuild/core": "1.7.2",
     "@rsbuild/plugin-source-build": "^1.0.3",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",