jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix resizeObserver loop #12192 (#867)

Browse Source 
When the slider width is updated, resizeObserver prevent for firing the function another time.
Exemple: https://jsfiddle.net/ba1ad26e/11/
Compete doc: https://wicg.github.io/ResizeObserver/#html-event-loop
Solution: Observe the width change of the card instead of the slider. If the state value is hidden/displayed, it won't change again the slider width and so it will prevent the msg in the log
Drawback: the function cannot use the width sent by the resizeObserver anymore as it's no longer the slider width but the card width
This commit is contained in:
Victor Cerutti 2018-02-06 07:31:00 +01:00 committed by Paulus Schoutsen
parent a6340fb856
commit 6ad0c254b5
1 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/state-summary/state-card-input_number.html
View File

@ -38,7 +38,7 @@
} }
</style> </style>
<div class='horizontal justified layout'> <div class='horizontal justified layout' id='input_number_card'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info> <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' hidden='[[hiddenslider]]' pin <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' hidden='[[hiddenslider]]' pin
on-change='selectedValueChanged' on-tap='stopPropagation' id='slider'> on-change='selectedValueChanged' on-tap='stopPropagation' id='slider'>
@ -73,11 +73,11 @@ class StateCardInputNumber extends Polymer.mixinBehaviors([
super.ready(); super.ready();
if (typeof ResizeObserver === 'function') { if (typeof ResizeObserver === 'function') {
const ro = new ResizeObserver((entries) => { const ro = new ResizeObserver((entries) => {
entries.forEach((entry) => { entries.forEach(() => {
this.hiddenState(entry.contentRect.width); this.hiddenState();
}); });
}); });
ro.observe(this.$.slider); ro.observe(this.$.input_number_card);
} else { } else {
this.addEventListener('iron-resize', this.hiddenState); this.addEventListener('iron-resize', this.hiddenState);
} }
@ -126,11 +126,9 @@ class StateCardInputNumber extends Polymer.mixinBehaviors([
}; };
} }
hiddenState(sliderwidth) { hiddenState() {
if (this.mode !== 'slider') return; if (this.mode !== 'slider') return;
if (isNaN(sliderwidth)) { const sliderwidth = this.$.slider.offsetWidth;
sliderwidth = this.$.slider.offsetWidth;
}
if (sliderwidth < 100) { if (sliderwidth < 100) {
this.$.sliderstate.hidden = true; this.$.sliderstate.hidden = true;
} else if (sliderwidth >= 145) { } else if (sliderwidth >= 145) {