Skip to content

Commit

Permalink
Container option (#368)
Browse files Browse the repository at this point in the history 
* Allow container option to fix bugs related to bootstrap modals etc.

* Updated readme to reflect addition of container option

* Name link

* Removed test log

* Remove unwanted whitespace

* Refactored description
  • Loading branch information
@johnsenpeder @zenorocha
johnsenpeder authored and zenorocha committed May 29, 2017
1 parent 4065080 commit f42b570
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 23 deletions.
19 changes: 14 additions & 5 deletions dist/clipboard.js
View file
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

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions readme.md
View file
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')
});
```

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
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
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
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
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

0 comments on commit f42b570

Please sign in to comment.