pidgin/nest

Improves on **Copy Code to Clipboard** tool

2019-01-20, Jason
d2e5109efaf2
Parents 60c0632cc2c1
Children b1bb041712d1
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
5 files changed, 66 insertions(+), 43 deletions(-)
  • +4 -0
    readme.md
  • +9 -5
    themes/learn/layouts/partials/header.html
  • +13 -6
    themes/learn/static/css/theme.css
  • +6 -1
    themes/learn/static/images/clippy.svg
  • +34 -31
    themes/learn/static/js/learn.js
    • --- 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 }}` |
    +
    +## Hugo config
    +
    +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{
    display:none !important;
    }
    - {{ if .Site.Params.disableInlineCopyToClipBoard }}
    - :not(pre) > code + span.copy-to-clipboard {
    - display: none;
    - }
    + </style>
    +
    + <script>
    + {{ if or .Params.disableInlineCopyToClipBoard .Site.Params.disableInlineCopyToClipBoard }}
    + var isCodeToClipboardEnabled = false
    + {{ else }}
    + var isCodeToClipboardEnabled = true
    {{ end }}
    - </style>
    + </script>
    +
    {{ partial "custom-header.html" . }}
    </head>
    --- 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 @@
    code {
    border-radius: 2px;
    white-space: nowrap;
    - color: #5e5e5e;
    - background: #FFF7DD;
    - border: 1px solid #fbf0cb;
    + color: whitesmoke;
    + background: #8451a1;
    + padding: 0px 6px;
    +}
    +h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, h7 code {
    + border-radius: 6px;
    + white-space: nowrap;
    + color: #8451a1;
    + background: #e2e2fd;
    padding: 0px 2px;
    }
    code + .copy-to-clipboard {
    - margin-left: -1px;
    + margin-left: -6px;
    + margin-top: -1px;
    border-left: 0 !important;
    font-size: inherit !important;
    - vertical-align: middle;
    - height: 21px;
    + height: 18px;
    top: 0;
    + background-color: #8451a1;
    }
    pre {
    padding: 1rem;
    --- 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">
    + <path
    + stroke="white"
    + fill="white"
    + 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>
    --- 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 @@
    }
    // clipboard
    - var clipInit = false;
    - $('code').each(function() {
    - var code = $(this),
    - text = code.text();
    + if (isCodeToClipboardEnabled) {
    + const elems = $('code')
    - if (text.length > 5) {
    - if (!clipInit) {
    - var text, clip = new Clipboard('.copy-to-clipboard', {
    - text: function(trigger) {
    - text = $(trigger).prev('code').text();
    - return text.replace(/^\$\s/gm, '');
    - }
    - });
    + if (elems.length) {
    + const clipboard = new Clipboard('.copy-to-clipboard', {
    + text: (trigger) =>
    + $(trigger).prev('code').text().replace(/^\$\s/gm, '')
    + });
    - var inPre;
    - clip.on('success', function(e) {
    - e.clearSelection();
    - 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) => {
    + e.clearSelection();
    + 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 code = $(this);
    + const isInHeading = code.parent().is('h1,h2,h3,h4,h5,h6,h7');
    + const isTooShort = code.text().length < 5
    - clipInit = true;
    + 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';
    + $(e.trigger)
    + .attr('aria-label', message)
    + .addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
    + }
    }
    - });
    + }
    // allow keyboard control for prev/next links
    jQuery(function() {