From 7c5469465b363505b9bdcf1cd0057d1c05f6b475 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 30 Aug 2017 01:16:41 +0300
Subject: www: move dialog form to js, using /post form when js unavailable

---
 juick-www/src/main/static/scripts.js | 47 +++++++++++++++++++++++++++---------
 juick-www/src/main/static/style.css  |  6 -----
 2 files changed, 35 insertions(+), 18 deletions(-)

(limited to 'juick-www/src/main/static')

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;
-- 
cgit v1.2.3