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

Add image type for picture-elements card. (#1428)

Browse Source 
* Add image type for picture-elements.

* Rebased master. Move overflow rule to parent.

* Cleaned up click handler.
This commit is contained in:
Jerad Meisner 2018-07-11 23:56:53 -07:00 committed by Paulus Schoutsen
parent c90a3dcdfd
commit 19e58c775e
1 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/panels/lovelace/cards/hui-picture-elements-card.js
View File

@ -6,9 +6,11 @@ import '../../../components/entity/ha-state-label-badge.js';
import '../../../components/entity/state-badge.js'; import '../../../components/entity/state-badge.js';
import '../../../components/ha-icon.js'; import '../../../components/ha-icon.js';
import '../../../components/ha-card.js'; import '../../../components/ha-card.js';
import '../components/hui-image.js';
import computeStateDisplay from '../../../common/entity/compute_state_display.js'; import computeStateDisplay from '../../../common/entity/compute_state_display.js';
import computeStateName from '../../../common/entity/compute_state_name.js'; import computeStateName from '../../../common/entity/compute_state_name.js';
import computeDomain from '../../../common/entity/compute_domain';
import toggleEntity from '../common/entity/toggle-entity.js'; import toggleEntity from '../common/entity/toggle-entity.js';
import EventsMixin from '../../../mixins/events-mixin.js'; import EventsMixin from '../../../mixins/events-mixin.js';
@ -16,6 +18,7 @@ import LocalizeMixin from '../../../mixins/localize-mixin.js';
import NavigateMixin from '../../../mixins/navigate-mixin.js'; import NavigateMixin from '../../../mixins/navigate-mixin.js';
const VALID_TYPES = new Set([ const VALID_TYPES = new Set([
'image',
'navigation', 'navigation',
'service-button', 'service-button',
'state-badge', 'state-badge',
@ -58,6 +61,9 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
color: var(--primary-color); color: var(--primary-color);
white-space: nowrap; white-space: nowrap;
} }
hui-image {
overflow-y: hidden;
}
</style> </style>
<ha-card header="[[_config.title]]"> <ha-card header="[[_config.title]]">
@ -81,6 +87,7 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
this._stateBadges = []; this._stateBadges = [];
this._stateIcons = []; this._stateIcons = [];
this._stateLabels = []; this._stateLabels = [];
this._images = [];
} }
ready() { ready() {
@ -139,13 +146,13 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
break; break;
case 'state-icon': case 'state-icon':
el = document.createElement('state-badge'); el = document.createElement('state-badge');
el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle')); el.addEventListener('click', () => this._handleClick(element));
el.classList.add('clickable'); el.classList.add('clickable');
this._stateIcons.push({ el, entityId }); this._stateIcons.push({ el, entityId });
break; break;
case 'state-label': case 'state-label':
el = document.createElement('div'); el = document.createElement('div');
el.addEventListener('click', () => this._handleClick(entityId, false)); el.addEventListener('click', () => this._handleClick(element));
el.classList.add('clickable', 'state-label'); el.classList.add('clickable', 'state-label');
this._stateLabels.push({ el, entityId }); this._stateLabels.push({ el, entityId });
break; break;
@ -156,6 +163,23 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
el.title = element.navigation_path; el.title = element.navigation_path;
el.classList.add('clickable'); el.classList.add('clickable');
break; break;
case 'image':
el = document.createElement('hui-image');
el.hass = this.hass;
el.entity = element.entity;
el.image = element.image;
el.stateImage = element.state_image;
el.filter = element.filter;
el.stateFilter = element.state_filter;
if (!element.camera_image && computeDomain(element.entity) === 'camera') {
el.cameraImage = element.entity;
} else {
el.cameraImage = element.camera_image;
}
this._images.push(el);
if (element.tap_action === 'none') break;
el.addEventListener('click', () => this._handleClick(element));
el.classList.add('clickable');
} }
el.classList.add('element'); el.classList.add('element');
@ -197,17 +221,34 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
el.title = ''; el.title = '';
} }
}); });
this._images.forEach((el) => {
el.hass = hass;
});
} }
_computeTooltip(stateObj) { _computeTooltip(stateObj) {
return `${computeStateName(stateObj)}: ${computeStateDisplay(this.localize, stateObj)}`; return `${computeStateName(stateObj)}: ${computeStateDisplay(this.localize, stateObj)}`;
} }
_handleClick(entityId, toggle) { _handleClick(elementConfig) {
if (toggle) { const tapAction = elementConfig.tap_action || 'more_info';
toggleEntity(this.hass, entityId);
} else { switch (tapAction) {
this.fire('hass-more-info', { entityId }); case 'more_info':
this.fire('hass-more-info', { entityId: elementConfig.entity });
break;
case 'toggle':
toggleEntity(this.hass, elementConfig.entity);
break;
case 'call_service': {
const [domain, service] = elementConfig.service.split('.', 2);
const serviceData = Object.assign(
{}, { entity_id: elementConfig.entity },
elementConfig.service_data
);
this.hass.callService(domain, service, serviceData);
}
} }
} }
} }