ember-cli-clipboard
Advanced tools
A simple ember wrapper around clipboard.js (no flash)
http://jkusa.github.io/ember-cli-clipboard
<!-- Set text directly -->
<CopyButton
@clipboardText="text to be copied"
@success={{this.onSuccess}}
@error={{this.onError}}
>
Click To Copy
</CopyButton>
<!-- Get text from action that returns a string -->
<CopyButton
@clipboardText={{this.getClipboardText}}
@success={{this.onSuccess}}
@error={{this.onError}}
>
Click To Copy
</CopyButton>
<!-- Get text from target element -->
<input id="url" type="text" value="https://github.com/jkusa/ember-cli-clipboard">
<CopyButton
@clipboardTarget="#url"
@success={{this.onSuccess}}
@error={{this.onError}}
>
Click To Copy
</CopyButton>
{{#copy-button
clipboardText="text to be copied"
success=(action "onSuccess")
error=(action "onError")
}}
Click To Copy
{{/copy-button}}
clipboardText - string value or action that returns a string to be copiedclipboardTarget - selector string of element from which to copy textclipboardAction - 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 falsebuttonType - string value of the button's type attributeAny HTML button attribute passed to the component will be "splatted" on the button element. The one exception to this is the type attribute due to this issue. The following legacy arguments are still supported:
title - string value of the button's title attributedisabled - boolean value of the button's disabled attributearia-label - string value of the button's aria-label attributeThe following clipboard.js custom events are sent as actions
success sent on successful copyerror sent on failed copyMore information about the clipboard.js events can be found here
The helper is-clipboard-supported can be used to check if clipboard.js is supported or not.
{{#if (is-clipboard-supported)}}
<CopyButton @clipboardTarget="#url">
Click To Copy
</CopyButton>
{{/if}}
Some browsers do not allow simulated clicks to fire execCommand('copy'). This makes testing difficult. To assist with integration testing, the following test helpers are available to test the wiring of the success and error action handlers.
triggerCopySuccess(selector='.copy-btn')triggerCopyError(selector='.copy-btn')If you are using the NEW Ember Testing API, available in ember-cli-qunit >= 4.2 and ember-cli-mocha >= 0.15.0, then you can simply import the test helpers where needed (for both acceptance and integration tests).
// tests/acceptance/my-test.js
import {
triggerCopyError,
triggerCopySuccess,
} from 'ember-cli-clipboard/test-support';
Otherwise, to use the helpers in acceptance tests you need to register them in the /tests/helpers/start-app.js file.
// tests/helpers/start-app.js
import registerClipboardHelpers from '../helpers/ember-cli-clipboard';
registerClipboardHelpers();
export default function startApp(attrs) {
...
Example:
// tests/acceptance/my-test.js
test('copy button message', async function (assert) {
assert.expect(3);
await visit('/');
assert.dom('.alert').doesNotExist('no alert message is initially present');
triggerCopySuccess();
assert
.dom('.alert.alert-success')
.exists('a success message is displayed when a copy is successful');
triggerCopyError();
assert
.dom('.alert.alert-info')
.exists('an error message is displayed when a copy is unsuccessful');
});
New Testing API (ember-cli-qunit >= 4.2 or ember-cli-mocha >= 0.15.0)
triggerCopySuccess(selector='.copy-btn')triggerCopyError(selector='.copy-btn')Old Testing API
triggerSuccess(context, selector='.copy-btn')triggerError(context, selector='.copy-btn')Example:
// tests/integration/components/my-test.js
// if using NEW ember testing api
import {
triggerCopyError,
triggerCopySuccess
} from 'ember-cli-clipboard/test-support';
// if using OLD ember testing api
import {
triggerError,
triggerSuccess
} from '../../helpers/ember-cli-clipboard';
...
test('copy-button integration', async function(assert) {
assert.expect(2);
this.set('onSuccess', () => {
assert.ok(true, '`success` action handler correctly fired');
});
this.set('onError', () => {
assert.ok(true, '`error` action handler correctly fired');
});
await render(hbs`
<CopyButton
class="my-copy-btn"
@clipboardText="text to be copied"
@success={{this.onSuccess}}
@error={{this.onError}}
>
Click To Copy
</CopyButton>
`);
//If using NEW ember testing api
triggerCopyError('.my-copy-btn');
triggerCopySuccess('.my-copy-btn');
//If using OLD ember testing api
triggerError(this, '.my-copy-btn');
triggerSuccess(this, '.my-copy-btn');
});
For browser support information, checkout the clipboard.js documentation:
https://github.com/zenorocha/clipboard.js/#browser-support
Contributions are welcomed. Please read the contributing guidelines.
This project is licensed under the MIT License.
0.15.0 (2020-06-24)
container support (#206) (9734d8f), closes #206FAQs
Clipboard.js button component
The npm package ember-cli-clipboard receives a total of 16,130 weekly downloads. As such, ember-cli-clipboard popularity was classified as popular.
We found that ember-cli-clipboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.