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

Re-add wrapper anchor for unfurl images

Browse Source 
We don't want the wrapper for interactive elements (GIF, video, audio),
but for images we still want them to link to the unfurled URL.
This commit is contained in:
JC Brand 2021-08-10 13:45:54 +02:00
parent edd3b681c5
commit 8eac031047
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/muc-views/tests/unfurls.js
View File

@ -79,8 +79,8 @@ describe("A Groupchat Message", function () {
const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
expect(unfurl.querySelector('.card-img-top').getAttribute('text')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
expect(unfurl.querySelector('.card-img-top a')?.getAttribute('href')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
expect(unfurl.querySelector('.card-body')).toBe(null);
expect(unfurl.querySelector('a')).toBe(null);
}));
it("will render multiple unfurls based on OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {

8
src/shared/chat/templates/unfurl.js
View File

@ -1,4 +1,4 @@
import { getURI, isGIFURL, isImageDomainAllowed } from '@converse/headless/utils/url.js';
import { getURI, isAudioURL, isGIFURL, isVideoURL, isImageDomainAllowed } from '@converse/headless/utils/url.js';
import { html } from 'lit';
@ -11,11 +11,15 @@ function isValidImage (image) {
return image && isImageDomainAllowed(image) && isValidURL(image);
}
function shouldHideMediaURL (o) {
return isGIFURL(o.url) || isVideoURL(o.url) || isAudioURL(o.url);
}
const tpl_url_wrapper = (o, wrapped_template) =>
(o.url && isValidURL(o.url) && !isGIFURL(o.url)) ?
html`<a href="${o.url}" target="_blank" rel="noopener">${wrapped_template(o)}</a>` : wrapped_template(o);
const tpl_image = (o) => html`<converse-rich-text class="card-img-top" text="${o.image}" show_images hide_media_urls .onImgLoad=${o.onload}></converse-rich-text>`;
const tpl_image = (o) => html`<converse-rich-text class="card-img-top" text="${o.image}" show_images ?hide_media_urls=${shouldHideMediaURL(o.url)} .onImgLoad=${o.onload}></converse-rich-text>`;
export default (o) => {
const valid_image = isValidImage(o.image);