Add option to copy line permalink (#17145)

* Add option to copy line permalink

* Fix lint

* Apply review suggestions

* Update code and fix lint

* Use features/clipboard.js framework

options/locale/locale_en-US.ini

@@ -970,6 +970,7 @@ file_view_rendered = View Rendered
 file_view_raw = View Raw
 file_permalink = Permalink
 file_too_large = The file is too large to be shown.
+file_copy_permalink = Copy Permalink
 video_not_supported_in_browser = Your browser does not support the HTML5 'video' tag.
 audio_not_supported_in_browser = Your browser does not support the HTML5 'audio' tag.
 stored_lfs = Stored with Git LFS

templates/repo/view_file.tmpl

@@ -112,17 +112,20 @@
 						{{end}}
 					</tbody>
 				</table>
-					{{if $.Permission.CanRead $.UnitTypeIssues}}
 				<div class="code-line-menu ui fluid popup transition hidden">
 					<div class="ui column relaxed equal height">
 						<div class="column">
+							{{if $.Permission.CanRead $.UnitTypeIssues}}
 								<div class="ui link list">
 									<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{URLJoin AppUrl .RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.issues.context.reference_issue"}}</a>
 								</div>
-								</div>
-							</div>
-						</div>
 							{{end}}
+							<div class="ui link list">
+								<a data-clipboard-text="{{URLJoin AppUrl .RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}" class="item copy-line-permalink">{{.i18n.Tr "repo.file_copy_permalink"}}</a>
+							</div>
+						</div>
+					</div>
+				</div>
 				{{end}}
 			{{end}}
 		</div>

web_src/js/index.js

@@ -2917,6 +2917,27 @@ function deSelect() {
 
 function selectRange($list, $select, $from) {
   $list.removeClass('active');
+
+  // add hashchange to permalink
+  const $issue = $('a.ref-in-new-issue');
+  const $copyPermalink = $('a.copy-line-permalink');
+
+  if ($issue.length === 0 || $copyPermalink.length === 0) {
+    return;
+  }
+
+  const updateIssueHref = function(anchor) {
+    let href = $issue.attr('href');
+    href = `${href.replace(/%23L\d+$|%23L\d+-L\d+$/, '')}%23${anchor}`;
+    $issue.attr('href', href);
+  };
+
+  const updateCopyPermalinkHref = function(anchor) {
+    let link = $copyPermalink.attr('data-clipboard-text');
+    link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
+    $copyPermalink.attr('data-clipboard-text', link);
+  };
+
   if ($from) {
     let a = parseInt($select.attr('rel').substr(1));
     let b = parseInt($from.attr('rel').substr(1));
@@ -2934,38 +2955,16 @@ function selectRange($list, $select, $from) {
       $list.filter(classes.join(',')).addClass('active');
       changeHash(`#L${a}-L${b}`);
 
-      // add hashchange to permalink
+      updateIssueHref(`L${a}-L${b}`);
-      const $issue = $('a.ref-in-new-issue');
+      updateCopyPermalinkHref(`L${a}-L${b}`);
-
-      if ($issue.length === 0) {
-        return;
-      }
-
-      const matched = $issue.attr('href').match(/%23L\d+$|%23L\d+-L\d+$/);
-      if (matched) {
-        $issue.attr('href', $issue.attr('href').replace($issue.attr('href').substr(matched.index), `%23L${a}-L${b}`));
-      } else {
-        $issue.attr('href', `${$issue.attr('href')}%23L${a}-L${b}`);
-      }
       return;
     }
   }
   $select.addClass('active');
   changeHash(`#${$select.attr('rel')}`);
 
-  // add hashchange to permalink
+  updateIssueHref($select.attr('rel'));
-  const $issue = $('a.ref-in-new-issue');
+  updateCopyPermalinkHref($select.attr('rel'));
-
-  if ($issue.length === 0) {
-    return;
-  }
-
-  const matched = $issue.attr('href').match(/%23L\d+$|%23L\d+-L\d+$/);
-  if (matched) {
-    $issue.attr('href', $issue.attr('href').replace($issue.attr('href').substr(matched.index), `%23${$select.attr('rel')}`));
-  } else {
-    $issue.attr('href', `${$issue.attr('href')}%23${$select.attr('rel')}`);
-  }
 }
 
 $(() => {