Skip to content

Commit 74be75d

Browse files
polandllpolandll
committed
add required changes for codeblock copy
1 parent 60704d6 commit 74be75d

File tree

5 files changed

+210
-0
lines changed

5 files changed

+210
-0
lines changed

‎src/css/doc.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -533,6 +533,97 @@
533533
position: relative;
534534
}
535535

536+
.doc .language-console .hljs-meta {
537+
user-select: none;
538+
}
539+
540+
.doc .source-toolbox {
541+
display: flex;
542+
visibility: hidden;
543+
position: absolute;
544+
top: 0.25rem;
545+
right: 0.5rem;
546+
color: var(--pre-annotation-font-color);
547+
font-family: var(--body-font-family);
548+
font-size: calc(13.5 / var(--rem-base) * 1rem);
549+
line-height: 1;
550+
}
551+
552+
553+
.doc .listingblock:hover .source-toolbox {
554+
visibility: visible;
555+
}
556+
557+
.doc .source-toolbox .source-lang {
558+
text-transform: uppercase;
559+
letter-spacing: 0.075em;
560+
font-size: 0.96em;
561+
line-height: 1.0425;
562+
}
563+
564+
.doc .source-toolbox > :not(:last-child)::after {
565+
content: "|";
566+
letter-spacing: 0;
567+
padding: 0 1ch;
568+
}
569+
570+
.doc .source-toolbox .copy-button {
571+
display: flex;
572+
flex-direction: column;
573+
align-items: center;
574+
background: transparent;
575+
border: none;
576+
color: inherit;
577+
outline: none;
578+
padding: 0;
579+
font-size: inherit;
580+
line-height: inherit;
581+
width: 1em;
582+
height: 1em;
583+
}
584+
585+
.source-toolbox .copy-button * {
586+
flex: none;
587+
}
588+
589+
.source-toolbox .copy-button svg {
590+
fill: currentColor;
591+
width: inherit;
592+
height: inherit;
593+
}
594+
595+
.source-toolbox .copy-toast {
596+
position: relative;
597+
display: inline-flex;
598+
justify-content: center;
599+
margin-top: 1em;
600+
background-color: var(--doc-font-color);
601+
border-radius: 0.25em;
602+
padding: 0.5em;
603+
color: var(--color-white);
604+
cursor: auto;
605+
opacity: 0;
606+
transition: opacity 0.5s ease 0.75s;
607+
}
608+
609+
.source-toolbox .copy-toast::after {
610+
content: "";
611+
position: absolute;
612+
top: 0;
613+
width: 1em;
614+
height: 1em;
615+
border: 0.55em solid transparent;
616+
border-left-color: var(--doc-font-color);
617+
transform: rotate(-90deg) translateX(50%) translateY(50%);
618+
transform-origin: left;
619+
}
620+
621+
.source-toolbox .copy-button.clicked .copy-toast {
622+
opacity: 1;
623+
transition: none;
624+
}
625+
626+
536627
.doc .listingblock code[data-lang]::before {
537628
content: attr(data-lang);
538629
display: none;

‎src/img/octicons-16.svg‎

Lines changed: 36 additions & 0 deletions
Loading

‎src/js/07-copy-to-clipboard.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
;(function () {
2+
'use strict'
3+
4+
var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm
5+
var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g
6+
var TRAILING_SPACE_RX = / +$/gm
7+
var config = (document.getElementById('site-script') || { dataset: {} }).dataset
8+
9+
;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) {
10+
var code, language, lang, copy, toast, toolbox
11+
if (pre.classList.contains('highlight')) {
12+
code = pre.querySelector('code')
13+
if ((language = code.dataset.lang) && language !== 'console') {
14+
;(lang = document.createElement('span')).className = 'source-lang'
15+
lang.appendChild(document.createTextNode(language))
16+
}
17+
} else if (pre.innerText.startsWith('$ ')) {
18+
var block = pre.parentNode.parentNode
19+
block.classList.remove('literalblock')
20+
block.classList.add('listingblock')
21+
pre.classList.add('highlightjs', 'highlight')
22+
;(code = document.createElement('code')).className = 'language-console hljs'
23+
code.dataset.lang = 'console'
24+
code.appendChild(pre.firstChild)
25+
pre.appendChild(code)
26+
} else {
27+
return
28+
}
29+
;(toolbox = document.createElement('div')).className = 'source-toolbox'
30+
if (lang) toolbox.appendChild(lang)
31+
if (window.navigator.clipboard) {
32+
;(copy = document.createElement('button')).className = 'copy-button'
33+
copy.setAttribute('title', 'Copy to clipboard')
34+
if (config.svgAs === 'svg') {
35+
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
36+
svg.setAttribute('class', 'copy-icon')
37+
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
38+
use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy')
39+
svg.appendChild(use)
40+
copy.appendChild(svg)
41+
} else {
42+
var img = document.createElement('img')
43+
img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy'
44+
img.alt = 'copy icon'
45+
img.className = 'copy-icon'
46+
copy.appendChild(img)
47+
}
48+
;(toast = document.createElement('span')).className = 'copy-toast'
49+
toast.appendChild(document.createTextNode('Copied!'))
50+
copy.appendChild(toast)
51+
toolbox.appendChild(copy)
52+
}
53+
pre.appendChild(toolbox)
54+
if (copy) copy.addEventListener('click', writeToClipboard.bind(copy, code))
55+
})
56+
57+
function extractCommands (text) {
58+
var cmds = []
59+
var m
60+
while ((m = CMD_RX.exec(text))) cmds.push(m[1].replace(LINE_CONTINUATION_RX, '$1$2'))
61+
return cmds.join(' && ')
62+
}
63+
64+
function writeToClipboard (code) {
65+
var text = code.innerText.replace(TRAILING_SPACE_RX, '')
66+
if (code.dataset.lang === 'console' && text.startsWith('$ ')) text = extractCommands(text)
67+
window.navigator.clipboard.writeText(text).then(
68+
function () {
69+
this.classList.add('clicked')
70+
this.offsetHeight // eslint-disable-line no-unused-expressions
71+
this.classList.remove('clicked')
72+
}.bind(this),
73+
function () {}
74+
)
75+
}
76+
})()

‎src/partials/footer-scripts.hbs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
<script>window.uiRootPath = '{{{uiRootPath}}}'</script>
12
<script src="{{{uiRootPath}}}/js/site.js"></script>
23
<script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>

‎src/partials/toolbar.hbs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@
33
{{> breadcrumbs}}
44
{{> page-versions}}
55
<div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
6+
{{!-- LLP: 02.14.2022 The following is from stargate/antori-ui-docs, if we choose to implement CI --}}
7+
{{!-- {{#if (and page.fileUri (not env.CI))}}
8+
<div class="edit-this-page"><a href="{{page.fileUri}}">Edit this Page</a></div>
9+
{{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
10+
<div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
11+
{{/if}} --}}
612
</div>

0 commit comments

Comments
 (0)