diff --git a/packages/base/package.json b/packages/base/package.json index 4811b4b0cde9..d90b1a1e1c26 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -44,9 +44,8 @@ "lit-html": "^2.0.1" }, "devDependencies": { - "@buxlabs/amd-to-es6": "0.16.1", - "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.22.0-rc.1", + "@openui5/sap.ui.core": "1.120.3", + "@ui5/webcomponents-tools": "1.22.0", "chromedriver": "120.0.0", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 6dfaec46ac09..f5d2eb864aee 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -53,7 +53,7 @@ "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.22.0-rc.1", + "@ui5/webcomponents-tools": "1.22.0", "chromedriver": "120.0.0" } } diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 02190d15ef66..f3b383dfa5bb 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -11,7 +11,8 @@ import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js"; import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import type { Timeout } from "@ui5/webcomponents-base/dist/types.js"; + +import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; // Template import DynamicPageTemplate from "./generated/templates/DynamicPageTemplate.lit.js"; @@ -29,7 +30,7 @@ import { DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER, } from "./generated/i18n/i18n-defaults.js"; -const SCROLL_DEBOUNCE_RATE = 0; // ms +const SCROLL_DEBOUNCE_RATE = 25; // ms /** * @class @@ -186,9 +187,7 @@ class DynamicPage extends UI5Element { @slot({ type: HTMLElement }) footer!: HTMLElement[]; - isExpanding = false; - iPreviousScrollAmount = 0; - _debounceInterval?: Timeout | null; + skipSnapOnScroll = false; showHeaderInStickArea = false; _updateMediaRange: ResizeObserverCallback; @@ -275,36 +274,29 @@ class DynamicPage extends UI5Element { } snapOnScroll() { - this._debounce(() => { - if (!this.dynamicPageTitle || !this.dynamicPageHeader) { - return; - } - - const scrollTop = this.scrollContainer!.scrollTop; - - if (this.iPreviousScrollAmount === scrollTop) { - return; - } - - this.iPreviousScrollAmount = scrollTop; - - if (this.headerPinned) { - return; - } - - if (this.isExpanding) { - this.isExpanding = false; - return; - } - - if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) { - this.headerSnapped = true; - this.showHeaderInStickArea = false; - } else { - this.headerSnapped = false; - } - this.dynamicPageTitle.snapped = this.headerSnapped; - }, SCROLL_DEBOUNCE_RATE); + debounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE); + } + + snapTitleByScroll() { + if (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) { + return; + } + + const scrollTop = this.scrollContainer!.scrollTop; + + if (this.skipSnapOnScroll) { + this.skipSnapOnScroll = false; + return; + } + + if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) { + this.headerSnapped = true; + this.showHeaderInStickArea = false; + } else { + this.headerSnapped = false; + } + + this.dynamicPageTitle.snapped = this.headerSnapped; } async onExpandClick() { @@ -330,20 +322,10 @@ class DynamicPage extends UI5Element { this.showHeaderInStickArea = !this.showHeaderInStickArea; this.headerSnapped = !this.headerSnapped; - this.isExpanding = true; + this.skipSnapOnScroll = true; this.headerPinned = false; } - /// - - _debounce(fn: () => void, delay: number) { - clearTimeout(this._debounceInterval!); - this._debounceInterval = setTimeout(() => { - this._debounceInterval = null; - fn(); - }, delay); - } - updateMediaRange() { this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth); } diff --git a/packages/fiori/src/DynamicPageHeaderActions.ts b/packages/fiori/src/DynamicPageHeaderActions.ts index 90604295925c..863477635687 100644 --- a/packages/fiori/src/DynamicPageHeaderActions.ts +++ b/packages/fiori/src/DynamicPageHeaderActions.ts @@ -88,7 +88,7 @@ class DynamicPageHeaderActions extends UI5Element { * @default {} */ @property({ type: Object }) - accessibilityAttributes!: {controls: string}; + accessibilityAttributes!: { controls: string }; get classes() { return { diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index b6ed4371d77e..acf3d0999141 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -9,14 +9,10 @@ role="button" aria-expanded="{{_headerExpanded}}" aria-labelledby="{{_ariaLabelledBy}}" - aria-describedby="toggle-description"> + aria-describedby="{{_id}}-toggle-description">