diff options
author | Andrew Fontaine <afontaine@gitlab.com> | 2019-06-06 09:36:17 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-06-06 09:36:17 +0000 |
commit | 8bea9eeddfa6e2e602f32c7130e39a8eb5f191ae (patch) | |
tree | 727bcb9e6acab161b3592e152da47066b0e579b0 /app/assets/javascripts/vue_shared | |
parent | 7468ed5fd28d08907384787d657d2bbe9af77411 (diff) | |
download | gitlab-ce-8bea9eeddfa6e2e602f32c7130e39a8eb5f191ae.tar.gz |
Add a New Copy Button That Works in Modals
This copy button manages a local instance of the Clipboard plugin
specific to it, which means it is created/destroyed on the
creation/destruction of the component. This allows it to work well in
gitlab-ui modals, as the event listeners are bound on creation of the
button.
It also allows for bindings to the `container` option of the Clipboard
plugin, which allows it to work within the focus trap set by bootstrap's
modals.
Diffstat (limited to 'app/assets/javascripts/vue_shared')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/modal_copy_button.vue | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue new file mode 100644 index 00000000000..bf59a6abf3f --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue @@ -0,0 +1,121 @@ +<script> +import $ from 'jquery'; +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; +import Icon from '~/vue_shared/components/icon.vue'; +import Clipboard from 'clipboard'; + +export default { + components: { + GlButton, + Icon, + }, + + directives: { + GlTooltip: GlTooltipDirective, + }, + + props: { + text: { + type: String, + required: false, + default: '', + }, + container: { + type: String, + required: false, + default: '', + }, + modalId: { + type: String, + required: false, + default: '', + }, + target: { + type: String, + required: false, + default: '', + }, + title: { + type: String, + required: true, + }, + tooltipPlacement: { + type: String, + required: false, + default: 'top', + }, + tooltipContainer: { + type: String, + required: false, + default: null, + }, + }, + + copySuccessText: __('Copied'), + + computed: { + modalDomId() { + return this.modalId ? `#${this.modalId}` : ''; + }, + }, + + mounted() { + this.$nextTick(() => { + this.clipboard = new Clipboard(this.$el, { + container: + document.querySelector(`${this.modalDomId} div.modal-content`) || + document.getElementById(this.container) || + document.body, + }); + this.clipboard + .on('success', e => { + this.updateTooltip(e.trigger); + this.$emit('success', e); + // Clear the selection and blur the trigger so it loses its border + e.clearSelection(); + $(e.trigger).blur(); + }) + .on('error', e => this.$emit('error', e)); + }); + }, + + destroyed() { + if (this.clipboard) { + this.clipboard.destroy(); + } + }, + + methods: { + updateTooltip(target) { + const $target = $(target); + const originalTitle = $target.data('originalTitle'); + + if ($target.tooltip) { + /** + * The original tooltip will continue staying there unless we remove it by hand. + * $target.tooltip('hide') isn't working. + */ + $('.tooltip').remove(); + $target.attr('title', this.$options.copySuccessText); + $target.tooltip('_fixTitle'); + $target.tooltip('show'); + $target.attr('title', originalTitle); + $target.tooltip('_fixTitle'); + } + }, + }, +}; +</script> +<template> + <gl-button + v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }" + :data-clipboard-target="target" + :data-clipboard-text="text" + :title="title" + > + <slot> + <icon name="duplicate" /> + </slot> + </gl-button> +</template> |