Implement copy to clipboard

Closes #19
Thanks to @jonrohan's ZeroClipboard this was quick and easy!

javascripts/ZeroClipboard.js

@@ -0,0 +1,333 @@
+/*!
+ * zeroclipboard
+ * The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface.
+ * Copyright 2012 Jon Rohan, James M. Greene, .
+ * Released under the MIT license
+ * http://jonrohan.github.com/ZeroClipboard/
+ * v1.1.6
+ */(function() {
+  "use strict";
+  var _getStyle = function(el, prop) {
+    var y = el.style[prop];
+    if (el.currentStyle) y = el.currentStyle[prop]; else if (window.getComputedStyle) y = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop);
+    if (y == "auto" && prop == "cursor") {
+      var possiblePointers = [ "a" ];
+      for (var i = 0; i < possiblePointers.length; i++) {
+        if (el.tagName.toLowerCase() == possiblePointers[i]) {
+          return "pointer";
+        }
+      }
+    }
+    return y;
+  };
+  var _elementMouseOver = function(event) {
+    if (!ZeroClipboard.prototype._singleton) return;
+    if (!event) {
+      event = window.event;
+    }
+    var target;
+    if (this !== window) {
+      target = this;
+    } else if (event.target) {
+      target = event.target;
+    } else if (event.srcElement) {
+      target = event.srcElement;
+    }
+    ZeroClipboard.prototype._singleton.setCurrent(target);
+  };
+  var _addEventHandler = function(element, method, func) {
+    if (element.addEventListener) {
+      element.addEventListener(method, func, false);
+    } else if (element.attachEvent) {
+      element.attachEvent("on" + method, func);
+    }
+  };
+  var _removeEventHandler = function(element, method, func) {
+    if (element.removeEventListener) {
+      element.removeEventListener(method, func, false);
+    } else if (element.detachEvent) {
+      element.detachEvent("on" + method, func);
+    }
+  };
+  var _addClass = function(element, value) {
+    if (element.addClass) {
+      element.addClass(value);
+      return element;
+    }
+    if (value && typeof value === "string") {
+      var classNames = (value || "").split(/\s+/);
+      if (element.nodeType === 1) {
+        if (!element.className) {
+          element.className = value;
+        } else {
+          var className = " " + element.className + " ", setClass = element.className;
+          for (var c = 0, cl = classNames.length; c < cl; c++) {
+            if (className.indexOf(" " + classNames[c] + " ") < 0) {
+              setClass += " " + classNames[c];
+            }
+          }
+          element.className = setClass.replace(/^\s+|\s+$/g, "");
+        }
+      }
+    }
+    return element;
+  };
+  var _removeClass = function(element, value) {
+    if (element.removeClass) {
+      element.removeClass(value);
+      return element;
+    }
+    if (value && typeof value === "string" || value === undefined) {
+      var classNames = (value || "").split(/\s+/);
+      if (element.nodeType === 1 && element.className) {
+        if (value) {
+          var className = (" " + element.className + " ").replace(/[\n\t]/g, " ");
+          for (var c = 0, cl = classNames.length; c < cl; c++) {
+            className = className.replace(" " + classNames[c] + " ", " ");
+          }
+          element.className = className.replace(/^\s+|\s+$/g, "");
+        } else {
+          element.className = "";
+        }
+      }
+    }
+    return element;
+  };
+  var _getDOMObjectPosition = function(obj) {
+    var info = {
+      left: 0,
+      top: 0,
+      width: obj.width || obj.offsetWidth || 0,
+      height: obj.height || obj.offsetHeight || 0,
+      zIndex: 9999
+    };
+    var zi = _getStyle(obj, "zIndex");
+    if (zi && zi != "auto") {
+      info.zIndex = parseInt(zi, 10);
+    }
+    while (obj) {
+      var borderLeftWidth = parseInt(_getStyle(obj, "borderLeftWidth"), 10);
+      var borderTopWidth = parseInt(_getStyle(obj, "borderTopWidth"), 10);
+      info.left += isNaN(obj.offsetLeft) ? 0 : obj.offsetLeft;
+      info.left += isNaN(borderLeftWidth) ? 0 : borderLeftWidth;
+      info.top += isNaN(obj.offsetTop) ? 0 : obj.offsetTop;
+      info.top += isNaN(borderTopWidth) ? 0 : borderTopWidth;
+      obj = obj.offsetParent;
+    }
+    return info;
+  };
+  var _noCache = function(path) {
+    return (path.indexOf("?") >= 0 ? "&" : "?") + "nocache=" + (new Date).getTime();
+  };
+  var _vars = function(options) {
+    var str = [];
+    if (options.trustedDomains) {
+      if (options.trustedDomains.length) {
+        str.push("trustedDomain=" + options.trustedDomains.join(","));
+      } else {
+        str.push("trustedDomain=" + options.trustedDomains);
+      }
+    }
+    return str.join("&");
+  };
+  var _inArray = function(elem, array) {
+    if (array.indexOf) {
+      return array.indexOf(elem);
+    }
+    for (var i = 0, length = array.length; i < length; i++) {
+      if (array[i] === elem) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  var _prepGlue = function(elements) {
+    if (typeof elements === "string") throw new TypeError("ZeroClipboard doesn't accept query strings.");
+    if (!elements.length) return [ elements ];
+    return elements;
+  };
+  var ZeroClipboard = function(elements, options) {
+    if (elements) (ZeroClipboard.prototype._singleton || this).glue(elements);
+    if (ZeroClipboard.prototype._singleton) return ZeroClipboard.prototype._singleton;
+    ZeroClipboard.prototype._singleton = this;
+    this.options = {};
+    for (var kd in _defaults) this.options[kd] = _defaults[kd];
+    for (var ko in options) this.options[ko] = options[ko];
+    this.handlers = {};
+    if (ZeroClipboard.detectFlashSupport()) _bridge();
+  };
+  var currentElement, gluedElements = [];
+  ZeroClipboard.prototype.setCurrent = function(element) {
+    currentElement = element;
+    this.reposition();
+    this.setText(this.options.text || element.getAttribute("data-clipboard-text") || document.getElementById(element.getAttribute("data-clipboard-target")).innerHTML);
+    if (element.getAttribute("title")) {
+      this.setTitle(element.getAttribute("title"));
+    }
+    this.setHandCursor(_getStyle(element, "cursor") == "pointer");
+  };
+  ZeroClipboard.prototype.setText = function(newText) {
+    if (newText && newText !== "") {
+      this.options.text = newText;
+      if (this.ready()) this.flashBridge.setText(newText);
+    }
+  };
+  ZeroClipboard.prototype.setTitle = function(newTitle) {
+    if (newTitle && newTitle !== "") this.htmlBridge.setAttribute("title", newTitle);
+  };
+  ZeroClipboard.prototype.setSize = function(width, height) {
+    if (this.ready()) this.flashBridge.setSize(width, height);
+  };
+  ZeroClipboard.prototype.setHandCursor = function(enabled) {
+    if (this.ready()) this.flashBridge.setHandCursor(enabled);
+  };
+  ZeroClipboard.version = "1.1.6";
+  var _defaults = {
+    moviePath: "ZeroClipboard.swf",
+    trustedDomains: null,
+    text: null,
+    hoverClass: "zeroclipboard-is-hover",
+    activeClass: "zeroclipboard-is-active"
+  };
+  ZeroClipboard.setDefaults = function(options) {
+    for (var ko in options) _defaults[ko] = options[ko];
+  };
+  ZeroClipboard.destroy = function() {
+    ZeroClipboard.prototype._singleton.unglue(gluedElements);
+    var bridge = ZeroClipboard.prototype._singleton.htmlBridge;
+    bridge.parentNode.removeChild(bridge);
+    delete ZeroClipboard.prototype._singleton;
+  };
+  ZeroClipboard.detectFlashSupport = function() {
+    var hasFlash = false;
+    try {
+      if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) {
+        hasFlash = true;
+      }
+    } catch (error) {
+      if (navigator.mimeTypes["application/x-shockwave-flash"]) {
+        hasFlash = true;
+      }
+    }
+    return hasFlash;
+  };
+  var _bridge = function() {
+    var client = ZeroClipboard.prototype._singleton;
+    client.htmlBridge = document.getElementById("global-zeroclipboard-html-bridge");
+    if (client.htmlBridge) {
+      client.flashBridge = document["global-zeroclipboard-flash-bridge"];
+      return;
+    }
+    var html = '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="global-zeroclipboard-flash-bridge" width="100%" height="100%">       <param name="movie" value="' + client.options.moviePath + _noCache(client.options.moviePath) + '"/>       <param name="allowScriptAccess" value="always" />       <param name="scale" value="exactfit">       <param name="loop" value="false" />       <param name="menu" value="false" />       <param name="quality" value="best" />       <param name="bgcolor" value="#ffffff" />       <param name="wmode" value="transparent"/>       <param name="flashvars" value="' + _vars(client.options) + '"/>       <embed src="' + client.options.moviePath + _noCache(client.options.moviePath) + '"         loop="false" menu="false"         quality="best" bgcolor="#ffffff"         width="100%" height="100%"         name="global-zeroclipboard-flash-bridge"         allowScriptAccess="always"         allowFullScreen="false"         type="application/x-shockwave-flash"         wmode="transparent"         pluginspage="http://www.macromedia.com/go/getflashplayer"         flashvars="' + _vars(client.options) + '"         scale="exactfit">       </embed>     </object>';
+    client.htmlBridge = document.createElement("div");
+    client.htmlBridge.id = "global-zeroclipboard-html-bridge";
+    client.htmlBridge.setAttribute("class", "global-zeroclipboard-container");
+    client.htmlBridge.setAttribute("data-clipboard-ready", false);
+    client.htmlBridge.style.position = "absolute";
+    client.htmlBridge.style.left = "-9999px";
+    client.htmlBridge.style.top = "-9999px";
+    client.htmlBridge.style.width = "15px";
+    client.htmlBridge.style.height = "15px";
+    client.htmlBridge.style.zIndex = "9999";
+    client.htmlBridge.innerHTML = html;
+    document.body.appendChild(client.htmlBridge);
+    client.flashBridge = document["global-zeroclipboard-flash-bridge"];
+  };
+  ZeroClipboard.prototype.resetBridge = function() {
+    this.htmlBridge.style.left = "-9999px";
+    this.htmlBridge.style.top = "-9999px";
+    this.htmlBridge.removeAttribute("title");
+    this.htmlBridge.removeAttribute("data-clipboard-text");
+    _removeClass(currentElement, this.options.activeClass);
+    currentElement = null;
+  };
+  ZeroClipboard.prototype.ready = function() {
+    var ready = this.htmlBridge.getAttribute("data-clipboard-ready");
+    return ready === "true" || ready === true;
+  };
+  ZeroClipboard.prototype.reposition = function() {
+    if (!currentElement) return false;
+    var pos = _getDOMObjectPosition(currentElement);
+    this.htmlBridge.style.top = pos.top + "px";
+    this.htmlBridge.style.left = pos.left + "px";
+    this.htmlBridge.style.width = pos.width + "px";
+    this.htmlBridge.style.height = pos.height + "px";
+    this.htmlBridge.style.zIndex = pos.zIndex + 1;
+    this.setSize(pos.width, pos.height);
+  };
+  ZeroClipboard.dispatch = function(eventName, args) {
+    ZeroClipboard.prototype._singleton.receiveEvent(eventName, args);
+  };
+  ZeroClipboard.prototype.on = function(eventName, func) {
+    var events = eventName.toString().split(/\s/g);
+    for (var i = 0; i < events.length; i++) {
+      eventName = events[i].toLowerCase().replace(/^on/, "");
+      if (!this.handlers[eventName]) this.handlers[eventName] = func;
+    }
+    if (this.handlers.noflash && !ZeroClipboard.detectFlashSupport()) {
+      this.receiveEvent("onNoFlash", null);
+    }
+  };
+  ZeroClipboard.prototype.addEventListener = ZeroClipboard.prototype.on;
+  ZeroClipboard.prototype.receiveEvent = function(eventName, args) {
+    eventName = eventName.toString().toLowerCase().replace(/^on/, "");
+    var element = currentElement;
+    switch (eventName) {
+     case "load":
+      if (args && parseFloat(args.flashVersion.replace(",", ".").replace(/[^0-9\.]/gi, "")) < 10) {
+        this.receiveEvent("onWrongFlash", {
+          flashVersion: args.flashVersion
+        });
+        return;
+      }
+      this.htmlBridge.setAttribute("data-clipboard-ready", true);
+      break;
+     case "mouseover":
+      _addClass(element, this.options.hoverClass);
+      break;
+     case "mouseout":
+      _removeClass(element, this.options.hoverClass);
+      this.resetBridge();
+      break;
+     case "mousedown":
+      _addClass(element, this.options.activeClass);
+      break;
+     case "mouseup":
+      _removeClass(element, this.options.activeClass);
+      break;
+     case "complete":
+      this.options.text = null;
+      break;
+    }
+    if (this.handlers[eventName]) {
+      var func = this.handlers[eventName];
+      if (typeof func == "function") {
+        func.call(element, this, args);
+      } else if (typeof func == "string") {
+        window[func].call(element, this, args);
+      }
+    }
+  };
+  ZeroClipboard.prototype.glue = function(elements) {
+    elements = _prepGlue(elements);
+    for (var i = 0; i < elements.length; i++) {
+      if (_inArray(elements[i], gluedElements) == -1) {
+        gluedElements.push(elements[i]);
+        _addEventHandler(elements[i], "mouseover", _elementMouseOver);
+      }
+    }
+  };
+  ZeroClipboard.prototype.unglue = function(elements) {
+    elements = _prepGlue(elements);
+    for (var i = 0; i < elements.length; i++) {
+      _removeEventHandler(elements[i], "mouseover", _elementMouseOver);
+      var arrayIndex = _inArray(elements[i], gluedElements);
+      if (arrayIndex != -1) gluedElements.splice(arrayIndex, 1);
+    }
+  };
+  if (typeof module !== "undefined") {
+    module.exports = ZeroClipboard;
+  } else {
+    window.ZeroClipboard = ZeroClipboard;
+  }
+})();

