laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

check if svg exists

Browse Source
This commit is contained in:
Carlos 2024-10-17 22:58:35 +02:00 committed by Elijah
parent 73590040df
commit d692a055b9
1 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
reflex/components/datadisplay/shiki_code_block.py
View File

@ -35,27 +35,28 @@ def copy_script(code: StringVar | str) -> Any:
f""" f"""
// Event listener for the parent click // Event listener for the parent click
document.addEventListener('click', function(event) {{ document.addEventListener('click', function(event) {{
const parent = event.target.closest('div'); // Assumes the parent is a <div> or any container // Find the closest div (parent element)
const parent = event.target.closest('div');
// If the parent is found
if (parent) {{ if (parent) {{
const svgIcon = parent.querySelector('svg'); // Always targets the <svg> child element // Find the SVG element within the parent
const svgIcon = parent.querySelector('svg');
// If the SVG exists, proceed with the script
if (svgIcon) {{
const originalPath = svgIcon.innerHTML; const originalPath = svgIcon.innerHTML;
const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>'; // Checkmark SVG path const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>'; // Checkmark SVG path
function transition(element, scale, opacity) {{ function transition(element, scale, opacity) {{
element.style.transform = `scale(${{scale}})`; element.style.transform = `scale(${{scale}})`;
element.style.opacity = opacity; element.style.opacity = opacity;
}} }}
// Copy the code to clipboard // Copy the code to clipboard
navigator.clipboard.writeText(`{code}`).then(() => {{ navigator.clipboard.writeText(`{code}`).then(() => {{
// Animate the SVG // Animate the SVG
transition(svgIcon, 0, '0'); transition(svgIcon, 0, '0');
setTimeout(() => {{ setTimeout(() => {{
svgIcon.innerHTML = checkmarkPath; // Replace content with checkmark svgIcon.innerHTML = checkmarkPath; // Replace content with checkmark
svgIcon.setAttribute('viewBox', '0 0 24 24'); // Adjust viewBox if necessary svgIcon.setAttribute('viewBox', '0 0 24 24'); // Adjust viewBox if necessary
transition(svgIcon, 1, '1'); transition(svgIcon, 1, '1');
setTimeout(() => {{ setTimeout(() => {{
transition(svgIcon, 0, '0'); transition(svgIcon, 0, '0');
setTimeout(() => {{ setTimeout(() => {{
@ -67,6 +68,11 @@ document.addEventListener('click', function(event) {{
}}).catch(err => {{ }}).catch(err => {{
console.error('Failed to copy text: ', err); console.error('Failed to copy text: ', err);
}}); }});
}} else {{
console.error('SVG element not found within the parent.');
}}
}} else {{
console.error('Parent element not found.');
}} }}
}}); }});
""" """