ha-tabs: adapt _affectScroll() to RTL (#24018)

* adapt _affectScroll for RTL

* eslint

* import "property"

* prettier

* Update ha-tabs.ts

This makes this work...

* Lint

---------

Co-authored-by: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
This commit is contained in:
ildar170975 2025-02-26 00:20:57 +03:00 committed by GitHub
parent 2a6c1773f3
commit a048c36861
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -20,6 +20,8 @@ export class HaTabs extends PaperTabs {
private _lastLeftHiddenState = false;
private _lastRightHiddenState = false;
static get template(): HTMLTemplateElement {
if (!subTemplate) {
subTemplate = (PaperTabs as any).template.cloneNode(true);
@ -85,14 +87,23 @@ export class HaTabs extends PaperTabs {
this.$.tabsContainer.scrollLeft += dx;
const scrollLeft = this.$.tabsContainer.scrollLeft;
const dirRTL = this.dir === "rtl";
this._leftHidden = scrollLeft - this._firstTabWidth < 0;
this._rightHidden =
scrollLeft + this._lastTabWidth > this._tabContainerScrollSize;
const boolCondition1 = Math.abs(scrollLeft) < this._firstTabWidth;
const boolCondition2 =
Math.abs(scrollLeft) + this._lastTabWidth > this._tabContainerScrollSize;
if (this._lastLeftHiddenState !== this._leftHidden) {
this._lastLeftHiddenState = this._leftHidden;
this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
this._leftHidden = !dirRTL ? boolCondition1 : boolCondition2;
this._rightHidden = !dirRTL ? boolCondition2 : boolCondition1;
if (!dirRTL) {
if (this._lastLeftHiddenState !== this._leftHidden) {
this._lastLeftHiddenState = this._leftHidden;
this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
}
} else if (this._lastRightHiddenState !== this._rightHidden) {
this._lastRightHiddenState = this._rightHidden;
this.$.tabsContainer.scrollLeft -= this._rightHidden ? -23 : 23;
}
}
}