Improves on **Copy Code to Clipboard** tool
* Code snippets in headers no longer have a copy button attached
* Stylying
* Inline snippets are purple to match theme
* Heading snippets are a lighter purple
* Code
* Uses a variable instead of hiding the clipboard buttons with styling
* Simplify code execution
* Add **copy to** config to readme
--- a/readme.md Sun Jan 20 22:30:59 2019 +0000
+++ b/readme.md Sun Jan 20 22:56:45 2019 +0000
@@ -35,3 +35,7 @@
| `\{\{(\w|\.|\$|\()` | `{{ $1` |
| `\{\{-(\w|\.|$)` | `{{- $1` |
| `("|\w|\.|\))(-)?}}` | `$1 }}` |
+To disable **Copy Code to Clipboard** the `disableInlineCopyToClipBoard` switch can be used either in **config** `[params]` **or** in the front matter of the individual page --- a/themes/learn/layouts/partials/header.html Sun Jan 20 22:30:59 2019 +0000
+++ b/themes/learn/layouts/partials/header.html Sun Jan 20 22:56:45 2019 +0000
@@ -27,12 +27,16 @@
:root #header + #content > #left > #rlblock_left{
- {{ if .Site.Params.disableInlineCopyToClipBoard }}
- :not(pre) > code + span.copy-to-clipboard {
+ {{ if or .Params.disableInlineCopyToClipBoard .Site.Params.disableInlineCopyToClipBoard }} + var isCodeToClipboardEnabled = false + var isCodeToClipboardEnabled = true
{{ partial "custom-header.html" . }}
--- a/themes/learn/static/css/theme.css Sun Jan 20 22:30:59 2019 +0000
+++ b/themes/learn/static/css/theme.css Sun Jan 20 22:56:45 2019 +0000
@@ -622,18 +622,25 @@
- border: 1px solid #fbf0cb;
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, h7 code { code + .copy-to-clipboard {
border-left: 0 !important;
font-size: inherit !important;
- vertical-align: middle;
+ background-color: #8451a1; --- a/themes/learn/static/images/clippy.svg Sun Jan 20 22:30:59 2019 +0000
+++ b/themes/learn/static/images/clippy.svg Sun Jan 20 22:56:45 2019 +0000
@@ -1,1 +1,6 @@
-<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg"><path d="M128 768h256v64H128v-64zm320-384H128v64h320v-64zm128 192V448L384 640l192 192V704h320V576H576zm-288-64H128v64h160v-64zM128 704h160v-64H128v64zm576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/></svg>
+<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg"> + d="M128 768h256v64H128v-64zm320-384H128v64h320v-64zm128 192V448L384 640l192 192V704h320V576H576zm-288-64H128v64h160v-64zM128 704h160v-64H128v64zm576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/> --- a/themes/learn/static/js/learn.js Sun Jan 20 22:30:59 2019 +0000
+++ b/themes/learn/static/js/learn.js Sun Jan 20 22:56:45 2019 +0000
@@ -174,44 +174,47 @@
- $('code').each(function() {
+ if (isCodeToClipboardEnabled) { + const elems = $('code')
- var text, clip = new Clipboard('.copy-to-clipboard', {
- text: function(trigger) {
- text = $(trigger).prev('code').text();
- return text.replace(/^\$\s/gm, '');
+ const clipboard = new Clipboard('.copy-to-clipboard', { + $(trigger).prev('code').text().replace(/^\$\s/gm, '')
- clip.on('success', function(e) {
- inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
- $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
+ clipboard.on('success', (e) => { + addToolTip(e, 'Copied to clipboard!') + clipboard.on('error', (e) => { + addToolTip(e, fallbackMessage(e.action)) + $(document).one('copy', () => addToolTip(e, 'Copied to clipboard!')); - clip.on('error', function(e) {
- inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
- $(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
- $(document).one('copy', function(){
- $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
+ elems.each(function () { + const isInHeading = code.parent().is('h1,h2,h3,h4,h5,h6,h7'); + const isTooShort = code.text().length < 5
+ if (!isInHeading && !isTooShort) { + code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />'); + code.next('.copy-to-clipboard').on('mouseleave', removeTooltip); + function removeTooltip() { + $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w'); - code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
- code.next('.copy-to-clipboard').on('mouseleave', function() {
- $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
+ function addToolTip(e, message) { + var inPre = $(e.trigger).parent().prop('tagName') == 'PRE'; + .attr('aria-label', message) + .addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
// allow keyboard control for prev/next links