javascripts/clipboard.js

@@ -0,0 +1,20 @@
+$(document).ready(function() {
+
+  // Backup the clipboard button's original text.
+  $("#clipboard-button").data('clipboard-prompt', $('#clipboard-button').text());
+  
+  // Hook up copy to clipboard buttons
+  var clip = new ZeroClipboard( $("#clipboard-button"), {
+    moviePath: "/javascripts/ZeroClipboard.swf"
+  } );
+
+  clip.on( 'mouseover', function(client, args) {
+    // Restore the clipboard button's original text.
+    this.innerText = $(this).data('clipboard-prompt');
+  } );
+
+  clip.on( 'complete', function(client, args) {
+    this.innerText = 'Copied!';
+  } );
+
+});

licenses/foundation/apache/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>Apache v2 License</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 Apache License
 Version 2.0, January 2004
 http://www.apache.org/licenses/
@@ -217,7 +220,7 @@ third-party archives.
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/foundation/eclipse/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>Eclipse Public License v1.0</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 Eclipse Public License - v 1.0
 
 THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC 
@@ -224,7 +227,7 @@ any resulting litigation.
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/foundation/mozilla/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>Mozilla Public License<br />Version 2.0</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 Mozilla Public License, version 2.0
 
 1. Definitions
@@ -379,7 +382,7 @@ Exhibit B - “Incompatible With Secondary Licenses” Notice
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/permissive/bsd-3-clause/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>BSD (3-Clause) License</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 Copyright (c) {year}, {copyright holder}
 All rights reserved.
 
