Browse Source

feat first commit

ganzw 8 years ago
parent
commit
9fe80176d2
7 changed files with 358 additions and 1 deletions
  1. 1 0
      .gitignore
  2. 110 1
      README.md
  3. 22 0
      build/gulpfile.js
  4. 18 0
      build/package.json
  5. 7 0
      clipBoard.min.js
  6. 156 0
      src/clipBoard.js
  7. 44 0
      test/index.html

+ 1 - 0
.gitignore

@@ -0,0 +1 @@
+/build/node_modules

+ 110 - 1
README.md

@@ -1,2 +1,111 @@
 # clipBoard.js
-with javascript operating clipboard
+with javascript operating clipboard, copy、cut and paste.
+
+# example
+<input type="text" id="data" value="剪切板">
+<button id="copy">复制</button>
+<button id="cut">剪切</button>
+<!--[if IE]>
+    <button id="paste">粘贴</button>
+<![endif]-->
+<script src="../clipBoard.min.js"></script>
+<script>
+/**
+ * 复制、剪切:chrome、Firefox、ie
+ * 粘贴:ie
+ * @date   2016-04-25
+ * @return {[type]}   [description]
+ */
+document.getElementById('copy').onclick = function() {
+	var test = new clipBoard(document.getElementById('data'), {
+		beforeCopy: function() {
+		},
+		copy: function() {
+			return document.getElementById('data').value;
+		},
+		afterCopy: function() {
+		}
+	});
+};
+document.getElementById('cut').onclick = function() {
+	var test = new clipBoard(document.getElementById('data'), {});
+	test.cut();
+};
+document.getElementById('paste').onclick = function() {
+	var a = new clipBoard(document.getElementById('data'), {});
+	a.paste();
+};
+</script>
+
+# support
+|               | copy   |  cut    |  paste   |
+| :-----------: |:------:| :------:| :------: |   
+| chrome        | √      | √       | ×        |
+| Firefox       | √      | √       | ×        |
+| IE7+          | √      | √       | √        |
+
+
+# methods
+###  copy
+```
+var copy = new clipBoard(document.getElementById('data'), {
+	beforeCopy: function() {
+		
+	},
+	copy: function() {
+		return document.getElementById('data').value;
+	},
+	afterCopy: function() {
+
+	}
+});
+```
+copy will be called automatic, if you want call by yourself, you can do like this 
+```
+var copy = new clipBoard(document.getElementById('data'));
+copy.copyd();
+```
+> document.getElementById('data') is the value target, you can also use it with jquery  $('#data')
+
+
+### cut
+it same to copy
+```
+var cut = new clipBoard(document.getElementById('data'), {
+	beforeCut: function() {
+		
+	},
+	Cut: function() {
+		return document.getElementById('data').value;
+	},
+	afterCut: function() {
+
+	}
+});
+```
+or
+```
+var cut = new clipBoard(document.getElementById('data'));
+cut.cut();
+```
+
+### paste
+```
+var cut = new clipBoard(document.getElementById('data'), {
+	beforeCut: function() {
+		
+	},
+	Cut: function() {
+		return document.getElementById('data').value;
+	},
+	afterCut: function() {
+
+	}
+});
+```
+or
+```
+var cut = new clipBoard(document.getElementById('data'));
+cut.cut();
+```
+> document.getElementById('data') is the paste target, you can also use it with jquery  $('#data')

+ 22 - 0
build/gulpfile.js

@@ -0,0 +1,22 @@
+var gulp = require('gulp'),
+	concat = require("gulp-concat"),
+	clean = require("gulp-clean"),
+	uglify = require("gulp-uglify"),
+	rename = require('gulp-rename');
+
+// 清除aTpl.min.js
+gulp.task("cleand", function(){
+  return gulp.src(['../clipBoard.min.js'], {read: false}).pipe(clean({force:true}));
+});
+
+// 压缩
+gulp.task("default", ["cleand"], function() {
+	return gulp.src("../src/clipBoard.js")
+		.pipe(uglify({
+			mangle: true
+		}))
+		.pipe(rename({
+			suffix: '.min'
+		}))
+		.pipe(gulp.dest("../"));
+});

+ 18 - 0
build/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "giraffe",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "gulp": "*",
+    "gulp-concat": "*",
+    "gulp-uglify": "*",
+    "gulp-rename": "*",
+    "gulp-clean": "*"
+  },
+  "author": "",
+  "license": "ISC"
+}

File diff suppressed because it is too large
+ 7 - 0
clipBoard.min.js


+ 156 - 0
src/clipBoard.js

