Reuse chatroom and chatbox markup across mockups
This commit is contained in:
JC Brand
parent
aa6a739cfa
commit
1fe6015787
24
mockup/avatars.js
Normal file
24
mockup/avatars.js
Normal file
@ -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;
|
||||
});
|
||||
}
|
||||
@ -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>
|
||||
@ -163,6 +164,7 @@
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
window.renderAvatars(document.querySelector('.chatbox:not(#controlbox)'));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
20
mockup/chatbox.js
Normal file
20
mockup/chatbox.js
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
@ -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>
|
||||
|
||||
|
||||
20
mockup/chatroom.js
Normal file
20
mockup/chatroom.js
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
@ -24,351 +24,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<div class="col">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<img alt="User Avatar"
|
||||
class="avatar"
|
||||
height="40px" width="40px"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwHCy455JBsggAABkJJREFUeNrtnM1PE1sUwHvvTD8otWLHST/Gimi1CEgr6M6FEWuIBo2pujDVsNDEP8GN/4MbN7oxrlipG2OCgZgYlxAbkRYw1KqkIDRCSkM7nXvvW8x7vjyNeQ9m7p1p3z1LQk/v/Dhz7vkEXL161cHl9wI5Ag6IA+KAOCAOiAPigDggLhwQB2S+iNZ+PcYY/SWEEP2HAAAIoSAIoihCCP+ngDDGtVotGAz29/cfOXJEUZSOjg6n06lp2sbGRqlUWlhYyGazS0tLbrdbEASrzgksyeYJId3d3el0uqenRxRFAAAA4KdfIIRgjD9+/Pj8+fOpqSndslofEIQwHA6Pjo4mEon//qmFhYXHjx8vLi4ihBgDEnp7e9l8E0Jo165dQ0NDd+/eDYVC2/qsJElDQ0OEkKWlpa2tLZamxAhQo9EIBoOjo6MXL17csZLe3l5FUT59+lQul5l5JRaAVFWNRqN37tw5ceKEQVWRSOTw4cOFQuHbt2+iKLYCIISQLMu3b99OJpOmKAwEAgcPHszn8+vr6wzsiG6UQQhxuVyXLl0aGBgwUW0sFstkMl6v90fo1KyAMMYDAwPnzp0zXfPg4GAqlWo0Gk0MiBAiy/L58+edTqf5Aa4onj59OhaLYYybFRCEMBaL0fNxBw4cSCQStN0QRUBut3t4eJjq6U+dOiVJElVPRBFQIBDo6+ujCqirqyscDlONGykC2lYyYSR6pBoQQapHZwAoHo/TuARYAOrs7GQASFEUqn6aIiBJkhgA6ujooFpUo6iaTa7koFwnaoWadLNe81tbWwzoaJrWrICWl5cZAFpbW6OabVAEtLi4yABQsVjUNK0pAWWzWQaAcrlcswKanZ1VVZUqHYRQEwOq1Wpv3ryhCmh6erpcLjdrNl+v1ycnJ+l5UELI27dvv3//3qxxEADgy5cvExMT9Mznw4cPtFtAdAPFarU6Pj5eKpVM17yxsfHy5cvV1VXazXu62gVBKBQKT58+rdVqJqrFGL948eLdu3dU8/g/H4FBUaJYLAqC0NPTY9brMD4+PjY25mDSracOCABACJmZmXE6nUePHjWu8NWrV48ePSKEsGlAs7Agfd5nenq6Wq0mk0kjDzY2NvbkyRMIIbP2PLvhBUEQ8vl8NpuNx+M+n29bzhVjvLKycv/+/YmJCcazQuwA6YzW1tYmJyf1SY+2trZ/rRk1Go1SqfT69esHDx4UCgVmNaa/zZ/9ABUhRFXVYDB48uTJeDweiUQkSfL7/T9MA2NcqVTK5fLy8vL8/PzU1FSxWHS5XJaM4wGr9sUwxqqqer3eUCgkSZJuUBBCfTRvc3OzXC6vrKxUKhWn02nhCJ5lM4oQQo/HgxD6+vXr58+fHf8sDOp+HQDg8XgclorFU676dKLlo6yWRdItIBwQB8QBcUCtfosRQjRNQwhhjPUC4w46WXryBSHU1zgEQWBz99EFhDGu1+t+v//48ePxeFxRlD179ng8nh0Efgiher2+vr6ur3HMzMysrq7uTJVdACGEurq6Ll++nEgkPB7Pj9jPoDHqOxyqqubz+WfPnuVyuV9XPeyeagAAAoHArVu3BgcHab8CuVzu4cOHpVKJUnfA5GweY+xyuc6cOXPv3r1IJMLAR8iyPDw8XK/Xi8Wiqqqmm5KZgBBC7e3tN27cuHbtGuPVpf7+/lAoNDs7W61WzfVKpgHSSzw3b95MpVKW3MfRaDQSiczNzVUqFRMZmQOIEOL1eq9fv3727FlL1t50URRFluX5+flqtWpWEGAOIFEUU6nUlStXLKSjy759+xwOx9zcnKZpphzGHMzhcDiTydgk9r1w4YIp7RPTAAmCkMlk2FeLf/tIEKbTab/fbwtAhJBoNGrutpNx6e7uPnTokC1eMU3T0um0DZPMkZER6wERQnw+n/FFSxpy7Nix3bt3WwwIIcRgIWnHkkwmjecfRgGx7DtuV/r6+iwGhDHev3+/bQF1dnYaH6E2CkiWZdsC2rt3r8WAHA5HW1ubbQGZcjajgOwTH/4qNko1Wlg4IA6IA+KAOKBWBUQIsfNojyliKIoRRfH9+/dut9umf3wzpoUNNQ4BAJubmwz+ic+OxefzWWlBhJD29nbug7iT5sIBcUAcEAfEAXFAHBAHxOVn+QMrmWpuPZx12gAAAABJRU5ErkJggg=="/>
|
||||
</div>
|
||||
<div class="col chat-title" title="j@chat.example.org">Juliet Capulet
|
||||
<p class="user-custom-message" title="On the balcony">On the balcony</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-buttons row no-gutters">
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="message chat-info">This is an info message</div>
|
||||
<div class="message chat-info chat-error">This is an error message</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">15:31</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
He jests at scars that never felt a wound.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message date-separator">
|
||||
<hr class="separator">
|
||||
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">15:31</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
But soft, what light through yonder window breaks?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">15:31</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
It is the east and Juliet is the sun!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">15:31</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
Arise, fair sun, and kill the envious moon,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event">Romeo Montague is busy</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Juliet Capulet</span>
|
||||
<span class="chat-msg-time text-muted">15:31</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
<li class="toggle-clear">
|
||||
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||
</li>
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom row no-gutters">
|
||||
<div class="col col-9">
|
||||
<div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
|
||||
<p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
|
||||
</div>
|
||||
<div class="chatbox-buttons row no-gutters">
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="chat-area col-md-9 col-8">
|
||||
<div class="chat-content">
|
||||
<div class="message date-separator">
|
||||
<hr class="separator">
|
||||
<time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Romeo Montague"">
|
||||
Romeo Montague has entered the room</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">15:31</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">He jests at scars that never felt a wound.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message date-separator">
|
||||
<hr class="separator">
|
||||
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Juliet"">
|
||||
Juliet has entered the room</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">19:36</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
But, soft! what light through yonder window breaks?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">19:36</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">It is the east, and Juliet is the sun.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time text-muted">19:36</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Juliet Capulet</span>
|
||||
<span class="chat-msg-time text-muted">19:43</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Mercutio has entered the room</div>
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Topic set by Mercutio</div>
|
||||
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">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.</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Mercutio</span>
|
||||
<span class="chat-msg-time text-muted">19:49</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Mercutio</span>
|
||||
<span class="chat-msg-time text-muted">19:49</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
Take our good meaning, for our judgment sits.
|
||||
Five times in that ere once in our five wits.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Mercutio</span>
|
||||
<span class="chat-msg-time text-muted">19:49</span>
|
||||
</span>
|
||||
<p class="chat-msg-text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="new-msgs-indicator">▼ You have unread messages ▼</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="occupants col-md-3 col-4">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet</li>
|
||||
<li class="moderator occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Mercutio</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Montague</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
|
||||
</ul>
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"></div>
|
||||
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392"></div>
|
||||
|
||||
<div id="minimized-chats">
|
||||
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
|
||||
@ -419,9 +76,12 @@
|
||||
<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>
|
||||
<script type="text/javascript" src="chatroom.js"></script>
|
||||
<script type="text/javascript" src="chatbox.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
@ -430,6 +90,8 @@
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
new ChatRoom();
|
||||
new ChatBox();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -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;
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user