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

Add simple picture card (#1385)

Browse Source 
* Add simple picture card

* navigate_path -> navigation_path
This commit is contained in:
Paulus Schoutsen 2018-07-02 14:16:29 -04:00 committed by GitHub
parent c868df2718
commit cf5460bf58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/panels/lovelace/cards/hui-picture-card.js Normal file
View 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);

2
src/panels/lovelace/common/create-card-element.js
View File

@ -10,6 +10,7 @@ import '../cards/hui-horizontal-stack-card.js';
import '../cards/hui-iframe-card.js';
import '../cards/hui-markdown-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-entity-card';
import '../cards/hui-picture-glance-card';
@ -30,6 +31,7 @@ const CARD_TYPES = [
'iframe',
'markdown',
'media-control',
'picture',
'picture-elements',
'picture-entity',
'picture-glance',