-
Notifications
You must be signed in to change notification settings - Fork 96
Add code copy buttons to docs #883
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft
dancormier
wants to merge
20
commits into
develop
Choose a base branch
from
code-copy-btn
base: develop
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Changes from all commits
Commits
Show all changes
20 commits
Select commit
Hold shift + click to select a range
354e3ca
Add code copy buttons to Card page
dancormier cd58475
Use template string for copy button
dancormier e9042d7
Merge branch 'develop' into code-copy-btn
dancormier 04ce2f7
Match new file structure
dancormier 4ea6414
Cleanup stimulus import
dancormier b44742f
Merge branch 'develop' into code-copy-btn
aaronshekey aa84fc3
Some aesthetic choices
aaronshekey 625623d
Merge branch 'develop' into code-copy-btn
dancormier 10617a0
Replace return-less maps with forEach
dancormier 5ea24e8
Merge branch 'develop' into code-copy-btn
dancormier ac97699
style(clipboard): cleanup forEach
dancormier 05ae67e
use stacks application.register
dancormier 6b11558
modify copybutton shortcode to wrap el
dancormier 32f803e
Add copy button to the rest of card examples
dancormier d8d4dc0
tweak copy button style
dancormier d6857ed
Add copy btn to checkbox docs
dancormier 9f858a5
tweak copy button and code-block style
dancormier 6464b02
lil' indent
dancormier 51d6cb5
Pass arbitrary classes to copy button
dancormier 3ea29dd
whoops, don't need that
dancormier File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import * as Stacks from '../../../../lib/ts/stacks'; | ||
|
|
||
| Stacks.application.register("clipboard", class extends Stacks.StacksController { | ||
| static targets = ["source"]; | ||
| sourceTarget!: HTMLElement; | ||
|
|
||
| connect() { | ||
| super.connect(); | ||
| }; | ||
|
|
||
| copy() { | ||
| const text = this.sourceTarget.innerText; | ||
| navigator.clipboard.writeText(text); | ||
| this.handleVisible(); | ||
| } | ||
|
|
||
| private handleVisible() { | ||
| const { scope } = this.targets; | ||
|
|
||
| const hideElements = scope.findAllElements('[data-hide-on-copy]'); | ||
| const showElements = scope.findAllElements('[data-show-on-copy]'); | ||
|
|
||
| hideElements.forEach(el => { | ||
| el.classList.add("d-none"); | ||
| }); | ||
| showElements.forEach(el => { | ||
| el.classList.remove("d-none"); | ||
| }); | ||
|
|
||
| setTimeout(function () { | ||
| hideElements.forEach(el => { | ||
| el.classList.remove("d-none"); | ||
| }); | ||
| showElements.forEach(el => { | ||
| el.classList.add("d-none"); | ||
| }); | ||
| }, 3000); | ||
| } | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| const { default: Icons } = require("@stackoverflow/stacks-icons"); | ||
|
|
||
| module.exports = { | ||
| configFunction(eleventyConfig) { | ||
| eleventyConfig.addPairedShortcode("copybutton", function(content, classes, btnClasses) { | ||
| var tooltipId = "tooltip-" + Math.floor(Math.random() * 1000); | ||
|
|
||
| var output = ` | ||
| <div class="stacks-clipboard-content ps-relative ${classes}" data-controller="clipboard"> | ||
| <button | ||
| class="stacks-copy-btn s-btn s-btn__muted s-btn__icon ps-absolute p4 ${btnClasses}" | ||
| data-action="clipboard#copy" | ||
| data-s-tooltip-placement="top" | ||
| data-controller="s-tooltip" | ||
| aria-describedby="${tooltipId}"> | ||
| <span class="d-none" data-show-on-copy>${Icons["Checkmark"]}</span> | ||
| <span data-hide-on-copy>${Icons["Copy"]}</span> | ||
| </button> | ||
| <div class="s-popover s-popover__tooltip" | ||
| id="${tooltipId}" | ||
| role="tooltip" | ||
| aria-hidden="true"> | ||
| <div class="s-popover--arrow"></div> | ||
| <span class="d-none" data-show-on-copy>Copied</span> | ||
| <span data-hide-on-copy>Copy</span> | ||
| </div> | ||
| <div data-clipboard-target="source"> | ||
| ${content} | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| return output; | ||
| }); | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.