Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle "container" option of clipboardJS #206

Merged
merged 2 commits into from
Jun 9, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ http://jkusa.github.io/ember-cli-clipboard
- `clipboardText` - string value or action that returns a string to be copied
- `clipboardTarget` - selector string of element from which to copy text
- `clipboardAction` - string value of operation: `copy` or `cut` (default is copy)
- `container` - selector string or element object of containing element. "For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value".
- `delegateClickEvent` - clipboard.js defaults event listeners to the body in order to reduce memory footprint if there are hundreds of event listeners on a page. If you want to scope the event listener to the copy button, set this property to `false`
- `buttonType` - string value of the button's [type attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes)

Expand Down
6 changes: 5 additions & 1 deletion addon/components/copy-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,18 @@ export default class CopyButtonComponent extends Component {
* @returns {Object} newly created ClipboardJS object
*/
_createClipboard() {
const { clipboardText: text, delegateClickEvent } = this;
const { clipboardText: text, container, delegateClickEvent } = this;
const trigger =
delegateClickEvent === false
? this._buttonElement
: `#${this._buttonElement.id}`;

return new ClipboardJS(trigger, {
text: typeof text === 'function' ? text : undefined,
container:
typeof container === 'string'
? document.querySelector(container)
: container,
});
}

Expand Down