Add button to 'Copy' generated buy binds to clipboard

README.md

@@ -66,6 +66,8 @@ Here is a list of which 3rd party libraries are being used:
 - [Bootstrap](http://getbootstrap.com/) (version: 3.1.1)
 - [AngularUI](http://angular-ui.github.io/)
     - [UI Bootstrap](http://angular-ui.github.io/bootstrap/) (version 0.10.0)
+- [ngClip](https://github.com/asafdav/ng-clip) (version: 0.1.3)
+- [ZeroClipboard](http://zeroclipboard.org/) (version: 1.3.5)
 
 Tests are written with [Jasmine](http://jasmine.github.io/) (version: 2.0.0). [Run the tests](http://jessewebb.github.io/csgo-buynds/tests/SpecRunner.html) in your browser.
 

buy-binds-generator.html

@@ -82,6 +82,9 @@ <h1>CS:GO Buy Binds Generator</h1>
 <script src="vendor/angular-1.2.14/angular.min.js" type="text/javascript"></script>
 <script src="vendor/angular-1.2.14/angular-route.min.js" type="text/javascript"></script>
 <script src="vendor/angular-ui/ui-bootstrap-0.10.0/ui-bootstrap-tpls-0.10.0.min.js" type="text/javascript"></script>
+<script src="vendor/ng-clip-0.1.3/ng-clip.min.js" type="text/javascript"></script>
+<script src="vendor/zeroclipboard-1.3.5/ZeroClipboard.min.js" type="text/javascript"></script>
+
 <script src="js/buynds.js" type="text/javascript"></script>
 <script src="js/app.js" type="text/javascript"></script>
 <script src="js/controllers.js" type="text/javascript"></script>

humans.txt

@@ -1,6 +1,6 @@
 /* SITE */
 Standards: HTML5, CSS3, JavaScript (ECMA-262, edition 5)
-Components: jQuery, AngularJS, Bootstrap, AngularUI
+Components: jQuery, AngularJS, Bootstrap, AngularUI, ngClip, ZeroClipboard
 Software: JetBrains WebStorm, GitHub Pages
 
 /* TEAM */

js/app.js

@@ -3,12 +3,17 @@
 var buyndsApp = angular.module('buyndsApp', [
     'ngRoute',
     'ui.bootstrap',
+    'ngClipboard',
     'buyndsControllers',
     'buyndsDirectives',
     'buyndsFilters',
     'buyndsServices'
 ]);
 
+buyndsApp.config(['ngClipProvider', function(ngClipProvider) {
+    ngClipProvider.setPath("vendor/zeroclipboard-1.3.5/ZeroClipboard.swf");
+}]);
+
 buyndsApp.config(['$routeProvider', function ($routeProvider) {
     $routeProvider.when('/', {
         controller: 'SingleKeyGenCtrl',

js/controllers.js

@@ -105,6 +105,14 @@ buyndsControllers.controller('MultiKeyGenCtrl', ['$scope', '$modal', 'bindBuilde
         $scope.bindOptionsMap = {};
         $scope.buyBinds = [];
     };
+
+    $scope.getBuyBindsForCopy = function() {
+        var buyBindsForCopy = '';
+        for (var i = 0 ; i < $scope.buyBinds.length; i++) {
+            buyBindsForCopy = buyBindsForCopy + $scope.buyBinds[i] + '\n';
+        }
+        return buyBindsForCopy.trim();
+    };
 }]);
 
 buyndsControllers.controller('MultiKeyGenKeyBindOptionsCtrl', ['$scope', '$modalInstance', 'bindOptions', 'dataService', function ($scope, $modalInstance, bindOptions, dataService) {

partials/multi-key-generator.phtml

@@ -126,10 +126,12 @@
 
             </div>
             <div class="panel-footer" ng-show="buyBinds.length">
+                <button type="button" class="btn btn-info pull-right hidden-xs" clip-copy="getBuyBindsForCopy()">Copy to Clipboard <span class="glyphicon glyphicon-paperclip"></span></button>
                 <h4>Generated Buy Binds:</h4>
                 <pre class="buy-binds">
                     <span ng-repeat="buyBind in buyBinds track by $index">{{ buyBind }}<br /></span>
                 </pre>
+                <button type="button" class="btn btn-info visible-xs" clip-copy="getBuyBindsForCopy()">Copy to Clipboard <span class="glyphicon glyphicon-paperclip"></span></button>
             </div>
         </div>
     </div>

partials/single-key-generator.phtml

@@ -87,8 +87,10 @@
                 </form>
             </div>
             <div class="panel-footer" ng-show="buyBind">
+                <button type="button" class="btn btn-info pull-right hidden-xs" clip-copy="buyBind">Copy to Clipboard <span class="glyphicon glyphicon-paperclip"></span></button>
                 <h4>Generated Buy Bind:</h4>
                 <pre class="buy-binds">{{ buyBind }}</pre>
+                <button type="button" class="btn btn-info visible-xs" clip-copy="buyBind">Copy to Clipboard <span class="glyphicon glyphicon-paperclip"></span></button>
             </div>
         </div>
     </div>

vendor/ng-clip-0.1.3/ng-clip.js

@@ -0,0 +1,54 @@
+/*jslint node: true */
+/*global ZeroClipboard */
+'use strict';
+
+angular.module('ngClipboard', []).
+  provider('ngClip', function() {
+    var self = this;
+    this.path = '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.2/ZeroClipboard.swf';
+    return {
+      setPath: function(newPath) {
+       self.path = newPath;
+      },
+      $get: function() {
+        return {
+          path: self.path
+        };
+      }
+    };
+  }).
+  run(['ngClip', function(ngClip) {
+    ZeroClipboard.config({
+      moviePath: ngClip.path,
+      trustedDomains: ["*"],
+      allowScriptAccess: "always",
+      forceHandCursor: true
+    });
+  }]).
+  directive('clipCopy', ['ngClip', function (ngClip) {
+    return {
+      scope: {
+        clipCopy: '&',
+        clipClick: '&'
+      },
+      restrict: 'A',
+      link: function (scope, element, attrs) {
+        // Create the clip object
+        var clip = new ZeroClipboard(element);
+        clip.on( 'load', function(client) {
+          var onDataRequested = function (client) {
+            client.setText(scope.$eval(scope.clipCopy));
+            if (angular.isDefined(attrs.clipClick)) {
+              scope.$apply(scope.clipClick);
+            }
+          };
+          client.on('dataRequested', onDataRequested);
+
+          scope.$on('$destroy', function() {
+            client.off('dataRequested', onDataRequested);
+            client.unclip(element);
+          });
+        });
+      }
+    };
+  }]);