Skip to content

Commit a70d78b

Browse files
author
Leah Wasser
committed
copy code button
1 parent c554efa commit a70d78b

File tree

7 files changed

+117
-2
lines changed

7 files changed

+117
-2
lines changed

_layouts/default.html

+7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@
99
<head>
1010
{% include head.html %}
1111
{% include head/custom.html %}
12+
13+
14+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
16+
17+
<script src="{{ site.url }}/assets/js/copy-code.js"></script>
1218
</head>
1319

1420
<body>
@@ -19,6 +25,7 @@
1925

2026
{{ content }}
2127

28+
2229
<div class="page__footer">
2330
<footer>
2431
{% include footer/custom.html %}

_layouts/single.html

+1
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ <h2> {{ page.tool_page_title }} </h2>
141141

142142

143143
<section class="page__content" itemprop="text">
144+
144145
<!-- would like to include the TOC automatically but this does weird things-->
145146
{% if page.class-lesson %}
146147

_sass/earth-lab.scss

+1
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,4 @@
3636
@import "earth-lab/earth-lab";
3737
@import "earth-lab/earthlab_slides";
3838
@import "earth-lab/earthlab-jupyter";
39+
@import "earth-lab/copycode";

_sass/earth-lab/_copycode.scss

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
2+
3+
/* Copy buttons */
4+
5+
button.copybtn {
6+
transition: opacity .5s;
7+
opacity: .3;
8+
padding: 2px 6px;
9+
position: absolute;
10+
top: .2em;
11+
right: .2em;
12+
background-color: #fff !important;
13+
user-select: none;
14+
}
15+
16+
div.highlight:hover .copybtn, div.highlight .copybtn:focus {
17+
opacity: .3;
18+
}
19+
div.highlight .copybtn:hover {
20+
opacity: 1;
21+
}
22+
div.highlight {
23+
position: relative;
24+
}
25+
26+
27+
/* Copy buttons */
28+
.btn a.copybtn {
29+
position: absolute;
30+
top: .2em;
31+
right: .2em;
32+
width: 1em;
33+
height: 1em;
34+
opacity: .3;
35+
transition: opacity 0.5s;
36+
border: none;
37+
user-select: none;
38+
}
39+
40+
div.highlight {
41+
position: relative;
42+
}
43+
44+
a.copybtn > img {
45+
vertical-align: top;
46+
margin: 0;
47+
top: 0;
48+
left: 0;
49+
position: absolute;
50+
}
51+
52+
.highlight:hover .copybtn {
53+
opacity: 1;
54+
}

_sass/earth-lab/_syntax.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,21 @@ pre {
1616
div.highlighter-rouge, figure.highlight {
1717
position: relative;
1818
margin-bottom: 1em;
19-
padding: 1em;
19+
padding: .3em;
2020
border: 1px solid $border-color;
2121
border-radius: $border-radius;
2222
background-color: $code-background-color;
2323
box-shadow: $box-shadow;
24+
margin-top: 1em;
25+
margin-bottom: 1em;
2426

2527
&:before {
2628
position: absolute;
2729
top: 0;
2830
right: 0;
2931
padding: 0.5em;
3032
background-color: $lighter-gray;
31-
content: "\f121";
33+
/*content: "\f121"; This is the little code icon - turning off*/
3234
font-family: "fontawesome" !important;
3335
font-size: $type-size-6;
3436
line-height: 1;

assets/js/copy-code.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
function addCopyButtonToCode(){
2+
// get all code elements
3+
var allCodeBlocksElements = $( "div.highlight pre" );
4+
5+
// For each element, do the following steps
6+
allCodeBlocksElements.each(function(ii) {
7+
// define a unique id for this element and add it
8+
var currentId = "codeblock" + (ii + 1);
9+
$(this).attr('id', currentId);
10+
11+
// create a button that's configured for clipboard.js
12+
// point it to the text that's in this code block
13+
// add the button just after the text in the code block w/ jquery
14+
var clipButton = '<button class="btn copybtn" data-tooltip="Copy" data-clipboard-target="#' + currentId + '"><img src="/images/copy-button.svg" width="13" alt="Copy to clipboard"></button>';
15+
$(this).after(clipButton);
16+
});
17+
18+
// tell clipboard.js to look for clicks that match this query
19+
new Clipboard('.btn');
20+
}
21+
22+
$(document).ready(function () {
23+
// Once the DOM is loaded for the page, attach clipboard buttons
24+
addCopyButtonToCode();
25+
});
26+
27+
// i don't know enough about js to make this implement for this code
28+
// the code below is for a sphinx site. ally might know?
29+
30+
const codeCellId = index => `codecell${index}`
31+
32+
// Clears selected text since ClipboardJS will select the text when copying
33+
const clearSelection = () => {
34+
if (window.getSelection) {
35+
window.getSelection().removeAllRanges()
36+
} else if (document.selection) {
37+
document.selection.empty()
38+
}
39+
}
40+
41+
// Changes tooltip text for two seconds, then changes it back
42+
const temporarilyChangeTooltip = (el, newText) => {
43+
const oldText = el.getAttribute('data-tooltip')
44+
el.setAttribute('data-tooltip', newText)
45+
setTimeout(() => el.setAttribute('data-tooltip', oldText), 2000)
46+
}
47+
48+
// to work on tooltips and colors
49+
// https://earthlab-hub-ops.readthedocs.io/en/latest/_static/copybutton.js

images/copy-button.svg

+1
Loading

0 commit comments

Comments
 (0)