Add Quote & Reply buttons to photo comment pages

web/static/js/inline-replies.js

@@ -0,0 +1,42 @@
+// nonshy inline "Quote" and "Reply" buttons that activate the comment field
+// on the current page. Common logic between forum threads and photo comments.
+
+document.addEventListener('DOMContentLoaded', function() {
+    const $message = document.querySelector("#message");
+
+    // Enhance the in-post Quote and Reply buttons to activate the reply field
+    // at the page header instead of going to the dedicated comment page.
+    (document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => {
+        const message = node.dataset.quoteBody,
+            replyTo = node.dataset.replyTo;
+
+        node.addEventListener("click", (e) => {
+            e.preventDefault();
+
+            if (replyTo) {
+                $message.value += "@" + replyTo + "\n\n";
+            }
+
+            // Prepare the quoted message.
+            var lines = [];
+            for (let line of message.split("\n")) {
+                lines.push("> " + line);
+            }
+
+            $message.value += lines.join("\n") + "\n\n";
+            $message.scrollIntoView();
+            $message.focus();
+        });
+    });
+
+    (document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => {
+        const replyTo = node.dataset.replyTo;
+
+        node.addEventListener("click", (e) => {
+            e.preventDefault();
+            $message.value += "@" + replyTo + "\n\n";
+            $message.scrollIntoView();
+            $message.focus();
+        });
+    });
+});

web/templates/forum/thread.html

@@ -268,7 +268,7 @@
                     {{if not $Root.Thread.NoReply}}
                     <div class="column is-narrow">
                         <a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}&quote={{.ID}}"
-                            class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}">
+                            class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}">
                             <span class="icon"><i class="fa fa-quote-right"></i></span>
                             <span>Quote</span>
                         </a>
@@ -425,42 +425,8 @@
     </div>
 {{end}}
 
-<script type="text/javascript">
+<!-- Enhance inline Quote and Reply buttons to activate the on-page comment textarea. -->
-document.addEventListener('DOMContentLoaded', function() {
+<script src="/static/js/inline-replies.js?build={{.BuildHash}}"></script>
-    const $message = document.querySelector("#message");
-
-    // Enhance the in-post Quote and Reply buttons to activate the reply field
-    // at the page footer instead of going to the dedicated comment page.
-    (document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => {
-        const message = node.dataset.quoteBody;
-
-        node.addEventListener("click", (e) => {
-            e.preventDefault();
-
-            // Prepare the quoted message.
-            var lines = [];
-            for (let line of message.split("\n")) {
-                lines.push("> " + line);
-            }
-
-            $message.value += lines.join("\n") + "\n\n";
-            $message.scrollIntoView();
-            $message.focus();
-        });
-    });
-
-    (document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => {
-        const replyTo = node.dataset.replyTo;
-
-        node.addEventListener("click", (e) => {
-            e.preventDefault();
-            $message.value += "@" + replyTo + "\n\n";
-            $message.scrollIntoView();
-            $message.focus();
-        });
-    });
-});
-</script>
 
 <!-- Script for photo upload on photo boards -->
 {{if .Forum.PermitPhotos}}

web/templates/photo/permalink.html

@@ -311,6 +311,21 @@
                                             </a>
                                         </div>
 
+                                        <div class="column is-narrow">
+                                            <a href="#"
+                                                class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}">
+                                                <span class="icon"><i class="fa fa-quote-right"></i></span>
+                                                <span>Quote</span>
+                                            </a>
+                                        </div>
+                                        <div class="column is-narrow">
+                                            <a href="#"
+                                                class="has-text-dark nonshy-reply-button" data-reply-to="{{.User.Username}}">
+                                                <span class="icon"><i class="fa fa-reply"></i></span>
+                                                <span>Reply</span>
+                                            </a>
+                                        </div>
+
                                         {{if or $Root.CurrentUser.IsAdmin (eq $Root.CurrentUser.ID .User.ID)}}
                                         <div class="column is-narrow">
                                             <a href="/comments?table_name=photos&table_id={{$Root.Photo.ID}}&edit={{.ID}}&next={{UrlEncode $Root.Request.URL.Path "?id=" $Root.Photo.ID}}" class="has-text-dark">
@@ -370,6 +385,9 @@
 
 </div>
 
+<!-- Enhance inline Quote and Reply buttons to activate the on-page comment textarea. -->
+<script src="/static/js/inline-replies.js?build={{.BuildHash}}"></script>
+
 <!-- Mark Explicit modal -->
 {{template "mark-explicit-modal" .}}
 {{end}}