Skip to content

Container option #368

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.

Sign up for GitHub

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

Merged
merged 8 commits into from
May 29, 2017
Merged

Container option #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
39364b6
Allow container option to fix bugs related to bootstrap modals etc.
Jan 20, 2017
c49da05
Updated readme to reflect addition of container option
Jan 20, 2017
4d56adb
Name link
Jan 20, 2017
7397af6
Removed test log
Jan 20, 2017
f4c3b90
Remove unwanted whitespace
Jan 20, 2017
5d4a98a
Merged master into branch and resolved conflict
Mar 7, 2017
4614aa5
Refactored description
Mar 7, 2017
27e5cc4
Merge branch 'master' into container_option
zenorocha May 29, 2017
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
19 changes: 14 additions & 5 deletions dist/clipboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ var DOCUMENT_NODE_TYPE = 9;
/**
* A polyfill for Element.matches()
*/
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
if (Element && !Element.prototype.matches) {
var proto = Element.prototype;

proto.matches = proto.matchesSelector ||
Expand Down Expand Up @@ -420,6 +420,7 @@ module.exports = E;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

this.action = options.action;
this.container = options.container;
this.emitter = options.emitter;
this.target = options.target;
this.text = options.text;
Expand Down Expand Up @@ -448,7 +449,7 @@ module.exports = E;
this.fakeHandlerCallback = function () {
return _this.removeFake();
};
this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;
this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;

this.fakeElem = document.createElement('textarea');
// Prevent zooming on iOS
Expand All @@ -467,7 +468,7 @@ module.exports = E;
this.fakeElem.setAttribute('readonly', '');
this.fakeElem.value = this.text;

document.body.appendChild(this.fakeElem);
this.container.appendChild(this.fakeElem);

this.selectedText = (0, _select2.default)(this.fakeElem);
this.copyText();
Expand All @@ -476,13 +477,13 @@ module.exports = E;
key: 'removeFake',
value: function removeFake() {
if (this.fakeHandler) {
document.body.removeEventListener('click', this.fakeHandlerCallback);
this.container.removeEventListener('click', this.fakeHandlerCallback);
this.fakeHandler = null;
this.fakeHandlerCallback = null;
}

if (this.fakeElem) {
document.body.removeChild(this.fakeElem);
this.container.removeChild(this.fakeElem);
this.fakeElem = null;
}
}
Expand Down Expand Up @@ -601,6 +602,12 @@ module.exports = E;
};
}

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
Expand Down Expand Up @@ -681,6 +688,7 @@ module.exports = E;
this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
this.text = typeof options.text === 'function' ? options.text : this.defaultText;
this.container = _typeof(options.container) === 'object' ? options.container : document.body;
}
}, {
key: 'listenClick',
Expand All @@ -704,6 +712,7 @@ module.exports = E;
action: this.action(trigger),
target: this.target(trigger),
text: this.text(trigger),
container: this.container,
trigger: trigger,
emitter: this
});
Expand Down
2 changes: 1 addition & 1 deletion dist/clipboard.min.js
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,15 @@ new Clipboard('.btn', {
});
```

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.
See [Issue #155 (comment)](https://github.com/zenorocha/clipboard.js/issues/155#issuecomment-273124130)

```js
new Clipboard('.btn', {
container: document.getElementById('#modal')
});
```
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This issue isn't exclusive to bootstrap — you get the same issue with react-modal2 or any other library that changes the focus.

Might be worth clarifying this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iest updated the text


Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.

```js
Expand Down
19 changes: 10 additions & 9 deletions src/clipboard-action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@ class ClipboardAction {
* @param {Object} options
*/
resolveOptions(options = {}) {
this.action = options.action;
this.emitter = options.emitter;
this.target = options.target;
this.text = options.text;
this.trigger = options.trigger;
this.action = options.action;
this.container = options.container;
this.emitter = options.emitter;
this.target = options.target;
this.text = options.text;
this.trigger = options.trigger;

this.selectedText = '';
}
Expand Down Expand Up @@ -50,7 +51,7 @@ class ClipboardAction {
this.removeFake();

this.fakeHandlerCallback = () => this.removeFake();
this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;
this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;

this.fakeElem = document.createElement('textarea');
// Prevent zooming on iOS
Expand All @@ -69,7 +70,7 @@ class ClipboardAction {
this.fakeElem.setAttribute('readonly', '');
this.fakeElem.value = this.text;

document.body.appendChild(this.fakeElem);
this.container.appendChild(this.fakeElem);

this.selectedText = select(this.fakeElem);
this.copyText();
Expand All @@ -81,13 +82,13 @@ class ClipboardAction {
*/
removeFake() {
if (this.fakeHandler) {
document.body.removeEventListener('click', this.fakeHandlerCallback);
this.container.removeEventListener('click', this.fakeHandlerCallback);
this.fakeHandler = null;
this.fakeHandlerCallback = null;
}

if (this.fakeElem) {
document.body.removeChild(this.fakeElem);
this.container.removeChild(this.fakeElem);
this.fakeElem = null;
}
}
Expand Down
18 changes: 10 additions & 8 deletions src/clipboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ class Clipboard extends Emitter {
* @param {Object} options
*/
resolveOptions(options = {}) {
this.action = (typeof options.action === 'function') ? options.action : this.defaultAction;
this.target = (typeof options.target === 'function') ? options.target : this.defaultTarget;
this.text = (typeof options.text === 'function') ? options.text : this.defaultText;
this.action = (typeof options.action === 'function') ? options.action : this.defaultAction;
this.target = (typeof options.target === 'function') ? options.target : this.defaultTarget;
this.text = (typeof options.text === 'function') ? options.text : this.defaultText;
this.container = (typeof options.container === 'object') ? options.container : document.body;
}

/**
Expand All @@ -49,11 +50,12 @@ class Clipboard extends Emitter {
}

this.clipboardAction = new ClipboardAction({
action : this.action(trigger),
target : this.target(trigger),
text : this.text(trigger),
trigger,
emitter : this
action : this.action(trigger),
target : this.target(trigger),
text : this.text(trigger),
container : this.container,
trigger : trigger,
emitter : this
});
}

Expand Down
11 changes: 11 additions & 0 deletions test/clipboard-action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,12 @@ describe('ClipboardAction', () => {
it('should set base properties', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'foo'
});

assert.property(clip, 'action');
assert.property(clip, 'container');
assert.property(clip, 'emitter');
assert.property(clip, 'target');
assert.property(clip, 'text');
Expand All @@ -41,6 +43,7 @@ describe('ClipboardAction', () => {

let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'foo'
});

Expand Down Expand Up @@ -82,6 +85,7 @@ describe('ClipboardAction', () => {
it('should create a fake element and select its value', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'blah'
});

Expand All @@ -93,6 +97,7 @@ describe('ClipboardAction', () => {
it('should remove a temporary fake element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'blah'
});

Expand All @@ -106,6 +111,7 @@ describe('ClipboardAction', () => {
it('should select text from editable element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});

Expand All @@ -115,6 +121,7 @@ describe('ClipboardAction', () => {
it('should select text from non-editable element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#paragraph')
});

Expand Down Expand Up @@ -166,6 +173,7 @@ describe('ClipboardAction', () => {
it('should fire a success event with certain properties', done => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});

Expand All @@ -184,6 +192,7 @@ describe('ClipboardAction', () => {
it('should fire a error event with certain properties', done => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});

Expand All @@ -203,6 +212,7 @@ describe('ClipboardAction', () => {
it('should remove focus from target and text selection', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});

Expand All @@ -220,6 +230,7 @@ describe('ClipboardAction', () => {
it('should destroy an existing fake element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'blah'
});

Expand Down
14 changes: 14 additions & 0 deletions test/clipboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,20 @@ describe('Clipboard', () => {

assert.equal(global.fn, clipboard.text);
});

it('should set container as an object', () => {
let clipboard = new Clipboard('.btn', {
container: document.body
});

assert.equal(document.body, clipboard.container);
});

it('should set container as body by default', () => {
let clipboard = new Clipboard('.btn');

assert.equal(document.body, clipboard.container);
});
});

describe('#listenClick', () => {
Expand Down