Skip to content

Commit cab88d6

Browse files
Young-LordYoung-Lord
committed
add copy to clipboard
kitian616/jekyll-TeXt-theme#218
1 parent 21c53c5 commit cab88d6

14 files changed

Lines changed: 181 additions & 0 deletions

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@ analytics:
141141
provider: false # false (default), "google", "custom"
142142
## FUCK GOOGLE!
143143

144+
## => Copy code to clipboard by https://github.com/kitian616/jekyll-TeXt-theme/pull/218/files
145+
##############################
146+
copy_to_clipboard: true
147+
144148
## => Build
145149
##############################
146150
markdown : kramdown

‎_data/variables.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ default:
1414
toc:
1515
selectors: 'h1,h2,h3'
1616
sources: bootcdn
17+
copy_to_clipboard: true
1718

1819
page:
1920
mode: normal
@@ -52,6 +53,7 @@ sources:
5253
valine: 'https://unpkg.com/valine/dist/Valine.min.js' # bootcdn not available
5354
mathjax: 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
5455
mermaid: 'https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js'
56+
clipboard: 'https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.js'
5557
unpkg:
5658
font_awesome: 'https://use.fontawesome.com/releases/v5.15.1/css/all.css'
5759
jquery: 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'
@@ -63,3 +65,4 @@ sources:
6365
valine: 'https//unpkg.com/valine/dist/Valine.min.js'
6466
mathjax: 'https://unpkg.com/mathjax@2.7.4/unpacked/MathJax.js?config=TeX-MML-AM_CHTML'
6567
mermaid: 'https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js'
68+
clipboard: 'https://unpkg.com/clipboard@2/dist/clipboard.min.js'

‎_includes/clipboard.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{%- include snippets/get-sources.html -%}
2+
{%- assign _sources = __return -%}
3+
4+
<script type="text/javascript" src='{{ _sources.clipboard }}'></script>

‎_includes/copy-to-clipboard.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{%- include snippets/assign.html target=site.data.variables.default.copy_to_clipboard
2+
source0=site.copy_to_clipboard source1=page.copy_to_clipboard -%}
3+
{%- if __return == true -%}
4+
{%- include clipboard.html -%}
5+
<script async>
6+
{%- include scripts/lib/copy-to-clipboard.js -%}
7+
</script>
8+
{%- endif -%}

‎_includes/scripts/lib/copy-to-clipboard.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
(function() {
2+
var snippets = document.querySelectorAll('pre');
3+
[].forEach.call(snippets, function(snippet) {
4+
snippet.firstChild.insertAdjacentHTML('beforebegin', '<button type="button" title="复制整段代码到剪切板" class="copy-code-to-clipboard-button" data-clipboard-snippet><i class="far fa-copy"></i></button>');
5+
});
6+
var clipboardSnippets = new ClipboardJS('[data-clipboard-snippet]', {
7+
target: function(trigger) {
8+
return trigger.nextElementSibling;
9+
}
10+
});
11+
clipboardSnippets.on('success', function(e) {
12+
e.clearSelection();
13+
showTooltip(e.trigger, '√');
14+
});
15+
clipboardSnippets.on('error', function(e) {
16+
showTooltip(e.trigger, fallbackMessage(e.action));
17+
});
18+
19+
var btns = document.querySelectorAll('.copy-code-to-clipboard-button');
20+
for (var i = 0; i < btns.length; i++) {
21+
btns[i].addEventListener('mouseleave', clearTooltip);
22+
btns[i].addEventListener('blur', clearTooltip);
23+
btns[i].addEventListener('mouseenter', function(e) {
24+
showTooltip(e.currentTarget, "复制？")
25+
}, false);
26+
}
27+
28+
function clearTooltip(e) {
29+
//e.currentTarget.setAttribute('class', 'copy-code-to-clipboard-button');
30+
//e.currentTarget.removeAttribute('aria-label');
31+
}
32+
33+
function showTooltip(elem, msg) {
34+
elem.setAttribute('class', 'copy-code-to-clipboard-button tooltipped tooltipped-s');
35+
elem.setAttribute('aria-label', msg);
36+
}
37+
38+
function fallbackMessage(action) {
39+
var actionMsg = '';
40+
var actionKey = (action === 'cut' ? 'X' : 'C');
41+
if (/iPhone|iPad/i.test(navigator.userAgent)) {
42+
actionMsg = 'No support :(';
43+
} else if (/Mac/i.test(navigator.userAgent)) {
44+
actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
45+
} else {
46+
actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
47+
}
48+
return actionMsg;
49+
}
50+
})();

