I’m in way over my head here.. but, I think the solution maybe to dequeue this code found in ‘classes’ > ‘blocks’ > ‘assets’ > .js file:
if ( btn.hasClass('ctc-block-copy-icon') ) {
// Copied!
btn.addClass('copied');
setTimeout(function () {
btn.removeClass('copied')
}, 1000);
} else {
// Copied!
btnText.text( copiedText );
block.addClass('copied')
setTimeout(function () {
btnText.text(oldText)
block.removeClass('copied')
}, 1000);
}
}
};
then simply extend the 1000 to something longer with a JS Snippet. My attempts to do this have failed thus far 🙂
*To elaborate on what I’d like to achieve – I would like the ‘copied’ message that is displayed once clicked, to not to revert back to the original ‘copy’ message before it disappears and resets.
Kind regards, Tim
Hi,
Apologies for another question, hopefully this one will be easier to answer as it’s CSS related.
I’ve placed a clipboard icon before the ‘Copy’ text (which I have achieved with the ::before psuedo selector – see below).. however, I would like this icon to change to a tick icon (/f00c) once the button text value changes to ‘copied’.
Would you know how to target the button once it’s being clicked and the text changes to ‘Copied’?
—
My CSS so far is:
.copy-the-code-button{
background-color: #414552;
}
.copy-the-code-button:before{
font-family: "Font Awesome 5 Free";
content: "\f46d";
padding-right: 5px;
}
.copy-the-code-button:focus::before{
font-family: "Font Awesome 5 Free";
content: "\f00c";
padding-right: 5px;
}
.copy-the-code-button:active::before{
font-family: "Font Awesome 5 Free";
content: "\f00c";
padding-right: 5px;
}
.copy-the-code-button:visited::before{
font-family: "Font Awesome 5 Free";
content: "\f00c";
padding-right: 5px;
}
As you see, I naively thought that using the pseudo selectors active and visited would achieve this. This however simply changes the icon for the ‘Copy’ text value.
Kind regards,
Tim
Hello @timmy321,
I am sorry for the late reply.
As I see you have 2 suggessions:
- Keep the copied text after clicking on it (Currently the default text revert)
- Add the clipboard icon for the copied text which appear after clicking on the button.
I’m really happy to add such support.
But, Can you please share the page and the reference of what UI you want to archive?
I’ll check it and share the possible fix.
Either by adding such support into the plugin or may share some custom solution for you.
You may contact me on [email protected] in case to share any non-public links/information.
Hi Mahesh, thank you for replying.
Just letting you know I’ve sent an email across 🙂
Kind regards,
Tim
