2023-02-15 14:19:48 +01:00
|
|
|
import tplGif from 'templates/gif.js';
|
|
|
|
import tplImage from 'templates/image.js';
|
2021-11-19 22:24:28 +01:00
|
|
|
import { CustomElement } from './element.js';
|
|
|
|
import { api } from "@converse/headless/core";
|
2022-04-04 16:31:32 +02:00
|
|
|
import { filterQueryParamsFromURL, isGIFURL, shouldRenderMediaFromURL } from '@converse/headless/utils/url.js';
|
2021-11-19 22:24:28 +01:00
|
|
|
|
|
|
|
|
|
|
|
export default class Image extends CustomElement {
|
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
2022-04-04 16:31:32 +02:00
|
|
|
'src': { type: String },
|
2021-11-19 22:24:28 +01:00
|
|
|
'onImgLoad': { type: Function },
|
2022-04-04 16:31:32 +02:00
|
|
|
// If specified, image is wrapped in a hyperlink that points to this URL.
|
|
|
|
'href': { type: String },
|
2021-11-19 22:24:28 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2022-04-04 16:31:32 +02:00
|
|
|
if (isGIFURL(this.src) && shouldRenderMediaFromURL(this.src, 'image')) {
|
2023-02-15 14:19:48 +01:00
|
|
|
return tplGif(filterQueryParamsFromURL(this.src), true);
|
2021-11-19 22:24:28 +01:00
|
|
|
} else {
|
2023-02-15 14:19:48 +01:00
|
|
|
return tplImage({
|
2022-04-04 16:31:32 +02:00
|
|
|
'src': filterQueryParamsFromURL(this.src),
|
|
|
|
'href': this.href,
|
2021-11-19 22:24:28 +01:00
|
|
|
'onClick': this.onImgClick,
|
|
|
|
'onLoad': this.onImgLoad
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
api.elements.define('converse-image', Image);
|