Adds support for cut action

README.md

@@ -14,7 +14,7 @@ Or [download as ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zi
 
 ## Usage
 
-First, you need to instantiate it using a selector. This selector corresponds to the trigger element (usually a `<button>`).
+First, you need to instantiate it using a selector. This selector corresponds to the trigger element, usually a `<button>`.
 
 ```js
 new Clipboard('.btn');
@@ -23,16 +23,25 @@ new Clipboard('.btn');
 The easiest way to copy some content to the clipboard, is to include a `value` attribute in your trigger element.
 
 ```html
-<button class="btn" value="lorem ipsum">Copy</button>
+<button class="btn" value="Lorem ipsum">Copy</button>
 ```
 
-Another way of doing it is to copy the content from an `<input>` or `<textarea`>. You can do that by adding a `for` attribute in your trigger element. The value you include in this `for` attribute needs to match another's element `id` attribute.
+Another way of doing it, is to copy the content from an another element. You can do that by adding a `for` attribute in your trigger element. The value you include on this attribute needs to match another's element `id` attribute.
 
 ```html
-<input id="target" value="Lorem ipsum">
+<p id="target">Lorem ipsum</p>
 <button class="btn" for="target">Copy</button>
 ```
 
+Additionally, you can define a `type` attribute to specify if you want to either `copy` or `cut` content. If you omit this attribute, `copy` will be used.
+
+```html
+<input id="target" value="Lorem ipsum"></inpu>
+<button class="btn" type="cut" for="target">Copy</button>
+```
+
+As you may expect, the `cut` action only works on `<input>` or `<textarea>` elements.
+
 ## Browser Support
 
 This project relies on both [Select API](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand API](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand). When combined, they're supported in the following browsers.

dist/clipboard.min.js

@@ -1 +1 @@
-"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Clipboard=function(){function a(b){_classCallCheck(this,a),this._triggers=b,this.init()}return _createClass(a,[{key:"init",value:function(){var a=this;[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){var b=this;a.addEventListener("click",function(a){return b.select(a)})}},{key:"select",value:function(a){var b=a.currentTarget.getAttribute("value"),c=a.currentTarget.getAttribute("for");b?this.selectValue(b):c?this.selectTarget(c):console.error('No "for" or "value" attributes'),a.preventDefault()}},{key:"selectValue",value:function(a){var b=document.createElement("input");b.value=a,b.style.opacity=0,b.style.zIndex=-1,document.body.appendChild(b),b.select(),this.copy(),document.body.removeChild(b)}},{key:"selectTarget",value:function(a){var b=document.getElementById(a);if("INPUT"===b.nodeName||"TEXTAREA"===b.nodeName)b.select();else{var c=document.createRange();c.selectNode(b),window.getSelection().addRange(c)}this.copy()}},{key:"copy",value:function(){try{document.execCommand("copy"),window.getSelection().removeAllRanges()}catch(a){console.error(a)}}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();
+"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Clipboard=function(){function a(b){_classCallCheck(this,a),this._triggers=b,this.init()}return _createClass(a,[{key:"init",value:function(){var a=this;[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){var b=this;a.addEventListener("click",function(a){return b.select(a)})}},{key:"select",value:function(a){var b=a.currentTarget.getAttribute("for"),c=a.currentTarget.getAttribute("type")||"copy",d=a.currentTarget.getAttribute("value");if(d)this.selectValue(d,c);else{if(!b)throw new Error('Missing "for" or "value" attribute');this.selectTarget(b,c)}a.preventDefault()}},{key:"selectValue",value:function(a,b){var c=document.createElement("input");c.value=a,c.style.opacity=0,c.style.zIndex=-1,document.body.appendChild(c),c.select(),this.copy(b),document.body.removeChild(c)}},{key:"selectTarget",value:function(a,b){var c=document.getElementById(a);if("INPUT"===c.nodeName||"TEXTAREA"===c.nodeName)c.select();else{var d=document.createRange();d.selectNode(c),window.getSelection().addRange(d)}this.copy(b)}},{key:"copy",value:function(a){try{var b=document.execCommand(a);if(!b)throw'Invalid "type" attribute';window.getSelection().removeAllRanges()}catch(c){throw console.log(c),new Error(c)}}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();

index.html

@@ -5,12 +5,14 @@
     <title>Clipboard.js</title>
 </head>
 <body>
+    <button class="btn" type="copy" value="lorem ipsum">Copy</button>
+
     <p id="paragraph">Lorem ipsum dolor.</p>
-    <button class="btn" for="paragraph" type="button">Copy</button>
+    <button class="btn" type="copy" for="paragraph">Copy</button>
 
     <form>
         <input id="target" type="text" value="qwe">
-        <button class="btn" for="target" type="button">Copy</button>
+        <button class="btn" type="copy" for="target">Cut</button>
     </form>
 
     <script src="dist/clipboard.min.js"></script>

src/clipboard.js

@@ -28,24 +28,25 @@ class Clipboard {
     }
 
     select(e) {
-        var valueAttr  = e.currentTarget.getAttribute('value');
+        let targetAttr = e.currentTarget.getAttribute('for');
-        var targetAttr = e.currentTarget.getAttribute('for');
+        let typeAttr   = e.currentTarget.getAttribute('type') || 'copy';
+        let valueAttr  = e.currentTarget.getAttribute('value');
 
         if (valueAttr) {
-            this.selectValue(valueAttr);
+            this.selectValue(valueAttr, typeAttr);
         }
         else if (targetAttr) {
-            this.selectTarget(targetAttr);
+            this.selectTarget(targetAttr, typeAttr);
         }
         else {
-            console.error('Missing "for" or "value" attribute');
+            throw new Error('Missing "for" or "value" attribute');
         }
 
         e.preventDefault();
     }
 
-    selectValue(valueAttr) {
+    selectValue(valueAttr, typeAttr) {
-        var fake = document.createElement('input');
+        let fake = document.createElement('input');
 
         fake.value = valueAttr;
         fake.style.opacity = 0;
@@ -54,33 +55,36 @@ class Clipboard {
         document.body.appendChild(fake);
 
         fake.select();
-        this.copy();
+        this.copy(typeAttr);
 
         document.body.removeChild(fake);
     }
 
-    selectTarget(targetAttr) {
+    selectTarget(targetAttr, typeAttr) {
-        var target = document.getElementById(targetAttr);
+        let target = document.getElementById(targetAttr);
 
         if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
             target.select();
         }
         else {
-            var range = document.createRange();
+            let range = document.createRange();
             range.selectNode(target);
             window.getSelection().addRange(range);
         }
 
-        this.copy();
+        this.copy(typeAttr);
     }
 
-    copy() {
+    copy(typeAttr) {
         try {
-            document.execCommand('copy');
+            let successful = document.execCommand(typeAttr);
+            if (!successful) throw 'Invalid "type" attribute';
+
             window.getSelection().removeAllRanges();
         }
         catch (err) {
-            console.error(err);
+            console.log(err);
+            throw new Error(err);
         }
     }
 }