kylefang/prodigyapi
1
0
Fork 0
mirror of https://github.com/placeholder-soft/prodigyapi.git synced 2026-01-12 22:44:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

add copy to clipboard icon to code boxes (#1258)

Browse Source 
Signed-off-by: Matthew Peveler <matt.peveler@gmail.com>
This commit is contained in:
Matthew Peveler
2020-06-17 21:31:18 +03:00
parent f720bd9387
commit bae7edc397
6 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
source/index.html.md
View File

@@ -15,6 +15,8 @@ includes:
- errors
search: true
code_clipboard: true
---
# Introduction

1
source/javascripts/all_nosearch.js
View File

@@ -1,4 +1,5 @@
//= require ./lib/_energize
//= require ./app/_copy
//= require ./app/_toc
//= require ./app/_lang

15
source/javascripts/app/_copy.js Normal file
View File

@@ -0,0 +1,15 @@
function copyToClipboard(container) {
const el = document.createElement('textarea');
el.value = container.textContent;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
function setupCodeCopy() {
$('pre.highlight').prepend('<div class="copy-clipboard"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Copy to Clipboard</title><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"></path></svg></div>');
$('.copy-clipboard').on('click', function() {
copyToClipboard(this.parentNode.children[1]);
});
}

6
source/layouts/layout.erb
View File

@@ -47,6 +47,12 @@ under the License.
<% else %>
<%= javascript_include_tag "all_nosearch" %>
<% end %>
<% if current_page.data.code_clipboard %>
<script>
$(function() { setupCodeCopy(); });
</script>
<% end %>
</head>
<body class="<%= page_classes %>" data-languages="<%=h language_tabs.map{ |lang| lang.is_a?(Hash) ? lang.keys.first : lang }.to_json %>">

8
source/stylesheets/print.css.scss
View File

@@ -144,4 +144,10 @@ body {
aside.success:before {
@extend %icon-ok-sign;
}
}
}
.copy-clipboard {
@media print {
display: none
}
}

13
source/stylesheets/screen.css.scss
View File

@@ -617,3 +617,16 @@ html, body {
.highlight, .highlight .w {
background-color: $code-bg;
}
.copy-clipboard {
float: right;
fill: #9DAAB6;
cursor: pointer;
opacity: 0.4;
height: 18px;
width: 18px;
}
.copy-clipboard:hover {
opacity: 0.8;
}