mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 02:46:38 +00:00
Add simple picture card (#1385)
* Add simple picture card * navigate_path -> navigation_path
This commit is contained in:
parent
c868df2718
commit
cf5460bf58
67
src/panels/lovelace/cards/hui-picture-card.js
Normal file
67
src/panels/lovelace/cards/hui-picture-card.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../../../components/ha-card.js';
|
||||||
|
|
||||||
|
import NavigateMixin from '../../../mixins/navigate-mixin.js';
|
||||||
|
|
||||||
|
/*
|
||||||
|
* @appliesMixin NavigateMixin
|
||||||
|
*/
|
||||||
|
class HuiPictureCard extends NavigateMixin(PolymerElement) {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
ha-card {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
ha-card[clickable] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<ha-card on-click="_cardClicked" clickable$='[[_computeClickable(_config)]]'>
|
||||||
|
<img src='[[_config.image]]' />
|
||||||
|
</ha-card>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
hass: Object,
|
||||||
|
_config: Object,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getCardSize() {
|
||||||
|
return 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
setConfig(config) {
|
||||||
|
if (!config || !config.image) {
|
||||||
|
throw new Error('Error in card configuration.');
|
||||||
|
}
|
||||||
|
|
||||||
|
this._config = config;
|
||||||
|
}
|
||||||
|
|
||||||
|
_computeClickable(config) {
|
||||||
|
return config.navigation_path || config.service;
|
||||||
|
}
|
||||||
|
|
||||||
|
_cardClicked() {
|
||||||
|
if (this._config.navigation_path) {
|
||||||
|
this.navigate(this._config.navigation_path);
|
||||||
|
}
|
||||||
|
if (this._config.service) {
|
||||||
|
const [domain, service] = this._config.service.split('.', 2);
|
||||||
|
this.hass.callService(domain, service, this._config.service_data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('hui-picture-card', HuiPictureCard);
|
@ -10,6 +10,7 @@ import '../cards/hui-horizontal-stack-card.js';
|
|||||||
import '../cards/hui-iframe-card.js';
|
import '../cards/hui-iframe-card.js';
|
||||||
import '../cards/hui-markdown-card.js';
|
import '../cards/hui-markdown-card.js';
|
||||||
import '../cards/hui-media-control-card.js';
|
import '../cards/hui-media-control-card.js';
|
||||||
|
import '../cards/hui-picture-card.js';
|
||||||
import '../cards/hui-picture-elements-card';
|
import '../cards/hui-picture-elements-card';
|
||||||
import '../cards/hui-picture-entity-card';
|
import '../cards/hui-picture-entity-card';
|
||||||
import '../cards/hui-picture-glance-card';
|
import '../cards/hui-picture-glance-card';
|
||||||
@ -30,6 +31,7 @@ const CARD_TYPES = [
|
|||||||
'iframe',
|
'iframe',
|
||||||
'markdown',
|
'markdown',
|
||||||
'media-control',
|
'media-control',
|
||||||
|
'picture',
|
||||||
'picture-elements',
|
'picture-elements',
|
||||||
'picture-entity',
|
'picture-entity',
|
||||||
'picture-glance',
|
'picture-glance',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user