feat(app): add and use `copy-button` and `copy-container` directives

Closes #728 and issue #720

This change let's users click on a button to automatically copy a code
block to the clipboard to make it easier to follow the guides and tutorials.

public/_includes/_head-include.jade

@@ -34,7 +34,7 @@ meta(itemprop="description" content="#{description}")
 meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png")
 
 link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
-link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css")
+link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css")
 link(href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700" rel='stylesheet' type='text/css')
 link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")
 link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")

public/_includes/_scripts-include.jade

@@ -3,13 +3,14 @@ script(src="/resources/js/vendor/prettify.js")
 script(src="/resources/js/vendor/lang-basic.js")
 script(src="/resources/js/vendor/lang-dart.js")
 script(src="/resources/js/vendor/lodash.js")
+script(src="/resources/js/vendor/clipboard.min.js")
 
 
 <!-- Angular Material Dependencies -->
-script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js")
-script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js")
-script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js")
-script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
+script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js")
+script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js")
+script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js")
+script(src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js")
 
 
 
@@ -21,6 +22,7 @@ script(src="/resources/js/directives/api-list.js")
 script(src="/resources/js/directives/bio.js")
 script(src="/resources/js/directives/bold.js")
 script(src="/resources/js/directives/code.js")
+script(src="/resources/js/directives/copy.js")
 script(src="/resources/js/directives/code-tabs.js")
 script(src="/resources/js/directives/code-pane.js")
 script(src="/resources/js/directives/code-example.js")

public/resources/images/icons/clippy.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
+  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+</svg>

public/resources/js/directives/code-example.js

@@ -13,9 +13,12 @@ angularIO.directive('codeExample', function() {
       var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
       var classes = 'prettyprint ' + attrs.format + ' lang-' + attrs.language +
           (attrs.showcase === 'true' ? ' is-showcase' : '');
-      var template =  '<pre class="' + classes + '">' +
+      var template =
+        '<copy-container>' +
+          '<pre class="' + classes + '">' +
             '<code ng-non-bindable>' + html + '</code>' +
-                      '</pre>';
+          '</pre>' +
+        '</copy-container>';
 
       // UPDATE ELEMENT WITH NEW TEMPLATE
       tElement.html(template);
@@ -25,3 +28,10 @@ angularIO.directive('codeExample', function() {
     }
   };
 });
+
+        // '<div style="position: relative">' +
+        //   '<copy-button style="position: absolute; top: 10px; right: 0px; z-index: 1000" ></copy-button>' +
+        //   '<pre class="' + classes + '">' +
+        //     '<code ng-non-bindable>' + html + '</code>' +
+        //   '</pre>' +
+        // '</div>';

public/resources/js/directives/code-pane.js

@@ -15,10 +15,12 @@ angularIO.directive('codePane', function() {
 
     compile: function(tElement, tAttrs) {
       var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
-      var template =  '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected" >' +
+      var template =
+        '<copy-container ng-show="selected">' +
+          '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '">' +
           '<code class="animated fadeIn" ng-non-bindable>' + html + '</code>' +
-                      '</pre>';
-
+          '</pre>' +
+        '</copy-container>';
 
       // UPDATE ELEMENT WITH NEW TEMPLATE
       tElement.html(template);

public/resources/js/directives/copy.js

@@ -0,0 +1,60 @@
+/**
+ * A directive that adds a copy button to a block of text
+ * Wrap this directive (as an element) around a block of text that you wish to be
+ * copyable.
+ * The directive will add a copy button positioned to float in the top right corner
+ * of the block of text.
+ *
+ * This directive is used in the `code-example` and `code-pane` directives.
+ *
+ * @example
+ *
+ * ```html
+ * <copy-container>
+ * <pre>
+ *   <code>
+ *   SomeBlockOfCode();
+ *   </code>
+ * </pre>
+ * </copy-container>
+ * ```
+ */
+angularIO.directive('copyContainer', function() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    template:
+      '<div style="position: relative">' +
+        '<copy-button style="position: absolute; top: 10px; right: 0px; z-index: 1000" ></copy-button>' +
+        '<ng-transclude></ng-transclude>' +
+      '</div>'
+  };
+});
+
+
+/**
+ * A directive that creates a copy button that will copy the contents of the element that follows
+ * it. The element containing the content can contain dynamic content itself (e.g. `<ng-transclude>`)
+ * but the content element itself most be available at link time.
+ */
+angularIO.directive('copyButton', function() {
+  return {
+    restrict: 'E',
+    template:
+      '<md-button class="md-icon-button">\n' +
+      '  <md-icon md-font-icon="icon-content-copy" alt="Copy to Clipboard"></md-icon>\n' +
+      '  <md-tooltip>Copy to Clipboard</md-tooltip>\n' +
+      '</md-button>',
+    link: function link(scope, element) {
+      var contentElement = element.next();
+      var clipboard = new Clipboard(element[0], {
+        text: function() {
+          console.log('clicked', contentElement[0].innerText);
+          return contentElement[0].innerText; }
+      });
+      scope.$on('$destroy', function() {
+        clipboard.destroy();
+      });
+    }
+  };
+});