mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Clipboard copy enhancements (#27669) 

1. Do not show temporary tooltips that are triggered from within
dropdowns. Previously this resulted in the tooltip being stuck to
top-left of the page like seen on issue comment URL copy. I could not
figure out any tippy options that prevent this, so I think it's better
to just not show it.
1. Refactor `initGlobalCopyToClipboardListener` so that it does not run
a often useless `document.querySelector` on every click, make
`data-clipboard-text-type` work with `data-clipboard-target`. No use in
current code base but still good to have. Finally some minor code
cleanup in the function.

Point 1 is for this copy button:

<img width="229" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/81f34746-8ea5-43d9-8c6f-f6f417a9e4ad">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-10-18 17:16:06 +02:00 committed by GitHub
parent 9852c92e9a
commit 0b654fa8dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web_src/js/features/clipboard.js
View File

@ -4,19 +4,25 @@ import {clippie} from 'clippie';
const {copy_success, copy_error} = window.config.i18n; const {copy_success, copy_error} = window.config.i18n;
// For all DOM elements with [data-clipboard-target] or [data-clipboard-text], // Enable clipboard copy from HTML attributes. These properties are supported:
// this copy-to-clipboard will work for them // - data-clipboard-text: Direct text to copy, has highest precedence
// - data-clipboard-target: Holds a selector for a <input> or <textarea> whose content is copied
// - data-clipboard-text-type: When set to 'url' will convert relative to absolute urls
export function initGlobalCopyToClipboardListener() { export function initGlobalCopyToClipboardListener() {
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
let target = e.target; let target = e.target;
// in case <button data-clipboard-text><svg></button>, so we just search // In case <button data-clipboard-text><svg></button>, so we just search
// up to 3 levels for performance // up to 3 levels for performance
for (let i = 0; i < 3 && target; i++) { for (let i = 0; i < 3 && target; i++) {
let txt = target.getAttribute('data-clipboard-text'); let text = target.getAttribute('data-clipboard-text');
if (txt && target.getAttribute('data-clipboard-text-type') === 'url') {
txt = toAbsoluteUrl(txt); if (!text && target.getAttribute('data-clipboard-target')) {
text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
}
if (text && target.getAttribute('data-clipboard-text-type') === 'url') {
text = toAbsoluteUrl(text);
} }
const text = txt || document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
if (text) { if (text) {
e.preventDefault(); e.preventDefault();
@ -28,6 +34,7 @@ export function initGlobalCopyToClipboardListener() {
break; break;
} }
target = target.parentElement; target = target.parentElement;
} }
}); });

5
web_src/js/modules/tippy.js
View File

@ -169,6 +169,11 @@ export function initGlobalTooltips() {
} }
export function showTemporaryTooltip(target, content) { export function showTemporaryTooltip(target, content) {
// if the target is inside a dropdown, don't show the tooltip because when the dropdown
// closes, the tippy would be pushed unsightly to the top-left of the screen like seen
// on the issue comment menu.
if (target.closest('.ui.dropdown > .menu')) return;
const tippy = target._tippy ?? attachTooltip(target, content); const tippy = target._tippy ?? attachTooltip(target, content);
tippy.setContent(content); tippy.setContent(content);
if (!tippy.state.isShown) tippy.show(); if (!tippy.state.isShown) tippy.show();