Skip to content

Commit 3f15ebf

Browse files
Arohi-jdArohi-jd
committed
feat: Add Copy Button to Documentation Code Snippets (animate-css#1842)
1 parent 3f8ab23 commit 3f15ebf

7 files changed

Lines changed: 708 additions & 542 deletions

File tree

‎animate.compat.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Version - 4.1.1
66
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
77
*
8-
* Copyright (c) 2022 Animate.css
8+
* Copyright (c) 2025 Animate.css
99
*/
1010
:root {
1111
--animate-duration: 1s;

‎animate.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/animate.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 129 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,64 @@
3737
/>
3838

3939
<!-- Fork Corner Stylesheet -->
40-
<link
40+
<link
4141
href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css"
4242
rel="stylesheet"
4343
/>
4444

4545
<link rel="stylesheet" href="animate.min.css" />
4646
<link rel="stylesheet" href="style.css" />
47+
<style>
48+
/* 1. Wrapper for positioning */
49+
.code-container {
50+
position: relative;
51+
margin: 1.5em 0; /* Add some space around the code blocks */
52+
}
53+
54+
/* 2. Style the <pre> tag itself */
55+
.code-container pre {
56+
/* The <pre> tag already has styles, but we ensure margin is 0
57+
since the wrapper handles it */
58+
margin: 0;
59+
/* Add some padding to make room for the button */
60+
padding-right: 50px;
61+
}
62+
63+
/* 3. The copy button */
64+
.copy-btn {
65+
position: absolute;
66+
top: 10px;
67+
right: 10px;
68+
background-color: #333;
69+
color: white;
70+
border: none;
71+
padding: 8px 10px;
72+
border-radius: 5px;
73+
cursor: pointer;
74+
opacity: 0.7;
75+
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
76+
}
77+
78+
/* 4. Hover effect */
79+
.copy-btn:hover {
80+
opacity: 1;
81+
background-color: #555;
82+
}
83+
84+
/* 5. Icon styles */
85+
.copy-btn svg {
86+
width: 16px;
87+
height: 16px;
88+
fill: currentColor;
89+
vertical-align: middle;
90+
}
91+
92+
/* 6. "Copied" feedback state */
93+
.copy-btn.copied {
94+
background-color: #28a745; /* A nice green color */
95+
opacity: 1;
96+
}
97+
</style>
4798
</head>
4899
<body>
49100

@@ -75,7 +126,7 @@ <h2 class="callout-subtitle">Just-add-water CSS animations</h2>
75126
</svg>
76127
</label>
77128
<button class="callout-hideList button">Close list</button>
78-
129+
79130
<section class="attention_seekers" id="attention_seekers">
80131
<h3 class="animation-title">Attention seekers</h3>
81132
<ul class="animation-group">
@@ -163,7 +214,7 @@ <h3 class="animation-title">Attention seekers</h3>
163214
</button>
164215
</li></ul>
165216
</section>
166-
217+
167218

168219
<section class="back_entrances" id="back_entrances">
169220
<h3 class="animation-title">Back entrances</h3>
@@ -196,7 +247,7 @@ <h3 class="animation-title">Back entrances</h3>
196247
</button>
197248
</li></ul>
198249
</section>
199-
250+
200251

201252
<section class="back_exits" id="back_exits">
202253
<h3 class="animation-title">Back exits</h3>
@@ -229,7 +280,7 @@ <h3 class="animation-title">Back exits</h3>
229280
</button>
230281
</li></ul>
231282
</section>
232-
283+
233284

234285
<section class="bouncing_entrances" id="bouncing_entrances">
235286
<h3 class="animation-title">Bouncing entrances</h3>
@@ -269,7 +320,7 @@ <h3 class="animation-title">Bouncing entrances</h3>
269320
</button>
270321
</li></ul>
271322
</section>
272-
323+
273324

274325
<section class="bouncing_exits" id="bouncing_exits">
275326
<h3 class="animation-title">Bouncing exits</h3>
@@ -309,7 +360,7 @@ <h3 class="animation-title">Bouncing exits</h3>
309360
</button>
310361
</li></ul>
311362
</section>
312-
363+
313364

314365
<section class="fading_entrances" id="fading_entrances">
315366
<h3 class="animation-title">Fading entrances</h3>
@@ -405,7 +456,7 @@ <h3 class="animation-title">Fading entrances</h3>
405456
</button>
406457
</li></ul>
407458
</section>
408-
459+
409460

410461
<section class="fading_exits" id="fading_exits">
411462
<h3 class="animation-title">Fading exits</h3>
@@ -501,7 +552,7 @@ <h3 class="animation-title">Fading exits</h3>
501552
</button>
502553
</li></ul>
503554
</section>
504-
555+
505556

506557
<section class="flippers" id="flippers">
507558
<h3 class="animation-title">Flippers</h3>
@@ -541,7 +592,7 @@ <h3 class="animation-title">Flippers</h3>
541592
</button>
542593
</li></ul>
543594
</section>
544-
595+
545596

546597
<section class="lightspeed" id="lightspeed">
547598
<h3 class="animation-title">Lightspeed</h3>
@@ -574,7 +625,7 @@ <h3 class="animation-title">Lightspeed</h3>
574625
</button>
575626
</li></ul>
576627
</section>
577-
628+
578629

579630
<section class="rotating_entrances" id="rotating_entrances">
580631
<h3 class="animation-title">Rotating entrances</h3>
@@ -614,7 +665,7 @@ <h3 class="animation-title">Rotating entrances</h3>
614665
</button>
615666
</li></ul>
616667
</section>
617-
668+
618669

619670
<section class="rotating_exits" id="rotating_exits">
620671
<h3 class="animation-title">Rotating exits</h3>
@@ -654,7 +705,7 @@ <h3 class="animation-title">Rotating exits</h3>
654705
</button>
655706
</li></ul>
656707
</section>
657-
708+
658709

659710
<section class="specials" id="specials">
660711
<h3 class="animation-title">Specials</h3>
@@ -687,7 +738,7 @@ <h3 class="animation-title">Specials</h3>
687738
</button>
688739
</li></ul>
689740
</section>
690-
741+
691742

692743
<section class="zooming_entrances" id="zooming_entrances">
693744
<h3 class="animation-title">Zooming entrances</h3>
@@ -727,7 +778,7 @@ <h3 class="animation-title">Zooming entrances</h3>
727778
</button>
728779
</li></ul>
729780
</section>
730-
781+
731782

732783
<section class="zooming_exits" id="zooming_exits">
733784
<h3 class="animation-title">Zooming exits</h3>
@@ -767,7 +818,7 @@ <h3 class="animation-title">Zooming exits</h3>
767818
</button>
768819
</li></ul>
769820
</section>
770-
821+
771822

772823
<section class="sliding_entrances" id="sliding_entrances">
773824
<h3 class="animation-title">Sliding entrances</h3>
@@ -800,7 +851,7 @@ <h3 class="animation-title">Sliding entrances</h3>
800851
</button>
801852
</li></ul>
802853
</section>
803-
854+
804855

805856
<section class="sliding_exits" id="sliding_exits">
806857
<h3 class="animation-title">Sliding exits</h3>
@@ -833,7 +884,7 @@ <h3 class="animation-title">Sliding exits</h3>
833884
</button>
834885
</li></ul>
835886
</section>
836-
887+
837888
</section>
838889

839890
<footer class="intro-footer">
@@ -870,7 +921,7 @@ <h2 class="docs-mainTitle">
870921
</span>
871922
<div class="container">
872923
<div class="content">
873-
924+
874925
<section class="docSection-intro" id="intro">
875926
<blockquote>
876927
<p>Animate.css v4 brought some <strong>breaking changes</strong>, please refer to the <a href="#migration">migration guide</a> before updating from v3.x and under.</p>
@@ -879,7 +930,7 @@ <h2 class="docs-mainTitle">
879930

880931
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/00-intro.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
881932
</section>
882-
933+
883934

884935
<section class="docSection-usage" id="usage">
885936
<h2>Installation and Usage</h2>
@@ -946,7 +997,7 @@ <h4>CSS Custom Properties (CSS Variables)</h4>
946997

947998
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
948999
</section>
949-
1000+
9501001

9511002
<section class="docSection-utilities" id="utilities">
9521003
<h2>Utility Classes</h2>
@@ -1077,7 +1128,7 @@ <h3>Repeating classes</h3>
10771128

10781129
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
10791130
</section>
1080-
1131+
10811132

10821133
<section class="docSection-best-practices" id="best-practices">
10831134
<h2>Best Practices</h2>
@@ -1118,7 +1169,7 @@ <h3>Intervals between repeats</h3>
11181169

11191170
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/03-best-practices.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
11201171
</section>
1121-
1172+
11221173

11231174
<section class="docSection-javascript" id="javascript">
11241175
<h2>Usage with Javascript</h2>
@@ -1169,7 +1220,7 @@ <h2>Usage with Javascript</h2>
11691220

11701221
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
11711222
</section>
1172-
1223+
11731224

11741225
<section class="docSection-migration" id="migration">
11751226
<h2>Migration from v3.x and Under</h2>
@@ -1204,7 +1255,7 @@ <h2>Migration from v3.x and Under</h2>
12041255

12051256
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/06-migration.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
12061257
</section>
1207-
1258+
12081259

12091260
<section class="docSection-custom-builds" id="custom-builds">
12101261
<h2>Custom Builds</h2>
@@ -1221,7 +1272,7 @@ <h2>Custom Builds</h2>
12211272
<li><code>animate.min.css</code>: minified build ready for production</li>
12221273
<li><code>animate.compat.css</code>: minified build ready for production <strong>without class prefix</strong>. This should only be used as an easy path for migrations.</li>
12231274
</ul>
1224-
<p>For example, if you'll only use some of the “attention seekers” animations, simply edit the <code>./source/animate.css</code> file, delete every <code>@import</code> and the ones you want to use.</p>
1275+
<p>For example, if you'll only use some of the “attention seekers” animations, simply edit the <code>./source/animate.css</code> file, delete every <code>@import</code>, and add the ones you want to use.</p>
12251276
<pre><code class="language-css">@import 'attention_seekers/bounce.css';
12261277
@import 'attention_seekers/flash.css';
12271278
@import 'attention_seekers/pulse.css';
@@ -1249,15 +1300,15 @@ <h3>Changing the default prefix</h3>
12491300

12501301
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/07-custom-builds.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
12511302
</section>
1252-
1303+
12531304

12541305
<section class="docSection-accessibility" id="accessibility">
12551306
<h2>Accessibility</h2>
12561307
<p>Animate.css supports the <a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><code>prefers-reduced-motion</code> media query</a> so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select &quot;reduce motion&quot; on their operating system preferences, and it will turn off CSS transitions for them without any further work required.</p>
12571308

12581309
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/08-accessibility.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
12591310
</section>
1260-
1311+
12611312

12621313
<section class="docSection-contributors" id="contributors">
12631314
<h2>Core Team</h2>
@@ -1285,7 +1336,7 @@ <h2>Core Team</h2>
12851336

12861337
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/09-contributors.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
12871338
</section>
1288-
1339+
12891340

12901341
<section class="docSection-license-contributing" id="license-contributing">
12911342
<h2>License and Contributing</h2>
@@ -1297,7 +1348,7 @@ <h3>Code of Conduct</h3>
12971348

12981349
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/09-license-contributing.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
12991350
</section>
1300-
1351+
13011352
</div>
13021353
<aside class="sidebar">
13031354
<div class="meta">
@@ -1358,5 +1409,53 @@ <h3>Code of Conduct</h3>
13581409

13591410
<!-- Fork Corner Scripts -->
13601411
<script src="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.js" defer></script>
1412+
<script>
1413+
document.addEventListener('DOMContentLoaded', () => {
1414+
// Find all <pre> blocks
1415+
const allPreBlocks = document.querySelectorAll('pre');
1416+
1417+
allPreBlocks.forEach(preBlock => {
1418+
// 3. Create the wrapper div
1419+
const container = document.createElement('div');
1420+
container.className = 'code-container';
1421+
1422+
// 4. Wrap the <pre> block
1423+
preBlock.parentNode.insertBefore(container, preBlock);
1424+
container.appendChild(preBlock);
1425+
1426+
// 5. Create the copy button
1427+
const copyButton = document.createElement('button');
1428+
copyButton.className = 'copy-btn';
1429+
copyButton.innerText = 'Copy';
1430+
copyButton.setAttribute('aria-label', 'Copy code to clipboard');
1431+
1432+
// 6. Append the button to the wrapper
1433+
container.appendChild(copyButton);
1434+
1435+
// 7. Add the click event listener
1436+
copyButton.addEventListener('click', () => {
1437+
const codeElement = preBlock.querySelector('code');
1438+
const textToCopy = codeElement ? codeElement.innerText : '';
1439+
1440+
if (textToCopy) {
1441+
navigator.clipboard.writeText(textToCopy).then(() => {
1442+
// Success feedback
1443+
copyButton.innerText = 'Copied!';
1444+
copyButton.classList.add('copied');
1445+
1446+
// Revert after 2 seconds
1447+
setTimeout(() => {
1448+
copyButton.innerText = 'Copy';
1449+
copyButton.classList.remove('copied');
1450+
}, 2000);
1451+
1452+
}).catch(err => {
1453+
console.error('Failed to copy text: ', err);
1454+
});
1455+
}
1456+
});
1457+
});
1458+
});
1459+
</script>
13611460
</body>
13621461
</html>

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,8 @@
6565
"animate.min.css",
6666
"animate.css",
6767
"source/**/*.css"
68-
]
68+
],
69+
"dependencies": {
70+
"animate.css": "^4.1.1"
71+
}
6972
}

0 commit comments

Comments
 (0)