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

Always render avatar via lit-html

Browse Source 
Fixes #2244 by checking if image already is in the `data:` format.
This commit is contained in:
JC Brand 2020-09-26 21:07:46 +02:00
parent 5dac2d8873
commit 904a1394eb
5 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/converse-chatboxviews.js
View File

@ -5,7 +5,7 @@
*/
import './components/converse.js';
import "@converse/headless/converse-chatboxes";
import tpl_avatar from "templates/avatar.svg";
import tpl_avatar from "templates/avatar.js";
import tpl_background_logo from "templates/background_logo.js";
import tpl_converse from "templates/converse.js";
import { Overview } from "@converse/skeletor/src/overview";
@ -30,11 +30,10 @@ const AvatarMixin = {
'classes': avatar_el.getAttribute('class'),
'width': avatar_el.getAttribute('width'),
'height': avatar_el.getAttribute('height'),
'image_type': this.model.vcard.get('image_type'),
'image': this.model.vcard.get('image')
}
const image_type = this.model.vcard.get('image_type');
const image = this.model.vcard.get('image');
data['image'] = "data:" + image_type + ";base64," + image;
avatar_el.outerHTML = tpl_avatar(data);
avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
}
},
};

9
src/templates/avatar.js
View File

@ -1,6 +1,11 @@
import { html } from "lit-html";
const getImgHref = (image, image_type) => {
return image.startsWith('data:') ? image : `data:${image_type};base64,${image}`;
}
export default (o) => html`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="${o.classes}" width="${o.width}" height="${o.height}">
<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="data:${o.image_type};base64,${o.image}"/>
<svg xmlns="http://www.w3.org/2000/svg" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="${getImgHref(o.image, o.image_type)}"/>
</svg>`;

3
src/templates/avatar.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="{{{o.classes}}}" width="{{{o.width}}}" height="{{{o.height}}}">
<image width="{{{o.width}}}" height="{{{o.height}}}" preserveAspectRatio="xMidYMid meet" href="{{{o.image}}}"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 277 B

23
src/templates/directives/avatar.js
View File

@ -1,28 +1,13 @@
import xss from "xss/dist/xss";
import { directive, html } from "lit-html";
import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
const whitelist_opts = {
'whiteList': {
'svg': ['xmlns', 'class', 'width', 'height'],
'image': ['width', 'height', 'preserveAspectRatio', 'href']
}
};
const tpl_svg = (o) => xss.filterXSS(`<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="${o.image}"/>`, whitelist_opts);
const tpl_avatar = (o) => html`
<svg xmlns="http://www.w3.org/2000/svg" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
${ unsafeSVG(tpl_svg(o)) }
</svg>
`;
import tpl_avatar from '../avatar.js';
import { directive } from "lit-html";
export const renderAvatar = directive(o => part => {
const data = {
'classes': o.classes || '',
'classes': o.classes ? `${o.classes} avatar` : 'avatar',
'height': o.width || 36,
'image': o.image,
'image_type': o.image_type,
'width': o.height || 36,
}
part.setValue(tpl_avatar(data));

10
src/utils/html.js
View File

@ -177,10 +177,14 @@ u.applyDragResistance = function (value, default_value) {
};
/**
* Return the height of the passed in DOM element,
* based on the heights of its children.
* @method u#calculateElementHeight
* @param {HTMLElement} el
* @returns {integer}
*/
u.calculateElementHeight = function (el) {
/* Return the height of the passed in DOM element,
* based on the heights of its children.
*/
return Array.from(el.children).reduce((result, child) => result + child.offsetHeight, 0);
}