@lynx-js/web-elements 0.2.4

package/dist/XList/XList.js

@@ -0,0 +1,257 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { Component, genDomGetter, html, } from '@lynx-js/web-elements-reactive';
+import { XListAttributes } from './XListAttributes.js';
+import { XListEvents } from './XListEvents.js';
+import { LynxExposure } from '../common/Exposure.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+let XList = (() => {
+    let _classDecorators = [Component('x-list', [LynxExposure, XListAttributes, XListEvents], html `<style>
+  .placeholder-dom {
+    display: none;
+    flex: 0 0 0;
+    align-self: stretch;
+    min-height: 0;
+    min-width: 0;
+  }
+  .observer-container {
+    flex-direction: inherit;
+    overflow: visible;
+  }
+  .observer {
+    display: flex;
+  }
+  </style>
+  <div id="content" part="content">
+    <div
+      class="observer-container placeholder-dom"
+      part="upper-threshold-observer"
+    >
+      <div
+        class="observer placeholder-dom"
+        id="upper-threshold-observer"
+      ></div>
+    </div>
+    <slot part="slot"></slot>
+    <div
+      class="observer-container placeholder-dom"
+      part="lower-threshold-observer"
+    >
+      <div
+        class="observer placeholder-dom"
+        id="lower-threshold-observer"
+      ></div>
+    </div>
+  </div>`)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XList = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            XList = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set(['enable-scroll']);
+        #getListContainer = genDomGetter(() => this.shadowRoot, '#content');
+        #autoScrollOptions = {
+            rate: 0,
+            lastTimestamp: 0,
+            autoStop: true,
+            isScrolling: false,
+        };
+        #cellsMap = {};
+        get scrollTop() {
+            return this.#getListContainer().scrollTop;
+        }
+        set scrollTop(val) {
+            this.#getListContainer().scrollTop = val;
+        }
+        get scrollLeft() {
+            return this.#getListContainer().scrollTop;
+        }
+        set scrollLeft(val) {
+            this.#getListContainer().scrollLeft = val;
+        }
+        get __scrollTop() {
+            return super.scrollTop;
+        }
+        get __scrollLeft() {
+            return super.scrollTop;
+        }
+        scrollToPosition(params) {
+            let offset;
+            if (typeof params.offset === 'string') {
+                const offsetValue = parseFloat(params.offset);
+                offset = { left: offsetValue, top: offsetValue };
+            }
+            else if (typeof params.offset === 'number') {
+                offset = { left: params.offset, top: params.offset };
+            }
+            if (typeof params.index === 'number') {
+                if (params.index === 0) {
+                    this.#getListContainer().scrollTop = 0;
+                    this.#getListContainer().scrollLeft = 0;
+                }
+                else if (params.index > 0 && params.index < this.childElementCount) {
+                    const targetKid = this.children.item(params.index);
+                    if (targetKid instanceof HTMLElement) {
+                        if (offset) {
+                            offset = {
+                                left: targetKid.offsetLeft + offset.left,
+                                top: targetKid.offsetTop + offset.top,
+                            };
+                        }
+                        else {
+                            offset = { left: targetKid.offsetLeft, top: targetKid.offsetTop };
+                        }
+                    }
+                }
+            }
+            if (offset) {
+                this.#getListContainer().scrollTo({
+                    ...offset,
+                    behavior: params.smooth ? 'smooth' : 'auto',
+                });
+            }
+        }
+        #autoScroll = (timestamp) => {
+            if (!this.#autoScrollOptions.isScrolling) {
+                return;
+            }
+            if (!this.#autoScrollOptions.lastTimestamp) {
+                this.#autoScrollOptions.lastTimestamp = timestamp;
+            }
+            const scrollContainer = this.#getListContainer();
+            const deltaTime = timestamp - this.#autoScrollOptions.lastTimestamp;
+            const tickDistance = (deltaTime / 1000) * this.#autoScrollOptions.rate;
+            scrollContainer.scrollBy({
+                left: tickDistance,
+                top: tickDistance,
+                behavior: 'smooth',
+            });
+            this.#autoScrollOptions.lastTimestamp = timestamp;
+            if (scrollContainer.scrollTop + scrollContainer.clientHeight
+                >= scrollContainer.scrollHeight && this.#autoScrollOptions.autoStop) {
+                scrollContainer.scrollTop = scrollContainer.scrollHeight
+                    - scrollContainer.clientHeight;
+                this.#autoScrollOptions.isScrolling = false;
+            }
+            else {
+                requestAnimationFrame(this.#autoScroll);
+            }
+        };
+        autoScroll(params) {
+            if (params.start) {
+                const rate = typeof params.rate === 'number'
+                    ? params.rate
+                    : parseFloat(params.rate);
+                this.#autoScrollOptions = {
+                    rate,
+                    lastTimestamp: 0,
+                    isScrolling: true,
+                    autoStop: params.autoStop !== false ? true : false,
+                };
+                requestAnimationFrame(this.#autoScroll);
+            }
+            else {
+                this.#autoScrollOptions.isScrolling = false;
+            }
+        }
+        getScrollContainerInfo() {
+            return {
+                scrollTop: this.scrollTop,
+                scrollLeft: this.scrollLeft,
+                scrollHeight: this.scrollHeight,
+                scrollWidth: this.scrollWidth,
+            };
+        }
+        getVisibleCells = () => {
+            const cells = Object.values(this.#cellsMap);
+            const children = Array.from(this.children).filter(node => {
+                return node.tagName === 'LIST-ITEM';
+            });
+            return cells.map(cell => {
+                const rect = cell.getBoundingClientRect();
+                return {
+                    id: cell.getAttribute('id'),
+                    itemKey: cell.getAttribute('item-key'),
+                    bottom: rect.bottom,
+                    top: rect.top,
+                    left: rect.left,
+                    right: rect.right,
+                    index: children.indexOf(cell),
+                };
+            });
+        };
+        #getListItemInfo = () => {
+            const cells = Object.values(this.#cellsMap);
+            return cells.map(cell => {
+                const rect = cell.getBoundingClientRect();
+                return {
+                    height: rect.height,
+                    width: rect.width,
+                    itemKey: cell.getAttribute('item-key'),
+                    originX: rect.x,
+                    originY: rect.y,
+                };
+            });
+        };
+        #contentVisibilityChange = (event) => {
+            if (!event.target || !(event.target instanceof HTMLElement)) {
+                return;
+            }
+            const skipped = event.skipped;
+            const isContent = event.target?.getAttribute('id') === 'content'
+                && event.target?.getAttribute('part') === 'content';
+            const isListItem = event.target.tagName === 'LIST-ITEM';
+            if (isContent && !skipped) {
+                const visibleItemBeforeUpdate = this.#getListItemInfo();
+                setTimeout(() => {
+                    this.dispatchEvent(new CustomEvent('layoutcomplete', {
+                        ...commonComponentEventSetting,
+                        detail: {
+                            visibleItemBeforeUpdate,
+                            visibleItemAfterUpdate: this.#getListItemInfo(),
+                        },
+                    }));
+                    // Set 100 is because #content is the parent container of list-item, and content is always visible before list-item.
+                    // We cannot obtain the timing of all the successfully visible list-items on the screen, so 100ms is used to delay this behavior.
+                }, 100);
+                return;
+            }
+            if (isListItem) {
+                const itemKey = event.target?.getAttribute('item-key');
+                if (!itemKey) {
+                    return;
+                }
+                if (skipped) {
+                    this.#cellsMap[itemKey] && delete this.#cellsMap[itemKey];
+                }
+                else {
+                    this.#cellsMap[itemKey] = event.target;
+                }
+                return;
+            }
+        };
+        connectedCallback() {
+            const listContainer = this.#getListContainer();
+            listContainer.addEventListener('contentvisibilityautostatechange', this.#contentVisibilityChange, {
+                passive: true,
+            });
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XList = _classThis;
+})();
+export { XList };
+//# sourceMappingURL=XList.js.map

