www: move dialog form to js, using /post form when js unavailable

6 files changed, 37 insertions, 47 deletions

diff --git a/juick-www/src/main/resources/messages.properties b/juick-www/src/main/resources/messages.properties
index aa1e2c05..fabaf4ad 100644
--- a/juick-www/src/main/resources/messages.properties
+++ b/juick-www/src/main/resources/messages.properties
@@ -27,14 +27,6 @@ label.register=Register
 label.username=User name
 label.password=Password
 
-postForm.newMessage=New message...
-postForm.imageLink=Link to image
-postForm.imageFormats=JPG/PNG, up to 10 MB
-postForm.or=or
-postForm.upload=Upload
-postForm.tags=Tags (space separated)
-postForm.submit=Send
-
 message.recommend=Recommend
 message.recommendedBy=Recommended by
 message.comment=Comment
diff --git a/juick-www/src/main/resources/messages_ru.properties b/juick-www/src/main/resources/messages_ru.properties
index 8dd8f4b0..da847b47 100644
--- a/juick-www/src/main/resources/messages_ru.properties
+++ b/juick-www/src/main/resources/messages_ru.properties
@@ -27,14 +27,6 @@ label.register=Зарегистрироваться
 label.username=Имя пользователя
 label.password=Пароль
 
-postForm.newMessage=Новое сообщение...
-postForm.imageLink=Ссылка на изображение
-postForm.imageFormats=JPG/PNG, до 10Мб
-postForm.or=или
-postForm.upload=загрузить
-postForm.tags=Теги (через пробел)
-postForm.submit=Отправить
-
 message.recommend=Рекомендовать
 message.recommendedBy=Рекомендовали
 message.comment=Комментировать
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 55bcf41a..2daaa8c0 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -54,6 +54,12 @@ const translations = {
         'message.likeThisMessage?': 'Recommend this message?',
         'postForm.pleaseInputMessageText': 'Please input message text',
         'postForm.upload': 'Upload',
+        'postForm.newMessage': 'New message...',
+        'postForm.imageLink': 'Link to image',
+        'postForm.imageFormats': 'JPG/PNG, up to 10 MB',
+        'postForm.or': 'or',
+        'postForm.tags': 'Tags (space separated)',
+        'postForm.submit': 'Send',
         'comment.writeComment': 'Write a comment...',
         'shareDialog.linkToMessage': 'Link to message',
         'shareDialog.messageNumber': 'Message number',
@@ -71,6 +77,12 @@ const translations = {
         'message.likeThisMessage?': 'Рекомендовать это сообщение?',
         'postForm.pleaseInputMessageText': 'Пожалуйста, введите текст сообщения',
         'postForm.upload': 'загрузить',
+        'postForm.newMessage': 'Новое сообщение...',
+        'postForm.imageLink': 'Ссылка на изображение',
+        'postForm.imageFormats': 'JPG/PNG, до 10Мб',
+        'postForm.or': 'или',
+        'postForm.tags': 'Теги (через пробел)',
+        'postForm.submit': 'Отправить',
         'comment.writeComment': 'Написать комментарий...',
         'shareDialog.linkToMessage': 'Ссылка на сообщение',
         'shareDialog.messageNumber': 'Номер сообщения',
@@ -269,15 +281,6 @@ function postformListener(formEl, ev) {
     }
 }
 
-function unfoldPostForm() {
-    if (window.location.hash === '#post') {
-        document.querySelector('#newmessage').style.display = 'block';
-        var ta = document.querySelector('#newmessage textarea');
-        ta.style.minHeight = '70px';
-        ta.focus();
-    }
-}
-
 function newMessage() {
     if (document.querySelector('#newmessage textarea').value.length == 0) {
         openDialog('<p class="dialogtxt">' + i18n('postForm.pleaseInputMessageText') + '</p>');
@@ -488,6 +491,21 @@ function showPhotoDialog(fname) {
     }
 }
 
+function openPostDialog() {
+    let newmessageTemplate = `
+        <form id="newmessage" action="/post" method="post" enctype="multipart/form-data">
+            <textarea name="body" placeholder="${i18n('postForm.newMessage')}"></textarea>
+            <div>
+                <input class="img" name="img" placeholder="${i18n('postForm.imageLink')} (${i18n('postForm.imageFormats')})"/>
+                 ${i18n('postForm.or')} <a href="#">${i18n('postForm.upload')}</a><br/>
+                <input class="tags" name="tags" placeholder="${i18n('postForm.tags')}"/><br/>
+                <input type="submit" class="subm" value="${i18n('postForm.submit')}"/>
+            </div>
+        </form>
+    `;
+    return openDialog(newmessageTemplate);
+}
+
 function openDialog(html) {
     var dialogHtml = `
         <div id="dialogt">
@@ -783,6 +801,14 @@ ready(function () {
             attachMessagePhoto(e.target);
         });
     }
+    var post = document.getElementById('post');
+    post.addEventListener('click', (e) => {
+        openPostDialog();
+        var ta = document.querySelector('#newmessage textarea');
+        ta.style.minHeight = '70px';
+        ta.focus();
+        e.preventDefault();
+    });
     document.querySelectorAll('article').forEach(function (article) {
         if (Array.prototype.some.call(
             article.querySelectorAll('.msg-tags a'),
@@ -793,11 +819,8 @@ ready(function () {
             article.classList.add('nsfw');
         }
     });
-
-    unfoldPostForm();
     unfoldReply();
     initWS();
-    window.addEventListener('hashchange', unfoldPostForm);
     window.addEventListener('hashchange', unfoldReply);
 
     window.addEventListener('pagehide', wsShutdown);
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index b42c303e..354c786f 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -163,12 +163,6 @@ body > header p {
     background: #E5E5E0;
     margin-bottom: 20px;
     padding: 15px;
-    display: none;
-    position: absolute;
-    top: 3em;
-    right: 0;
-    background-color: rgba(255,255,255,.6);
-    backdrop-filter: blur(5px)
 }
 #newmessage textarea {
     border: 1px solid #CCC;
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html b/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
index cf0f9bb7..75aab216 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
@@ -14,7 +14,7 @@
         </form>
     </div>
     <div id="headdiv">
-        {% if visitor.getUID() > 0 %}
+        {% if visitor.uid > 0 %}
         <nav id="user">
             <ul>
                 <li><a href="/?show=my">{{ i18n("messages","link.my") }}</a></li>
@@ -25,14 +25,11 @@
         </nav>
         <nav id="actions">
             <ul>
-                <li><a href="#post">{{ i18n("messages","link.postMessage") }}</a></li>
+                <li><a id="post" href="/post">{{ i18n("messages","link.postMessage") }}</a></li>
                 <li><a href="/{{ visitor.getName() }}">@{{ visitor.getName() }}</a></li>
                 <li><a href="/logout">{{ i18n("messages","link.logout") }}</a></li>
             </ul>
         </nav>
-        {% if visitor.getUid() > 0 %}
-        {% include "views/partial/newmessage" %}
-        {% endif %}
         {% else %}
         <p>{{ i18n("messages","message.loginForSending", "/login") | raw }}.</p>
         {% endif %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/newmessage.html b/juick-www/src/main/webapp/WEB-INF/views/partial/newmessage.html
deleted file mode 100644
index e21002b8..00000000
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/newmessage.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<form id="newmessage" action="/post" method="post" enctype="multipart/form-data">
-    <textarea name="body" placeholder="{{ i18n("messages","postForm.newMessage") }}"></textarea>
-    <div>
-        <input type="text" class="img" name="img" placeholder="{{ i18n("messages","postForm.imageLink") }} ({{ i18n("messages","postForm.imageFormats") }})"/> {{ i18n("messages","postForm.or") }} <a href="#">{{ i18n("messages","postForm.upload") }}</a><br/>
-        <input type="text" class="tags" name="tags" placeholder="{{ i18n("messages","postForm.tags") }}"/><br/>
-        <input type="submit" class="subm" value="{{ i18n("messages","postForm.submit") }}"/>
-    </div>
-</form>
\ No newline at end of file