‎_layouts/page.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,3 +267,4 @@
267267

268268
{%- include markdown-enhancements.html -%}
269269
{%- include pageview.html -%}
270+
{%- include copy-to-clipboard.html -%}

‎_sass/additional/_copy-to-clipboard.scss‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
.tooltipped {
2+
position: relative
3+
}
4+
5+
.tooltipped:after {
6+
position: absolute;
7+
z-index: 1000000;
8+
display: none;
9+
padding: 5px 8px;
10+
font: arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
11+
font-size: map-get($base, font-size-sm);
12+
color: #fff;
13+
text-align: center;
14+
text-decoration: none;
15+
text-shadow: none;
16+
text-transform: none;
17+
letter-spacing: normal;
18+
word-wrap: break-word;
19+
white-space: pre;
20+
pointer-events: none;
21+
content: attr(aria-label);
22+
background: rgba(0, 0, 0, .8);
23+
border-radius: 3px;
24+
-webkit-font-smoothing: subpixel-antialiased
25+
}
26+
27+
.tooltipped:before {
28+
position: absolute;
29+
z-index: 1000001;
30+
display: none;
31+
width: 0;
32+
height: 0;
33+
color: rgba(0, 0, 0, .8);
34+
pointer-events: none;
35+
content: "";
36+
border: 5px solid transparent
37+
}
38+
39+
.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after {
40+
display: inline-block;
41+
text-decoration: none
42+
}
43+
44+
.tooltipped-s:after {
45+
top: 100%;
46+
right: 100%;
47+
margin-top: 5px
48+
}
49+
50+
.tooltipped-s:before {
51+
top: auto;
52+
right: 50%;
53+
bottom: -5px;
54+
margin-right: -5px;
55+
border-bottom-color: rgba(0, 0, 0, .8)
56+
}
57+
58+
.tooltipped-s:after {
59+
-webkit-transform: translateX(50%);
60+
-ms-transform: translateX(50%);
61+
transform: translateX(50%)
62+
}
63+
64+
.copy-code-to-clipboard-button .fa-copy {
65+
margin-top: -3px;
66+
position: relative;
67+
top: 3px
68+
}
69+
70+
.copy-code-to-clipboard-button[disabled] .fa-copy {
71+
opacity: .3
72+
}
73+
74+
pre {
75+
position: relative;
76+
overflow: visible
77+
}
78+
79+
pre .copy-code-to-clipboard-button {
80+
-webkit-transition: opacity .3s ease-in-out;
81+
-o-transition: opacity .3s ease-in-out;
82+
transition: opacity .3s ease-in-out;
83+
opacity: 0;
84+
padding: 2px 6px;
85+
position: absolute;
86+
right: 4px;
87+
top: 4px;
88+
color: $copy-button-color
89+
}
90+
91+
pre:hover .copy-code-to-clipboard-button, pre .copy-code-to-clipboard-button:focus {
92+
opacity: 1
93+
}

‎_sass/skins/highlight/_default.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// copy button color
2+
$copy-button-color: #000;

‎_sass/skins/highlight/_tomorrow-night-blue.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
@import "./tomorrow/night-blue";
22
@import "./tomorrow/highlight";
3+
4+
// copy button color
5+
$copy-button-color: #fff;

‎_sass/skins/highlight/_tomorrow-night-bright.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
@import "./tomorrow/night-bright";
22
@import "./tomorrow/highlight";
3+
4+
// copy button color
5+
$copy-button-color: #fff;

0 commit comments

Comments
 (0)