@@ -0,0 +1,156 @@
+/**
+ * clipboard.js 
+ * width clipboard.js, you can copy cut and paste clipboard data
+ * the main methods ard execCommand for modern browser and clipboardData for ie
+ * @author ganzw@gmail.com
+ * @url    https://github.com/baixuexiyang/clipBoard.js
+ */
+;(function(name, fun) {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = fun();
+    } else if (typeof define === 'function' && define.amd) {
+        define(fun);
+    } else {
+        this[name] = fun();
+    }
+})('clipBoard', function() {
+    "use strict";
+
+    /**
+     * tar is the value
+     * @date   2016-04-25
+     * @param  {[type]}   tar     [description]
+     * @param  {[type]}   options [description]
+     * @return {[type]}           [description]
+     */
+    function clipBoard(tar, options) {
+        this.options = options || {};
+        this.tar = tar[0] || tar;
+        // if options contain copy, copy will be applied soon
+        if (this.options.copy) {
+            this.copyd();
+        }
+        if(this.options.cut) {
+        	this.cut();
+        }
+
+        if(this.options.paste) {
+        	this.paste();
+        }
+    }
+
+    /**
+     * coping is to set the value to clipboard
+     * you can set the value through copy function, and the function be called autoly
+     * Also you can set the paramer and it will be set the clipboard
+     */
+    clipBoard.prototype.copyd = function(value) {
+        // before the copy it will be called, you can check the value or modify the value
+        if (this.options.beforeCopy) {
+            this.options.beforeCopy();
+        }
+        // if the options set copy function, the value will be set. then get the paramer value.
+        // above all, if the value is null, then will be set the tar of value
+        value = value || this.tar.value || this.tar.innerText;
+        if (this.options.copy) {
+            value = this.options.copy();
+        }
+        // for modern browser
+        if (document.execCommand) {
+            var element = document.createElement('SPAN');
+            element.textContent = value;
+            document.body.appendChild(element);
+            if (document.selection) {
+                var range = document.body.createTextRange();
+                range.moveToElementText(element);
+                range.select();
+            } else if (window.getSelection) {
+                var range = document.createRange();
+                range.selectNode(element);
+                window.getSelection().removeAllRanges();
+                window.getSelection().addRange(range);
+            }
+            document.execCommand('copy');
+            element.remove ? element.remove() : element.removeNode(true);
+        }
+        // for ie
+        if (window.clipboardData) {
+            window.clipboardData.setData('text', value);
+        }
+        // after copy
+        if (this.options.afterCopy) {
+            this.options.afterCopy();
+        }
+    };
+    /**
+     * cut the value of input or textarea
+     * @date   2016-04-25
+     * @return {[type]}   [description]
+     */
+    clipBoard.prototype.cut = function() {
+        if (this.tar.type !== 'text' && this.tar.type !== 'textarea') {
+            return;
+        }
+        if (this.options.beforeCut) {
+            this.options.beforeCut();
+        }
+        if (document.execCommand) {
+            var element = this.tar;
+            if (document.selection) {
+                var range = document.body.createTextRange();
+                range.moveToElementText(element);
+                range.select();
+            } else if (window.getSelection) {
+                element.select();
+            }
+            document.execCommand('cut');
+        }
+        // for ie
+        if (window.clipboardData) {
+            window.clipboardData.setData('text', this.tar.value);
+            this.tar.value = '';
+        }
+        // after copy
+        if (this.options.afterCut) {
+            this.options.afterCut();
+        }
+    };
+
+    /**
+     * paste the clipboard value to input or textarea
+     * @date   2016-04-25
+     * @return {[type]}   [description]
+     */
+    clipBoard.prototype.paste = function() {
+    	if (this.tar.type !== 'text' && this.tar.type !== 'textarea') {
+            return;
+        }
+        if (this.options.beforePaste) {
+            this.options.beforePaste();
+        }
+        if (document.execCommand) {
+            var element = this.tar;
+            if(element.setSelectionRange) {
+           		element.focus();
+           		element.setSelectionRange(element.value.length, element.value.length);
+    		} else if (element.createTextRange) {
+    			var range = element.createTextRange();
+    			range.collapse(true);
+    			range.moveEnd('character', element.value.length);
+    			range.moveStart('character', element.value.length);
+    			range.select();
+           	}
+            document.execCommand('paste');
+        }
+        // for ie
+        if (!document.execCommand && window.clipboardData) {
+            this.tar.value +=  window.clipboardData.getData('text');
+        }
+        // after Paste
+        if (this.options.afterPaste) {
+            this.options.afterPaste();
+        }
+    };
+
+    return clipBoard;
+});

+ 44 - 0
test/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>test</title>
+</head>
+<body>
+    <input type="text" id="data" value="测试数据">
+    <button id="copy">复制</button>
+    <button id="cut">剪切</button>
+    <!--[if IE]>
+        <button id="paste">粘贴</button>
+    <![endif]-->
+    <script src="../clipBoard.min.js"></script>
+    <script>
+    /**
+     * 复制、剪切:chrome、Firefox、ie
+     * 粘贴:ie
+     * @date   2016-04-25
+     * @return {[type]}   [description]
+     */
+    document.getElementById('copy').onclick = function() {
+    	var test = new clipBoard(document.getElementById('data'), {
+    		beforeCopy: function() {
+    		},
+    		copy: function() {
+    			return document.getElementById('data').value;
+    		},
+    		afterCopy: function() {
+    		}
+    	});
+    };
+    document.getElementById('cut').onclick = function() {
+    	var test = new clipBoard(document.getElementById('data'), {});
+    	test.cut();
+    };
+    document.getElementById('paste').onclick = function() {
+    	var a = new clipBoard(document.getElementById('data'), {});
+    	a.paste();
+    };
+    </script>
+</body>
+
+</html>

Some files were not shown because too many files changed in this diff