File tree Expand file tree Collapse file tree 3 files changed +65
-2
lines changed Open diff view settings
Expand file tree Collapse file tree 3 files changed +65
-2
lines changed Open diff view settings
Original file line number Diff line number Diff line change 136136 updateHashes ( ) ;
137137 }
138138
139+ function setupCopyButton ( ) {
140+ const buttons = document . querySelectorAll ( '.copy-button' ) ;
141+ buttons . forEach ( ( button ) => {
142+ button . addEventListener ( 'click' , ( el ) => {
143+ const parentNode = el . target . parentNode ;
144+
145+ const flavorSelector = parentNode . querySelector ( '.js-flavor-selector' ) ;
146+
147+ let code = '' ;
148+
149+ if ( flavorSelector ) {
150+ if ( flavorSelector . checked ) {
151+ code = parentNode . querySelector ( '.mjs' ) . textContent ;
152+ } else {
153+ code = parentNode . querySelector ( '.cjs' ) . textContent ;
154+ }
155+ } else {
156+ code = parentNode . querySelector ( 'code' ) . textContent ;
157+ }
158+
159+ button . textContent = 'Copied' ;
160+ navigator . clipboard . writeText ( code ) ;
161+
162+ setTimeout ( ( ) => {
163+ button . textContent = 'Copy' ;
164+ } , 2500 ) ;
165+ } ) ;
166+ } ) ;
167+ }
168+
139169 function bootstrap ( ) {
140170 // Check if we have JavaScript support.
141171 document . documentElement . classList . add ( 'has-js' ) ;
151181
152182 // Make link to other versions of the doc open to the same hash target (if it exists).
153183 setupAltDocsLink ( ) ;
184+
185+ setupCopyButton ( ) ;
154186 }
155187
156188 if ( document . readyState === 'loading' ) {
Original file line number Diff line number Diff line change @@ -973,6 +973,33 @@ kbd {
973973.dark-mode .js-flavor-selector {
974974 filter : invert (1 );
975975}
976+
977+ .copy-button {
978+ float : right;
979+
980+ outline : none;
981+ font-size : 10px ;
982+ color : # fff ;
983+ background-color : var (--green1 );
984+ line-height : 1 ;
985+ border-radius : 500px ;
986+ border : 1px solid transparent;
987+ letter-spacing : 2px ;
988+ min-width : 7.5rem ;
989+ text-transform : uppercase;
990+ font-weight : 700 ;
991+ padding : 0 .5rem ;
992+ margin-right : .2rem ;
993+ height : 1.5rem ;
994+ transition-property : background-color, border-color, color, box-shadow, filter;
995+ transition-duration : .3s ;
996+ cursor : pointer;
997+ }
998+
999+ .copy-button : hover {
1000+ background-color : var (--green2 );
1001+ }
1002+
9761003@supports (aspect-ratio : 1 / 1 ) {
9771004 .js-flavor-selector {
9781005 height : 1.5em ;
Original file line number Diff line number Diff line change @@ -226,10 +226,13 @@ export function preprocessElements({ filename }) {
226226 const className = isJSFlavorSnippet ( node ) ?
227227 `language-js ${ node . lang } ` :
228228 `language-${ node . lang } ` ;
229+
229230 const highlighted =
230231 `<code class='${ className } '>${ ( getLanguage ( node . lang || '' ) ? highlight ( node . value , { language : node . lang } ) : node ) . value } </code>` ;
231232 node . type = 'html' ;
232233
234+ const copyButton = '<button class="copy-button">copy</button>' ;
235+
233236 if ( isJSFlavorSnippet ( node ) ) {
234237 const previousNode = parent . children [ index - 1 ] || { } ;
235238 const nextNode = parent . children [ index + 1 ] || { } ;
@@ -253,16 +256,17 @@ export function preprocessElements({ filename }) {
253256 ' aria-label="Show modern ES modules syntax">' +
254257 previousNode . value +
255258 highlighted +
259+ copyButton +
256260 '</pre>' ;
257261 node . lang = null ;
258262 previousNode . value = '' ;
259263 previousNode . lang = null ;
260264 } else {
261265 // Isolated JS snippet, no need to add the checkbox.
262- node . value = `<pre>${ highlighted } </pre>` ;
266+ node . value = `<pre>${ highlighted } ${ copyButton } </pre>` ;
263267 }
264268 } else {
265- node . value = `<pre>${ highlighted } </pre>` ;
269+ node . value = `<pre>${ highlighted } ${ copyButton } </pre>` ;
266270 }
267271 } else if ( node . type === 'html' && common . isYAMLBlock ( node . value ) ) {
268272 node . value = parseYAML ( node . value ) ;
You can’t perform that action at this time.
0 commit comments