mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
IntersectionObserver fixes (#964)
* IntersectionObserver fixes * handle 'card -> entities -> card' case * fix typo
This commit is contained in:
parent
addad74019
commit
19705a9c2b
@ -27,6 +27,33 @@ class HaCardChooser extends Polymer.Element {
|
||||
);
|
||||
}
|
||||
|
||||
createObserver() {
|
||||
this._updatesAllowed = false;
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (!entries.length) return;
|
||||
if (entries[0].isIntersecting) {
|
||||
this.style.height = '';
|
||||
if (this._detachedChild) {
|
||||
this.appendChild(this._detachedChild);
|
||||
this._detachedChild = null;
|
||||
}
|
||||
this._updateCard(this.cardData); // Don't use 'newData' as it might have changed.
|
||||
this._updatesAllowed = true;
|
||||
} else {
|
||||
// Set the card to be 48px high. Otherwise if the card is kept as 0px height then all
|
||||
// following cards would trigger the observer at once.
|
||||
const offsetHeight = this.offsetHeight;
|
||||
this.style.height = `${offsetHeight || 48}px`;
|
||||
if (this.lastChild) {
|
||||
this._detachedChild = this.lastChild;
|
||||
this.removeChild(this.lastChild);
|
||||
}
|
||||
this._updatesAllowed = false;
|
||||
}
|
||||
});
|
||||
this.observer.observe(this);
|
||||
}
|
||||
|
||||
cardDataChanged(newData) {
|
||||
if (!newData) return;
|
||||
// ha-entities-card is exempt from observer as it doesn't load heavy resources.
|
||||
@ -43,29 +70,9 @@ class HaCardChooser extends Polymer.Element {
|
||||
return;
|
||||
}
|
||||
if (!this.observer) {
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (!entries.length) return;
|
||||
if (entries[0].isIntersecting) {
|
||||
this.style.height = '';
|
||||
if (this._detachedChild) {
|
||||
this.appendChild(this._detachedChild);
|
||||
this._detachedChild = null;
|
||||
}
|
||||
this._updateCard(this.cardData); // Don't use 'newData' as it might have chnaged.
|
||||
} else {
|
||||
// Set the card to be 48px high. Otherwise if the card is kept as 0px height then all
|
||||
// following cards would trigger the observer at once.
|
||||
const offsetHeight = this.offsetHeight;
|
||||
this.style.height = `${offsetHeight || 48}px`;
|
||||
if (this.lastChild) {
|
||||
this._detachedChild = this.lastChild;
|
||||
this.removeChild(this.lastChild);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.observer.observe(this);
|
||||
this.createObserver();
|
||||
}
|
||||
if (!this._detachedChild) {
|
||||
if (this._updatesAllowed) {
|
||||
this._updateCard(newData);
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user