jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages 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 20:22:53 +02:00 committed by Paulus Schoutsen
parent addad74019
commit 19705a9c2b
1 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/cards/ha-card-chooser.html
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) { cardDataChanged(newData) {
if (!newData) return; if (!newData) return;
// ha-entities-card is exempt from observer as it doesn't load heavy resources. // ha-entities-card is exempt from observer as it doesn't load heavy resources.
@ -43,29 +70,9 @@ class HaCardChooser extends Polymer.Element {
return; return;
} }
if (!this.observer) { if (!this.observer) {
this.observer = new IntersectionObserver((entries) => { this.createObserver();
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);
} }
if (!this._detachedChild) { if (this._updatesAllowed) {
this._updateCard(newData); this._updateCard(newData);
} }
} }