Skip to content

Toggle demo clipboard visibility between JSON, and Markdown and HTML #609

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Oct 4, 2023
Merged

Toggle demo clipboard visibility between JSON, and Markdown and HTML #609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ce1fdb0
Add demo clipboard view toggle
R055A Oct 3, 2023
2b367e9
Update src/demo/js/script.js
R055A Oct 3, 2023
71116d9
Update src/demo/js/script.js
R055A Oct 3, 2023
19d1b33
Update src/demo/js/script.js
R055A Oct 3, 2023
94b5305
Fix demo clipboard copy to json
R055A Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/demo/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,17 @@ function gtag() {
Copy To Clipboard
</button>
</div>

<div>
<h2>JSON</h2>
<div class="code-container json">
<code></code>
</div>

<button class="copy-button btn tooltip copy-json" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
Copy To Clipboard
</button>
</div>
</div>
<div class="bottom">
<a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
Expand Down
15 changes: 11 additions & 4 deletions src/demo/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,22 @@ const preview = {
document.querySelector(".output img").src = demoImageURL;
document.querySelector(".md code").innerText = md;
document.querySelector(".html code").innerText = html;
document.querySelector(".copy-md").parentElement.style.display = "block";
document.querySelector(".copy-html").parentElement.style.display = "block";
document.querySelector(".output img").style.display = "block";
document.querySelector(".output .json").style.display = "none";
document.querySelector(".copy-json").parentElement.style.display = "none";
} else {
document.querySelector(".output img").style.display = "none";
document.querySelector(".output .json").style.display = "block";
fetch(demoImageURL)
.then((response) => response.json())
.then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
.catch(console.error);
document.querySelector(".md code").innerText = imageURL;
document.querySelector(".html code").innerText = imageURL;
document.querySelector(".json code").innerText = imageURL;
document.querySelector(".copy-md").parentElement.style.display = "none";
document.querySelector(".copy-html").parentElement.style.display = "none";
document.querySelector(".output img").style.display = "none";
document.querySelector(".output .json").style.display = "block";
document.querySelector(".copy-json").parentElement.style.display = "block";
}
// disable copy button if username is invalid
const copyButtons = document.querySelectorAll(".copy-button");
Expand Down Expand Up @@ -388,6 +393,8 @@ const clipboard = {
input.value = document.querySelector(".md code").innerText;
} else if (el.classList.contains("copy-html")) {
input.value = document.querySelector(".html code").innerText;
} else if (el.classList.contains("copy-json")) {
input.value = document.querySelector(".json code").innerText;
}
document.body.appendChild(input);
// select all
Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy