Add a copy button for code samples (#2971)

* Add a copy button for code samples

* Add title

* Flip color to match settings cog

* Fix tests

* More tests

integtest/spec/helper/console_alternative_examples.rb

@@ -47,6 +47,7 @@ module ConsoleExamples
     it 'contains the js listing followed by the csharp listing' do
       expect(body).to include(<<~HTML.strip)
         <div class="pre_wrapper lang-js alternative">
+        <div class="console_code_copy" title="Copy to clipboard"></div>
         <pre class="programlisting prettyprint lang-js alternative">const result = await client.search({
           body: { query: 'foo bar' } <a id="A0-CO1-1"></a><i class="conum" data-value="1"></i>
         })</pre>
@@ -57,6 +58,7 @@ module ConsoleExamples
     it 'contains the csharp listing followed by the default listing' do
       expect(body).to include(<<~HTML.strip)
         <div class="pre_wrapper lang-csharp alternative">
+        <div class="console_code_copy" title="Copy to clipboard"></div>
         <pre class="programlisting prettyprint lang-csharp alternative">var searchResponse = _client.Search&lt;Project&gt;(s =&gt; s
             .Query(q =&gt; q
                 .QueryString(m =&gt; m
@@ -72,6 +74,7 @@ module ConsoleExamples
     it 'contains the default listing followed by the console widget' do
       expect(body).to include(<<~HTML.strip)
         <div class="pre_wrapper lang-console default #{has_classes}">
+        <div class="console_code_copy" title="Copy to clipboard"></div>
         <pre class="programlisting prettyprint lang-console default #{has_classes}">GET /_search
         {
             "query": "foo bar" <a id="CO1-1"></a><i class="conum" data-value="1"></i>

resources/asciidoctor/lib/docbook_compat/convert_listing.rb

@@ -52,6 +52,7 @@ def convert_listing_body_with_language(node, lang)
       pre_classes = "programlisting prettyprint lang-#{lang}#{extra_classes}"
       [
         %(<div class="pre_wrapper lang-#{lang}#{extra_classes}">),
+        %(<div class="console_code_copy" title="Copy to clipboard"></div>),
         %(<pre class="#{pre_classes}">#{node.content || ''}</pre>),
         %(</div>),
       ].join "\n"

resources/asciidoctor/spec/docbook_compat_spec.rb

@@ -1065,6 +1065,7 @@
       # It is important that there isn't any extra space around the <pre> tags
       expect(converted).to include(<<~HTML)
         <div class="pre_wrapper lang-sh">
+        <div class="console_code_copy" title="Copy to clipboard"></div>
         <pre class="programlisting prettyprint lang-sh">cpanm Search::Elasticsearch</pre>
         </div>
       HTML
@@ -1253,6 +1254,7 @@
       it 'the role is included as a class' do
         expect(converted).to include(<<~HTML)
           <div class="pre_wrapper lang-sh foo">
+          <div class="console_code_copy" title="Copy to clipboard"></div>
           <pre class="programlisting prettyprint lang-sh foo">cpanm Search::Elasticsearch</pre>
           </div>
         HTML

resources/web/docs_js/index.js

@@ -437,6 +437,19 @@ $(function() {
     });
   });
 
+  $('div.console_code_copy').each(function () {
+    const $copyButton = $(this);
+    const langText = $copyButton.next().text();
+
+    $copyButton.on('click', function () {
+      utils.copyText(langText, lang_strings);
+      $copyButton.addClass('copied');
+      setTimeout(function () {
+        $copyButton.removeClass('copied')
+      }, 3000);
+    });
+  });
+
   var div = $('div.toc');
 
   // Fetch toc.html unless there is already a .toc on the page

resources/web/style/console_widget.pcss

@@ -34,4 +34,30 @@
       cursor: pointer;
     }
   }
+  .console_code_copy {
+    background-image: inline("img/copy.svg");
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    vertical-align: text-bottom;
+    align-self: center;
+    &:hover {
+      text-decoration: none !important;
+      cursor: pointer;
+    }
+    filter: invert(1);
+    position: absolute;
+    top: 25px;
+    right: 20px;
+    opacity: 0.7;
+  }
+
+  .console_code_copy:hover {
+    opacity: 1;
+  }
+  .console_code_copy.copied {
+    background-image: inline("img/check.svg");
+  }
 }