diff options
author | Andrew Fontaine <afontaine@gitlab.com> | 2019-06-06 12:36:17 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-06-06 12:36:17 +0300 |
commit | 8bea9eeddfa6e2e602f32c7130e39a8eb5f191ae (patch) | |
tree | 727bcb9e6acab161b3592e152da47066b0e579b0 /doc/development | |
parent | 7468ed5fd28d08907384787d657d2bbe9af77411 (diff) |
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 'doc/development')
-rw-r--r-- | doc/development/fe_guide/frontend_faq.md | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/doc/development/fe_guide/frontend_faq.md b/doc/development/fe_guide/frontend_faq.md index 77f064a21a9..e4225f2bc39 100644 --- a/doc/development/fe_guide/frontend_faq.md +++ b/doc/development/fe_guide/frontend_faq.md @@ -25,3 +25,17 @@ document.body.dataset.page ``` Find here the [source code setting the attribute](https://gitlab.com/gitlab-org/gitlab-ce/blob/cc5095edfce2b4d4083a4fb1cdc7c0a1898b9921/app/views/layouts/application.html.haml#L4). + +### `modal_copy_button` vs `clipboard_button` + +The `clipboard_button` uses the `copy_to_clipboard.js` behaviour, which is +initialized on page load, so if there are vue-based clipboard buttons that +don't exist at page load (such as ones in a `GlModal`), they do not have the +click handlers associated with the clipboard package. + +`modal_copy_button` was added that manages an instance of the +[`clipboard` plugin](https://www.npmjs.com/package/clipboard) specific to +the instance of that component, which means that clipboard events are +bound on mounting and destroyed when the button is, mitigating the above +issue. It also has bindings to a particular container or modal ID +available, to work with the focus trap created by our GlModal. |