Bug fixes

templates/fragments/edit_post_details.html

@@ -1,46 +1,55 @@
-<form hx-put="/post_details/{{ post.id }}" hx-target="this" hx-swap="outerHTML">
-  <div>
-    <label>Tags</label>
-    {% let tags_value = tags %} {% include "fragments/tags_input.html" %}
-    <ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
-  </div>
-  <div>
-    <label>Title</label>
-    <input name="title" type="text" maxlength="100" placeholder="Title" value="{% if let Some(title) = post.title %}{{ title }}{% endif %}" />
-  </div>
-  <div>
-    <label>Description</label>
-    <textarea name="description" placeholder="Description in Markdown">{% if let Some(description) = post.description %}{{ description }}{% endif %}</textarea>
-  </div>
-  <div>
-    <label>Is public post?</label>
-    <input name="is_public" type="checkbox" {% if post.is_public %}checked{% endif %} value="true" />
-  </div>
-  <div>
-    <label>Rating</label>
-    <select name="rating">
-      <option value="u" {% if post.rating == "u" %}selected{% endif %}>Unrated</option>
-      <option value="s" {% if post.rating == "s" %}selected{% endif %}>Safe</option>
-      <option value="q" {% if post.rating == "q" %}selected{% endif %}>Questionable</option>
-      <option value="e" {% if post.rating == "e" %}selected{% endif %}>Explicit</option>
-    </select>
-  </div>
-  <div>
-    <label>Source(s)</label>
-    <ul id="sources">
-      {% for source in sources %}
-      {% include "fragments/post_source.html" %}
-      {% endfor %}
-    </ul>
-    <button hx-post="/post_source" hx-target="#sources" hx-swap="beforeend">+ Add source</button>
-  </div>
-  <div>
-    <label>Parent post</label>
-    <input name="parent_post" type="text" pattern="[0-9]*" value="{% if let Some(parent_id) = post.parent_id %}{{ parent_id }}{% endif %}" placeholder="Post ID" />
-  </div>
-  <div>
-    <button>Save changes</button>
-    <button hx-get="/post_details/{{ post.id }}">Cancel</button>
-    <button hx-confirm="Are you sure that you want to delete this post? This can't be undone!" hx-delete="/post/{{ post.id }}" hx-target="body" hx-replace-url="/">Delete post</button>
-  </div>
-</div>
+<article id="post-details">
+  <form hx-put="/post_details/{{ post.id }}" hx-target="#post-details" hx-swap="outerHTML">
+    <div>
+      <label>Tags</label>
+      {% let tags_value = tags %} {% include "fragments/tags_input.html" %}
+      <div
+        hx-trigger="keyup[key=='Escape'] from:previous .tags"
+        hx-target="next .tags-autocomplete"
+        hx-swap="innerHTML"
+        hx-delete="/remove"
+        hidden
+      ></div>
+      <ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
+    </div>
+    <div>
+      <label>Title</label>
+      <input name="title" type="text" maxlength="100" placeholder="Title" value="{% if let Some(title) = post.title %}{{ title }}{% endif %}" />
+    </div>
+    <div>
+      <label>Description</label>
+      <textarea name="description" placeholder="Description in Markdown">{% if let Some(description) = post.description %}{{ description }}{% endif %}</textarea>
+    </div>
+    <div>
+      <label>Is public post?</label>
+      <input name="is_public" type="checkbox" {% if post.is_public %}checked{% endif %} value="true" />
+    </div>
+    <div>
+      <label>Rating</label>
+      <select name="rating">
+        <option value="u" {% if post.rating == "u" %}selected{% endif %}>Unrated</option>
+        <option value="s" {% if post.rating == "s" %}selected{% endif %}>Safe</option>
+        <option value="q" {% if post.rating == "q" %}selected{% endif %}>Questionable</option>
+        <option value="e" {% if post.rating == "e" %}selected{% endif %}>Explicit</option>
+      </select>
+    </div>
+    <div>
+      <label>Source(s)</label>
+      <ul id="sources">
+        {% for source in sources %}
+        {% include "fragments/post_source.html" %}
+        {% endfor %}
+      </ul>
+      <button hx-post="/post_source" hx-target="#sources" hx-swap="beforeend">+ Add source</button>
+    </div>
+    <div>
+      <label>Parent post</label>
+      <input name="parent_post" type="text" pattern="[0-9]*" value="{% if let Some(parent_id) = post.parent_id %}{{ parent_id }}{% endif %}" placeholder="Post ID" />
+    </div>
+    <div>
+      <button>Save changes</button>
+      <button hx-get="/post_details/{{ post.id }}">Cancel</button>
+      <button hx-confirm="Are you sure that you want to delete this post? This can't be undone!" hx-delete="/post/{{ post.id }}" hx-target="body" hx-replace-url="/">Delete post</button>
+    </div>
+  </form>
+</article>

templates/fragments/post_details.html

@@ -1,7 +1,6 @@
-<article id="post-details" hx-target="this" hx-swap="outerHTML">
+<article id="post-details">
   <h2>
-    {% if let Some(title) = post.title %}{{ title }}{% else %}Details{%
-    endif %}
+    {% if let Some(title) = post.title %}{{ title }}{% else %}Details{% endif %}
   </h2>
   {% if let Some(description) = post.description %}
   <div id="description">{{ description | markdown }}</div>
@@ -9,16 +8,14 @@
   <table>
     <tr>
       <th>Is public post?</th>
-      <td>
-        {% if post.is_public %}Yes{% else %}No{% endif %}
-      </td>
+      <td>{% if post.is_public %}Yes{% else %}No{% endif %}</td>
     </tr>
     <tr>
       <th>Rating</th>
       <td>
-        {% match post.rating.as_ref() %} {% when "u" %} Unrated {% when "s" %} Safe
-        {% when "q" %} Questionable {% when "e" %} Explicit {% else %} Unknown {%
-        endmatch %}
+        {% match post.rating.as_ref() %} {% when "u" %} Unrated {% when "s" %}
+        Safe {% when "q" %} Questionable {% when "e" %} Explicit {% else %}
+        Unknown {% endmatch %}
       </td>
     </tr>
     <tr>
@@ -54,6 +51,12 @@
     </tr>
   </table>
   {% if can_edit %}
-  <button hx-get="/post_details/{{ post.id }}/edit">Edit post</button>
+  <button
+    hx-get="/post_details/{{ post.id }}/edit"
+    hx-target="#post-details"
+    hx-swap="outerHTML"
+  >
+    Edit post
+  </button>
   {% endif %}
-</div>
+</article>

templates/fragments/tags_input.html

@@ -5,10 +5,11 @@
   name="tags"
   placeholder="Tags"
   hx-post="/search_tags"
-  hx-trigger="input changed"
+  hx-trigger="input changed delay:500ms"
   hx-target="next .tags-autocomplete"
-  hx-vals="js:{selection_end: event.target.selectionEnd}"
-  hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
+  hx-swap="innerHTML"
+  hx-vals="js:{selection_end: document.querySelector('.tags').selectionEnd}"
+  hx-on::after-settle="document.querySelector('.tags').focus(); document.querySelector('.tags').setSelectionRange(-1, -1);"
   value="{{ tags_value }}"
   aria-autocomplete="list"
   aria-controls="search-autocomplete"

templates/pages/index.html

@@ -14,6 +14,13 @@
         <h2>Search</h2>
         <form method="get" action="/posts/1">
           {% let tags_value = "" %} {% include "fragments/tags_input.html" %}
+          <div
+            hx-trigger="keyup[key=='Escape'] from:previous .tags"
+            hx-target="next .tags-autocomplete"
+            hx-swap="innerHTML"
+            hx-delete="/remove"
+            hidden
+          ></div>
           <ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
           <button type="submit">Search</button>
         </form>

templates/pages/posts.html

@@ -13,6 +13,13 @@
       <h2>Search</h2>
       <form method="get" action="/posts">
         {% let tags_value = tags_text.clone().unwrap_or("".into()) %} {% include "fragments/tags_input.html" %}
+        <div
+          hx-trigger="keyup[key=='Escape'] from:previous .tags"
+          hx-target="next .tags-autocomplete"
+          hx-swap="innerHTML"
+          hx-delete="/remove"
+          hidden
+        ></div>
         <ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
         <button type="submit">Search</button>
       </form>

templates/pages/upload.html

@@ -13,6 +13,13 @@
       <h1>Upload media</h1>
       <form method="post" action="/upload" enctype="multipart/form-data">
         {% let tags_value = "" %} {% include "fragments/tags_input.html" %}
+        <div
+          hx-trigger="keyup[key=='Escape'] from:previous .tags"
+          hx-target="next .tags-autocomplete"
+          hx-swap="innerHTML"
+          hx-delete="/remove"
+          hidden
+        ></div>
         <ul class="reset tags-autocomplete" id="upload-autocomplete"></ul>
         <input
           type="file"

templates/pages/view_post.html

@@ -29,26 +29,6 @@
     {% if age_confirmation %}{% include "fragments/age_restricted_check.html"
     %}{% endif %}
     <div><a href="{% if let Some(tags_text) = tags_text %}/posts/1?tags={{ tags_text.replace(' ', "+") }}{% else %}/posts/1{% endif %}">&lt; To posts</a></div>
-    <article>
-      <h2>Search</h2>
-      <form method="get" action="/posts">
-        <input
-          class="tags"
-          type="text"
-          id="search-tags"
-          name="tags"
-          placeholder="Tags"
-          hx-post="/search_tags"
-          hx-trigger="input changed"
-          hx-target="next .tags-autocomplete"
-          hx-vals="js:{selection_end: event.target.selectionEnd}"
-          hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-          value="{% if let Some(tags_text) = tags_text %}{{ tags_text }}{% endif %}"
-        />
-        <ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
-        <button type="submit">Search</button>
-      </form>
-    </article>
     <article>
       <table>
         {% for item in pool_data %}