diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index d61fc39c52..54b5a5efaf 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -121,9 +121,11 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
_stateObjChanged(newVal, oldVal) {
if (!newVal) {
- this._dialogOpen = false;
- this._page = null;
- this._registryInfo = null;
+ this.setProperties({
+ _dialogOpen: false,
+ _page: null,
+ _registryInfo: null,
+ });
return;
}
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.html b/src/dialogs/more-info/controls/more-info-alarm_control_panel.html
index 38bf0443ee..acad36ffb1 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.html
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.html
@@ -16,7 +16,7 @@
value='{{enteredCode}}'
pattern='[[codeFormat]]'
type='password'
- hidden$='[[!codeInputVisible]]'
+ hidden$='[[!codeFormat]]'
disabled='[[!codeInputEnabled]]'
>
@@ -68,10 +68,6 @@ class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.El
type: Boolean,
value: false,
},
- codeInputVisible: {
- type: Boolean,
- value: false,
- },
codeInputEnabled: {
type: Boolean,
value: false,
@@ -97,25 +93,20 @@ class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.El
stateObjChanged(newVal, oldVal) {
if (newVal) {
- this.codeFormat = newVal.attributes.code_format;
- this.codeInputVisible = this.codeFormat !== null;
- this.codeInputEnabled = (
- newVal.state === 'armed_home' ||
- newVal.state === 'armed_away' ||
- newVal.state === 'armed_night' ||
- newVal.state === 'armed_custom_bypass' ||
- newVal.state === 'disarmed' ||
- newVal.state === 'pending' ||
- newVal.state === 'triggered');
- this.disarmButtonVisible = (
+ const props = {
+ codeFormat: newVal.attributes.code_format,
+ armHomeButtonVisible: newVal.state === 'disarmed',
+ armAwayButtonVisible: newVal.state === 'disarmed',
+ };
+ props.disarmButtonVisible = (
newVal.state === 'armed_home' ||
newVal.state === 'armed_away' ||
newVal.state === 'armed_night' ||
newVal.state === 'armed_custom_bypass' ||
newVal.state === 'pending' ||
newVal.state === 'triggered');
- this.armHomeButtonVisible = newVal.state === 'disarmed';
- this.armAwayButtonVisible = newVal.state === 'disarmed';
+ props.codeInputEnabled = props.disarmButtonVisible || newVal.state === 'disarmed';
+ this.setProperties(props);
}
if (oldVal) {
setTimeout(() => {
diff --git a/src/dialogs/more-info/controls/more-info-climate.html b/src/dialogs/more-info/controls/more-info-climate.html
index db611e8fe6..3f483416ec 100644
--- a/src/dialogs/more-info/controls/more-info-climate.html
+++ b/src/dialogs/more-info/controls/more-info-climate.html
@@ -287,9 +287,13 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
}
stateObjChanged(newVal, oldVal) {
- this.awayToggleChecked = newVal.attributes.away_mode === 'on';
- this.auxToggleChecked = newVal.attributes.aux_heat === 'on';
- this.onToggleChecked = newVal.state !== 'off';
+ if (newVal) {
+ this.setProperties({
+ awayToggleChecked: newVal.attributes.away_mode === 'on',
+ auxToggleChecked: newVal.attributes.aux_heat === 'on',
+ onToggleChecked: newVal.state !== 'off',
+ });
+ }
if (oldVal) {
this._debouncer = Polymer.Debouncer.debounce(
diff --git a/src/dialogs/more-info/controls/more-info-cover.html b/src/dialogs/more-info/controls/more-info-cover.html
index 27353dfd98..2c3cb2a11a 100644
--- a/src/dialogs/more-info/controls/more-info-cover.html
+++ b/src/dialogs/more-info/controls/more-info-cover.html
@@ -95,8 +95,12 @@
}
stateObjChanged(newVal) {
- this.coverPositionSliderValue = newVal.attributes.current_position;
- this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
+ if (newVal) {
+ this.setProperties({
+ coverPositionSliderValue: newVal.attributes.current_position,
+ coverTiltPositionSliderValue: newVal.attributes.current_tilt_position,
+ });
+ }
}
computeClassNames(stateObj) {
diff --git a/src/dialogs/more-info/controls/more-info-fan.html b/src/dialogs/more-info/controls/more-info-fan.html
index 7b67c78fff..a391d1367d 100644
--- a/src/dialogs/more-info/controls/more-info-fan.html
+++ b/src/dialogs/more-info/controls/more-info-fan.html
@@ -104,12 +104,12 @@ class MoreInfoFan extends window.hassMixins.EventsMixin(Polymer.Element) {
}
stateObjChanged(newVal, oldVal) {
- this.oscillationToggleChecked = newVal.attributes.oscillating;
-
- if (newVal.attributes.speed_list) {
- this.speedIndex = newVal.attributes.speed_list.indexOf(newVal.attributes.speed);
- } else {
- this.speedIndex = -1;
+ if (newVal) {
+ this.setProperties({
+ oscillationToggleChecked: newVal.attributes.oscillating,
+ speedIndex: newVal.attributes.speed_list ?
+ newVal.attributes.speed_list.indexOf(newVal.attributes.speed) : -1,
+ });
}
if (oldVal) {
diff --git a/src/dialogs/more-info/controls/more-info-light.html b/src/dialogs/more-info/controls/more-info-light.html
index 2632d864aa..3e0aba11cc 100644
--- a/src/dialogs/more-info/controls/more-info-light.html
+++ b/src/dialogs/more-info/controls/more-info-light.html
@@ -160,22 +160,26 @@
}
stateObjChanged(newVal, oldVal) {
+ const props = {
+ brightnessSliderValue: 0
+ };
+
if (newVal && newVal.state === 'on') {
- this.brightnessSliderValue = newVal.attributes.brightness;
- this.ctSliderValue = newVal.attributes.color_temp;
- this.wvSliderValue = newVal.attributes.white_value;
+ props.brightnessSliderValue = newVal.attributes.brightness;
+ props.ctSliderValue = newVal.attributes.color_temp;
+ props.wvSliderValue = newVal.attributes.white_value;
if (newVal.attributes.rgb_color) {
- this.colorPickerColor = this.rgbArrToObj(newVal.attributes.rgb_color);
+ props.colorPickerColor = this.rgbArrToObj(newVal.attributes.rgb_color);
}
if (newVal.attributes.effect_list) {
- this.effectIndex = newVal.attributes.effect_list.indexOf(newVal.attributes.effect);
+ props.effectIndex = newVal.attributes.effect_list.indexOf(newVal.attributes.effect);
} else {
- this.effectIndex = -1;
+ props.effectIndex = -1;
}
- } else {
- this.brightnessSliderValue = 0;
}
+ this.setProperties(props);
+
if (oldVal) {
setTimeout(() => {
this.fire('iron-resize');
diff --git a/src/dialogs/more-info/controls/more-info-media_player.html b/src/dialogs/more-info/controls/more-info-media_player.html
index ba93143f00..8d903578ed 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.html
+++ b/src/dialogs/more-info/controls/more-info-media_player.html
@@ -245,27 +245,29 @@
stateObjChanged(newVal, oldVal) {
if (newVal) {
- this.isOff = newVal.state === 'off';
- this.isPlaying = newVal.state === 'playing';
- this.hasMediaControl = HAS_MEDIA_STATES.indexOf(newVal.state) !== -1;
- this.volumeSliderValue = newVal.attributes.volume_level * 100;
- this.isMuted = newVal.attributes.is_volume_muted;
- this.source = newVal.attributes.source;
- this.supportsPause = (newVal.attributes.supported_features & 1) !== 0;
- this.supportsVolumeSet = (newVal.attributes.supported_features & 4) !== 0;
- this.supportsVolumeMute = (newVal.attributes.supported_features & 8) !== 0;
- this.supportsPreviousTrack = (newVal.attributes.supported_features & 16) !== 0;
- this.supportsNextTrack = (newVal.attributes.supported_features & 32) !== 0;
- this.supportsTurnOn = (newVal.attributes.supported_features & 128) !== 0;
- this.supportsTurnOff = (newVal.attributes.supported_features & 256) !== 0;
- this.supportsPlayMedia = (newVal.attributes.supported_features & 512) !== 0;
- this.supportsVolumeButtons = (newVal.attributes.supported_features & 1024) !== 0;
- this.supportsSelectSource = (newVal.attributes.supported_features & 2048) !== 0;
- this.supportsPlay = (newVal.attributes.supported_features & 16384) !== 0;
-
+ const props = {
+ isOff: newVal.state === 'off',
+ isPlaying: newVal.state === 'playing',
+ hasMediaControl: HAS_MEDIA_STATES.indexOf(newVal.state) !== -1,
+ volumeSliderValue: newVal.attributes.volume_level * 100,
+ isMuted: newVal.attributes.is_volume_muted,
+ source: newVal.attributes.source,
+ supportsPause: (newVal.attributes.supported_features & 1) !== 0,
+ supportsVolumeSet: (newVal.attributes.supported_features & 4) !== 0,
+ supportsVolumeMute: (newVal.attributes.supported_features & 8) !== 0,
+ supportsPreviousTrack: (newVal.attributes.supported_features & 16) !== 0,
+ supportsNextTrack: (newVal.attributes.supported_features & 32) !== 0,
+ supportsTurnOn: (newVal.attributes.supported_features & 128) !== 0,
+ supportsTurnOff: (newVal.attributes.supported_features & 256) !== 0,
+ supportsPlayMedia: (newVal.attributes.supported_features & 512) !== 0,
+ supportsVolumeButtons: (newVal.attributes.supported_features & 1024) !== 0,
+ supportsSelectSource: (newVal.attributes.supported_features & 2048) !== 0,
+ supportsPlay: (newVal.attributes.supported_features & 16384) !== 0,
+ };
if (newVal.attributes.source_list !== undefined) {
- this.sourceIndex = newVal.attributes.source_list.indexOf(this.source);
+ props.sourceIndex = newVal.attributes.source_list.indexOf(this.source);
}
+ this.setProperties(props);
}
if (oldVal) {
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index 6542125a9d..9eadcb8dba 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -138,7 +138,8 @@
const DEFAULT_VIEW_ENTITY_ID = 'group.default_view';
const ALWAYS_SHOW_DOMAIN = ['persistent_notification', 'configurator'];
- class PartialCards extends window.hassMixins.EventsMixin(Polymer.Element) {
+ // eslint-disable-next-line
+ class PartialCards extends window.hassMixins.EventsMixin(window.hassMixins.NavigateMixin(Polymer.Element)) {
static get is() { return 'partial-cards'; }
static get properties() {
@@ -210,27 +211,24 @@
};
}
- constructor() {
- super();
+ ready() {
this.handleWindowChange = this.handleWindowChange.bind(this);
- this.mqls = [300, 600, 900, 1200].map(function (width) {
- var mql = window.matchMedia('(min-width: ' + width + 'px)');
- mql.addListener(this.handleWindowChange);
- return mql;
- }.bind(this));
+ this.mqls = [300, 600, 900, 1200].map(width => matchMedia(`(min-width: ${width}px)`));
+ super.ready();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.mqls.forEach(mql => mql.addListener(this.handleWindowChange));
}
disconnectedCallback() {
super.disconnectedCallback();
- this.mqls.forEach((mql) => {
- mql.removeListener(this.handleWindowChange);
- });
+ this.mqls.forEach(mql => mql.removeListener(this.handleWindowChange));
}
handleWindowChange() {
- var matchColumns = this.mqls.reduce(function (cols, mql) {
- return cols + mql.matches;
- }, 0);
+ const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
// Do -1 column if the menu is docked and open
this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
}
@@ -279,16 +277,14 @@
}
handleViewSelected(ev) {
- var view = ev.detail.item.getAttribute('data-entity') || null;
- var current = this.currentView;
+ const view = ev.detail.item.getAttribute('data-entity') || null;
- if (view !== current) {
- var path = '/states';
+ if (view !== this.currentView) {
+ let path = '/states';
if (view) {
path += '/' + view;
}
- history.pushState(null, null, path);
- this.fire('location-changed');
+ this.navigate(path);
}
}