@@ -35,7 +38,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/permissive/bsd/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>BSD (2-Clause) License</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 Copyright (c) {year}, {copyright holder}
 All rights reserved.
 
@@ -51,7 +54,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/permissive/mit/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>MIT License</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 Copyright (c) {year} {copyright holders}
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of 
@@ -44,7 +47,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/permissive/ms-pl/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>Microsoft Public License<br>(Ms-PL)</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
 This license governs use of the accompanying software. If you use the software, 
 you
 accept this license. If you do not accept the license, do not use the software.
@@ -74,7 +77,7 @@ non-infringement.
          </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/reciprocal/gpl-v2/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>GPL v2</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
                     GNU GENERAL PUBLIC LICENSE
                        Version 2, June 1991
 
@@ -365,7 +368,7 @@ Public License instead of this License.
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/reciprocal/gpl-v3/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>GPL v3</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
                     GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
@@ -700,7 +703,7 @@ Public License instead of this License.  But first, please read
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/reciprocal/lgpl-v2.1/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,7 +25,7 @@
       <h1>LGPL v2.1</h1>
       <div class="cf">
         <div class='license'>
-          <pre>
+          <pre id="license-text">
                   GNU LESSER GENERAL PUBLIC LICENSE
                        Version 2.1, February 1999
 
