Always render avatar via lit-html
Fixes #2244 by checking if image already is in the `data:` format.
This commit is contained in:
parent
5dac2d8873
commit
904a1394eb
@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
import './components/converse.js';
|
import './components/converse.js';
|
||||||
import "@converse/headless/converse-chatboxes";
|
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_background_logo from "templates/background_logo.js";
|
||||||
import tpl_converse from "templates/converse.js";
|
import tpl_converse from "templates/converse.js";
|
||||||
import { Overview } from "@converse/skeletor/src/overview";
|
import { Overview } from "@converse/skeletor/src/overview";
|
||||||
@ -30,11 +30,10 @@ const AvatarMixin = {
|
|||||||
'classes': avatar_el.getAttribute('class'),
|
'classes': avatar_el.getAttribute('class'),
|
||||||
'width': avatar_el.getAttribute('width'),
|
'width': avatar_el.getAttribute('width'),
|
||||||
'height': avatar_el.getAttribute('height'),
|
'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');
|
avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
|
||||||
const image = this.model.vcard.get('image');
|
|
||||||
data['image'] = "data:" + image_type + ";base64," + image;
|
|
||||||
avatar_el.outerHTML = tpl_avatar(data);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,11 @@
|
|||||||
import { html } from "lit-html";
|
import { html } from "lit-html";
|
||||||
|
|
||||||
|
const getImgHref = (image, image_type) => {
|
||||||
|
return image.startsWith('data:') ? image : `data:${image_type};base64,${image}`;
|
||||||
|
}
|
||||||
|
|
||||||
export default (o) => html`
|
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}">
|
<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="data:${o.image_type};base64,${o.image}"/>
|
<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="${getImgHref(o.image, o.image_type)}"/>
|
||||||
</svg>`;
|
</svg>`;
|
||||||
|
|
||||||
|
@ -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>
|
|
Before Width: | Height: | Size: 277 B |
@ -1,28 +1,13 @@
|
|||||||
import xss from "xss/dist/xss";
|
import tpl_avatar from '../avatar.js';
|
||||||
import { directive, html } from "lit-html";
|
import { directive } 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>
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
export const renderAvatar = directive(o => part => {
|
export const renderAvatar = directive(o => part => {
|
||||||
const data = {
|
const data = {
|
||||||
'classes': o.classes || '',
|
'classes': o.classes ? `${o.classes} avatar` : 'avatar',
|
||||||
'height': o.width || 36,
|
'height': o.width || 36,
|
||||||
'image': o.image,
|
'image': o.image,
|
||||||
|
'image_type': o.image_type,
|
||||||
'width': o.height || 36,
|
'width': o.height || 36,
|
||||||
}
|
}
|
||||||
part.setValue(tpl_avatar(data));
|
part.setValue(tpl_avatar(data));
|
||||||
|
@ -177,10 +177,14 @@ u.applyDragResistance = function (value, default_value) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
u.calculateElementHeight = function (el) {
|
/**
|
||||||
/* Return the height of the passed in DOM element,
|
* Return the height of the passed in DOM element,
|
||||||
* based on the heights of its children.
|
* based on the heights of its children.
|
||||||
|
* @method u#calculateElementHeight
|
||||||
|
* @param {HTMLElement} el
|
||||||
|
* @returns {integer}
|
||||||
*/
|
*/
|
||||||
|
u.calculateElementHeight = function (el) {
|
||||||
return Array.from(el.children).reduce((result, child) => result + child.offsetHeight, 0);
|
return Array.from(el.children).reduce((result, child) => result + child.offsetHeight, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user