Skip to content

Instantly share code, notes, and snippets.

@jessedmatlock
Last active August 24, 2022 16:04
Show Gist options
  • Save jessedmatlock/97f5fee5a8b294df822f680d9a185b9e to your computer and use it in GitHub Desktop.
Save jessedmatlock/97f5fee5a8b294df822f680d9a185b9e to your computer and use it in GitHub Desktop.
GiveWP - add a heart SVG icon to recurring option box that animates when a recurring donation is selected
// Inject an SVG icon (heart) into recurring selection box via JS
function override_givewp_js() {
if( ! is_admin() ) { ?>
<script type="text/javascript">
jQuery(document).ready( function($) {
$('.give-btn.advance-btn').on('click', function(){
if( $('.give-recurring-donors-choice').length ){
$('.give-recurring-donors-choice').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.96 256" data-inject-url="http://vertex2022.local/wp-content/themes/vertex-ranch-2022/assets/img/icons/solid/love.svg" class="svg-inject icon-svg icon-svg-sm solid-mono text-red me-4 mb-5 mb-md-0"><path class="fill-primary" d="M96 186.67A90.77 90.77 0 01186.63 96a89.82 89.82 0 0138.9 8.9 64.28 64.28 0 00-95.3-86L120 29.15l-10.28-10.27a64.21 64.21 0 00-90.93 0 64.56 64.56 0 000 91.06L96 187.28z"></path><path class="fill-secondary" d="M186.63 117.33A69.34 69.34 0 10256 186.67a69.41 69.41 0 00-69.37-69.34zm30.19 55.73l-30.54 37.32a8.06 8.06 0 01-5.92 3h-.27a8 8 0 01-5.84-2.53l-17.46-18.67a8 8 0 0111.7-10.95l11.21 12 24.76-30.26a8 8 0 1112.36 10.15z"></path></svg><div class="heart-holder" style=""><div class="heart-x-move"><svg svg-inline="" focusable="false" role="presentation" width="24" height="24" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="d-block"><path d="M9 14.154c11.106-6.118 4.174-13.12 0-8.833-4.174-4.288-11.106 2.715 0 8.833z" fill="#F00905"></path><defs><radialGradient id="paint0_radial_4312_76" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 8.9911 -10.6258 0 9 5.163)"><stop stop-color="#F45D5A"></stop><stop offset=".466" stop-color="#F55E5B"></stop><stop offset=".808" stop-color="#F21814"></stop><stop offset="1" stop-color="#F00905"></stop></radialGradient></defs></svg></div></div>');
}
});
}); // docready
</script>
<?php }
}
add_action('wp_print_footer_scripts', 'override_givewp_js', 99);
// Insert styles into the footer for give forms, to style the heart and animation
function override_iframe_template_styles_with_inline_styles() {
wp_add_inline_style(
'give-sequoia-template-css',
'
.give-recurring-donors-choice {position:relative;margin-bottom: 20px !important;}
.give-recurring-donors-choice label {}
.give-recurring-donors-choice .icon-svg {
height:30px;
width: 30px;
position: absolute;
top:50%;
margin-top: -15px;
right:10px;
}
.solid-mono.text-red .fill-secondary {fill: #f8908e !important;}
.solid-mono.text-red {fill: #F00905 !important;}
.heart-x-move {
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
.give-recurring-donors-choice.active .heart-x-move {
visibility: visible;
}
.heart-holder {
width: 24px;
height: 24px;
transform-origin: 50% 50%;
top: 10px;
position: absolute;
right: 10px;
}
.heart-y-move-enter {
will-change: transform, opacity;
}
.active .heart-x-move {
animation: heart-y-move 2.5s forwards linear;
animation-delay: 50ms;
}
@keyframes heart-y-move {
0% {
transform: translate(0, 0) rotate(0);
opacity: 1;
}
5% {
transform: translate(0, 0) scale(1.7);
}
60% {
transform: translate(0, -65px) rotate(25deg) scale(1.7);
}
80% {
transform: translate(0 -76px) rotate(0) scale(1.7);
opacity: 1;
}
100% {
transform: translate(0, -95px) scale(2) rotate(0);
opacity: 0;
}
}
@keyframes heart-x-move {
0% {
transform: translate(0, -50%) rotate(0);
}
33% {
transform: translate(-7px, -50%) rotate(23deg);
}
67% {
transform: translate(7px, -50%) rotate(-23deg);
}
100% {
transform: translate(0, -50%) rotate(0);
}
}
'
);
}
add_action('wp_print_styles', 'override_iframe_template_styles_with_inline_styles', 10);
// Move the recurring option box above the donation amount options
function my_give_move_recurring_checkbox( $form_id ) {
remove_action( 'give_after_donation_levels', 'give_output_donors_choice_checkbox', 1 );
add_action( 'give_before_donation_levels', 'give_output_donors_choice_checkbox', 100, 2 );
}
add_action( 'give_pre_form', 'my_give_move_recurring_checkbox' );
@jessedmatlock
Copy link
Author

giveWP-heart-animation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment