Commit 7dab8ed7 authored by Robert Speicher's avatar Robert Speicher

Rework the copy_to_clipboard logic

It needed to be more flexible in how we set the target text or element.
parent acc0f162
#= require clipboard #= require clipboard
$ -> genericSuccess = (e) ->
clipboard = new Clipboard '.js-clipboard-trigger', showTooltip(e.trigger, 'Copied!')
text: (trigger) ->
$target = $(trigger.nextElementSibling || trigger.previousElementSibling)
$target.data('clipboard-text') || $target.text().trim()
clipboard.on 'success', (e) ->
$(e.trigger).
tooltip(trigger: 'manual', placement: 'auto bottom', title: 'Copied!').
tooltip('show').
one('mouseleave', -> $(this).tooltip('hide'))
# Clear the selection and blur the trigger so it loses its border # Clear the selection and blur the trigger so it loses its border
e.clearSelection() e.clearSelection()
$(e.trigger).blur() $(e.trigger).blur()
# Safari doesn't support `execCommand`, so instead we inform the user to # Safari doesn't support `execCommand`, so instead we inform the user to
# copy manually. # copy manually.
# #
# See http://clipboardjs.com/#browser-support # See http://clipboardjs.com/#browser-support
clipboard.on 'error', (e) -> genericError = (e) ->
if /Mac/i.test(navigator.userAgent) if /Mac/i.test(navigator.userAgent)
title = "Press ⌘-C to copy" key = '⌘' # Command
else else
title = "Press Ctrl-C to copy" key = 'Ctrl'
$(e.trigger). showTooltip(e.trigger, "Press #{key}-C to copy")
tooltip(trigger: 'manual', placement: 'auto bottom', html: true, title: title).
showTooltip = (target, title) ->
$(target).
tooltip(
container: 'body'
html: 'true'
placement: 'auto bottom'
title: title
trigger: 'manual'
).
tooltip('show'). tooltip('show').
one('mouseleave', -> $(this).tooltip('hide')) one('mouseleave', -> $(this).tooltip('hide'))
$ ->
clipboard = new Clipboard '[data-clipboard-target], [data-clipboard-text]'
clipboard.on 'success', genericSuccess
clipboard.on 'error', genericError
module ButtonHelper module ButtonHelper
def clipboard_button # Output a "Copy to Clipboard" button
#
# data - Data attributes passed to `content_tag`
#
# Examples:
#
# # Define the clipboard's text
# clipboard_button(clipboard_text: "Foo")
# # => "<button class='...' data-clipboard-text='Foo'>...</button>"
#
# # Define the target element
# clipboard_button(clipboard_target: "#foo")
# # => "<button class='...' data-clipboard-target='#foo'>...</button>"
#
# See http://clipboardjs.com/#usage
def clipboard_button(data = {})
content_tag :button, content_tag :button,
icon('clipboard'), icon('clipboard'),
class: 'btn btn-xs btn-clipboard js-clipboard-trigger', class: 'btn btn-xs btn-clipboard',
data: data,
type: :button type: :button
end end
......
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
- if ci_commit - if ci_commit
= render_ci_status(ci_commit) = render_ci_status(ci_commit)
&nbsp; &nbsp;
= clipboard_button = clipboard_button(clipboard_text: commit.id)
= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id", data: {clipboard_text: commit.id} = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
.notes_count .notes_count
- if note_count > 0 - if note_count > 0
......
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
= link_to_member(@project, participant, name: false, size: 24) = link_to_member(@project, participant, name: false, size: 24)
.col-md-3 .col-md-3
.input-group.cross-project-reference .input-group.cross-project-reference
%span.slead.has_tooltip{title: 'Cross-project reference'} %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'}
= cross_project_reference(@project, @issue) = cross_project_reference(@project, @issue)
= clipboard_button = clipboard_button(clipboard_target: '#cross-project-reference')
.row .row
%section.col-md-9 %section.col-md-9
......
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
= render "projects/merge_requests/show/participants" = render "projects/merge_requests/show/participants"
.col-md-3 .col-md-3
.input-group.cross-project-reference .input-group.cross-project-reference
%span.slead.has_tooltip{title: 'Cross-project reference'} %span#cross-project-reference.slead.has_tooltip{title: 'Cross-project reference'}
= cross_project_reference(@project, @merge_request) = cross_project_reference(@project, @merge_request)
= clipboard_button = clipboard_button(clipboard_target: '#cross-project-reference')
.row .row
%section.col-md-9 %section.col-md-9
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment