diff --git a/src/form.css b/src/form.css
index 1f6b11b..ba414aa 100644
--- a/src/form.css
+++ b/src/form.css
@@ -28,7 +28,8 @@ label {
}
input[type="password"],
-input[type="text"] {
+input[type="text"],
+textarea {
background: var(--bgcolor-textinput);
border: .2rem solid #b7b7b7;
border-radius: .2rem;
@@ -36,11 +37,22 @@ input[type="text"] {
margin: 0;
}
input[type="password"]:focus,
-input[type="text"]:focus {
+input[type="text"]:focus,
+textarea:focus {
border-color: var(--focus-border-color);
- outline-offset: 2px;
+ outline-offset: var(--focus-outline-offset);
+ outline: var(--focus-outline);
+}
+textarea {
+ max-height: 50vh;
+ min-height: 20px;
+ transition: min-height .1s ease-out, height .1s ease-out;
+}
+textarea:focus {
+ min-height: 3.5rem;
}
+
.buttons {
align-items: center;
display: flex;
@@ -108,19 +120,25 @@ button:disabled {
gap: 1rem;
}
.cards .form-inline button,
-.cards .form-inline input[type="text"] {
+.cards .form-inline input[type="text"],
+.cards .form-inline textarea {
margin: .4rem 0;
- padding: .6rem 1rem;
}
-.form-inline input[type="text"] {
+.form-inline input[type="text"],
+.form-inline textarea {
flex-grow: 1;
+ margin-bottom: 0;
}
.form-inline button {
flex-grow: 0;
}
+.form-inline button#publish {
+ align-self: end;
+}
+
.focus-active {
}
diff --git a/src/index.html b/src/index.html
index 2b392a0..5fecca9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
diff --git a/src/main.css b/src/main.css
index 61d53db..6375161 100644
--- a/src/main.css
+++ b/src/main.css
@@ -6,7 +6,8 @@
/* 5px auto Highlight */
--focus-border-color: rgb(0, 122, 255);
--focus-border-radius: 2px;
- --focus-outline-color: rgb(127, 189, 247);
+ --focus-outline-color: rgb(192, 227, 252);
+ --focus-outline-offset: 2px;
--focus-outline-style: solid;
--focus-outline-width: 2px;
--focus-outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
diff --git a/src/main.js b/src/main.js
index c882499..7ade22e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -120,7 +120,8 @@ function handleReaction(evt, relay) {
// feed
const feedContainer = document.querySelector('#homefeed');
const feedDomMap = {};
-const replyDomMap = window.replyDomMap = {};
+const replyDomMap = {};
+const restoredReplyTo = localStorage.getItem('reply_to');
const sortByCreatedAt = (evt1, evt2) => {
if (evt1.created_at === evt2.created_at) {
@@ -191,6 +192,7 @@ function createTextNote(evt, relay) {
}, [elem('img', {height: 24, width: 24, src: 'assets/comment.svg'})]),
replies[0] ? elem('div', {className: 'mobx-replies'}, replyFeed.reverse()) : '',
]);
+ if (restoredReplyTo === evt.id) appendReplyForm(body.querySelector('button[name="reply"]'));
return rendernArticle([img, body]);
}
@@ -359,23 +361,11 @@ function getMetadata(evt, relay) {
}
// reply
-const writeForm = document.querySelector('#writeForm');
-const input = document.querySelector('textarea[name="message"]');
-let lastReplyBtn = null;
-let replyTo = null;
feedContainer.addEventListener('click', (e) => {
const button = e.target.closest('button');
if (button && button.name === 'reply') {
- if (lastReplyBtn) {
- lastReplyBtn.hidden = false;
- }
- lastReplyBtn = button;
- // button.hidden = true;
- button.after(writeForm);
- button.after(sendStatus);
- writeForm.hidden = false;
- replyTo = ['e', button.dataset.eventId, button.dataset.relay];
- input.focus();
+ appendReplyForm(button);
+ localStorage.setItem('reply_to', button.dataset.eventId);
return;
}
if (button && button.name === 'star') {
@@ -384,12 +374,21 @@ feedContainer.addEventListener('click', (e) => {
}
});
+const writeForm = document.querySelector('#writeForm');
+const writeInput = document.querySelector('textarea[name="message"]');
+
+function appendReplyForm(el) {
+ el.after(writeForm);
+ el.after(sendStatus);
+ writeInput.focus();
+}
+
const newMessageDiv = document.querySelector('#newMessage');
document.querySelector('#bubble').addEventListener('click', (e) => {
- replyTo = null;
+ localStorage.removeItem('reply_to');
newMessageDiv.prepend(writeForm);
newMessageDiv.append(sendStatus);
- input.focus();
+ writeInput.focus();
});
async function upvote(eventId, relay) {
@@ -428,14 +427,15 @@ writeForm.addEventListener('submit', async (e) => {
if (!pubkey || !privatekey) {
return onSendError(new Error('no pubkey/privatekey'));
}
- if (!input.value) {
+ if (!writeInput.value) {
return onSendError(new Error('message is empty'));
}
- const tags = replyTo ? [replyTo] : [];
+ const replyTo = localStorage.getItem('reply_to');
+ const tags = replyTo ? [['e', replyTo, eventRelayMap[replyTo][0]]] : [];
const newEvent = {
kind: 1,
pubkey,
- content: input.value,
+ content: writeInput.value,
tags,
created_at: Math.floor(Date.now() * 0.001),
};
@@ -447,12 +447,11 @@ writeForm.addEventListener('submit', async (e) => {
}
if (status === 1) {
sendStatus.hidden = true;
- input.value = '';
+ writeInput.value = '';
+ writeInput.style.removeProperty('height');
publish.disabled = true;
- if (lastReplyBtn) {
- lastReplyBtn.hidden = false;
- lastReplyBtn = null;
- replyTo = null;
+ if (replyTo) {
+ localStorage.removeItem('reply_to');
newMessageDiv.append(writeForm);
newMessageDiv.append(sendStatus);
}
@@ -462,8 +461,22 @@ writeForm.addEventListener('submit', async (e) => {
}
});
-input.addEventListener('input', () => publish.disabled = !input.value);
-input.addEventListener('blur', () => sendStatus.textContent = '');
+writeInput.addEventListener('input', () => {
+ publish.disabled = !writeInput.value;
+ updateElemHeight(writeInput);
+});
+writeInput.addEventListener('blur', () => sendStatus.textContent = '');
+
+function updateElemHeight(el) {
+ el.style.removeProperty('height');
+ if (el.value) {
+ el.style.paddingBottom = 0;
+ el.style.paddingTop = 0;
+ el.style.height = el.scrollHeight + 'px';
+ el.style.removeProperty('padding-bottom');
+ el.style.removeProperty('padding-top');
+ }
+}
// settings
const settingsForm = document.querySelector('form[name="settings"]');