mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 00:06:35 +00:00
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:
parent
a6340fb856
commit
6ad0c254b5
@ -38,7 +38,7 @@
|
||||
}
|
||||
</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>
|
||||
<paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' hidden='[[hiddenslider]]' pin
|
||||
on-change='selectedValueChanged' on-tap='stopPropagation' id='slider'>
|
||||
@ -73,11 +73,11 @@ class StateCardInputNumber extends Polymer.mixinBehaviors([
|
||||
super.ready();
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
this.hiddenState(entry.contentRect.width);
|
||||
entries.forEach(() => {
|
||||
this.hiddenState();
|
||||
});
|
||||
});
|
||||
ro.observe(this.$.slider);
|
||||
ro.observe(this.$.input_number_card);
|
||||
} else {
|
||||
this.addEventListener('iron-resize', this.hiddenState);
|
||||
}
|
||||
@ -126,11 +126,9 @@ class StateCardInputNumber extends Polymer.mixinBehaviors([
|
||||
};
|
||||
}
|
||||
|
||||
hiddenState(sliderwidth) {
|
||||
hiddenState() {
|
||||
if (this.mode !== 'slider') return;
|
||||
if (isNaN(sliderwidth)) {
|
||||
sliderwidth = this.$.slider.offsetWidth;
|
||||
}
|
||||
const sliderwidth = this.$.slider.offsetWidth;
|
||||
if (sliderwidth < 100) {
|
||||
this.$.sliderstate.hidden = true;
|
||||
} else if (sliderwidth >= 145) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user