remove id on copy button animation
This commit is contained in:
parent
a634a266f4
commit
8bf79bdeff
@ -22,11 +22,10 @@ from reflex.vars.function import FunctionStringVar
|
|||||||
from reflex.vars.sequence import StringVar, string_replace_operation
|
from reflex.vars.sequence import StringVar, string_replace_operation
|
||||||
|
|
||||||
|
|
||||||
def copy_script(id: str, code: StringVar | str) -> Any:
|
def copy_script(code: StringVar | str) -> Any:
|
||||||
"""Copy script for the code block.
|
"""Copy script for the code block and modify the child SVG element.
|
||||||
|
|
||||||
Args:
|
Args:
|
||||||
id (str): The ID of the button element.
|
|
||||||
code (str): The code to be copied.
|
code (str): The code to be copied.
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
@ -34,33 +33,41 @@ def copy_script(id: str, code: StringVar | str) -> Any:
|
|||||||
"""
|
"""
|
||||||
return call_script(
|
return call_script(
|
||||||
f"""
|
f"""
|
||||||
const button = document.getElementById('{id}');
|
// Event listener for the parent click
|
||||||
const icon = button.querySelector('svg');
|
document.addEventListener('click', function(event) {{
|
||||||
const originalPath = icon.innerHTML;
|
const parent = event.target.closest('div'); // Assumes the parent is a <div> or any container
|
||||||
const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>';
|
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) {{
|
function transition(element, scale, opacity) {{
|
||||||
element.style.transform = `scale(${{scale}})`;
|
element.style.transform = `scale(${{scale}})`;
|
||||||
element.style.opacity = opacity;
|
element.style.opacity = opacity;
|
||||||
}}
|
}}
|
||||||
|
|
||||||
navigator.clipboard.writeText(`{code}`).then(() => {{
|
// Copy the code to clipboard
|
||||||
transition(icon, 0, '0');
|
navigator.clipboard.writeText(`{code}`).then(() => {{
|
||||||
|
// Animate the SVG
|
||||||
|
transition(svgIcon, 0, '0');
|
||||||
|
|
||||||
setTimeout(() => {{
|
|
||||||
icon.innerHTML = checkmarkPath;
|
|
||||||
icon.setAttribute('viewBox', '0 0 24 24');
|
|
||||||
transition(icon, 1, '1');
|
|
||||||
setTimeout(() => {{
|
|
||||||
transition(icon, 0, '0');
|
|
||||||
setTimeout(() => {{
|
setTimeout(() => {{
|
||||||
icon.innerHTML = originalPath;
|
svgIcon.innerHTML = checkmarkPath; // Replace content with checkmark
|
||||||
transition(icon, 1, '1');
|
svgIcon.setAttribute('viewBox', '0 0 24 24'); // Adjust viewBox if necessary
|
||||||
|
transition(svgIcon, 1, '1');
|
||||||
|
|
||||||
|
setTimeout(() => {{
|
||||||
|
transition(svgIcon, 0, '0');
|
||||||
|
setTimeout(() => {{
|
||||||
|
svgIcon.innerHTML = originalPath; // Restore original SVG content
|
||||||
|
transition(svgIcon, 1, '1');
|
||||||
|
}}, 125);
|
||||||
|
}}, 600);
|
||||||
}}, 125);
|
}}, 125);
|
||||||
}}, 600);
|
}}).catch(err => {{
|
||||||
}}, 125);
|
console.error('Failed to copy text: ', err);
|
||||||
}}).catch(err => {{
|
}});
|
||||||
console.error('Failed to copy text: ', err);
|
}}
|
||||||
}});
|
}});
|
||||||
"""
|
"""
|
||||||
)
|
)
|
||||||
@ -718,18 +725,12 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
|
|||||||
|
|
||||||
if can_copy:
|
if can_copy:
|
||||||
code = children[0]
|
code = children[0]
|
||||||
button_id = (
|
|
||||||
f"copy-button-{hash(code)}" # Generate a unique ID for each button
|
|
||||||
)
|
|
||||||
copy_button = ( # type: ignore
|
copy_button = ( # type: ignore
|
||||||
copy_button
|
copy_button
|
||||||
if copy_button is not None
|
if copy_button is not None
|
||||||
else Button.create(
|
else Button.create(
|
||||||
Icon.create(tag="copy", size=16, color=color("gray", 11)),
|
Icon.create(tag="copy", size=16, color=color("gray", 11)),
|
||||||
id=button_id,
|
on_click=copy_script(cls._strip_transformer_triggers(code)),
|
||||||
on_click=copy_script(
|
|
||||||
button_id, cls._strip_transformer_triggers(code)
|
|
||||||
),
|
|
||||||
style=Style(
|
style=Style(
|
||||||
{
|
{
|
||||||
"position": "absolute",
|
"position": "absolute",
|
||||||
|
@ -13,7 +13,7 @@ from reflex.vars.base import Var
|
|||||||
from reflex.vars.function import FunctionStringVar
|
from reflex.vars.function import FunctionStringVar
|
||||||
from reflex.vars.sequence import StringVar
|
from reflex.vars.sequence import StringVar
|
||||||
|
|
||||||
def copy_script(id: str, code: StringVar | str) -> Any: ...
|
def copy_script(code: StringVar | str) -> Any: ...
|
||||||
|
|
||||||
SHIKIJS_TRANSFORMER_FNS = {
|
SHIKIJS_TRANSFORMER_FNS = {
|
||||||
"transformerNotationDiff",
|
"transformerNotationDiff",
|
||||||
|
Loading…
Reference in New Issue
Block a user