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

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

@ -35,38 +35,44 @@ 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 originalPath = svgIcon.innerHTML; const svgIcon = parent.querySelector('svg');
const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>'; // Checkmark SVG path // If the SVG exists, proceed with the script
if (svgIcon) {{
function transition(element, scale, opacity) {{ const originalPath = svgIcon.innerHTML;
element.style.transform = `scale(${{scale}})`; const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>'; // Checkmark SVG path
element.style.opacity = opacity; function transition(element, scale, opacity) {{
}} element.style.transform = `scale(${{scale}})`;
element.style.opacity = opacity;
// Copy the code to clipboard }}
navigator.clipboard.writeText(`{code}`).then(() => {{ // Copy the code to clipboard
// Animate the SVG navigator.clipboard.writeText(`{code}`).then(() => {{
transition(svgIcon, 0, '0'); // Animate the SVG
transition(svgIcon, 0, '0');
setTimeout(() => {{
svgIcon.innerHTML = checkmarkPath; // Replace content with checkmark
svgIcon.setAttribute('viewBox', '0 0 24 24'); // Adjust viewBox if necessary
transition(svgIcon, 1, '1');
setTimeout(() => {{ setTimeout(() => {{
transition(svgIcon, 0, '0'); svgIcon.innerHTML = checkmarkPath; // Replace content with checkmark
svgIcon.setAttribute('viewBox', '0 0 24 24'); // Adjust viewBox if necessary
transition(svgIcon, 1, '1');
setTimeout(() => {{ setTimeout(() => {{
svgIcon.innerHTML = originalPath; // Restore original SVG content transition(svgIcon, 0, '0');
transition(svgIcon, 1, '1'); setTimeout(() => {{
}}, 125); svgIcon.innerHTML = originalPath; // Restore original SVG content
}}, 600); transition(svgIcon, 1, '1');
}}, 125); }}, 125);
}}).catch(err => {{ }}, 600);
console.error('Failed to copy text: ', err); }}, 125);
}}); }}).catch(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.');
}} }}
}}); }});
""" """