jerl
/
vybe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mostly code organizing

main
jerl 2024-04-15 21:52:21 -07:00
parent 59d0b9eab2
commit bf895466da
4 changed files with 132 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
client/app.js
View File

@ -1,66 +1,27 @@
import { render, html } from '/uhtml.js'; import { render, html } from '/uhtml.js';
import loadMessages from '/message.js';
import loadSpace from '/space.js'; import loadSpace from '/space.js';
window.currentThreadId = 1; function chooseThread() {
if (window.threadId) {
function chooseThread(thread) { if (window.threadId === this.thread.id)
if (window.currentThreadId) {
if (window.currentThreadId === thread.id)
return; return;
document.getElementById(`thread${window.currentThreadId}`) document.getElementById(`thread${window.threadId}`)
.classList.remove('active'); .classList.remove('active');
} }
const el = document.getElementById(`thread${thread.id}`); document.getElementById('threadname').textContent = this.thread.name;
el.classList.add('active'); this.classList.add('active');
window.currentThreadId = thread.id; window.threadId = this.thread.id;
window.earliestMessage = null; loadMessages();
document.getElementById('threadname').textContent = thread.name; if (this.thread.permissions.post)
if (thread.permissions.post)
document.getElementById('msginput').classList.remove('hidden'); document.getElementById('msginput').classList.remove('hidden');
else else
document.getElementById('msginput').classList.add('hidden'); document.getElementById('msginput').classList.add('hidden');
switchTab(document.getElementById(el.tab)); switchTab(document.getElementById(this.tab));
loadMessages(); if (this.tab === 'spacetab')
if (el.tab === 'spacetab')
loadSpace(); 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`
<div class='message'>
<strong>${message.name}: </strong>
${message.message}
</div>`);
}
if (!msg.more)
document.getElementById('loadmore').classList.add('hidden');
else
document.getElementById('loadmore').classList.remove('hidden');
}
);
}
function addThread(thread, top) {
let node = html.node`
<div class='thread' onclick=${() => chooseThread(thread)}>${
thread.name
}</div>`;
node.id = `thread${thread.id}`;
node.tab = 'messagetab';
document.getElementById('threadlist')[top ? 'prepend' : 'appendChild'](node);
}
function switchTab(tab) { function switchTab(tab) {
for (let tab of document.querySelectorAll('.tab')) for (let tab of document.querySelectorAll('.tab'))
tab.classList.remove('active'); tab.classList.remove('active');
@ -139,35 +100,14 @@ async function createThread(e) {
members members
}, },
msg => { msg => {
chooseThread({ chooseThread.call(document.getElementById('thread' + msg.id));
name: name.value,
id: msg.id,
permissions: {
is_member: true,
view: true,
post: true
}
});
// since the form exists, this will perform cleanup // since the form exists, this will perform cleanup
newThread(); newThread();
document.getElementById('loadmore').classList.add('hidden'); 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() { function newThread() {
let form = document.getElementById('createthread'); let form = document.getElementById('createthread');
if (form) { if (form) {
@ -214,7 +154,7 @@ function newThread() {
function clickedTab(event) { function clickedTab(event) {
switchTab(event.target); 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` render(document.body, html`
@ -232,36 +172,30 @@ render(document.body, html`
<div id='tabs'> <div id='tabs'>
<button id='messagetab' class='tab active' onclick=${clickedTab}>messages</button><button id='spacetab' class='tab' onclick=${clickedTab}>space</button> <button id='messagetab' class='tab active' onclick=${clickedTab}>messages</button><button id='spacetab' class='tab' onclick=${clickedTab}>space</button>
</div> </div>
<div id='message' class='tabcontent'> <div id='message' class='tabcontent'></div>
<button id='loadmore' class='hidden' onclick=${loadMessages}>
load more messages
</button>
<div id='messages'></div>
<form id='msginput' onsubmit=${sendMessage}>
<input type='text' placeholder='write a message...' id='msg' />
<button type='submit' id='sendmsg'>send</button>
</form>
</div>
<div id='space' class='tabcontent hidden'></div> <div id='space' class='tabcontent hidden'></div>
</div> </div>
`); `);
window.socket.on('new_message', msg => { function makeThread(thread) {
if (msg.thread !== window.currentThreadId) let node = html.node`
return; <div class='thread' onclick=${chooseThread}>${
document.getElementById('messages').appendChild(html.node` thread.name
<div class='message'> }</div>`;
<strong>${msg.name}: </strong> node.id = 'thread' + thread.id;
${msg.message} node.thread = thread;
</div>`); node.tab = 'messagetab';
if (!window.earliestMessage) return node;
window.earliestMessage = msg.id; }
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 => { window.emit('list_threads', {}, msg => {
document.getElementById('threadlist').innerHTML = ''; const threadlist = document.getElementById('threadlist')
threadlist.innerHTML = '';
for (let thread of msg.threads) for (let thread of msg.threads)
addThread(thread); threadlist.appendChild(makeThread(thread));
chooseThread(msg.threads[0]); chooseThread.call(threadlist.firstChild);
}); });

31
client/index.html
View File

@ -25,13 +25,6 @@
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: #111; background-color: #111;
} }
body,
button,
input {
color: #eaeaea;
border: none;
outline: none;
}
html { html {
height: 100%; height: 100%;
} }
@ -43,28 +36,35 @@
margin: 0; margin: 0;
min-width: min-content; min-width: min-content;
} }
#register { body,
margin-inline: 14px; button,
input {
color: #eaeaea;
}
button {
border: none;
background: #303030;
} }
button, button,
input, input,
.tab { .tab {
padding: 5px 7px; padding: 5px 7px;
} }
button {
background: #303030;
}
input { input {
background: #1b1b1b; background: #1b1b1b;
padding-bottom: 3px; outline: none;
border-bottom: 2px solid transparent; border: 1px solid #444;
} }
input:focus { input:focus {
border-bottom: 2px solid #4f4f4f; padding-bottom: 3px;
border-bottom: 3px solid #777;
} }
input::placeholder { input::placeholder {
color: #aaa; color: #aaa;
} }
#register {
margin-inline: 14px;
}
.thread:hover, .thread:hover,
.tab:hover { .tab:hover {
background-color: #3b3b3b; background-color: #3b3b3b;
@ -147,7 +147,6 @@
#msg { #msg {
flex-grow: 1; flex-grow: 1;
margin: 2px; margin: 2px;
padding: 5px;
} }
#sendmsg { #sendmsg {
margin: 2px 3px; margin: 2px 3px;

75
client/message.js Normal file
View File

@ -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`
<div class='message'>
<strong>${message.name}: </strong>
${message.message}
</div>`);
if (!earliestMessage)
earliestMessage = message.id;
});
function loadMessages() {
if (!msg) {
render(document.getElementById('message'), html`
<button id='loadmore' class='hidden' onclick=${loadMessages}>
load more messages
</button>
<div id='messages'></div>
<form id='msginput' onsubmit=${sendMessage}>
<input id='msg' placeholder='write a message...' />
<button type='submit' id='sendmsg'>send</button>
</form>
`);
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`
<div class='message'>
<strong>${message.name}: </strong>
${message.message}
</div>`);
}
if (!msg.more)
document.getElementById('loadmore').classList.add('hidden');
else
document.getElementById('loadmore').classList.remove('hidden');
}
);
}
export default loadMessages;

15
client/space.js
View File

@ -1,4 +1,5 @@
let space; let space;
let spaceId;
let scale = 1; let scale = 1;
@ -18,13 +19,15 @@ function mousemove(event) {
function save(span) { function save(span) {
window.emit('save_span', { window.emit('save_span', {
thread: window.space, thread: spaceId,
id: span.id ? span.id.slice(4) : '', id: span.id ? span.id.slice(4) : '',
content: span.innerText, content: span.innerText,
x: span.style.left.slice(0, -2), x: span.style.left.slice(0, -2),
y: span.style.top.slice(0, -2), y: span.style.top.slice(0, -2),
scale: span.scale scale: span.scale
}, msg => { }, msg => {
if (!msg.success)
console.log('span save failed: ' + msg.message);
if (!span.id) if (!span.id)
span.id = 'span' + msg.id; span.id = 'span' + msg.id;
}); });
@ -59,7 +62,7 @@ function add(x, y, scale = 1) {
event.preventDefault(); event.preventDefault();
this.scale *= 1 - event.deltaY * .001; this.scale *= 1 - event.deltaY * .001;
this.style.transform = `translate(-50%, -50%) scale(${this.scale})`; this.style.transform = `translate(-50%, -50%) scale(${this.scale})`;
//save save(this);
}; };
span.onmousedown = function(event) { span.onmousedown = function(event) {
if (dragging || editing === this) if (dragging || editing === this)
@ -103,11 +106,13 @@ export default function loadSpace() {
editing.focus(); editing.focus();
}; };
} }
if (window.space === window.currentThreadId) if (spaceId === window.threadId)
return; return;
window.space = window.currentThreadId; spaceId = window.threadId;
space.innerHTML = ''; 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) { for (const span of msg.spans) {
let el = add(span.x, span.y, span.scale); let el = add(span.x, span.y, span.scale);
el.innerText = span.content; el.innerText = span.content;