Mercurial > libervia-templates
annotate sat_templates/templates/default/static/chat.js @ 293:7a4bd6de6a56
bulma (css): add missing keyframe for `spin` animation
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 27 Nov 2020 12:13:59 +0100 |
parents | e9f0a4215e46 |
children | 6a26c8a43d10 |
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'; |