Merge pull request #7129 from rhamilto/clipboardjs

Merged by openshift-bot

Author: OpenShift Bot

.jshintrc

@@ -30,7 +30,7 @@
     "moment": false,
     "Messenger" : false,
     "URI": false,
-    "ZeroClipboard": false,
+    "Clipboard": false,
     "$": false,
     "_" : false,
     "URITemplate": false

Gruntfile.js

@@ -431,13 +431,6 @@ module.exports = function (grunt) {
           src: 'fonts/*',
           dest: '<%= yeoman.dist %>/styles'
         },
-        {
-          expand: true,
-          cwd: 'bower_components/zeroclipboard/dist',
-          src: 'ZeroClipboard.swf',
-          dest: '<%= yeoman.dist %>/scripts'
-        },
-
         // Copy separate components
         {
           expand: true,

README.md

@@ -127,7 +127,7 @@ For more details on the expected scope arguments, see the source under [app/scri
 * toggle (attribute) - intended for Bootstrap's data-toggle=tooltip and data-toggle=popover, will automatically initialize any tooltips and popovers
 * alerts (element) - renders a set of alerts according to the [patternfly style](https://www.patternfly.org/widgets/#alerts)
 * relative-timestamp (element) - renders a relative timestamp (ex: '5 minutes ago') based on the current time, auto-updating every 30 seconds
-* copy-to-clipboard (element) - creates a copy to clipboard button using ZeroClipboard
+* copy-to-clipboard (element) - creates a copy to clipboard button using clipboard.js
 * back (attribute) - when the element is clicked a simulated browser back button event occurs (calls history.back)
 * select-on-focus (attribute) - when the element is focused, all text within it will be selected
 * tile-click (attribute or class) - for use with the `.tile` class, when anything on the tile is clicked, a simulated click to the `a.tile-target` link will be fired.  Recommended use is by adding the `.tile-click` class to get the correct styles on hover.

app/index.html

@@ -80,7 +80,6 @@
     <script src="bower_components/sifter/sifter.js"></script>
     <script src="bower_components/microplugin/src/microplugin.js"></script>
     <script src="bower_components/selectize/dist/js/selectize.js"></script>
-    <script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
     <script src="bower_components/messenger/build/js/messenger.js"></script>
     <script src="bower_components/messenger/build/js/messenger-theme-flat.js"></script>
     <script src="bower_components/kubernetes-label-selector/labelSelector.js"></script>
@@ -98,6 +97,7 @@
     <script src="bower_components/ace-builds/src-min-noconflict/theme-eclipse.js"></script>
     <script src="bower_components/angular-ui-ace/ui-ace.js"></script>
     <script src="bower_components/yamljs/bin/yaml.js"></script>
+    <script src="bower_components/clipboard/dist/clipboard.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

app/scripts/directives/util.js

@@ -78,14 +78,33 @@ angular.module('openshiftConsole')
         clipboardText: "="
       },
       templateUrl: 'views/directives/_copy-to-clipboard.html',
+      controller: function($scope) {
+        $scope.id = _.uniqueId('clipboardJs');
+      },
       link: function($scope, element) {
-        if (ZeroClipboard.isFlashUnusable()) {
-          $(element).hide();
-        }
-        else {
-          new ZeroClipboard( $('button', element) );
-          $("#global-zeroclipboard-html-bridge").tooltip({title: "Copy to clipboard", placement: 'bottom'});
-        }
+        var node = $('button', element);
+        var clipboard = new Clipboard( node.get(0) );
+        clipboard.on('success', function (e) {
+          $(e.trigger)
+            .attr('title', 'Copied!')
+            .tooltip('fixTitle')
+            .tooltip('show')
+            .attr('title', 'Copy to clipboard')
+            .tooltip('fixTitle');
+          e.clearSelection();
+        });
+        clipboard.on('error', function (e) {
+          var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318C to copy' : 'Press Ctrl-C to copy';
+          $(e.trigger)
+            .attr('title', fallbackMsg)
+            .tooltip('fixTitle')
+            .tooltip('show')
+            .attr('title', 'Copy to clipboard')
+            .tooltip('fixTitle');
+        });
+        element.on('$destroy', function() {
+          clipboard.destroy();
+        });
       }
     };
   })

app/views/directives/_copy-to-clipboard.html

@@ -1 +1,2 @@
-<button data-clipboard-text="{{clipboardText}}" class="btn btn-default"><i class="fa fa-clipboard"/></button>
+<button data-clipboard-target="#{{id}}" data-toggle="tooltip" data-placement="top" title="Copy to clipboard" class="btn btn-default"><i class="fa fa-clipboard"/></button>
+<textarea id="{{id}}" class="sr-only">{{clipboardText}}</textarea>

bower.json

@@ -24,7 +24,6 @@
     "sifter": "0.3.4",
     "microplugin": "0.0.3",
     "selectize": "0.11.2",
-    "zeroclipboard": "2.2.0",
     "messenger": "1.4.1",
     "kubernetes-label-selector": "0.0.18",
     "kubernetes-topology-graph": "0.0.21",
@@ -33,8 +32,9 @@
     "layout.attrs": "1.1.2",
     "bootstrap-hover-dropdown": "2.1.3",
     "angular-ui-ace": "0.2.3",
-	  "ace-builds": "1.2.2",
-    "yamljs": "0.1.5"
+    "ace-builds": "1.2.2",
+    "yamljs": "0.1.5",
+    "clipboard": "1.5.8"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8",