replaced ZeroClipboard with clipboard | fixes #313

src/Whoops/Handler/PrettyPageHandler.php

@@ -120,6 +120,7 @@ class PrettyPageHandler extends Handler
         $templateFile = $this->getResource("views/layout.html.php");
         $cssFile      = $this->getResource("css/whoops.base.css");
         $zeptoFile    = $this->getResource("js/zepto.min.js");
+        $clipboard    = $this->getResource("js/clipboard.min.js");
         $jsFile       = $this->getResource("js/whoops.base.js");
 
         if ($this->customCss) {
@@ -143,6 +144,7 @@ class PrettyPageHandler extends Handler
             // @todo: Asset compiler
             "stylesheet" => file_get_contents($cssFile),
             "zepto"      => file_get_contents($zeptoFile),
+            "clipboard"  => file_get_contents($clipboard),
             "javascript" => file_get_contents($jsFile),
 
             // Template paths:

src/Whoops/Resources/css/whoops.base.css

@@ -340,7 +340,6 @@ pre.prettyprint, code.prettyprint {
 }
 
 #copy-button {
-	display: none;
 	float: right;
 	cursor: pointer;
 	border: 0;
@@ -469,3 +468,58 @@ kbd {
     width: 32%;
   }
 }
+
+.tooltipped {
+  position: relative
+}
+.tooltipped:after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 5px 8px;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 3px;
+  -webkit-font-smoothing: subpixel-antialiased
+}
+.tooltipped:before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0;
+  height: 0;
+  color: rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+  content: "";
+  border: 5px solid transparent
+}
+.tooltipped:hover:before,
+.tooltipped:hover:after,
+.tooltipped:active:before,
+.tooltipped:active:after,
+.tooltipped:focus:before,
+.tooltipped:focus:after {
+  display: inline-block;
+  text-decoration: none
+}
+.tooltipped-s:after {
+  top: 100%;
+  right: 50%;
+  margin-top: 5px
+}
+.tooltipped-s:before {
+  top: auto;
+  right: 50%;
+  bottom: -5px;
+  margin-right: -5px;
+  border-bottom-color: rgba(0, 0, 0, 0.8)
+}

src/Whoops/Resources/js/whoops.base.js

@@ -43,19 +43,40 @@ Zepto(function($) {
     }
   });
 
-  if (typeof ZeroClipboard !== "undefined") {
-	  ZeroClipboard.config({
-		  moviePath: '//ajax.cdnjs.com/ajax/libs/zeroclipboard/1.3.5/ZeroClipboard.swf',
-	  });
+  var clipboard = new Clipboard('.clipboard');
+  var showTooltip = function(elem, msg) {
+    elem.setAttribute('class', 'clipboard tooltipped tooltipped-s');
+    elem.setAttribute('aria-label', msg);
+  };
 
-	  var clipEl = document.getElementById("copy-button");
-	  var clip = new ZeroClipboard( clipEl );
-	  var $clipEl = $(clipEl);
+  clipboard.on('success', function(e) {
+      e.clearSelection();
 
-	  // show the button, when swf could be loaded successfully from CDN
-	  clip.on("load", function() {
-		  $clipEl.show();
-	  });
+      showTooltip(e.trigger, 'Copied!');
+  });
+
+  clipboard.on('error', function(e) {
+      showTooltip(e.trigger, fallbackMessage(e.action));
+  });
+
+  var btn = document.querySelector('.clipboard');
+
+  btn.addEventListener('mouseleave', function(e) {
+    e.currentTarget.setAttribute('class', 'clipboard');
+    e.currentTarget.removeAttribute('aria-label');
+  });
+
+  function fallbackMessage(action) {
+    var actionMsg = '';
+    var actionKey = (action === 'cut' ? 'X' : 'C');
+
+    if (/Mac/i.test(navigator.userAgent)) {
+        actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
+    } else {
+        actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
+    }
+
+    return actionMsg;
   }
 
   $(document).on('keydown', function(e) {

src/Whoops/Resources/views/header.html.php

@@ -25,8 +25,8 @@
     </div>
   </div>
 
-  <button id="copy-button" class="clipboard" data-clipboard-target="plain-exception" title="copy exception into clipboard"></button>
   <span id="plain-exception"><?php echo $tpl->escape($plain_exception) ?></span>
+  <button id="copy-button" class="clipboard" data-clipboard-text="<?php echo $tpl->escape($plain_exception) ?>" title="copy exception into clipboard"></button>
 
   <p class="exc-message">
     <?php if (!empty($message)): ?>

src/Whoops/Resources/views/layout.html.php

@@ -35,9 +35,9 @@
       </div>
     </div>
 
-    <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.5/ZeroClipboard.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
     <script><?php echo $zepto ?></script>
+    <script><?php echo $clipboard ?></script>
     <script><?php echo $javascript ?></script>
   </body>
 </html>