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

Author: jaqra

public/css/index.css

@@ -593,6 +593,7 @@ i.icon.centerlock{top:1.5em}
 .repository.view.issue .comment-list .comment .content>.bottom.segment .ui.image{max-height:100%;width:auto;margin:0;vertical-align:middle}
 .repository.view.issue .comment-list .comment .content>.bottom.segment span.ui.image{font-size:128px;color:#000}
 .repository.view.issue .comment-list .comment .content>.bottom.segment span.ui.image:hover{color:#000}
+.repository.view.issue .comment-list .comment:target>.content{box-shadow:0 0 10px #8c8c8c}
 .repository.view.issue .comment-list .comment .ui.form .field:first-child{clear:none}
 .repository.view.issue .comment-list .comment .ui.form .tab.segment{border:0;padding:10px 0 0}
 .repository.view.issue .comment-list .comment .ui.form textarea{height:200px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}

public/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'

public/js/index.js.map

@@ -844,6 +844,10 @@
                     }
                 }
 
+                &:target > .content {
+                    box-shadow: 0 0 10px #8c8c8c;
+                }
+
                 .ui.form {
                     .field:first-child {
                         clear: none;