diff --git a/mockup/avatars.js b/mockup/avatars.js new file mode 100644 index 000000000..2b7cd9e05 --- /dev/null +++ b/mockup/avatars.js @@ -0,0 +1,24 @@ +/*global _ */ +window.renderAvatars = function (el) { + 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; + }); +} diff --git a/mockup/chatbox.html b/mockup/chatbox.html index 9976d0cb0..04861f033 100644 --- a/mockup/chatbox.html +++ b/mockup/chatbox.html @@ -153,6 +153,7 @@ + @@ -162,7 +163,8 @@ document.addEventListener("DOMContentLoaded", function(event) { new Modals(); new Sidebar(); - new UserPanel(); + new UserPanel(); + window.renderAvatars(document.querySelector('.chatbox:not(#controlbox)')); }); diff --git a/mockup/chatbox.js b/mockup/chatbox.js new file mode 100644 index 000000000..fbb28d543 --- /dev/null +++ b/mockup/chatbox.js @@ -0,0 +1,20 @@ +/*global Backbone, _, window */ +const ChatBox = Backbone.NativeView.extend({ + el: '.chatbox:not(.chatroom):not(#controlbox)', + + initialize () { + this.render(); + }, + + render () { + const xhr = new XMLHttpRequest(); + xhr.open('GET', 'chatbox.html', true); + xhr.onload = () => { + var parser = new DOMParser(); + var doc = parser.parseFromString(xhr.responseText, "text/html"); + this.el.innerHTML = doc.querySelector('.chatbox:not(.chatroom):not(#controlbox)').innerHTML; + window.renderAvatars(this.el); + } + xhr.send(); + } +}); diff --git a/mockup/chatroom.html b/mockup/chatroom.html index 4342c846b..5afc3eeb7 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -20,7 +20,7 @@ -
Two households, both alike in dignity, In fair Verona, where we lay our scene.
-Occupants:
- - -Features
-