Reuse chatroom and chatbox markup across mockups

mockup/avatars.js

+/*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;
+    });
+}

mockup/chatbox.html

@@ -153,6 +153,7 @@
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
+<script type="text/javascript" src="avatars.js"></script>
 <script type="text/javascript" src="sidebar.js"></script>
 <script type="text/javascript" src="user-panel.js"></script>
 <script type="text/javascript" src="modals.js"></script>
@@ -162,7 +163,8 @@
     document.addEventListener("DOMContentLoaded", function(event) { 
         new Modals();
         new Sidebar();
-        new UserPanel();    
+        new UserPanel();
+        window.renderAvatars(document.querySelector('.chatbox:not(#controlbox)'));
     });
 </script>
 

mockup/chatbox.js

+/*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();
+    }
+});

mockup/chatroom.html

@@ -20,7 +20,7 @@
                 </div>
             </div>
 
-            <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
+            <div class="chatbox chatroom" id="chatroom">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <div class="col col-9">
@@ -241,6 +241,7 @@
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
+<script type="text/javascript" src="avatars.js"></script>
 <script type="text/javascript" src="sidebar.js"></script>
 <script type="text/javascript" src="user-panel.js"></script>
 <script type="text/javascript" src="modals.js"></script>
@@ -251,6 +252,7 @@
         new Modals();
         new Sidebar();
         new UserPanel();
+        window.renderAvatars(document.querySelector('.chatroom'));
     });
 </script>
 

mockup/chatroom.js

+/*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();
+    }
+});

mockup/user-panel.js

@@ -16,33 +16,8 @@ const UserPanel = Backbone.NativeView.extend({
                     backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
                     keyboard: true // we want to dismiss Modal on pressing Esc key
                 }));
-            this.renderAvatar();
+            window.renderAvatars(this.el);
         }
         xhr.send();
-    },
-
-    renderAvatar () {
-        const canvasses = document.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;
-        });
-
     }
 });