3d42425083
- Render images as thumbnails - Use the image.html template when rendering images from pasted URLs - Update message and spoiler markup to render avatars - Use the default avatar as fallback when user doesn't have one - Instead of 'me' render own name or JID
60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
/*global _, converse_utils */
|
|
const u = converse_utils;
|
|
|
|
window.renderAvatars = function (el) {
|
|
el = el || document;
|
|
const canvasses = el.querySelectorAll('canvas.avatar');
|
|
_.each(canvasses, (canvas_el) => {
|
|
const avatar_url = canvas_el.getAttribute('data-avatar');
|
|
if (!avatar_url) {
|
|
return;
|
|
}
|
|
const ctx = canvas_el.getContext('2d');
|
|
const img = new Image();
|
|
|
|
img.onload = function () {
|
|
const canvas = ctx.canvas ;
|
|
const hRatio = canvas.width / img.width ;
|
|
const vRatio = canvas.height / img.height ;
|
|
const ratio = Math.min ( hRatio, vRatio );
|
|
const centerShift_x = ( canvas.width - img.width*ratio ) / 2;
|
|
const centerShift_y = ( canvas.height - img.height*ratio ) / 2;
|
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
|
ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
|
|
};
|
|
img.src = avatar_url;
|
|
});
|
|
}
|
|
|
|
function toggleSpoilerMessage (ev) {
|
|
if (ev && ev.preventDefault) {
|
|
ev.preventDefault();
|
|
}
|
|
const toggle_el = ev.target,
|
|
icon_el = toggle_el.firstElementChild;
|
|
|
|
u.slideToggleElement(
|
|
toggle_el.parentElement.parentElement.querySelector('.spoiler')
|
|
);
|
|
if (toggle_el.getAttribute("data-toggle-state") == "closed") {
|
|
toggle_el.textContent = 'Show less';
|
|
icon_el.classList.remove("fa-eye");
|
|
icon_el.classList.add("fa-eye-slash");
|
|
toggle_el.insertAdjacentElement('afterBegin', icon_el);
|
|
toggle_el.setAttribute("data-toggle-state", "open");
|
|
} else {
|
|
toggle_el.textContent = 'Show more';
|
|
icon_el.classList.remove("fa-eye-slash");
|
|
icon_el.classList.add("fa-eye");
|
|
toggle_el.insertAdjacentElement('afterBegin', icon_el);
|
|
toggle_el.setAttribute("data-toggle-state", "closed");
|
|
}
|
|
}
|
|
|
|
window.initSpoilers = function () {
|
|
const spoilers = document.querySelectorAll('.spoiler-toggle');
|
|
_.each(spoilers, (spoiler_el) => {
|
|
spoiler_el.addEventListener('click', toggleSpoilerMessage);
|
|
});
|
|
}
|