|
10
|
1 'use strict';
|
|
|
2
|
|
18
|
3 let title = document.title;
|
|
10
|
4 let currentChatId = null;
|
|
12
|
5 let eventSource;
|
|
30
|
6 let lastUpdate;
|
|
35
|
7 let userId;
|
|
10
|
8
|
|
16
|
9 function evalEvent(event) {
|
|
17
|
10 // console.log(event);
|
|
16
|
11 eval(event.data);
|
|
|
12 }
|
|
|
13
|
|
15
|
14 function setUserEventSource(userId) {
|
|
|
15 let userEventSource = new EventSource(`${location.origin}/user/${userId}`);
|
|
16
|
16 userEventSource.onmessage = evalEvent;
|
|
15
|
17 }
|
|
|
18
|
|
46
|
19 function selectChat(div,email) {
|
|
27
|
20 document.querySelector('div[content]').setAttribute('show','posts');
|
|
10
|
21 let chatId = div.getAttribute('chat');
|
|
|
22 if( chatId === currentChatId )
|
|
|
23 return;
|
|
|
24 let selected = div.parentNode.querySelector('[selected]');
|
|
|
25 if( selected ) selected.removeAttribute('selected');
|
|
|
26 div.setAttribute('selected','');
|
|
|
27 ajax(`get_chat.js?chat=${chatId}`);
|
|
|
28 currentChatId = chatId;
|
|
34
|
29 history.replaceState(null,null,`?with=${email}`);
|
|
12
|
30
|
|
|
31 if(eventSource) eventSource.close();
|
|
|
32 eventSource = new EventSource(`${location.origin}/chat/${chatId}`);
|
|
16
|
33 eventSource.onmessage = evalEvent;
|
|
12
|
34 }
|
|
|
35
|
|
27
|
36 function back() {
|
|
|
37 document.querySelector('div[content]').setAttribute('show','chats');
|
|
|
38 }
|
|
|
39
|
|
12
|
40 function gotChat(html) {
|
|
|
41 document.querySelector('div[posts]').innerHTML = html;
|
|
19
|
42 fixPosts();
|
|
12
|
43 document.querySelector('div[input] textarea').focus();
|
|
|
44 document.querySelector('div[input]').scrollIntoView({block: 'end'});
|
|
10
|
45 }
|
|
|
46
|
|
|
47 function fixTextarea(event) {
|
|
|
48 let textarea = event.target;
|
|
|
49 textarea.style.height = 'initial';
|
|
|
50 textarea.style.height = (textarea.scrollHeight+2) + 'px';
|
|
|
51 textarea.scrollIntoViewIfNeeded(false);
|
|
|
52 }
|
|
|
53
|
|
|
54 const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
|
|
|
55
|
|
|
56 function addPost() {
|
|
|
57 let textarea = document.querySelector('div[input] textarea');
|
|
|
58 let text = textarea.value;
|
|
|
59 if( text.trim() === '' )
|
|
|
60 return;
|
|
24
|
61 ajax(`add_post.js?chat=${currentChatId}`,`content=${encodeURIComponent(text)}`);
|
|
10
|
62 textarea.value = '';
|
|
|
63 }
|
|
|
64
|
|
|
65 function textareaKey(event) {
|
|
|
66 if( event.keyCode===13 && !event.shiftKey && !event.ctrlKey && !isMobile ) {
|
|
|
67 event.preventDefault();
|
|
|
68 addPost();
|
|
|
69 }
|
|
|
70 }
|
|
|
71
|
|
19
|
72 function fixPosts() {
|
|
35
|
73 let divs = document.querySelectorAll('div[post][fix]');
|
|
19
|
74 for( let div of divs ) {
|
|
35
|
75 let whenSpan = div.querySelector('span[when]');
|
|
39
|
76 whenSpan.textContent = new Date(Number(whenSpan.textContent)).toLocaleString([],{dateStyle:'short',timeStyle:'short'});
|
|
35
|
77 let textDiv = div.querySelector('div[text]');
|
|
|
78 textDiv.innerHTML = urlsToLinks(textDiv.innerHTML);
|
|
|
79 if( div.getAttribute('author') === userId )
|
|
|
80 div.querySelector('span[pulldown]').innerHTML = document.querySelector('div[hidden] span[pulldown]').innerHTML;
|
|
19
|
81 div.removeAttribute('fix');
|
|
|
82 }
|
|
10
|
83 }
|
|
11
|
84
|
|
|
85 function deleteChat() {
|
|
20
|
86 let dialog = document.querySelector('dialog[delete_chat]');
|
|
|
87 openModal(dialog);
|
|
|
88 }
|
|
|
89
|
|
|
90 function doDeleteChat(el) {
|
|
|
91 closeModal(el);
|
|
11
|
92 ajax(`delete_chat.js?chat=${currentChatId}`);
|
|
|
93 }
|
|
12
|
94
|
|
23
|
95 let currentPostId;
|
|
|
96
|
|
38
|
97 function getPostId(el) {
|
|
|
98 while(true) {
|
|
|
99 let postId = el.getAttribute('post');
|
|
|
100 if( postId )
|
|
|
101 return postId;
|
|
|
102 el = el.parentNode;
|
|
|
103 }
|
|
|
104 }
|
|
|
105
|
|
|
106 function deletePost(el) {
|
|
|
107 currentPostId = getPostId(el);
|
|
23
|
108 let dialog = document.querySelector('dialog[delete_post]');
|
|
|
109 openModal(dialog);
|
|
|
110 }
|
|
|
111
|
|
|
112 function doDeletePost(el) {
|
|
|
113 closeModal(el);
|
|
|
114 ajax(`delete_post.js?post=${currentPostId}`);
|
|
|
115 }
|
|
|
116
|
|
|
117 function deleted(postId) {
|
|
|
118 let div = document.querySelector(`div[post="${postId}"]`);
|
|
|
119 if( div )
|
|
|
120 div.outerHTML = '';
|
|
|
121 }
|
|
|
122
|
|
38
|
123 function editPost(el) {
|
|
|
124 ajax(`edit_post.js?post=${getPostId(el)}`);
|
|
24
|
125 }
|
|
|
126
|
|
|
127 function openEditPost(postId,text) {
|
|
|
128 currentPostId = postId;
|
|
|
129 let dialog = document.querySelector('dialog[edit_post]');
|
|
|
130 let textarea = dialog.querySelector('textarea');
|
|
|
131 textarea.value = text;
|
|
|
132 openModal(dialog);
|
|
|
133 }
|
|
|
134
|
|
|
135 function savePost(el) {
|
|
|
136 let text = document.querySelector('dialog[edit_post] textarea').value;
|
|
|
137 closeModal(el);
|
|
|
138 ajax(`save_post.js?post=${currentPostId}`,`content=${encodeURIComponent(text)}`);
|
|
|
139 }
|
|
|
140
|
|
|
141 function edited(postId,html) {
|
|
|
142 let div = document.querySelector(`div[post="${postId}"]`);
|
|
|
143 if( div ) {
|
|
|
144 div.outerHTML = html;
|
|
|
145 fixPosts();
|
|
|
146 }
|
|
|
147 }
|
|
|
148
|
|
12
|
149 function added(html) {
|
|
|
150 let input = document.querySelector('div[input]');
|
|
|
151 input.insertAdjacentHTML('beforebegin',html);
|
|
19
|
152 fixPosts();
|
|
12
|
153 input.scrollIntoView({block: 'end'});
|
|
40
|
154 if( document.hasFocus() )
|
|
|
155 ajax('active.js');
|
|
12
|
156 }
|
|
15
|
157
|
|
30
|
158 function getChats(chatId,updated) {
|
|
15
|
159 let first = document.querySelector('div[chat]');
|
|
|
160 if( !first || first.getAttribute('chat') != chatId ) {
|
|
|
161 // console.log('getChats');
|
|
|
162 ajax('get_chats.js');
|
|
|
163 }
|
|
30
|
164 if( updated )
|
|
|
165 lastUpdate = updated;
|
|
40
|
166 if( !document.hasFocus() ) {
|
|
31
|
167 document.title = title + ' *';
|
|
|
168 }
|
|
15
|
169 }
|
|
|
170
|
|
|
171 function gotChats(html) {
|
|
|
172 document.querySelector('div[chats]').innerHTML = html;
|
|
|
173 if( currentChatId ) {
|
|
|
174 let current = document.querySelector(`div[chat="${currentChatId}"]`);
|
|
16
|
175 if( current ) {
|
|
|
176 current.setAttribute('selected','');
|
|
|
177 current.scrollIntoViewIfNeeded(false);
|
|
|
178 } else {
|
|
|
179 currentChatId = null;
|
|
|
180 document.querySelector('div[posts]').innerHTML = '';
|
|
|
181 }
|
|
15
|
182 }
|
|
|
183 }
|
|
18
|
184
|
|
|
185 window.onfocus = function() {
|
|
33
|
186 // console.log('onfocus');
|
|
18
|
187 document.title = title;
|
|
40
|
188 ajax('active.js');
|
|
18
|
189 };
|
|
19
|
190
|
|
|
191 let urlRegex = /(^|\s)(https?:\/\/\S+)/g;
|
|
|
192
|
|
|
193 function urlsToLinks(text) {
|
|
40
|
194 return text.replace( urlRegex, '$1<a target="_blank" href="$2">$2</a>' );
|
|
19
|
195 }
|
|
22
|
196
|
|
|
197 let currentPulldown = null;
|
|
|
198 let newPulldown = null;
|
|
|
199
|
|
|
200 function clickMenu(clicked,display) {
|
|
|
201 //console.log("clickMenu");
|
|
|
202 let pulldown = clicked.parentNode.querySelector('div');
|
|
|
203 if( pulldown !== currentPulldown ) {
|
|
|
204 pulldown.style.display = display || "block";
|
|
|
205 newPulldown = pulldown;
|
|
|
206 window.onclick = function() {
|
|
|
207 //console.log("window.onclick");
|
|
|
208 if( currentPulldown ) {
|
|
|
209 currentPulldown.style.display = "none";
|
|
|
210 if( !newPulldown )
|
|
|
211 window.onclick = null;
|
|
|
212 }
|
|
|
213 currentPulldown = newPulldown;
|
|
|
214 newPulldown = null;
|
|
|
215 };
|
|
|
216 pulldown.scrollIntoViewIfNeeded(false);
|
|
|
217 }
|
|
|
218 }
|
|
30
|
219
|
|
42
|
220 function heartbeat() {
|
|
33
|
221 showOnline();
|
|
30
|
222 ajax(`heartbeat.js?last_update=${lastUpdate}`);
|
|
42
|
223 }
|
|
|
224
|
|
|
225 setInterval( heartbeat, 10000 );
|
|
30
|
226
|
|
33
|
227 let online = {};
|
|
|
228
|
|
|
229 function setOnline(userId) {
|
|
|
230 online[userId] = Date.now();
|
|
|
231 }
|
|
|
232
|
|
|
233 function showOnline() {
|
|
42
|
234 let old = Date.now() - 70000;
|
|
33
|
235 for( let id of Object.keys(online) ) {
|
|
|
236 if( online[id] < old )
|
|
|
237 delete online[id];
|
|
|
238 }
|
|
|
239 let a = [];
|
|
|
240 for( let id in online ) {
|
|
|
241 a.push( `span[online="${id}"]` );
|
|
|
242 }
|
|
|
243 let style = document.querySelector('style[online]');
|
|
|
244 if( a.length === 0 ) {
|
|
|
245 style.innerHTML = '';
|
|
|
246 } else {
|
|
|
247 style.innerHTML = `
|
|
|
248 ${a.join(', ')} {
|
|
|
249 background-color: green;
|
|
|
250 }
|
|
|
251 ` ;
|
|
|
252 }
|
|
|
253 }
|
