diff options
| -rw-r--r-- | lib/htmlbuilder.js | 8 | ||||
| -rw-r--r-- | pages/main/page.html | 7 | ||||
| -rw-r--r-- | pages/main/page.js | 43 | ||||
| -rw-r--r-- | shitstylse.css | 7 |
4 files changed, 60 insertions, 5 deletions
diff --git a/lib/htmlbuilder.js b/lib/htmlbuilder.js index 7343116..483b77b 100644 --- a/lib/htmlbuilder.js +++ b/lib/htmlbuilder.js @@ -32,9 +32,15 @@ function makeSigmaHtmlPlusElement(elem) { return elem.parentElement } elem.for = function (array, func) { - array.forEach(element => elem.appendChild(func(element))); + array.forEach((element, i) => elem.appendChild(func(element, i))); return elem } + elem.if = function (condition, type) { + if(condition) return; + let childElem = makeSigmaHtmlPlusElement(document.createElement(type)); + elem.appendChild(childElem) + return childElem; + } return elem; } diff --git a/pages/main/page.html b/pages/main/page.html index 8b16e26..bfa78c5 100644 --- a/pages/main/page.html +++ b/pages/main/page.html @@ -1,7 +1,10 @@ <div class="channel"> <div class="messages" id="messages"></div> <div class="messageInput disabled" id="messageForm"> - <textarea name="message input" id="messageInput"></textarea> - <button id="send">Send</button> + <div id="repliesContainer"></div> + <div class="messageInputForm"> + <textarea name="message input" id="messageInput"></textarea> + <button id="send">Send</button> + </div> </div> </div> \ No newline at end of file diff --git a/pages/main/page.js b/pages/main/page.js index c337888..ab3cb78 100644 --- a/pages/main/page.js +++ b/pages/main/page.js @@ -13,9 +13,40 @@ function scrollToBottomOfElement(element) { export function onload() { const msgArea = document.getElementById("messages"); + let replies = [] + + function rednerReplyThingy() { + let scrolledToBottom = msgArea.parentElement.scrollTopMax == msgArea.parentElement.scrollTop; + let elem = html('div') + .class('replies') + .attr('id', 'replies') + .for(replies, (r, i) => + html('div') + .class('reply') + .child('span') + .text((r.author.display_name ? `${r.author.display_name} (${r.author.username})` : r.author.username) + + ": " +r.content) + .up() + .child('button') + .text('x') + .ev('click', e => { + replies.splice(i, 1); + rednerReplyThingy(); + }) + .up() + ); + if(document.getElementById('repliesContainer').firstChild) + document.getElementById('repliesContainer').firstChild.remove() + document.getElementById('repliesContainer').prepend(elem); + if(scrolledToBottom) scrollToBottomOfElement(msgArea.parentElement); + } + function createMessage(msg) { let elem = html('div') .class('message') + .for(msg.replies, r => html('div') + .class('reply') + .text(`→ ${r.author.display_name ? `${r.author.display_name} (${r.author.username})`: r.author.username}: ${r.content}`)) .child('div') .class('message-header') .child('span') @@ -24,7 +55,14 @@ export function onload() { .up() .child('div') .class('action-buttons') - .child('button').text('reply').up() + .child('button') + .text('reply') + .ev('click', e => { + if(msg.length >= 3) return; + replies.push(msg); + rednerReplyThingy(); + }) + .up() .up() .up() .child('span') @@ -56,9 +94,10 @@ export function onload() { stores.sdlib.ws.send(JSON.stringify({ command: "post", content: msg, - replies: [], + replies: replies.map(p => p.id), attachments: [] })) + replies = []; document.getElementById("messageInput").value = "" } diff --git a/shitstylse.css b/shitstylse.css index 6682846..2097b37 100644 --- a/shitstylse.css +++ b/shitstylse.css @@ -28,9 +28,16 @@ body { background: white; position: sticky; bottom: 0; +} + +.messageInputForm { display: flex; } +.reply { + color: #000000aa +} + #messageInput { flex-grow: 1; } |