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"""
// Event listener for the parent click
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) {{
const svgIcon = parent.querySelector('svg'); // Always targets the <svg> child element
const originalPath = svgIcon.innerHTML;
const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>'; // Checkmark SVG path
function transition(element, scale, opacity) {{
element.style.transform = `scale(${{scale}})`;
element.style.opacity = opacity;
}}
// Copy the code to clipboard
navigator.clipboard.writeText(`{code}`).then(() => {{
// 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');
// 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 checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>'; // Checkmark SVG path
function transition(element, scale, opacity) {{
element.style.transform = `scale(${{scale}})`;
element.style.opacity = opacity;
}}
// Copy the code to clipboard
navigator.clipboard.writeText(`{code}`).then(() => {{
// Animate the SVG
transition(svgIcon, 0, '0');
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(() => {{
svgIcon.innerHTML = originalPath; // Restore original SVG content
transition(svgIcon, 1, '1');
}}, 125);
}}, 600);
}}, 125);
}}).catch(err => {{
console.error('Failed to copy text: ', err);
}});
transition(svgIcon, 0, '0');
setTimeout(() => {{
svgIcon.innerHTML = originalPath; // Restore original SVG content
transition(svgIcon, 1, '1');
}}, 125);
}}, 600);
}}, 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.');
}}
}});
"""