Add comment highlight when target from url (#9047)

* Add comment highlight css

* Add js to remove highlight on click outside

* Improve refresh page on click outside

* Use location.hash property to remove target

* Handle click ONLY clicked outside of 'targetted comment' (not other comment)

* Remove unnecessary checks and simply code

* Combine hash and setState to remove target path

2 files changed, 29 insertions, 0 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index bae1a51731..b8cf81972b 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -586,6 +586,28 @@ function initInstall() {
   });
 }
 
+function initIssueComments() {
+  if ($('.repository.view.issue .comments').length === 0) return;
+
+  $(document).click((event) => {
+    const urlTarget = $(':target');
+    if (urlTarget.length === 0) return;
+
+    const urlTargetId = urlTarget.attr('id');
+    if (!urlTargetId) return;
+    if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;
+
+    const $target = $(event.target);
+
+    if ($target.closest(`#${urlTargetId}`).length === 0) {
+      const scrollPosition = $(window).scrollTop();
+      window.location.hash = '';
+      $(window).scrollTop(scrollPosition);
+      window.history.pushState(null, null, ' ');
+    }
+  });
+}
+
 function initRepository() {
   if ($('.repository').length === 0) {
     return;
@@ -733,6 +755,9 @@ function initRepository() {
       return false;
     });
 
+    // Issue Comments
+    initIssueComments();
+
     // Issue/PR Context Menus
     $('.context-dropdown').dropdown({
       action: 'hide'
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index e0537245ef..1b47de8a1b 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -844,6 +844,10 @@
                     }
                 }
 
+                &:target > .content {
+                    box-shadow: 0 0 10px #8c8c8c;
+                }
+
                 .ui.form {
                     .field:first-child {
                         clear: none;