Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use lit-html to render URLs

Browse Source
This commit is contained in:
JC Brand 2020-03-06 11:16:04 +01:00
parent 366dee0aa5
commit c9f29f76e5
12 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
spec/http-file-upload.js
View File

@ -324,10 +324,8 @@
await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
// Check that the image renders
expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.trim()).toEqual(
`<!-- src/templates/image.html -->\n`+
`<a href="${base_url}/logo/conversejs-filled.svg" target="_blank" rel="noopener">`+
`<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg">`+
`</a>`);
`<!----><a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
`<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a><!---->`);
XMLHttpRequest.prototype.send = send_backup;
done();
}));
@ -430,10 +428,9 @@
await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
// Check that the image renders
expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.trim()).toEqual(
`<!-- src/templates/image.html -->\n`+
`<a href="${base_url}/logo/conversejs-filled.svg" target="_blank" rel="noopener">`+
`<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg">`+
`</a>`);
`<!----><a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
`<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a><!---->`);
XMLHttpRequest.prototype.send = send_backup;
done();
}));

28
spec/messages.js
View File

@ -1920,9 +1920,8 @@
expect(msg.textContent).toEqual('Have you heard this funny audio?');
let media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/audio.html -->'+
'<audio controls="" src="https://montague.lit/audio.mp3"></audio>'+
'<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3">Download audio file "audio.mp3"</a>');
`<!----> <audio controls="" src="https://montague.lit/audio.mp3"></audio> `+
`<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3"><!---->Download audio file "audio.mp3"<!----></a><!---->`);
// If the <url> and <body> contents is the same, don't duplicate.
stanza = u.toStanza(`
@ -1938,10 +1937,9 @@
expect(msg.innerHTML).toEqual('<!-- message gets added here via renderMessage -->'); // Emtpy
media = view.el.querySelector('.chat-msg:last-child .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/audio.html -->'+
'<audio controls="" src="https://montague.lit/audio.mp3"></audio>'+
'<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3">Download audio file "audio.mp3"</a>'
);
`<!----> <audio controls="" src="https://montague.lit/audio.mp3"></audio> `+
`<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3">`+
`<!---->Download audio file "audio.mp3"<!----></a><!---->`);
done();
}));
@ -1970,8 +1968,8 @@
expect(msg.textContent).toEqual('Have you seen this funny video?');
let media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/video.html -->'+
'<video controls="" preload="metadata" src="https://montague.lit/video.mp4" style="max-height: 50vh"></video>');
`<!----><video controls="" preload="metadata" style="max-height: 50vh" src="https://montague.lit/video.mp4"></video><!---->`);
// If the <url> and <body> contents is the same, don't duplicate.
stanza = u.toStanza(`
@ -1987,8 +1985,7 @@
expect(msg.innerHTML).toEqual('<!-- message gets added here via renderMessage -->'); // Emtpy
media = view.el.querySelector('.chat-msg:last-child .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/video.html -->'+
'<video controls="" preload="metadata" src="https://montague.lit/video.mp4" style="max-height: 50vh"></video>');
`<!----><video controls="" preload="metadata" style="max-height: 50vh" src="https://montague.lit/video.mp4"></video><!---->`);
done();
}));
@ -2017,8 +2014,7 @@
expect(msg.textContent).toEqual('Have you downloaded this funny file?');
const media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/file.html -->'+
'<a target="_blank" rel="noopener" href="https://montague.lit/funny.pdf">Download file "funny.pdf"</a>');
`<!----><a target="_blank" rel="noopener" href="https://montague.lit/funny.pdf"><!---->Download file "funny.pdf"<!----></a><!---->`);
done();
}));
@ -2050,10 +2046,8 @@
expect(msg.textContent).toEqual('Have you seen this funny image?');
const media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
`<!-- src/templates/image.html -->`+
`<a href="${base_url}/logo/conversejs-filled.svg" target="_blank" rel="noopener">`+
`<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg">`+
`</a>`);
`<!----><a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
`<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a><!---->`);
done();
}));
});

4
src/converse-message-view.js
View File

@ -262,9 +262,7 @@ converse.plugins.add('converse-message-view', {
));
const url = this.model.get('oob_url');
if (url) {
msg.querySelector('.chat-msg__media').innerHTML = this.transformOOBURL(url);
}
url && render(this.transformOOBURL(url), msg.querySelector('.chat-msg__media'));
if (!is_retracted) {
const text = this.model.getMessageText();

2
src/templates/audio.html
View File

@ -1,2 +0,0 @@
<audio controls src="{{{o.url}}}"></audio>
<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.label_download}}}</a>

7
src/templates/audio.js Normal file
View File

@ -0,0 +1,7 @@
import { html } from "lit-html";
export default (o) => html`
<audio controls src="${o.url}"></audio>
<a target="_blank" rel="noopener" href="${o.url}">${o.label_download}</a>
`;

1
src/templates/file.html
View File

@ -1 +0,0 @@
<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.label_download}}}</a>

3
src/templates/file.js Normal file
View File

@ -0,0 +1,3 @@
import { html } from "lit-html";
export default (o) => html`<a target="_blank" rel="noopener" href="${o.url}">${o.label_download}</a>`;

1
src/templates/image.html
View File

@ -1 +0,0 @@
<a href="{{{o.url}}}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="{{{o.url}}}"/></a>

3
src/templates/image.js Normal file
View File

@ -0,0 +1,3 @@
import { html } from "lit-html";
export default (o) => html`<a href="${o.url}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="${o.url}"/></a>`;

1
src/templates/video.html
View File

@ -1 +0,0 @@
<video controls preload="metadata" src="{{{o.url}}}" style="max-height: 50vh"></video>

3
src/templates/video.js Normal file
View File

@ -0,0 +1,3 @@
import { html } from "lit-html";
export default (o) => html`<video controls preload="metadata" src="${o.url}" style="max-height: 50vh"></video>`;

8
src/utils/html.js
View File

@ -7,8 +7,8 @@ import URI from "urijs";
import _ from "../headless/lodash.noconflict";
import log from '@converse/headless/log';
import sizzle from "sizzle";
import tpl_audio from "../templates/audio.html";
import tpl_file from "../templates/file.html";
import tpl_audio from "../templates/audio.js";
import tpl_file from "../templates/file.js";
import tpl_form_captcha from "../templates/form_captcha.html";
import tpl_form_checkbox from "../templates/form_checkbox.html";
import tpl_form_input from "../templates/form_input.html";
@ -16,9 +16,9 @@ import tpl_form_select from "../templates/form_select.html";
import tpl_form_textarea from "../templates/form_textarea.html";
import tpl_form_url from "../templates/form_url.html";
import tpl_form_username from "../templates/form_username.html";
import tpl_image from "../templates/image.html";
import tpl_image from "../templates/image.js";
import tpl_select_option from "../templates/select_option.html";
import tpl_video from "../templates/video.html";
import tpl_video from "../templates/video.js";
import u from "../headless/utils/core";
const URL_REGEX = /\b(https?\:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b\/?/g;