From 1fe6015787226f47903f79a7bf3d904bd6b52e91 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 26 Apr 2018 18:07:52 +0200 Subject: [PATCH] Reuse chatroom and chatbox markup across mockups --- mockup/avatars.js | 24 +++ mockup/chatbox.html | 4 +- mockup/chatbox.js | 20 +++ mockup/chatroom.html | 4 +- mockup/chatroom.js | 20 +++ mockup/overlayed.html | 352 +----------------------------------------- mockup/user-panel.js | 27 +--- 7 files changed, 78 insertions(+), 373 deletions(-) create mode 100644 mockup/avatars.js create mode 100644 mockup/chatbox.js create mode 100644 mockup/chatroom.js 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 @@ -
+
@@ -241,6 +241,7 @@ + @@ -251,6 +252,7 @@ new Modals(); new Sidebar(); new UserPanel(); + window.renderAvatars(document.querySelector('.chatroom')); }); diff --git a/mockup/chatroom.js b/mockup/chatroom.js new file mode 100644 index 000000000..4bc004f1f --- /dev/null +++ b/mockup/chatroom.js @@ -0,0 +1,20 @@ +/*global Backbone, _, window */ +const ChatRoom = Backbone.NativeView.extend({ + el: '.chatroom', + + initialize () { + this.render(); + }, + + render () { + const xhr = new XMLHttpRequest(); + xhr.open('GET', 'chatroom.html', true); + xhr.onload = () => { + var parser = new DOMParser(); + var doc = parser.parseFromString(xhr.responseText, "text/html"); + this.el.innerHTML = doc.querySelector('.chatroom').innerHTML; + window.renderAvatars(this.el); + } + xhr.send(); + } +}); diff --git a/mockup/overlayed.html b/mockup/overlayed.html index 941b4d3fa..89c37103a 100644 --- a/mockup/overlayed.html +++ b/mockup/overlayed.html @@ -24,351 +24,8 @@
-
-
- -
-
-
-
- User Avatar -
-
Juliet Capulet -

On the balcony

-
-
-
-
- - -
-
- -
-
-
This is an info message
-
This is an error message
- -
- -
- - Romeo Montague - 15:31 - -

- He jests at scars that never felt a wound. -

-
-
- -
-
- -
- -
- -
- - Romeo Montague - 15:31 - -

- But soft, what light through yonder window breaks? -

-
-
- -
- -
- - Romeo Montague - 15:31 - -

- It is the east and Juliet is the sun! -

-
-
- -
- -
- - Romeo Montague - 15:31 - -

- Arise, fair sun, and kill the envious moon, -

-
-
- -
Romeo Montague is busy
- -
- -
- - Juliet Capulet - 15:31 - -

- O Romeo, Romeo! wherefore art thou Romeo? - Deny thy father and refuse thy name; - Or, if thou wilt not, be but sworn my love, - And I'll no longer be a Capulet. -

-
-
-
- -
- - -
-
-
-
- -
-
-
-
-
ACT II. SCENE II. Capulet's orchard.
-

Two households, both alike in dignity, In fair Verona, where we lay our scene.

-
-
- - - -
-
- -
-
-
-
-
- -
- -
- Romeo Montague has entered the room
- -
- -
- - Romeo Montague - 15:31 - -

He jests at scars that never felt a wound.

-
-
- -
-
- -
- -
- Juliet has entered the room
- -
- -
- - Romeo Montague - 19:36 - -

- But, soft! what light through yonder window breaks? -

-
-
-
- -
- - Romeo Montague - 19:36 - -

It is the east, and Juliet is the sun.

-
-
-
- -
- - Romeo Montague - 19:36 - -

Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief

-
-
- - -
- -
- - Juliet Capulet - 19:43 - -

- O Romeo, Romeo! wherefore art thou Romeo? - Deny thy father and refuse thy name; - Or, if thou wilt not, be but sworn my love, - And I'll no longer be a Capulet. -

-
-
- -
Mercutio has entered the room
-
Topic set by Mercutio
-
Converse.js: The latest release is 3.3.4. Please be - patient if your questions aren't answered immediately. We're all in different timezones.
- -
- -
- - Mercutio - 19:49 - -

I mean, sir, in delay We waste our lights in vain, like lamps by day.

-
-
- -
- -
- - Mercutio - 19:49 - -

- Take our good meaning, for our judgment sits. - Five times in that ere once in our five wits.

-
-
- -
- -
- - Mercutio - 19:49 - -

- True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy, - Which is as thin of substance as the air And more inconstant than the wind, who wooes - Even now the frozen bosom of the north, And, being anger'd, puffs away from thence, - Turning his face to the dew-dropping south. -

-
- -
-
▼ You have unread messages ▼
-
-
    -
  • -
    • -
    • -
- -
-
- -
-

Occupants:

-
- - -
- -
    -
  • -
    Juliet Capulet
    • -
  • -
    Romeo Montague
    • -
  • -
    Mercutio
    • -
  • -
    Lady Montague
    • -
  • -
    Lord Montague
    • -
  • -
    Friar Laurence
    • -
  • -
    Tybalt
    • -
  • -
    Paris
    • -
  • -
    Lord Capulet
    • -
  • -
    Benvolio
    • -
  • -
    Lady Capulet
    • -
  • -
    Balthasar
    • -
  • -
    Escalus, Prince of Verona
    • -
  • -
    Peter
    • -
  • -
    Abram
    • -
  • -
    Sampson
    • -
  • -
    The Nurse
    • -
  • -
    Gregory
    • -
  • -
    Friar John
    • -
  • -
    Servant
    • -
-
-

Features

-
    -
  •  
    • -
  •  
    • -
  •  
    • -
  •  
    • -
  •  
    • -
  •  
    • -
-
-
-
-
-
+
+