diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/copy_to_clipboard.js')
-rw-r--r-- | app/assets/javascripts/behaviors/copy_to_clipboard.js | 46 |
1 files changed, 33 insertions, 13 deletions
diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js index de248340738..c3c28aeafc0 100644 --- a/app/assets/javascripts/behaviors/copy_to_clipboard.js +++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js @@ -1,7 +1,13 @@ -import Clipboard from 'clipboard'; +import ClipboardJS from 'clipboard'; import $ from 'jquery'; -import { sprintf, __ } from '~/locale'; -import { fixTitle, add, show, once } from '~/tooltips'; + +import { parseBoolean } from '~/lib/utils/common_utils'; +import { __ } from '~/locale'; +import { fixTitle, add, show, hide, once } from '~/tooltips'; + +const CLIPBOARD_SUCCESS_EVENT = 'clipboard-success'; +const CLIPBOARD_ERROR_EVENT = 'clipboard-error'; +const I18N_ERROR_MESSAGE = __('Copy failed. Please manually copy the value.'); function showTooltip(target, title) { const { title: originalTitle } = target.dataset; @@ -9,20 +15,31 @@ function showTooltip(target, title) { once('hidden', (tooltip) => { if (tooltip.target === target) { target.setAttribute('title', originalTitle); + target.setAttribute('aria-label', originalTitle); fixTitle(target); } }); target.setAttribute('title', title); + target.setAttribute('aria-label', title); fixTitle(target); show(target); - setTimeout(() => target.blur(), 1000); + setTimeout(() => { + hide(target); + }, 1000); } function genericSuccess(e) { - // Clear the selection and blur the trigger so it loses its border + // Clear the selection e.clearSelection(); - showTooltip(e.trigger, __('Copied')); + e.trigger.focus(); + e.trigger.dispatchEvent(new Event(CLIPBOARD_SUCCESS_EVENT)); + + const { clipboardHandleTooltip = true } = e.trigger.dataset; + if (parseBoolean(clipboardHandleTooltip)) { + // Update tooltip + showTooltip(e.trigger, __('Copied')); + } } /** @@ -30,17 +47,16 @@ function genericSuccess(e) { * See http://clipboardjs.com/#browser-support */ function genericError(e) { - let key; - if (/Mac/i.test(navigator.userAgent)) { - key = '⌘'; // Command - } else { - key = 'Ctrl'; + e.trigger.dispatchEvent(new Event(CLIPBOARD_ERROR_EVENT)); + + const { clipboardHandleTooltip = true } = e.trigger.dataset; + if (parseBoolean(clipboardHandleTooltip)) { + showTooltip(e.trigger, I18N_ERROR_MESSAGE); } - showTooltip(e.trigger, sprintf(__(`Press %{key}-C to copy`), { key })); } export default function initCopyToClipboard() { - const clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]'); + const clipboard = new ClipboardJS('[data-clipboard-target], [data-clipboard-text]'); clipboard.on('success', genericSuccess); clipboard.on('error', genericError); @@ -74,6 +90,8 @@ export default function initCopyToClipboard() { clipboardData.setData('text/plain', json.text); clipboardData.setData('text/x-gfm', json.gfm); }); + + return clipboard; } /** @@ -89,3 +107,5 @@ export function clickCopyToClipboardButton(btnElement) { btnElement.click(); } + +export { CLIPBOARD_SUCCESS_EVENT, CLIPBOARD_ERROR_EVENT, I18N_ERROR_MESSAGE }; |