Add the zero clipboard plugin to copy the word into the clipboard

PeachScript · PeachScript · commit 219becef1151 · 2014-12-04T16:29:18.000+08:00
diff --git a/app/index.html b/app/index.html
@@ -4,7 +4,9 @@
         <meta charset="UTF-8">
         <title>Variables Library - Abstack Tech</title>
         <link rel="stylesheet" href="styles/main.min.css">
+        <script src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
         <script src="bower_components/angularjs/angular.min.js"></script>
+        <script src="bower_components/angular-zeroclipboard/src/angular-zeroclipboard.js"></script>
         <script src="scripts/app.js"></script>
     </head>
     <body ng-app="abstackVarLib" ng-controller="mainCtrl">
@@ -15,7 +17,7 @@
         <ul class="word-list ng-hide" ng-show="wordsList">
             <li ng-repeat="word in wordsList | keywords: keywords">
                 <h3>
-                    <button class="btn-copy">COPY</button>
+                    <button class="btn-copy" ui-zeroclip zeroclip-model="word.word" zeroclip-copied="copiedWord(word)" ng-bind="word.copyTip || 'COPY'">COPY</button>
                     <a target="_blank" ng-href="{{ word.url?word.url: 'http://www.dict.cn/' + word.word }}" ng-bind="word.word"></a>
                 </h3>
                 <span class="tag-box">
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -3,7 +3,13 @@
 *
 * Description: main
 */
-angular.module('abstackVarLib', [])
+angular.module('abstackVarLib', ['zeroclipboard'])
+    .config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
+        // config ZeroClipboard
+        uiZeroclipConfigProvider.setZcConf({
+          swfPath: '../bower_components/zeroclipboard/dist/ZeroClipboard.swf'
+        });
+    }])
     .filter('keywords', function(){
         return function(input, type){
             if(!type)
@@ -18,7 +24,7 @@ angular.module('abstackVarLib', [])
             return temp;
         }
     })
-    .controller('mainCtrl', ['$http', '$scope', function($http, $scope){
+    .controller('mainCtrl', ['$timeout', '$http', '$scope', function($timeout, $http, $scope){
 
         $http.get('/json/words.json')
             .success(function(data){
@@ -29,5 +35,10 @@ angular.module('abstackVarLib', [])
             $scope.keywords = tag;
         }
 
-
+        $scope.copiedWord = function(word){
+            word.copyTip = 'COPIED !';
+            $timeout(function(){
+                delete word.copyTip;
+            }, 1500);
+        }
     }]);
diff --git a/app/styles/main.less b/app/styles/main.less
@@ -113,7 +113,7 @@ only screen and (min-device-pixel-ratio: 2){
                 border-left: 1px solid #49b3d9;
                 cursor: pointer;
                 outline: none;
-                &:hover{
+                &.zeroclipboard-is-hover{
                     background-color: @main-color;
                 }
             }
diff --git a/bower.json b/bower.json
@@ -24,6 +24,7 @@
     "tests"
   ],
   "dependencies": {
-    "angularjs": "1.2.27"
+    "angularjs": "1.2.27",
+    "angular-zeroclipboard": "~0.3.2"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ only screen and (min-device-pixel-ratio: 2){`
`113`	`113`	`border-left: 1px solid #49b3d9;`
`114`	`114`	`cursor: pointer;`
`115`	`115`	`outline: none;`
`116`		`- &:hover{`
	`116`	`+ &.zeroclipboard-is-hover{`
`117`	`117`	`background-color: @main-color;`
`118`	`118`	`}`
`119`	`119`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@`
`24`	`24`	`"tests"`
`25`	`25`	`],`
`26`	`26`	`"dependencies": {`
`27`		`- "angularjs": "1.2.27"`
	`27`	`+ "angularjs": "1.2.27",`
	`28`	`+ "angular-zeroclipboard": "~0.3.2"`
`28`	`29`	`}`
`29`	`30`	`}`