mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Rename data-attributes to prefix "clipboard"

Browse Source 
This PR renames all the data-attributes for data-clipboard-X, this is due the possibility of conflict with projects that already uses these data-attributes.
This commit is contained in:
Mauricio Soares 2015-09-28 14:06:22 -03:00
parent d5a4ba1ff0
commit 157b0fb5a2
5 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -52,7 +52,7 @@ We're living a _declarative renaissance_, that's why we decided to take advantag
### Copy text from another element
A pretty common use case is to copy content from another element. You can do that by adding a `data-target` attribute in your trigger element.
A pretty common use case is to copy content from another element. You can do that by adding a `data-clipboard-target` attribute in your trigger element.
The value you include on this attribute needs to match another's element `id` attribute.
@ -63,14 +63,14 @@ The value you include on this attribute needs to match another's element `id` at
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-target="foo">
<button class="btn" data-clipboard-target="foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
```
### Cut text from another element
Additionally, you can define a `data-action` attribute to specify if you want to either `copy` or `cut` content.
Additionally, you can define a `data-clipboard-action` attribute to specify if you want to either `copy` or `cut` content.
If you omit this attribute, `copy` will be used by default.
@ -81,7 +81,7 @@ If you omit this attribute, `copy` will be used by default.
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-action="cut" data-target="bar">
<button class="btn" data-clipboard-action="cut" data-clipboard-target="bar">
Cut to clipboard
</button>
```
@ -90,13 +90,13 @@ As you may expect, the `cut` action only works on `<input>` or `<textarea>` elem
### Copy text from attribute
Truth is, you don't even need another element to copy its content from. You can just include a `data-text` attribute in your trigger element.
Truth is, you don't even need another element to copy its content from. You can just include a `data-clipboard-text` attribute in your trigger element.
<a href="http://zenorocha.github.io/clipboard.js/#demo-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
```html
<!-- Trigger -->
<button class="btn" data-text="Just because you can doesn't mean you should — clipboard.js">
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
```

8
src/clipboard-action.js
View File

@ -16,7 +16,7 @@ class ClipboardAction {
this.selectedText = '';
if (this.text && this.target) {
throw new Error('Multiple attributes declared, use either "data-target" or "data-text"');
throw new Error('Multiple attributes declared, use either "data-clipboard-target" or "data-clipboard-text"');
}
else if (this.text) {
this.selectFake();
@ -25,7 +25,7 @@ class ClipboardAction {
this.selectTarget();
}
else {
throw new Error('Missing required attributes, use either "data-target" or "data-text"');
throw new Error('Missing required attributes, use either "data-clipboard-target" or "data-clipboard-text"');
}
}
@ -144,7 +144,7 @@ class ClipboardAction {
this._action = action || 'copy';
if (this._action !== 'copy' && this._action !== 'cut') {
throw new Error('Invalid "data-action" value, use either "copy" or "cut"');
throw new Error('Invalid "data-clipboard-action" value, use either "copy" or "cut"');
}
}
@ -166,7 +166,7 @@ class ClipboardAction {
this._target = document.getElementById(target);
if (!this._target) {
throw new Error('Invalid "data-target" selector, use a value that matches an ID');
throw new Error('Invalid "data-clipboard-target" selector, use a value that matches an ID');
}
}
}

8
src/clipboard.js
View File

@ -30,10 +30,12 @@ class Clipboard extends Emitter {
this.clipboardAction = null;
}
const prefix = 'data-clipboard-';
this.clipboardAction = new ClipboardAction({
action : e.delegateTarget.getAttribute('data-action'),
target : e.delegateTarget.getAttribute('data-target'),
text : e.delegateTarget.getAttribute('data-text'),
action : e.delegateTarget.getAttribute(prefix + 'action'),
target : e.delegateTarget.getAttribute(prefix + 'target'),
text : e.delegateTarget.getAttribute(prefix + 'text'),
trigger : e.delegateTarget,
emitter : this
});

16
test/clipboard-action.js
View File

@ -20,7 +20,7 @@ describe('ClipboardAction', () => {
});
describe('#constructor', () => {
it('should throw an error since both "data-text" and "data-target" were passed', done => {
it('should throw an error since both "data-clipboard-text" and "data-clipboard-target" were passed', done => {
try {
new ClipboardAction({
text: 'foo',
@ -28,26 +28,26 @@ describe('ClipboardAction', () => {
});
}
catch(e) {
assert.equal(e.message, 'Multiple attributes declared, use either "data-target" or "data-text"');
assert.equal(e.message, 'Multiple attributes declared, use either "data-clipboard-target" or "data-clipboard-text"');
done();
}
});
it('should throw an error since neither "data-text" nor "data-target" were passed', done => {
it('should throw an error since neither "data-clipboard-text" nor "data-clipboard-target" were passed', done => {
try {
new ClipboardAction({
action: ''
});
}
catch(e) {
assert.equal(e.message, 'Missing required attributes, use either "data-target" or "data-text"');
assert.equal(e.message, 'Missing required attributes, use either "data-clipboard-target" or "data-clipboard-text"');
done();
}
});
});
describe('#set action', () => {
it('should throw an error since "data-action" is invalid', done => {
it('should throw an error since "data-clipboard-action" is invalid', done => {
try {
new ClipboardAction({
text: 'foo',
@ -55,21 +55,21 @@ describe('ClipboardAction', () => {
});
}
catch(e) {
assert.equal(e.message, 'Invalid "data-action" value, use either "copy" or "cut"');
assert.equal(e.message, 'Invalid "data-clipboard-action" value, use either "copy" or "cut"');
done();
}
});
});
describe('#set target', () => {
it('should throw an error since "data-target" do not match any element', done => {
it('should throw an error since "data-clipboard-target" do not match any element', done => {
try {
new ClipboardAction({
target: 'foo'
});
}
catch(e) {
assert.equal(e.message, 'Invalid "data-target" selector, use a value that matches an ID');
assert.equal(e.message, 'Invalid "data-clipboard-target" selector, use a value that matches an ID');
done();
}
});

2
test/clipboard.js
View File

@ -28,7 +28,7 @@ describe('Clipboard', () => {
before(() => {
global.button = document.createElement('button');
global.button.setAttribute('class', 'btn');
global.button.setAttribute('data-text', 'foo');
global.button.setAttribute('data-clipboard-text', 'foo');
document.body.appendChild(global.button);
global.event = {