package/dist/XList/XListAttributes.d.ts

@@ -0,0 +1,8 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { XList } from './XList.js';
+export declare class XListAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: XList);
+    connectedCallback(): void;
+}

package/dist/XList/XListAttributes.js

@@ -0,0 +1,50 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindToStyle, boostedQueueMicrotask, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let XListAttributes = (() => {
+    let _private_handlerStickyOffset_decorators;
+    let _private_handlerStickyOffset_initializers = [];
+    let _private_handlerStickyOffset_extraInitializers = [];
+    return class XListAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handlerStickyOffset_decorators = [registerAttributeHandler('sticky-offset', true)];
+            __esDecorate(null, null, _private_handlerStickyOffset_decorators, { kind: "field", name: "#handlerStickyOffset", static: false, private: true, access: { has: obj => #handlerStickyOffset in obj, get: obj => obj.#handlerStickyOffset, set: (obj, value) => { obj.#handlerStickyOffset = value; } }, metadata: _metadata }, _private_handlerStickyOffset_initializers, _private_handlerStickyOffset_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'sticky-offset',
+            'initial-scroll-index',
+        ];
+        #dom;
+        #handlerStickyOffset = __runInitializers(this, _private_handlerStickyOffset_initializers, bindToStyle(() => this.#dom, '--list-item-sticky-offset', (v) => `${parseFloat(v)}px`));
+        constructor(dom) {
+            __runInitializers(this, _private_handlerStickyOffset_extraInitializers);
+            this.#dom = dom;
+        }
+        connectedCallback() {
+            const initialScrollIndex = this.#dom.getAttribute('initial-scroll-index');
+            if (initialScrollIndex !== null) {
+                const index = parseFloat(initialScrollIndex);
+                const scrollToInitialIndex = () => {
+                    if (this.#dom.clientHeight === 0) {
+                        // In Safari, there is the potential race condition between the browser's layout and clientWidth calculate.
+                        // So, we have to use requestAnimationFrame to ensure that the code runs after the browser's layout.
+                        requestAnimationFrame(scrollToInitialIndex);
+                    }
+                    else {
+                        this.#dom.scrollToPosition({ index });
+                    }
+                };
+                // The reason for using microtasks is that the width and height of the child element may not be rendered at this time, so it will not be able to scroll.
+                boostedQueueMicrotask(scrollToInitialIndex);
+            }
+        }
+    };
+})();
+export { XListAttributes };
+//# sourceMappingURL=XListAttributes.js.map

package/dist/XList/XListEvents.d.ts

@@ -0,0 +1,7 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { XList } from './XList.js';
+export declare class XListEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: XList);
+}