Add copy to clipboard buttons to examples in reference pages

inst/assets/pkgdown.css

@@ -161,3 +161,19 @@ code a, pre a {
 .error   { color: orange;  font-weight: bolder;}
 .warning { color: #6A0366; font-weight: bolder;}
 
+/* Clipboard --------------------------*/
+
+.hasCopyButton {
+  position: relative;
+}
+
+.btn-copy-ex {
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+}
+
+.hasCopyButton:hover button.btn-copy-ex {
+  visibility: visible;
+}

inst/assets/pkgdown.js

@@ -43,3 +43,43 @@ function is_prefix(needle, haystack) {
 
   return(true);
 }
+
+/* Clipboard --------------------------*/
+
+function changeTooltipMessage(element, msg) {
+  var tooltipOriginalTitle=element.getAttribute('data-original-title');
+  element.setAttribute('data-original-title', msg);
+  $(element).tooltip('show');
+  element.setAttribute('data-original-title', tooltipOriginalTitle);
+}
+
+if(Clipboard.isSupported()) {
+  $(document).ready(function() {
+    var copyButton = "<button type='button' class='btn btn-primary btn-copy-ex' type = 'submit' title='Copy to clipboard' aria-hidden='true' data-toggle='tooltip' data-placement='left auto' data-trigger='hover' data-clipboard-copy><i class='fa fa-copy' aria-hidden='true'></i></button>";
+
+    $(".examples").addClass("hasCopyButton");
+
+    // Insert copy buttons:
+    $(copyButton).prependTo(".hasCopyButton");
+
+    // Initialize tooltips:
+    $('.btn-copy-ex').tooltip({container: 'body'});
+
+    // Initialize clipboard:
+    var clipboardBtnCopies = new Clipboard('[data-clipboard-copy]', {
+      text: function(trigger) {
+        return trigger.parentNode.textContent;
+      }
+    });
+
+    clipboardBtnCopies.on('success', function(e) {
+      changeTooltipMessage(e.trigger, 'Copied!');
+      e.clearSelection();
+    });
+
+    clipboardBtnCopies.on('error', function() {
+      changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy');
+    });
+  });
+}
+

inst/templates/head.html

@@ -17,6 +17,8 @@
 <!-- Font Awesome icons -->
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
 
+<!-- clipboard.js -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js" integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3" crossorigin="anonymous"></script>
 
 <!-- pkgdown -->
 <link href="{{#site}}{{root}}{{/site}}pkgdown.css" rel="stylesheet">