Vylepšení příspěvkového formuláře (posouvání kamink sůn)

src/db/post.rs

@@ -467,16 +467,21 @@ impl Post {
 
 impl Post {
     pub fn post_url(&self) -> String {
-        if let Some(thread) = self.thread {
-            format!("/boards/{}/{}#{}", self.board, thread, self.id)
-        } else {
-            format!("/boards/{}/{}#{}", self.board, self.id, self.id)
-        }
+        format!(
+            "/boards/{}/{}#{}",
+            self.board,
+            self.thread.unwrap_or(self.id),
+            self.id
+        )
     }
 
     pub fn post_url_notarget(&self) -> String {
         format!("/boards/{}/{}", self.board, self.id)
     }
+
+    pub fn thread_url(&self) -> String {
+        format!("/boards/{}/{}", self.board, self.thread.unwrap_or(self.id),)
+    }
 }
 
 async fn delete_old_threads(ctx: &Ctx, board: &Board) -> Result<(), NekrochanError> {

static/js/autofill.js

@@ -7,8 +7,8 @@ $(function () {
         set_cookie("password", password);
     }
 
-    $('input[name="name"]').prop("value", name);
-    $('input[name="password"]').prop("value", password);
+    $('input[name="name"]').attr("value", name);
+    $('input[name="password"]').attr("value", password);
 });
 
 function generate_password() {

static/js/captcha.js

@@ -7,18 +7,18 @@ $(function () {
         let req_url = `/captcha?board=${board}&reply=${reply}`;
 
         btn.text("Získat CAPTCHA");
-        btn.prop("disabled", true);
+        btn.attr("disabled", true);
         btn.addClass("loading");
 
         $.get(req_url, function (data, _) {
             try {
-                $("#captcha-id").prop("value", data.id);
+                $("#captcha-id").attr("value", data.id);
                 $("#captcha").html(`<img src="data:image/png;base64,${data.png}">`);
             } catch {
                 btn.append(" [Chyba]");
             }
 
-            btn.prop("disabled", false);
+            btn.attr("disabled", false);
             btn.removeClass("loading");
         });
     });

static/js/post-form.js

@@ -0,0 +1,17 @@
+$(function () {
+    $(".open-post-form").click(function () {
+        $("#post-form").attr("data-visible", true);
+
+        return false;
+    });
+
+    $(".close-post-form").click(function () {
+        if (document.location.hash == "#post-form") {
+            document.location.hash = "";
+        }
+
+        $("#post-form").attr("data-visible", false);
+
+        return false;
+    });
+});

static/js/quote.js

@@ -0,0 +1,26 @@
+$(function() {
+    let quoted_post = window.localStorage.getItem("quoted_post");
+    
+    if (quoted_post) {
+        $("#post-form").attr("data-visible", true);
+        $("#content").append(`>>${quoted_post}\n`);
+        window.localStorage.removeItem("quoted_post");
+    }
+
+    $(".quote-link").click(function () {
+        let post_id = $(this).text();
+        let thread_url = $(this).attr("data-thread-url");
+        let current_url = window.location.pathname;
+
+        if (current_url !== thread_url) {
+            window.localStorage.setItem("quoted_post", post_id);
+            window.location.href = `${thread_url}#${post_id}`;
+            return false;
+        }
+
+        $("#post-form").attr("data-visible", true);
+        $("#content").append(`>>${post_id}\n`);
+
+        return false;
+    });
+});

static/js/time.js

@@ -11,7 +11,7 @@ function update_reltimes(elements) {
         let title = $(this).attr("title");
 
         if (!title) {
-            $(this).prop("title", $(this).text());
+            $(this).attr("title", $(this).text());
         }
 
         let rel = reltime($(this).attr("datetime"));

static/style.css

@@ -56,6 +56,29 @@ summary {
     padding: 0;
 }
 
+#post-form {
+    visibility: hidden;
+    position: fixed;
+    right: 0;
+    top: 3rem;
+    background-color: var(--box-color);
+    border: 1px solid var(--box-border);
+    margin: 4px;
+}
+
+#post-form:target,
+#post-form[data-visible="true"] {
+    visibility: visible;
+}
+
+.draggable {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: move;
+}
+
 .edit-box {
     display: block;
     width: 100%;
@@ -92,19 +115,6 @@ summary {
     resize: none;
 }
 
-.reply-mode {
-    font-weight: bold;
-    font-size: 18px;
-    text-align: center;
-    background-color: var(--table-head);
-    border: 1px solid var(--table-border);
-    padding: 8px;
-}
-
-.container > form > .form-table {
-    margin: 8px auto;
-}
-
 .table-wrap {
     overflow: scroll;
 }
@@ -295,7 +305,7 @@ summary {
 
 .board-links a,
 .pagination a,
-.post-number {
+.post-number a {
     text-decoration: none;
 }
 

templates/base.html

@@ -14,6 +14,7 @@
         <script src="/static/js/autofill.js"></script>
         <script src="/static/js/expand.js"></script>
         <script src="/static/js/time.js"></script>
+        <script src="/static/js/quote.js"></script>
         {% block scripts %}{% endblock %}
     </head>
     <body>

templates/board.html

@@ -7,7 +7,10 @@
 
 {% block theme %}{{ board.config.0.board_theme }}{% endblock %}
 {% block title %}/{{ board.id }}/ - {{ board.name }}{% endblock %}
-{% block scripts %}<script src="/static/js/captcha.js"></script>{% endblock %}
+{% block scripts %}
+<script src="/static/js/captcha.js"></script>
+<script src="/static/js/post-form.js"></script>
+{% endblock %}
 
 {% block content %}
 <div class="container">
@@ -16,6 +19,11 @@
         <h1 class="title">/{{ board.id }}/ - {{ board.name }}</h1>
         <p class="description">{{ board.description }}</p>
         <a href="/boards/{{ board.id }}/catalog">Katalog</a>
+        <br>
+        <br>
+        <a class="box inline-block open-post-form" href="#post-form">[Nové vlákno]</a>
+        <br>
+        <br>
     </div>
     {% call post_form::post_form(board, false, 0) %}
 </div>

templates/macros/post-form.html

@@ -1,15 +1,20 @@
 {% macro post_form(board, reply, reply_to) %}
-<form method="post" enctype="multipart/form-data" action="/actions/create-post">
+<form id="post-form" method="post" enctype="multipart/form-data" action="/actions/create-post" data-visible="false">
     <input name="board" type="hidden" value="{{ board.id }}">
     {% if reply %}
         <input name="thread" type="hidden" value="{{ reply_to }}">
     {% endif %}
     <table class="form-table">
-        {% if reply %}
         <tr>
-                <td colspan="2"><div class="reply-mode">Režim: Odpověď <a href="/boards/{{ board.id }}">[Zpět]</a></div></td>
-            </tr>
+            <td class="label draggable center" colspan="2">
+                {% if reply %}
+                    Nová odpověď
+                {% else %}
+                    Nové vlákno
                 {% endif %}
+                <a class="close-post-form float-r" href="#x">X</a>
+            </td>
+        </tr>
         <tr>
             <td class="label">Jméno</td>
             <td>
@@ -25,7 +30,7 @@
         <tr>
             <td class="label">Obsah</td>
             <td>
-                <textarea name="content" {% if (!reply && board.config.0.require_thread_content) || (reply && board.config.0.require_reply_content) %}required=""{% endif %}></textarea>
+                <textarea id="content" name="content" {% if (!reply && board.config.0.require_thread_content) || (reply && board.config.0.require_reply_content) %}required=""{% endif %}></textarea>
             </td>
         </tr>
         {% if !(tcx.perms.bypass_captcha() || tcx.perms.owner()) %}
@@ -80,7 +85,7 @@
             <td class="label">Spoiler?</td>
             <td>
                 <div class="input-wrapper">
-                    <input name="spoiler_files" type="checkbox">
+                    <input class="full-width" name="spoiler_files" type="checkbox">
                 </div>
             </td>
         </tr>

templates/macros/post.html

@@ -1,5 +1,5 @@
 {% macro post(board, post, boxed) %}
-<div id="{{ post.id }}" class="post{% if boxed %} box{% endif %}">
+<div id="{{ post.id }}" class="post{% if boxed %} box{% endif %}" data-board="{{ board.id }}">
     <div class="post-header">
         <input name="posts[]" type="checkbox" value="{{ post.board }}/{{ post.id }}">&#32;
         {% if tcx.perms.owner() || tcx.perms.view_ips() %}
@@ -27,7 +27,10 @@
         {% if board.config.0.user_ids %}
             <span class="user-id" style="background-color: #{{ post.user_id }};">{{ post.user_id }}</span>&#32;
         {% endif %}
-        <a class="post-number" href="{{ post.post_url() }}">Č.{{ post.id }}</a>&#32;
+        <span class="post-number">
+            <a href="{{ post.post_url() }}">Č.</a>
+            <a class="quote-link" href="{{ post.thread_url() }}#post-form" data-thread-url="{{ post.thread_url() }}">{{ post.id }}</a>&#32;
+        </span>
         {% if post.sticky %}
             <img title="Připnuto" class="icon" src="/static/icons/sticky.png">&#32;
         {% endif %}

templates/thread.html

@@ -10,6 +10,7 @@
 {% block scripts %}
 <script src="/static/js/captcha.js"></script>
 <script src="/static/js/live.js"></script>
+<script src="/static/js/post-form.js"></script>
 {% endblock %}
 
 {% block content %}
@@ -19,6 +20,11 @@
         <h1 class="title">/{{ board.id }}/ - {{ board.name }}</h1>
         <p class="description">{{ board.description }}</p>
         <a href="/boards/{{ board.id }}/catalog">Katalog</a>
+        <br>
+        <br>
+        <a class="box inline-block open-post-form" href="#post-form">[Nová odpověď]</a>
+        <br>
+        <br>
     </div>
     {% call post_form::post_form(board, true, thread.id) %}
 </div>