Skip to content

Commit

Permalink
Add a copy button for code samples (#2971)
Browse files Browse the repository at this point in the history
* Add a copy button for code samples

* Add title

* Flip color to match settings cog

* Fix tests

* More tests
  • Loading branch information
scottybollinger authored Mar 27, 2024
1 parent c20b638 commit a3fe815
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 0 deletions.
3 changes: 3 additions & 0 deletions integtest/spec/helper/console_alternative_examples.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions resources/asciidoctor/spec/docbook_compat_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
13 changes: 13 additions & 0 deletions resources/web/docs_js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 26 additions & 0 deletions resources/web/style/console_widget.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}
1 change: 1 addition & 0 deletions resources/web/style/img/check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/web/style/img/copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a3fe815

Please sign in to comment.