Compare commits

..

23 Commits

Author SHA1 Message Date
Zeno Rocha
26a9e9d56c Release v1.5.13 2016-10-16 22:44:03 -07:00
Zeno Rocha
fce625f151 Fixes #320 2016-10-16 18:53:34 -07:00
Zeno Rocha
f7040bae8a Adds meta viewport for all demos 2016-10-16 17:16:02 -07:00
Zeno Rocha
9f9d03c927 Adds Edge version #316 2016-09-26 13:57:28 -05:00
Cătălin Mariș
e18c26ae07 Add Edge to the Browser Support section (#316)
Ref: https://github.com/zenorocha/clipboard.js/pull/267#issuecomment-249620994
2016-09-26 13:48:16 -05:00
Zeno Rocha
70cfabec69 Update readme.md 2016-09-21 13:21:25 -07:00
Zeno Rocha
f700a1b12e Moves URLs to HTTPS 2016-09-21 11:42:37 -07:00
Zeno Rocha
9e3d662c4e Adjusts text based on #313 2016-09-21 11:04:07 -07:00
JY Kim
76b907949c issue #282 solution (#283)
* add selectedText

* better code

* remove dist folder

* Revert "remove dist folder"

This reverts commit 50e726c7a7.

* orogin dist source
2016-09-08 08:57:41 -07:00
Zeno Rocha
60b6887100 Updates site preview 2016-06-17 14:49:39 -07:00
Zeno Rocha
eb7418b51b Release v1.5.12 2016-06-09 07:57:20 -07:00
Alexander
869c4e3219 Fix bug that unable to remove fake event listener (#256)
* Fix bug that unable to remove fake event listener

* Update dist
2016-06-09 07:54:07 -07:00
Zeno Rocha
a4ab305297 Release v1.5.11 2016-06-08 21:46:20 -07:00
Zeno Rocha
294e9fcb5d Fix fake element position from "fixed" to "absolute" #194 #250 2016-06-08 21:44:54 -07:00
Ali Bozorgkhan
79c3361ca4 Press Ctrl+C to copy -> Press Command+C to copy (#252)
As Safari users are mostly using mac, coping a text needs Command+C instead of Ctrl+C
2016-06-02 15:28:16 -07:00
grabus
c3fefc1fc0 Fix memory leak because of fakeHandlers (#243)
addEventListener always returns undefined by spec
https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener
2016-05-26 11:35:18 -07:00
Zeno Rocha
42bd266f0b Adds basic JSFiddle to help people reproduce their bugs 2016-05-01 16:14:51 -07:00
Zeno Rocha
53a733fcb5 Release v1.5.10 2016-04-03 22:33:02 -07:00
Zeno Rocha
7a5a910bcd Removes error message when target/text attributes are null, undefined, or false 2016-04-03 22:16:22 -07:00
Zeno Rocha
0163f7cb72 Merge pull request #216 from sebastianekstrom/master
Use const instead of let when applicable
2016-04-01 08:48:49 -07:00
Sebastian Ekström
941bdbb16e Use const instead of let when applicable 2016-04-01 13:17:12 +02:00
Zeno Rocha
00d5cc4e96 Updates tagline #210 2016-03-17 09:12:23 -07:00
Zeno Rocha
07a1f8456b Throws error when disabled or readonly attributes are used on target element
Fixes #41
2016-03-01 15:38:25 -08:00
18 changed files with 211 additions and 172 deletions

View File

@@ -1,3 +1,7 @@
### Minimal example
> Fork this [JSFiddle](https://jsfiddle.net/zenorocha/5kk0eysw/) and reproduce your issue.
### Expected behaviour ### Expected behaviour
I thought that by going to the page '...' and pressing the button '...' then '...' would happen. I thought that by going to the page '...' and pressing the button '...' then '...' would happen.
@@ -6,14 +10,6 @@ I thought that by going to the page '...' and pressing the button '...' then '..
Instead of '...', what I saw was that '...' happened instead. Instead of '...', what I saw was that '...' happened instead.
### Steps to reproduce
1. Go this JSFiddle, JSBin, CodePen, etc
2. Click on '....'
3. Scroll down to '....'
4. Refresh the page and wait 5 secs
5. Finally the error will magically happen (if it is raining)
### Browsers affected ### Browsers affected
I tested on all major browsers and only IE 11 does not work. I tested on all major browsers and only IE 11 does not work.

View File

@@ -1,6 +1,6 @@
{ {
"name": "clipboard", "name": "clipboard",
"version": "1.5.9", "version": "1.5.13",
"description": "Modern copy to clipboard. No Flash. Just 2kb", "description": "Modern copy to clipboard. No Flash. Just 2kb",
"license": "MIT", "license": "MIT",
"main": "dist/clipboard.js", "main": "dist/clipboard.js",

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>constructor-node</title> <title>constructor-node</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>constructor-nodelist</title> <title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>constructor-selector</title> <title>constructor-selector</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>function-target</title> <title>function-target</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>function-text</title> <title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>target-div</title> <title>target-div</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>target-input</title> <title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>target-textarea</title> <title>target-textarea</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- 1. Define some markup --> <!-- 1. Define some markup -->

246
dist/clipboard.js vendored
View File

@@ -1,23 +1,124 @@
/*! /*!
* clipboard.js v1.5.9 * clipboard.js v1.5.13
* https://zenorocha.github.io/clipboard.js * https://zenorocha.github.io/clipboard.js
* *
* Licensed MIT © Zeno Rocha * Licensed MIT © Zeno Rocha
*/ */
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Clipboard = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Clipboard = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var matches = require('matches-selector') /**
* Module Dependencies
module.exports = function (element, selector, checkYoSelf) { */
var parent = checkYoSelf ? element : element.parentNode
while (parent && parent !== document) {
if (matches(parent, selector)) return parent;
parent = parent.parentNode
}
}
},{"matches-selector":5}],2:[function(require,module,exports){ try {
var closest = require('closest'); var matches = require('matches-selector')
} catch (err) {
var matches = require('component-matches-selector')
}
/**
* Export `closest`
*/
module.exports = closest
/**
* Closest
*
* @param {Element} el
* @param {String} selector
* @param {Element} scope (optional)
*/
function closest (el, selector, scope) {
scope = scope || document.documentElement;
// walk up the dom
while (el && el !== scope) {
if (matches(el, selector)) return el;
el = el.parentNode;
}
// check scope for match
return matches(el, selector) ? el : null;
}
},{"component-matches-selector":2,"matches-selector":2}],2:[function(require,module,exports){
/**
* Module dependencies.
*/
try {
var query = require('query');
} catch (err) {
var query = require('component-query');
}
/**
* Element prototype.
*/
var proto = Element.prototype;
/**
* Vendor function.
*/
var vendor = proto.matches
|| proto.webkitMatchesSelector
|| proto.mozMatchesSelector
|| proto.msMatchesSelector
|| proto.oMatchesSelector;
/**
* Expose `match()`.
*/
module.exports = match;
/**
* Match `el` to `selector`.
*
* @param {Element} el
* @param {String} selector
* @return {Boolean}
* @api public
*/
function match(el, selector) {
if (!el || el.nodeType !== 1) return false;
if (vendor) return vendor.call(el, selector);
var nodes = query.all(selector, el.parentNode);
for (var i = 0; i < nodes.length; ++i) {
if (nodes[i] == el) return true;
}
return false;
}
},{"component-query":3,"query":3}],3:[function(require,module,exports){
function one(selector, el) {
return el.querySelector(selector);
}
exports = module.exports = function(selector, el){
el = el || document;
return one(selector, el);
};
exports.all = function(selector, el){
el = el || document;
return el.querySelectorAll(selector);
};
exports.engine = function(obj){
if (!obj.one) throw new Error('.one callback required');
if (!obj.all) throw new Error('.all callback required');
one = obj.one;
exports.all = obj.all;
return exports;
};
},{}],4:[function(require,module,exports){
var closest = require('component-closest');
/** /**
* Delegates event to a selector. * Delegates event to a selector.
@@ -62,7 +163,7 @@ function listener(element, selector, type, callback) {
module.exports = delegate; module.exports = delegate;
},{"closest":1}],3:[function(require,module,exports){ },{"component-closest":1}],5:[function(require,module,exports){
/** /**
* Check if argument is a HTML element. * Check if argument is a HTML element.
* *
@@ -113,7 +214,7 @@ exports.fn = function(value) {
return type === '[object Function]'; return type === '[object Function]';
}; };
},{}],4:[function(require,module,exports){ },{}],6:[function(require,module,exports){
var is = require('./is'); var is = require('./is');
var delegate = require('delegate'); var delegate = require('delegate');
@@ -210,52 +311,16 @@ function listenSelector(selector, type, callback) {
module.exports = listen; module.exports = listen;
},{"./is":3,"delegate":2}],5:[function(require,module,exports){ },{"./is":5,"delegate":4}],7:[function(require,module,exports){
/**
* Element prototype.
*/
var proto = Element.prototype;
/**
* Vendor function.
*/
var vendor = proto.matchesSelector
|| proto.webkitMatchesSelector
|| proto.mozMatchesSelector
|| proto.msMatchesSelector
|| proto.oMatchesSelector;
/**
* Expose `match()`.
*/
module.exports = match;
/**
* Match `el` to `selector`.
*
* @param {Element} el
* @param {String} selector
* @return {Boolean}
* @api public
*/
function match(el, selector) {
if (vendor) return vendor.call(el, selector);
var nodes = el.parentNode.querySelectorAll(selector);
for (var i = 0; i < nodes.length; ++i) {
if (nodes[i] == el) return true;
}
return false;
}
},{}],6:[function(require,module,exports){
function select(element) { function select(element) {
var selectedText; var selectedText;
if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { if (element.nodeName === 'SELECT') {
element.focus();
selectedText = element.value;
}
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
element.focus(); element.focus();
element.setSelectionRange(0, element.value.length); element.setSelectionRange(0, element.value.length);
@@ -281,14 +346,14 @@ function select(element) {
module.exports = select; module.exports = select;
},{}],7:[function(require,module,exports){ },{}],8:[function(require,module,exports){
function E () { function E () {
// Keep this empty so it's easier to inherit from // Keep this empty so it's easier to inherit from
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3) // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
} }
E.prototype = { E.prototype = {
on: function (name, callback, ctx) { on: function (name, callback, ctx) {
var e = this.e || (this.e = {}); var e = this.e || (this.e = {});
(e[name] || (e[name] = [])).push({ (e[name] || (e[name] = [])).push({
@@ -349,7 +414,7 @@ E.prototype = {
module.exports = E; module.exports = E;
},{}],8:[function(require,module,exports){ },{}],9:[function(require,module,exports){
(function (global, factory) { (function (global, factory) {
if (typeof define === "function" && define.amd) { if (typeof define === "function" && define.amd) {
define(['module', 'select'], factory); define(['module', 'select'], factory);
@@ -407,7 +472,6 @@ module.exports = E;
/** /**
* @param {Object} options * @param {Object} options
*/ */
function ClipboardAction(options) { function ClipboardAction(options) {
_classCallCheck(this, ClipboardAction); _classCallCheck(this, ClipboardAction);
@@ -434,14 +498,10 @@ module.exports = E;
}; };
ClipboardAction.prototype.initSelection = function initSelection() { ClipboardAction.prototype.initSelection = function initSelection() {
if (this.text && this.target) { if (this.text) {
throw new Error('Multiple attributes declared, use either "target" or "text"');
} else if (this.text) {
this.selectFake(); this.selectFake();
} else if (this.target) { } else if (this.target) {
this.selectTarget(); this.selectTarget();
} else {
throw new Error('Missing required attributes, use either "target" or "text"');
} }
}; };
@@ -452,9 +512,10 @@ module.exports = E;
this.removeFake(); this.removeFake();
this.fakeHandler = document.body.addEventListener('click', function () { this.fakeHandlerCallback = function () {
return _this.removeFake(); return _this.removeFake();
}); };
this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;
this.fakeElem = document.createElement('textarea'); this.fakeElem = document.createElement('textarea');
// Prevent zooming on iOS // Prevent zooming on iOS
@@ -464,10 +525,13 @@ module.exports = E;
this.fakeElem.style.padding = '0'; this.fakeElem.style.padding = '0';
this.fakeElem.style.margin = '0'; this.fakeElem.style.margin = '0';
// Move element out of screen horizontally // Move element out of screen horizontally
this.fakeElem.style.position = 'fixed'; this.fakeElem.style.position = 'absolute';
this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px'; this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
// Move element to the same position vertically // Move element to the same position vertically
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px'; var yPosition = window.pageYOffset || document.documentElement.scrollTop;
this.fakeElem.addEventListener('focus', window.scrollTo(0, yPosition));
this.fakeElem.style.top = yPosition + 'px';
this.fakeElem.setAttribute('readonly', ''); this.fakeElem.setAttribute('readonly', '');
this.fakeElem.value = this.text; this.fakeElem.value = this.text;
@@ -479,8 +543,9 @@ module.exports = E;
ClipboardAction.prototype.removeFake = function removeFake() { ClipboardAction.prototype.removeFake = function removeFake() {
if (this.fakeHandler) { if (this.fakeHandler) {
document.body.removeEventListener('click'); document.body.removeEventListener('click', this.fakeHandlerCallback);
this.fakeHandler = null; this.fakeHandler = null;
this.fakeHandlerCallback = null;
} }
if (this.fakeElem) { if (this.fakeElem) {
@@ -495,7 +560,7 @@ module.exports = E;
}; };
ClipboardAction.prototype.copyText = function copyText() { ClipboardAction.prototype.copyText = function copyText() {
var succeeded = undefined; var succeeded = void 0;
try { try {
succeeded = document.execCommand(this.action); succeeded = document.execCommand(this.action);
@@ -507,20 +572,12 @@ module.exports = E;
}; };
ClipboardAction.prototype.handleResult = function handleResult(succeeded) { ClipboardAction.prototype.handleResult = function handleResult(succeeded) {
if (succeeded) { this.emitter.emit(succeeded ? 'success' : 'error', {
this.emitter.emit('success', { action: this.action,
action: this.action, text: this.selectedText,
text: this.selectedText, trigger: this.trigger,
trigger: this.trigger, clearSelection: this.clearSelection.bind(this)
clearSelection: this.clearSelection.bind(this) });
});
} else {
this.emitter.emit('error', {
action: this.action,
trigger: this.trigger,
clearSelection: this.clearSelection.bind(this)
});
}
}; };
ClipboardAction.prototype.clearSelection = function clearSelection() { ClipboardAction.prototype.clearSelection = function clearSelection() {
@@ -554,6 +611,14 @@ module.exports = E;
set: function set(target) { set: function set(target) {
if (target !== undefined) { if (target !== undefined) {
if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) { if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {
if (this.action === 'copy' && target.hasAttribute('disabled')) {
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
}
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
}
this._target = target; this._target = target;
} else { } else {
throw new Error('Invalid "target" value, use a valid Element'); throw new Error('Invalid "target" value, use a valid Element');
@@ -571,7 +636,7 @@ module.exports = E;
module.exports = ClipboardAction; module.exports = ClipboardAction;
}); });
},{"select":6}],9:[function(require,module,exports){ },{"select":7}],10:[function(require,module,exports){
(function (global, factory) { (function (global, factory) {
if (typeof define === "function" && define.amd) { if (typeof define === "function" && define.amd) {
define(['module', './clipboard-action', 'tiny-emitter', 'good-listener'], factory); define(['module', './clipboard-action', 'tiny-emitter', 'good-listener'], factory);
@@ -636,7 +701,6 @@ module.exports = E;
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
* @param {Object} options * @param {Object} options
*/ */
function Clipboard(trigger, options) { function Clipboard(trigger, options) {
_classCallCheck(this, Clipboard); _classCallCheck(this, Clipboard);
@@ -732,5 +796,5 @@ module.exports = E;
module.exports = Clipboard; module.exports = Clipboard;
}); });
},{"./clipboard-action":8,"good-listener":4,"tiny-emitter":7}]},{},[9])(9) },{"./clipboard-action":9,"good-listener":6,"tiny-emitter":8}]},{},[10])(10)
}); });

File diff suppressed because one or more lines are too long

View File

@@ -3,7 +3,7 @@
Package.describe({ Package.describe({
name: "zenorocha:clipboard", name: "zenorocha:clipboard",
summary: "Modern copy to clipboard. No Flash. Just 2kb.", summary: "Modern copy to clipboard. No Flash. Just 2kb.",
version: "1.5.9", version: "1.5.13",
git: "https://github.com/zenorocha/clipboard.js" git: "https://github.com/zenorocha/clipboard.js"
}); });

View File

@@ -1,6 +1,6 @@
{ {
"name": "clipboard", "name": "clipboard",
"version": "1.5.9", "version": "1.5.13",
"description": "Modern copy to clipboard. No Flash. Just 2kb", "description": "Modern copy to clipboard. No Flash. Just 2kb",
"repository": "zenorocha/clipboard.js", "repository": "zenorocha/clipboard.js",
"license": "MIT", "license": "MIT",

View File

@@ -3,9 +3,9 @@
[![Build Status](http://img.shields.io/travis/zenorocha/clipboard.js/master.svg?style=flat)](https://travis-ci.org/zenorocha/clipboard.js) [![Build Status](http://img.shields.io/travis/zenorocha/clipboard.js/master.svg?style=flat)](https://travis-ci.org/zenorocha/clipboard.js)
![Killing Flash](https://img.shields.io/badge/killing-flash-brightgreen.svg?style=flat) ![Killing Flash](https://img.shields.io/badge/killing-flash-brightgreen.svg?style=flat)
> Modern copy to clipboard. No Flash. Just 2kb > Modern copy to clipboard. No Flash. Just 3kb gzipped.
<a href="http://clipboardjs.com/"><img width="728" src="https://cloud.githubusercontent.com/assets/398893/9983535/5ab0a950-5fb4-11e5-9602-e73c0b661883.jpg" alt="Demo"></a> <a href="https://clipboardjs.com/"><img width="728" src="https://cloud.githubusercontent.com/assets/398893/16165747/a0f6fc46-349a-11e6-8c9b-c5fd58d9099c.png" alt="Demo"></a>
## Why ## Why
@@ -57,7 +57,7 @@ A pretty common use case is to copy content from another element. You can do tha
The value you include on this attribute needs to match another's element selector. The value you include on this attribute needs to match another's element selector.
<a href="http://clipboardjs.com/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a> <a href="https://clipboardjs.com/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a>
```html ```html
<!-- Target --> <!-- Target -->
@@ -75,7 +75,7 @@ Additionally, you can define a `data-clipboard-action` attribute to specify if y
If you omit this attribute, `copy` will be used by default. If you omit this attribute, `copy` will be used by default.
<a href="http://clipboardjs.com/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a> <a href="https://clipboardjs.com/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a>
```html ```html
<!-- Target --> <!-- Target -->
@@ -93,7 +93,7 @@ As you may expect, the `cut` action only works on `<input>` or `<textarea>` elem
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. 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://clipboardjs.com/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a> <a href="https://clipboardjs.com/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
```html ```html
<!-- Trigger --> <!-- Trigger -->
@@ -125,7 +125,7 @@ clipboard.on('error', function(e) {
}); });
``` ```
For a live demonstration, open this [site](http://clipboardjs.com/) and just your console :) For a live demonstration, open this [site](https://clipboardjs.com/) and just your console :)
## Advanced Options ## Advanced Options
@@ -160,17 +160,13 @@ clipboard.destroy();
## Browser Support ## Browser Support
This library relies on both [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) APIs. The second one is supported in the following browsers. This library relies on both [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) APIs. The first one is [supported by all browsers](http://caniuse.com/#search=selection) while the second one is supported in the following browsers.
| <img src="http://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="http://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="http://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="http://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="http://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> | | <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
|:---:|:---:|:---:|:---:|:---:| |:---:|:---:|:---:|:---:|:---:|:---:|
| 42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | Nope ✘ | | 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
Although copy/cut operations with [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) aren't supported on Safari yet (including mobile), it gracefully degrades because [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) is supported. The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected.
That means you can show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected.
For a live demonstration, open this [site](http://clipboardjs.com) on Safari.
## License ## License

View File

@@ -32,18 +32,12 @@ class ClipboardAction {
* on the existence of `text` and `target` properties. * on the existence of `text` and `target` properties.
*/ */
initSelection() { initSelection() {
if (this.text && this.target) { if (this.text) {
throw new Error('Multiple attributes declared, use either "target" or "text"');
}
else if (this.text) {
this.selectFake(); this.selectFake();
} }
else if (this.target) { else if (this.target) {
this.selectTarget(); this.selectTarget();
} }
else {
throw new Error('Missing required attributes, use either "target" or "text"');
}
} }
/** /**
@@ -51,11 +45,12 @@ class ClipboardAction {
* and makes a selection on it. * and makes a selection on it.
*/ */
selectFake() { selectFake() {
let isRTL = document.documentElement.getAttribute('dir') == 'rtl'; const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
this.removeFake(); this.removeFake();
this.fakeHandler = document.body.addEventListener('click', () => this.removeFake()); this.fakeHandlerCallback = () => this.removeFake();
this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;
this.fakeElem = document.createElement('textarea'); this.fakeElem = document.createElement('textarea');
// Prevent zooming on iOS // Prevent zooming on iOS
@@ -65,10 +60,13 @@ class ClipboardAction {
this.fakeElem.style.padding = '0'; this.fakeElem.style.padding = '0';
this.fakeElem.style.margin = '0'; this.fakeElem.style.margin = '0';
// Move element out of screen horizontally // Move element out of screen horizontally
this.fakeElem.style.position = 'fixed'; this.fakeElem.style.position = 'absolute';
this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px'; this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
// Move element to the same position vertically // Move element to the same position vertically
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px'; let yPosition = window.pageYOffset || document.documentElement.scrollTop;
this.fakeElem.addEventListener('focus', window.scrollTo(0, yPosition));
this.fakeElem.style.top = yPosition + 'px';
this.fakeElem.setAttribute('readonly', ''); this.fakeElem.setAttribute('readonly', '');
this.fakeElem.value = this.text; this.fakeElem.value = this.text;
@@ -84,8 +82,9 @@ class ClipboardAction {
*/ */
removeFake() { removeFake() {
if (this.fakeHandler) { if (this.fakeHandler) {
document.body.removeEventListener('click'); document.body.removeEventListener('click', this.fakeHandlerCallback);
this.fakeHandler = null; this.fakeHandler = null;
this.fakeHandlerCallback = null;
} }
if (this.fakeElem) { if (this.fakeElem) {
@@ -123,21 +122,12 @@ class ClipboardAction {
* @param {Boolean} succeeded * @param {Boolean} succeeded
*/ */
handleResult(succeeded) { handleResult(succeeded) {
if (succeeded) { this.emitter.emit(succeeded ? 'success' : 'error', {
this.emitter.emit('success', { action: this.action,
action: this.action, text: this.selectedText,
text: this.selectedText, trigger: this.trigger,
trigger: this.trigger, clearSelection: this.clearSelection.bind(this)
clearSelection: this.clearSelection.bind(this) });
});
}
else {
this.emitter.emit('error', {
action: this.action,
trigger: this.trigger,
clearSelection: this.clearSelection.bind(this)
});
}
} }
/** /**
@@ -179,6 +169,14 @@ class ClipboardAction {
set target(target) { set target(target) {
if (target !== undefined) { if (target !== undefined) {
if (target && typeof target === 'object' && target.nodeType === 1) { if (target && typeof target === 'object' && target.nodeType === 1) {
if (this.action === 'copy' && target.hasAttribute('disabled')) {
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
}
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
}
this._target = target; this._target = target;
} }
else { else {

View File

@@ -42,7 +42,7 @@ class Clipboard extends Emitter {
* @param {Event} e * @param {Event} e
*/ */
onClick(e) { onClick(e) {
let trigger = e.delegateTarget || e.currentTarget; const trigger = e.delegateTarget || e.currentTarget;
if (this.clipboardAction) { if (this.clipboardAction) {
this.clipboardAction = null; this.clipboardAction = null;
@@ -70,7 +70,7 @@ class Clipboard extends Emitter {
* @param {Element} trigger * @param {Element} trigger
*/ */
defaultTarget(trigger) { defaultTarget(trigger) {
let selector = getAttributeValue('target', trigger); const selector = getAttributeValue('target', trigger);
if (selector) { if (selector) {
return document.querySelector(selector); return document.querySelector(selector);
@@ -105,7 +105,7 @@ class Clipboard extends Emitter {
* @param {Element} element * @param {Element} element
*/ */
function getAttributeValue(suffix, element) { function getAttributeValue(suffix, element) {
let attribute = `data-clipboard-${suffix}`; const attribute = `data-clipboard-${suffix}`;
if (!element.hasAttribute(attribute)) { if (!element.hasAttribute(attribute)) {
return; return;

View File

@@ -35,29 +35,6 @@ describe('ClipboardAction', () => {
}); });
describe('#initSelection', () => { describe('#initSelection', () => {
it('should throw an error since both "text" and "target" were passed', done => {
try {
new ClipboardAction({
text: 'foo',
target: document.querySelector('#input')
});
}
catch(e) {
assert.equal(e.message, 'Multiple attributes declared, use either "target" or "text"');
done();
}
});
it('should throw an error since neither "text" nor "target" were passed', done => {
try {
new ClipboardAction();
}
catch(e) {
assert.equal(e.message, 'Missing required attributes, use either "target" or "text"');
done();
}
});
it('should set the position right style property', done => { it('should set the position right style property', done => {
// Set document direction // Set document direction
document.documentElement.setAttribute('dir', 'rtl'); document.documentElement.setAttribute('dir', 'rtl');