diff --git a/sass/_core.scss b/sass/_core.scss
index 0e4f62b77..db59c1b05 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -100,6 +100,11 @@ body.converse-fullscreen {
background-color: #EEE !important;
}
+ .fit-content {
+ width: fit-content !important;
+ max-width: fit-content !important;
+ }
+
.nopadding {
padding: 0 !important;
}
diff --git a/src/components/message-body.js b/src/components/message-body.js
index 318d1cfe1..076e85911 100644
--- a/src/components/message-body.js
+++ b/src/components/message-body.js
@@ -1,17 +1,29 @@
import { CustomElement } from './element.js';
import { renderBodyText } from './../templates/directives/body';
import { api } from "@converse/headless/converse-core";
+import ImageModal from '../modals/image.js';
+
export default class MessageBody extends CustomElement {
static get properties () {
return {
- is_me_message: { type: Boolean },
model: { type: Object },
+ is_me_message: { type: Boolean },
text: { type: String },
}
}
+ showImageModal (ev) {
+ ev.preventDefault();
+ if (this.image_modal === undefined) {
+ this.image_modal = new ImageModal();
+ }
+ this.image_modal.src = ev.target.src;
+ this.image_modal.render();
+ this.image_modal.show(ev);
+ }
+
render () {
return renderBodyText(this);
}
diff --git a/src/modals/image.js b/src/modals/image.js
new file mode 100644
index 000000000..cdd6e5a0f
--- /dev/null
+++ b/src/modals/image.js
@@ -0,0 +1,9 @@
+import { BootstrapModal } from "../converse-modal.js";
+import tpl_image_modal from "../templates/image_modal.js";
+
+
+export default BootstrapModal.extend({
+ toHTML () {
+ return tpl_image_modal({'src': this.src});
+ }
+});
diff --git a/src/templates/directives/body.js b/src/templates/directives/body.js
index 15a0eaa68..ba55b993c 100644
--- a/src/templates/directives/body.js
+++ b/src/templates/directives/body.js
@@ -102,7 +102,7 @@ function addMapURLs (text) {
}
-function addHyperlinks (text, onImgLoad) {
+function addHyperlinks (text, onImgLoad, onImgClick) {
const objs = [];
try {
const parse_options = { 'start': /\b(?:([a-z][a-z0-9.+-]*:\/\/)|xmpp:|mailto:|www\.)/gi };
@@ -120,7 +120,9 @@ function addHyperlinks (text, onImgLoad) {
text.addTemplateResult(
url_obj.start,
url_obj.end,
- show_images && u.isImageURL(url_text) ? u.convertToImageTag(url_text, onImgLoad) : u.convertUrlToHyperlink(url_text),
+ show_images && u.isImageURL(url_text) ?
+ u.convertToImageTag(url_text, onImgLoad, onImgClick) :
+ u.convertUrlToHyperlink(url_text),
);
});
}
@@ -191,7 +193,11 @@ class MessageBodyRenderer {
*/
await api.trigger('beforeMessageBodyTransformed', this.model, text, {'Synchronous': true});
- addHyperlinks(text, () => this.scrollDownOnImageLoad());
+ addHyperlinks(
+ text,
+ () => this.scrollDownOnImageLoad(),
+ ev => this.component.showImageModal(ev)
+ );
addMapURLs(text);
await addEmojis(text);
addReferences(text, this.model);
diff --git a/src/templates/directives/image.js b/src/templates/directives/image.js
index 50f44ed7d..e2141bd0f 100644
--- a/src/templates/directives/image.js
+++ b/src/templates/directives/image.js
@@ -2,7 +2,7 @@ import { converse } from "@converse/headless/converse-core";
import { directive, html } from "lit-html";
-export const renderImage = directive((url, onLoad) => part => {
+export const renderImage = directive((url, onLoad, onClick) => part => {
function onError () {
part.setValue(converse.env.utils.convertUrlToHyperlink(url));
part.commit();
@@ -12,6 +12,6 @@ export const renderImage = directive((url, onLoad) => part => {
class="chat-image__link"
target="_blank"
rel="noopener"
- >`
+ >
`
);
});
diff --git a/src/templates/image.js b/src/templates/image.js
index 13c138340..4f2e075b1 100644
--- a/src/templates/image.js
+++ b/src/templates/image.js
@@ -1,4 +1,4 @@
import { html } from "lit-html";
import { renderImage } from "./directives/image.js";
-export default (o) => html`${renderImage(o.url, o.onLoad)}`;
+export default (o) => html`${renderImage(o.url, o.onLoad, o.onClick)}`;
diff --git a/src/templates/image_modal.js b/src/templates/image_modal.js
new file mode 100644
index 000000000..4dbbd86d6
--- /dev/null
+++ b/src/templates/image_modal.js
@@ -0,0 +1,22 @@
+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+import { modal_close_button, modal_header_close_button } from "./buttons"
+
+
+const i18n_image = __('Image: ');
+
+
+export default (o) => html`
+