128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
<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: '',
|
|
},
|
|
cssClasses: {
|
|
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 }"
|
|
:class="cssClasses"
|
|
:data-clipboard-target="target"
|
|
:data-clipboard-text="text"
|
|
:title="title"
|
|
>
|
|
<slot>
|
|
<icon name="duplicate" />
|
|
</slot>
|
|
</gl-button>
|
|
</template>
|