If adding .png fallback fails, revert to original URL

This commit is contained in:
JC Brand 2020-09-01 12:21:32 +02:00
parent ac31d41c85
commit 496b070d2a
3 changed files with 17 additions and 8 deletions

View File

@ -850,7 +850,7 @@ If you are using prebinding, can specify the fullname of the currently
logged in user, otherwise the user's vCard will be fetched. logged in user, otherwise the user's vCard will be fetched.
geouri_regex geouri_regex
---------------- ------------
* Default: ``/https:\/\/www.openstreetmap.org\/.*#map=[0-9]+\/([\-0-9.]+)\/([\-0-9.]+)\S*/g`` * Default: ``/https:\/\/www.openstreetmap.org\/.*#map=[0-9]+\/([\-0-9.]+)\/([\-0-9.]+)\S*/g``

View File

@ -2,25 +2,34 @@ import { converse } from "@converse/headless/converse-core";
import { directive, html } from "lit-html"; import { directive, html } from "lit-html";
export const renderImage = directive((url, onLoad, onClick) => part => { /**
* lit-html directive which attempts to render an <img> element from a URL.
* It will fall back to rendering an <a> element if it can't.
*
* @param { String } src - The value that will be assigned to the `src` attribute of the `<img>` element.
* @param { String } href - The value that will be assigned to the `href` attribute of the `<img>` element.
* @param { Function } onLoad - A callback function to be called once the image has loaded.
* @param { Function } onClick - A callback function to be called once the image has been clicked.
*/
export const renderImage = directive((src, href, onLoad, onClick) => part => {
function onError () { function onError () {
const u = converse.env.utils; const u = converse.env.utils;
if (u.isURLWithImageExtension(url)) { if (u.isURLWithImageExtension(src)) {
part.setValue(u.convertUrlToHyperlink(url)); part.setValue(u.convertUrlToHyperlink(href));
part.commit(); part.commit();
} else { } else {
// Before giving up and falling back to just rendering a hyperlink, // Before giving up and falling back to just rendering a hyperlink,
// we attach `.png` and try one more time. // we attach `.png` and try one more time.
// This works with some Imgur URLs // This works with some Imgur URLs
part.setValue(renderImage(`${url}.png`, onLoad, onClick)); part.setValue(renderImage(`${src}.png`, href, onLoad, onClick));
part.commit(); part.commit();
} }
} }
part.setValue( part.setValue(
html`<a href="${url}" html`<a href="${href}"
class="chat-image__link" class="chat-image__link"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img class="chat-image img-thumbnail" src="${url}" @click=${onClick} @error=${onError} @load=${onLoad}/></a>` ><img class="chat-image img-thumbnail" src="${src}" @click=${onClick} @error=${onError} @load=${onLoad}/></a>`
); );
}); });

View File

@ -1,4 +1,4 @@
import { html } from "lit-html"; import { html } from "lit-html";
import { renderImage } from "./directives/image.js"; import { renderImage } from "./directives/image.js";
export default (o) => html`${renderImage(o.url, o.onLoad, o.onClick)}`; export default (o) => html`${renderImage(o.url, o.url, o.onLoad, o.onClick)}`;