diff --git a/client/app.js b/client/app.js
index bdf795f..bfe94ae 100644
--- a/client/app.js
+++ b/client/app.js
@@ -1,66 +1,27 @@
import { render, html } from '/uhtml.js';
+import loadMessages from '/message.js';
import loadSpace from '/space.js';
-window.currentThreadId = 1;
-
-function chooseThread(thread) {
- if (window.currentThreadId) {
- if (window.currentThreadId === thread.id)
+function chooseThread() {
+ if (window.threadId) {
+ if (window.threadId === this.thread.id)
return;
- document.getElementById(`thread${window.currentThreadId}`)
+ document.getElementById(`thread${window.threadId}`)
.classList.remove('active');
}
- const el = document.getElementById(`thread${thread.id}`);
- el.classList.add('active');
- window.currentThreadId = thread.id;
- window.earliestMessage = null;
- document.getElementById('threadname').textContent = thread.name;
- if (thread.permissions.post)
+ document.getElementById('threadname').textContent = this.thread.name;
+ this.classList.add('active');
+ window.threadId = this.thread.id;
+ loadMessages();
+ if (this.thread.permissions.post)
document.getElementById('msginput').classList.remove('hidden');
else
document.getElementById('msginput').classList.add('hidden');
- switchTab(document.getElementById(el.tab));
- loadMessages();
- if (el.tab === 'spacetab')
+ switchTab(document.getElementById(this.tab));
+ if (this.tab === 'spacetab')
loadSpace();
}
-function loadMessages() {
- document.getElementById('messages').innerHTML = '';
- window.emit(
- 'get_history',
- {
- before: window.earliestMessage,
- thread: window.currentThreadId,
- },
- msg => {
- if (msg.messages.length > 0) {
- window.earliestMessage = msg.messages[msg.messages.length - 1].id;
- for (let message of msg.messages)
- document.getElementById('messages').prepend(html.node`
-
- ${message.name}:
- ${message.message}
-
`);
- }
- if (!msg.more)
- document.getElementById('loadmore').classList.add('hidden');
- else
- document.getElementById('loadmore').classList.remove('hidden');
- }
- );
-}
-
-function addThread(thread, top) {
- let node = html.node`
- chooseThread(thread)}>${
- thread.name
- }
`;
- node.id = `thread${thread.id}`;
- node.tab = 'messagetab';
- document.getElementById('threadlist')[top ? 'prepend' : 'appendChild'](node);
-}
-
function switchTab(tab) {
for (let tab of document.querySelectorAll('.tab'))
tab.classList.remove('active');
@@ -139,35 +100,14 @@ async function createThread(e) {
members
},
msg => {
- chooseThread({
- name: name.value,
- id: msg.id,
- permissions: {
- is_member: true,
- view: true,
- post: true
- }
- });
+ chooseThread.call(document.getElementById('thread' + msg.id));
// since the form exists, this will perform cleanup
newThread();
document.getElementById('loadmore').classList.add('hidden');
- document.getElementById('msginput').classList.remove('hidden');
}
);
}
-function sendMessage(e) {
- e.preventDefault();
- const msg = document.getElementById('msg').value;
- if (!msg)
- return;
- window.emit('send_message', {
- message: msg,
- thread: window.currentThreadId
- });
- document.getElementById('msg').value = '';
-}
-
function newThread() {
let form = document.getElementById('createthread');
if (form) {
@@ -214,7 +154,7 @@ function newThread() {
function clickedTab(event) {
switchTab(event.target);
- document.getElementById(`thread${window.currentThreadId}`).tab = event.target.id;
+ document.getElementById(`thread${window.threadId}`).tab = event.target.id;
}
render(document.body, html`
@@ -232,36 +172,30 @@ render(document.body, html`
-
-
-
-
-
+
`);
-window.socket.on('new_message', msg => {
- if (msg.thread !== window.currentThreadId)
- return;
- document.getElementById('messages').appendChild(html.node`
-
- ${msg.name}:
- ${msg.message}
-
`);
- if (!window.earliestMessage)
- window.earliestMessage = msg.id;
+function makeThread(thread) {
+ let node = html.node`
+ ${
+ thread.name
+ }
`;
+ node.id = 'thread' + thread.id;
+ node.thread = thread;
+ node.tab = 'messagetab';
+ return node;
+}
+
+window.socket.on('new_thread', thread => {
+ document.getElementById('threadlist').prepend(makeThread(thread));
});
-window.socket.on('new_thread', thread => addThread(thread, true));
window.emit('list_threads', {}, msg => {
- document.getElementById('threadlist').innerHTML = '';
+ const threadlist = document.getElementById('threadlist')
+ threadlist.innerHTML = '';
for (let thread of msg.threads)
- addThread(thread);
- chooseThread(msg.threads[0]);
+ threadlist.appendChild(makeThread(thread));
+ chooseThread.call(threadlist.firstChild);
});
diff --git a/client/index.html b/client/index.html
index 400bcd8..1964dc8 100644
--- a/client/index.html
+++ b/client/index.html
@@ -25,13 +25,6 @@
::-webkit-scrollbar-corner {
background-color: #111;
}
- body,
- button,
- input {
- color: #eaeaea;
- border: none;
- outline: none;
- }
html {
height: 100%;
}
@@ -43,28 +36,35 @@
margin: 0;
min-width: min-content;
}
- #register {
- margin-inline: 14px;
+ body,
+ button,
+ input {
+ color: #eaeaea;
+ }
+ button {
+ border: none;
+ background: #303030;
}
button,
input,
.tab {
padding: 5px 7px;
}
- button {
- background: #303030;
- }
input {
background: #1b1b1b;
- padding-bottom: 3px;
- border-bottom: 2px solid transparent;
+ outline: none;
+ border: 1px solid #444;
}
input:focus {
- border-bottom: 2px solid #4f4f4f;
+ padding-bottom: 3px;
+ border-bottom: 3px solid #777;
}
input::placeholder {
color: #aaa;
}
+ #register {
+ margin-inline: 14px;
+ }
.thread:hover,
.tab:hover {
background-color: #3b3b3b;
@@ -147,7 +147,6 @@
#msg {
flex-grow: 1;
margin: 2px;
- padding: 5px;
}
#sendmsg {
margin: 2px 3px;
diff --git a/client/message.js b/client/message.js
new file mode 100644
index 0000000..3ab685a
--- /dev/null
+++ b/client/message.js
@@ -0,0 +1,75 @@
+import { render, html } from '/uhtml.js';
+
+let msg;
+
+function sendMessage(e) {
+ e.preventDefault();
+ if (!msg.value)
+ return;
+ window.emit('send_message', {
+ message: msg.value,
+ thread: window.threadId
+ });
+ msg.value = '';
+}
+
+let earliestMessage;
+
+window.socket.on('new_message', message => {
+ if (message.thread !== window.threadId)
+ return;
+ document.getElementById('messages').appendChild(html.node`
+
+ ${message.name}:
+ ${message.message}
+
`);
+ if (!earliestMessage)
+ earliestMessage = message.id;
+});
+
+function loadMessages() {
+ if (!msg) {
+ render(document.getElementById('message'), html`
+
+
+
+ `);
+ msg = document.getElementById('msg');
+ }
+ const messages = document.getElementById('messages');
+ if (!this) { // called from chooseThread, initializing thread
+ messages.innerHTML = '';
+ earliestMessage = null;
+ }
+ window.emit(
+ 'get_history',
+ {
+ before: earliestMessage,
+ thread: window.threadId
+ },
+ msg => {
+ if (!msg.success)
+ console.log('get_history failed: ' + msg.message);
+ if (msg.messages.length > 0) {
+ earliestMessage = msg.messages[msg.messages.length - 1].id;
+ for (let message of msg.messages)
+ messages.prepend(html.node`
+
+ ${message.name}:
+ ${message.message}
+
`);
+ }
+ if (!msg.more)
+ document.getElementById('loadmore').classList.add('hidden');
+ else
+ document.getElementById('loadmore').classList.remove('hidden');
+ }
+ );
+}
+
+export default loadMessages;
diff --git a/client/space.js b/client/space.js
index 2bb8a33..5f31cc4 100644
--- a/client/space.js
+++ b/client/space.js
@@ -1,4 +1,5 @@
let space;
+let spaceId;
let scale = 1;
@@ -18,13 +19,15 @@ function mousemove(event) {
function save(span) {
window.emit('save_span', {
- thread: window.space,
+ thread: spaceId,
id: span.id ? span.id.slice(4) : '',
content: span.innerText,
x: span.style.left.slice(0, -2),
y: span.style.top.slice(0, -2),
scale: span.scale
}, msg => {
+ if (!msg.success)
+ console.log('span save failed: ' + msg.message);
if (!span.id)
span.id = 'span' + msg.id;
});
@@ -59,7 +62,7 @@ function add(x, y, scale = 1) {
event.preventDefault();
this.scale *= 1 - event.deltaY * .001;
this.style.transform = `translate(-50%, -50%) scale(${this.scale})`;
- //save
+ save(this);
};
span.onmousedown = function(event) {
if (dragging || editing === this)
@@ -103,11 +106,13 @@ export default function loadSpace() {
editing.focus();
};
}
- if (window.space === window.currentThreadId)
+ if (spaceId === window.threadId)
return;
- window.space = window.currentThreadId;
+ spaceId = window.threadId;
space.innerHTML = '';
- window.emit('get_space', { thread: window.space }, msg => {
+ window.emit('get_space', { thread: window.threadId }, msg => {
+ if (!msg.success)
+ console.log('get space failed: ' + msg.message);
for (const span of msg.spans) {
let el = add(span.x, span.y, span.scale);
el.innerText = span.content;