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

various updates

main
jerl 2024-05-04 20:13:37 -07:00
parent 03c0433c28
commit af690ebea9
3 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
client/app.js
View File

@ -18,8 +18,6 @@ function chooseThread() {
else else
document.getElementById('msginput').classList.add('hidden'); document.getElementById('msginput').classList.add('hidden');
switchTab(document.getElementById(this.tab)); switchTab(document.getElementById(this.tab));
if (this.tab === 'spacetab')
loadSpace();
} }
function switchTab(tab) { function switchTab(tab) {
@ -39,13 +37,13 @@ function addMember() {
const name = document.getElementById('membername').value; const name = document.getElementById('membername').value;
window.threadmembers.push(name); window.threadmembers.push(name);
document document
.getElementById('memberlist') .getElementById('newmembers')
.appendChild(html.node`<p class='member'>${name}</p>`); .appendChild(html.node`<p class='member'>${name}</p>`);
document.getElementById('membername').value = ''; document.getElementById('membername').value = '';
} }
async function createThread(e) { async function createThread(event) {
e.preventDefault(); event.preventDefault();
let name = document.getElementById('newthreadname').value; let name = document.getElementById('newthreadname').value;
if (!name) { if (!name) {
document.getElementById('nameempty').classList.remove('hidden'); document.getElementById('nameempty').classList.remove('hidden');
@ -112,42 +110,46 @@ function newThread() {
let form = document.getElementById('createthread'); let form = document.getElementById('createthread');
if (form) { if (form) {
form.remove(); form.remove();
document.getElementById('createseparator').remove();
document.getElementById('newthread').textContent = 'create'; document.getElementById('newthread').textContent = 'create';
} else { } else {
window.threadmembers = [window.name]; window.threadmembers = [window.name];
document.getElementById('home').insertAdjacentElement('afterend', html.node` document.getElementById('home')
<form id='createthread' class='column' onsubmit=${createThread}> .insertAdjacentElement('afterend', html.node`
<h3>create thread</h3> <hr id='createseparator' class='separator' color='#666'>`)
<label for='newthreadname' class='heading'>thread name</label> .insertAdjacentElement('afterend', html.node`
<p id='nameempty' class='hidden'>name cannot be empty</p> <form id='createthread' class='column' onsubmit=${createThread}>
<input type='text' id='newthreadname' /> <h3>create thread</h3>
<p id='permissions'>thread permissions</p> <label for='newthreadname' class='heading'>thread name</label>
<input type='radio' id='public' name='permissions' value='public' checked /> <p id='nameempty' class='hidden'>name cannot be empty</p>
<label for='public'>anyone can view and post</label><br /> <input type='text' id='newthreadname' />
<input type='radio' id='private_post' <p id='permissions'>thread permissions</p>
name='permissions' value='private_post' <input type='radio' id='public' name='permissions' value='public' checked />
/> <label for='public'>anyone can view and post</label><br />
<label for='private_post'>anyone can view, only members can post</label><br/> <input type='radio' id='private_post'
<input type='radio' id='private_view' name='permissions' value='private_post'
name='permissions' value='private_view' />
/> <label for='private_post'>anyone can view, only members can post</label><br/>
<label for='private_view'>only members can view and post</label <input type='radio' id='private_view'
><br /><br /> name='permissions' value='private_view'
<label class='heading' for='membername'>members</label> />
<input type='text' id='membername' placeholder='username' onkeydown=${(e) => { <label for='private_view'>only members can view and post</label
if (e.key == 'Enter') { ><br /><br />
e.preventDefault(); <label class='heading' for='membername'>members</label>
addMember(); <input type='text' id='membername' placeholder='username' onkeydown=${event => {
} if (event.key === 'Enter') {
}}/> event.preventDefault();
<button id='addmember' onclick=${addMember}>add</button> addMember();
<div id='memberlist'> }
<p class='member'>${window.name}</p> }}/>
</div> <button id='addmember' onclick=${addMember}>add</button>
<br /> <div id='newmembers'>
<button id='submitthread' type='submit'>create</button> <p class='member'>${window.name}</p>
</form> </div>
`); <br />
<button id='submitthread' type='submit'>create</button>
</form>
`);
document.getElementById('newthread').textContent = 'cancel'; document.getElementById('newthread').textContent = 'cancel';
} }
} }
@ -157,6 +159,7 @@ function clickedTab(event) {
document.getElementById(`thread${window.threadId}`).tab = event.target.id; document.getElementById(`thread${window.threadId}`).tab = event.target.id;
} }
// main app html
document.body.append(html.node` document.body.append(html.node`
<div id='home' class='column'> <div id='home' class='column'>
<div id='threads'> <div id='threads'>
@ -169,21 +172,35 @@ document.body.append(html.node`
document.getElementById('profile').classList.toggle('hidden') document.getElementById('profile').classList.toggle('hidden')
}>${window.name}</div> }>${window.name}</div>
</div> </div>
<hr class='separator' color='#666'>
<div id='profile' class='column hidden'> <div id='profile' class='column hidden'>
<p><strong>authentication requests</strong></p> <p><strong>authentication requests</strong></p>
<div id='authrequests'></div> <div id='authrequests'></div>
</div> </div>
<hr class='separator' color='#666'> <hr class='separator' color='#666'>
<div id='thread' class='column'> <div id='thread' class='column'>
<div id='title'> <div id='content'>
thread: <strong id='threadname'>meow</strong> <div id='title'>
thread: <strong id='threadname'>meow</strong>
</div>
<div id='buttons'>
<div id='tabs'>
<button id='messagetab' class='tab active' onclick=${clickedTab}>messages
</button><button id='spacetab' class='tab' onclick=${clickedTab}>space</button>
</div>
<button id='showmembers' onclick=${() =>
document.getElementById('members').classList.toggle('hidden')
}>members</button>
</div>
<div id='message' class='tabcontent'></div>
<div id='space' class='tabcontent hidden'></div>
</div> </div>
<div id='tabs'> <hr class='separator' color='#666'>
<button id='messagetab' class='tab active' onclick=${clickedTab}>messages <div id='members' class='hidden'>
</button><button id='spacetab' class='tab' onclick=${clickedTab}>space</button> <p id='visibility'></p>
<div id='memberlist'>
</div>
</div> </div>
<div id='message' class='tabcontent'></div>
<div id='space' class='tabcontent hidden'></div>
</div> </div>
`); `);

37
client/index.html
View File

@ -90,10 +90,15 @@
} }
.column { .column {
flex: 1; flex: 1;
margin: 2px;
} }
.separator { .separator {
margin: 8px 2px; margin: 8px 2px;
} }
.separator:has(+ .separator),
.separator:has(+ *.hidden) {
display: none;
}
#home { #home {
max-width: 250px; max-width: 250px;
display: flex; display: flex;
@ -101,17 +106,16 @@
justify-content: space-between; justify-content: space-between;
} }
#threads { #threads {
margin: 5px; margin: 3px;
} }
#user { #user {
margin: 3px;
padding: 6px; padding: 6px;
background-color: #191919; background-color: #191919;
} }
#profile { #profile {
max-width: 250px; max-width: 250px;
> * { > * {
margin: 5px; margin: 4px;
} }
} }
.authrequest { .authrequest {
@ -119,25 +123,32 @@
} }
.thread { .thread {
padding: 2px 4px; padding: 2px 4px;
white-space: pre;
} }
#newthread { #newthread {
margin-top: 5px; margin-top: 5px;
} }
#createthread { #createthread {
max-width: 350px; max-width: fit-content;
} }
#permissions { #permissions {
margin-bottom: 5px; margin-bottom: 5px;
} }
#thread { #thread {
display: flex; display: flex;
}
#content {
flex: 1;
display: flex;
flex-direction: column; flex-direction: column;
} }
#title { #title {
margin: 4px; margin: 4px;
} }
#tabs { #buttons {
margin: 4px 2px; margin: 4px 2px;
display: flex;
justify-content: space-between;
} }
.tab { .tab {
padding: 5px 7px; padding: 5px 7px;
@ -147,19 +158,22 @@
font-weight: 500; font-weight: 500;
} }
.tabcontent { .tabcontent {
flex-grow: 1; flex: 1;
margin: 2px;
} }
#message { #message {
margin: 2px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; /* flex makes this auto so it can't shrink */ min-height: 0; /* flex makes this auto so it can't shrink */
} }
#messages { #messages {
margin: 2px; flex: 1;
flex-grow: 1;
overflow: auto; overflow: auto;
} }
#members {
flex: 1;
max-width: 250px;
}
#msginput { #msginput {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -177,14 +191,11 @@
#loadmore { #loadmore {
margin-bottom: 10px; margin-bottom: 10px;
} }
.channel {
font-weight: normal;
}
.member { .member {
margin: 5px 0; margin: 5px 0;
} }
#space { #space {
margin: 0; margin: -2px; /* offset column margin */
position: relative; position: relative;
overflow: auto; overflow: auto;
} }

7
client/message.js
View File

@ -68,10 +68,11 @@ function loadMessages() {
${message.message} ${message.message}
</div>`); </div>`);
} }
if (!msg.more) if (msg.more)
document.getElementById('loadmore').classList.add('hidden');
else
document.getElementById('loadmore').classList.remove('hidden'); document.getElementById('loadmore').classList.remove('hidden');
else
document.getElementById('loadmore').classList.add('hidden');
messages.scroll(0, messages.scrollHeight - messages.clientHeight);
} }
); );
} }