Skip to content

Add "Copy" button to file view of raw text #21629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Nov 4, 2022
Merged

Add "Copy" button to file view of raw text #21629

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
28993e9
Add "Copy" button to file view
yardenshoham Oct 29, 2022
342b874
Revert `clipboard.js` changes
yardenshoham Oct 30, 2022
b36d2d3
Use "Copy content" instead of "Copy"
yardenshoham Oct 30, 2022
4fd9eba
Grab text from DOM
yardenshoham Oct 30, 2022
a2fd110
Render button only on raw text
yardenshoham Oct 30, 2022
1bce5ce
Move button to the end
yardenshoham Oct 30, 2022
fc385dc
Merge branch 'main' into copy
yardenshoham Oct 30, 2022
7cd16ae
Update web_src/js/features/common-global.js
yardenshoham Oct 30, 2022
83a41f0
Fkx lint
yardenshoham Oct 30, 2022
16746bd
fix
wxiaoguang Nov 3, 2022
3a2211a
remove wrong CSS styles
wxiaoguang Nov 3, 2022
42bccca
Merge branch 'main' into copy
yardenshoham Nov 3, 2022
a0c1ff2
Update templates/repo/view_file.tmpl
yardenshoham Nov 4, 2022
6a73e1f
Remove parentheses
yardenshoham Nov 4, 2022
1d6c1a1
Render as <a> tag
yardenshoham Nov 4, 2022
a9d5012
Merge branch 'main' into copy
yardenshoham Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions options/locale/locale_en-US.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ edit = Edit

copy = Copy
copy_url = Copy URL
copy_content = Copy content
copy_branch = Copy branch name
copy_success = Copied!
copy_error = Copy failed
Expand Down
12 changes: 8 additions & 4 deletions templates/repo/view_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,7 @@
{{end}}
{{if not .ReadmeInList}}
<div class="ui buttons mr-2">
<button class="ui mini basic button small compact tooltip" id="clipboard-btn" data-content="{{.locale.Tr "copy"}}" data-fetch-text="true" data-clipboard-target="#raw-file-link" aria-label="{{.locale.Tr "copy"}}">
{{svg "octicon-copy" 14}}
</button>
<a class="ui mini basic button" id="raw-file-link" href="{{$.RawFileLink}}">{{.locale.Tr "repo.file_raw"}}</a>
<a class="ui mini basic button" href="{{$.RawFileLink}}">{{.locale.Tr "repo.file_raw"}}</a>
{{if not .IsViewCommit}}
<a class="ui mini basic button" href="{{.RepoLink}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_permalink"}}</a>
{{end}}
Expand All @@ -61,6 +58,13 @@
<a class="ui mini basic button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
<a class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a>
{{end}}
<button class="ui mini basic button small compact tooltip copy-content" id="clipboard-btn" data-content="{{.locale.Tr "copy_content"}}" aria-label="{{.locale.Tr "copy_content"}}"
{{if or (.IsMarkup) (.IsRenderedHTML) (not .IsTextSource)}}
disabled
{{end}}
>
{{svg "octicon-copy" 14}}
</button>
</div>
<a download href="{{$.RawFileLink}}"><span class="btn-octicon tooltip" data-content="{{.locale.Tr "repo.download_file"}}" data-position="bottom center">{{svg "octicon-download"}}</span></a>
{{if .Repository.CanEnableEditor}}
Expand Down
22 changes: 3 additions & 19 deletions web_src/js/features/clipboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';

const {copy_success, copy_error} = window.config.i18n;

export async function copyToClipboard(text, shouldFetchForText) {
if (shouldFetchForText) {
try {
const response = await fetch(text, {method: 'GET', redirect: 'follow'});
text = await response.text();
} catch {
console.error(`failed to fetch text from ${text}`);
}
}
export async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
} catch {
Expand Down Expand Up @@ -47,27 +39,19 @@ function fallbackCopyToClipboard(text) {

// For all DOM elements with [data-clipboard-target] or [data-clipboard-text],
// this copy-to-clipboard will work for them
// If the target has the attribute [data-fetch-text] set to true, a fetch call happens to get the content
export default function initGlobalCopyToClipboardListener() {
document.addEventListener('click', (e) => {
let target = e.target;
// in case <button data-clipboard-text><svg></button>, so we just search
// up to 3 levels for performance
for (let i = 0; i < 3 && target; i++) {
const shouldFetchForText = target.getAttribute('data-fetch-text') === 'true';
let text;
const {clipboardTarget} = target.dataset;
if (shouldFetchForText) {
text = document.querySelector(clipboardTarget)?.href;
} else {
text = target.getAttribute('data-clipboard-text') || document.querySelector(clipboardTarget)?.value;
}
const text = target.getAttribute('data-clipboard-text') || document.querySelector(target.getAttribute('data-clipboard-target'))?.value;

if (text) {
e.preventDefault();

(async() => {
const success = await copyToClipboard(text, shouldFetchForText);
const success = await copyToClipboard(text);
showTemporaryTooltip(target, success ? copy_success : copy_error);
})();

Expand Down
6 changes: 6 additions & 0 deletions web_src/js/features/common-global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,12 @@ export function initGlobalButtons() {
window.location.href = $this.attr('data-done-url');
});
});

// get raw text for copy content button
const text = Array.from(document.querySelectorAll('.lines-code')).map((el) => el.textContent).join('');
for (const copyContentButton of document.querySelectorAll('button.copy-content')) {
copyContentButton.setAttribute('data-clipboard-text', text);
}
}

/**
Expand Down