@@ -528,7 +531,7 @@ That's all there is to it!
           </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>

licenses/reciprocal/lgpl-v3/index.html

@@ -7,6 +7,9 @@
     <link href='../../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
     <link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <link type="text/css" href="../../../css/application.css" media="screen" rel="stylesheet">
+    <script type="text/javascript" src="../../../javascripts/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="../../../javascripts/clipboard.js"></script>
+    <script type="text/javascript" src="../../../javascripts/ZeroClipboard.js"></script>
     <script type="text/javascript" src="../../../javascripts/modernizr.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src='../../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@@ -22,6 +25,7 @@
       <h1>LGPL v3</h1>
       <div class="cf">
         <div class='license'>
+          <pre id="license-text">
                    GNU LESSER GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
@@ -187,9 +191,10 @@ whether future versions of the GNU Lesser General Public License shall
 apply, that proxy's public statement of acceptance of any version is
 permanent authorization for you to choose that version for the
 Library.
+          </pre>
         </div>
         <div class='sidebar'>
-          <a href="#" class="button">Copy license text to clipboard</a>
+          <a href="#" id="clipboard-button" data-clipboard-target="license-text" class="button">Copy license text to clipboard</a>
           <div class='how-to-apply'>
             <h5>How to apply this license</h5>
             <p>