2020-06-03 13:53:52 +02:00
|
|
|
import { CustomElement } from './element.js';
|
|
|
|
import { __ } from '@converse/headless/i18n';
|
|
|
|
import { html } from 'lit-element';
|
|
|
|
import { renderAvatar } from "../templates/directives/avatar.js";
|
2020-07-01 21:45:18 +02:00
|
|
|
import { api } from "@converse/headless/converse-core";
|
2020-06-03 13:53:52 +02:00
|
|
|
|
|
|
|
const i18n_alt_avatar = __('Your avatar image');
|
|
|
|
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
export default class ImagePicker extends CustomElement {
|
2020-06-03 13:53:52 +02:00
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
|
|
|
'height': { type: Number },
|
|
|
|
'image': { type: String },
|
|
|
|
'width': { type: Number },
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const avatar_data = {
|
|
|
|
'height': this.height,
|
|
|
|
'image': this.image,
|
|
|
|
'width': this.width,
|
|
|
|
};
|
|
|
|
return html`
|
|
|
|
<a class="change-avatar" @click=${this.openFileSelection} title="${i18n_alt_avatar}">
|
|
|
|
${ renderAvatar(avatar_data) }
|
|
|
|
</a>
|
|
|
|
<input @change=${this.updateFilePreview} class="hidden" name="image" type="file"/>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
openFileSelection (ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
this.querySelector('input[type="file"]').click();
|
|
|
|
}
|
|
|
|
|
|
|
|
updateFilePreview (ev) {
|
|
|
|
const file = ev.target.files[0];
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onloadend = () => (this.image = reader.result);
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
api.elements.define('converse-image-picker', ImagePicker);
|