Mercurial > libervia-templates

annotate default/static/chat.js @ 85:05b500bd6235

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
chat: chat implementation, first draft: this chat use the new dynamic pages feature. Updates are pushed directly by server. Identities are used to retrieve avatar, and first letter of nickname is used to generate an avatar is none is found (temporary, a more elaborate avatar generation should follow in the future). Scroll is done automatically when new messages arrive, except if scroll is not at the end, as it probably means that user is checking history. User can resize text area and use [shift] + [enter] to enter multi-line messages. History will then scroll to bottom after message has been sent.
author Goffi <goffi@goffi.org>
date Wed, 03 Jan 2018 01:12:16 +0100
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
85
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
1 /* SàT Template: Chat page handling
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
3 * Copyright (C) 2017 Jérôme Poisson (goffi@goffi.org)
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
4 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5 * This program is free software: you can redistribute it and/or modify
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
6 * it under the terms of the GNU Affero General Public License as published by
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
7 * the Free Software Foundation, either version 3 of the License, or
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
8 * (at your option) any later version.
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
9 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
10 * This program is distributed in the hope that it will be useful,
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
13 * GNU Affero General Public License for more details.
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 * You should have received a copy of the GNU Affero General Public License
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
16 * along with this program. If not, see <http://www.gnu.org/licenses/>.
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
17 */
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
20 var msgInput = document.getElementById('message_input');
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
21 var messages = document.getElementById('messages');
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
22 const messagesTransitionOri = messages.style.transition;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
23
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
24 msgInput.addEventListener('keypress', function(event) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
25 if (event.which == 13 && !event.shiftKey) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
26 if (messages.style.height !== '100%') {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
27 messages.style.transition = messagesTransitionOri;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
28 setTimeout(function() {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
29 messages.style.transition = 'initial';
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
30 messages.scrollTop = messages.scrollHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
31 }, 1000);
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
32 messages.style.height = "100%";
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
33 }
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
34 if (!this.value.trim()) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
35 return;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
36 }
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
37 socket.send({'type': 'msg',
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
38 'body': this.value});
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
39 this.value = '';
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
40 event.preventDefault();
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41 }}
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
42 );
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
43
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
44 var mutationCb = function(mutationsList) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 scrollPos = messages.scrollTop + messages.clientHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
46 if (messages.lastChild.offsetTop - scrollPos - 10 <= 0) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
47 // we auto scroll only if we are at the bottom of the page
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
48 // else the use is probably checking history
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
49 // Note thas this doesn't take margin into account,
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
50 // we suppose margin to be 0 for messages children
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
51 messages.scrollTop = messages.scrollHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
52 }
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
53 };
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
54
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
55 var observer = new MutationObserver(mutationCb);
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
56
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
57 observer.observe(messages, { childList: true });
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
58 // we want to start with scrolling at bottom
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
59 messages.scrollTop = messages.scrollHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
60 messages.style.transition = 'initial';