onkelbeh/ha-frontend-cdce8p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

IntersectionObserver fixes (#964)

Browse Source 
* IntersectionObserver fixes

* handle 'card -> entities -> card' case

* fix typo
This commit is contained in:
Andrey
2018-03-04 10:22:53 -08:00
committed by Paulus Schoutsen
parent addad74019
commit 19705a9c2b
1 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cards/ha-card-chooser.html
+29 -22
View File
@@ -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);
}
}