various updates
parent
03c0433c28
commit
af690ebea9
107
client/app.js
107
client/app.js
|
@ -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>
|
||||||
`);
|
`);
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue