xmpp.chapril.org-conversejs/mockup/utils.js
JC Brand 3d42425083 Some UI improvements
- 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
2018-04-30 15:37:36 +02:00

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);
});
}