| 1 |
( function( $ ) { |
| 2 |
|
| 3 |
// Clickable Tabs |
| 4 |
$('.charitable-campaign-nav').on( 'click', 'li.tab_title a', function( e ) { |
| 5 |
|
| 6 |
e.preventDefault(); |
| 7 |
|
| 8 |
var $preview = $( '.charitable-campaign-preview' ), |
| 9 |
tab_id = $( this ).parent().data('tab-id'), |
| 10 |
tab_type = $preview.find( 'li#tab_' + tab_id + '_title').attr( 'data-tab-type' ); // eslint-disable-line |
| 11 |
|
| 12 |
// clear the active states of the tabs and content areas in the preview area |
| 13 |
$('.tab-content ul li').removeClass('active'); |
| 14 |
$('nav li.tab_title').removeClass('active'); |
| 15 |
|
| 16 |
// make the clicked on tab and it's content area active |
| 17 |
$( this ).parent().addClass('active'); |
| 18 |
$('.tab-content ul li#tab_' + tab_id + '_content').addClass('active'); |
| 19 |
|
| 20 |
// now clear any of the left option panel 'tabs' from being active... then add active to the proper one |
| 21 |
$('.charitable-layout-options-tab .charitable-group').removeClass('active'); |
| 22 |
$(".charitable-layout-options-tab").find('[data-group_id=' + tab_id + ']').addClass('active').removeClass('charitable-closed'); |
| 23 |
$(".charitable-layout-options-tab").find('[data-group_id=' + tab_id + ']').find('.charitable-group-rows').show(); |
| 24 |
$(".charitable-layout-options-tab").find('[data-group_id=' + tab_id + ']').find('.charitable-toggleable-group i').removeClass('.charitable-angle-right').addClass('charitable-angle-down'); |
| 25 |
$( '#layout-options a' ).click(); |
| 26 |
|
| 27 |
} ); |
| 28 |
|
| 29 |
// Clickable Donate Amount |
| 30 |
$('.charitable-campaign-field').on( 'click', 'ul.charitable-template-donation-amounts li', function( e ) { // eslint-disable-line |
| 31 |
|
| 32 |
// do the UI inside the donate field itself on the frontend. |
| 33 |
$( this ).parent().find('li').removeClass('selected'); |
| 34 |
$( this ).addClass('selected'); |
| 35 |
$( this ).find('input[type="radio"]').prop("checked", true); |
| 36 |
|
| 37 |
if ( $( this ).hasClass('custom-donation-amount' ) ) { // eslint-disable-line no-undef |
| 38 |
|
| 39 |
} else { |
| 40 |
|
| 41 |
const donationAmountSelected = $( this ).find( 'input[type="radio"]' ).val(); // example: 10.00 |
| 42 |
|
| 43 |
var donation_amount_radio = null, |
| 44 |
selected_amount_string = ''; |
| 45 |
|
| 46 |
// update any donate button in the <header> of this campaign form to reflect the selected amount |
| 47 |
$( this ).closest('.charitable-campaign-container').find('form.campaign-donation input[name="charitable_donation_amount"]').val( donationAmountSelected ); |
| 48 |
|
| 49 |
// check if the donation form exists on this page, or even if it's hidden (modal). |
| 50 |
if( $('form#charitable-donation-form').length > 0 && $('.charitable-donation-options').length > 0 ) { // eslint-disable-line |
| 51 |
// find the radio inside of charitable-donation-options that has a value of donationAmountSelected and select that radio button. |
| 52 |
donation_amount_radio = $('.charitable-donation-options').find('input[type="radio"][value="' + donationAmountSelected + '"]'); // eslint-disable-line |
| 53 |
donation_amount_radio.prop("checked", true); |
| 54 |
|
| 55 |
// remove all selected classes from the suggested donation amounts |
| 56 |
$('form#charitable-donation-form').find('.suggested-donation-amount').removeClass('selected'); |
| 57 |
donation_amount_radio.closest('.suggested-donation-amount').addClass('selected'); |
| 58 |
|
| 59 |
// is the form showing a "your donation amount" field due to session? |
| 60 |
if( $('form#charitable-donation-form').find('.charitable-your-donation-amount').length > 0 ) { // eslint-disable-line |
| 61 |
// first let's get the currency value of the amount that was just selected. |
| 62 |
selected_amount_string = donation_amount_radio.closest('.suggested-donation-amount').find('.amount').text(); |
| 63 |
if ( selected_amount_string.length > 0 ) { |
| 64 |
$('form#charitable-donation-form').find('.charitable-your-donation-amount').find('p strong').text( selected_amount_string ); |
| 65 |
} |
| 66 |
} |
| 67 |
} |
| 68 |
|
| 69 |
} |
| 70 |
} ); |
| 71 |
|
| 72 |
$('.charitable-campaign-field').on( 'keyup', 'ul.charitable-template-donation-amounts input[name="custom_donation_amount"]', function( e ) { // eslint-disable-line |
| 73 |
|
| 74 |
$( this ).closest('.charitable-campaign-container').find('form.campaign-donation input[name="charitable_donation_amount"]').val( $( this ).val() ); |
| 75 |
|
| 76 |
var donation_amount_radio = null, |
| 77 |
custom_donation_textbox = null, |
| 78 |
custom_donation_amount = '', |
| 79 |
selected_amount_string = ''; |
| 80 |
|
| 81 |
const donationAmountSelected = $( this ).val(); // example: 10.00 |
| 82 |
|
| 83 |
if( $('form#charitable-donation-form').length > 0 |
| 84 |
&& $('form#charitable-donation-form').find('input[name="custom_donation_amount"]').length > 0 |
| 85 |
&& $('.charitable-template-donation-amounts').find('input[name="custom_donation_amount"]').length > 0 |
| 86 |
) { // eslint-disable-line |
| 87 |
custom_donation_textbox = $('.charitable-template-donation-amounts').find('input[name="custom_donation_amount"]') |
| 88 |
custom_donation_amount = custom_donation_textbox.val(); |
| 89 |
// if there is an amount populate the field in the main charitable-donation-form. |
| 90 |
if ( custom_donation_amount.length > 0 ) { |
| 91 |
|
| 92 |
donation_amount_radio = $('.charitable-donation-options').find('input[type="radio"][value="' + donationAmountSelected + '"]'); // eslint-disable-line |
| 93 |
donation_amount_radio.prop("checked", true); |
| 94 |
|
| 95 |
$('form#charitable-donation-form').find('input[name="custom_donation_amount"]').val( custom_donation_amount ); |
| 96 |
// remove all selected classes from the suggested donation amounts |
| 97 |
$('form#charitable-donation-form').find('.suggested-donation-amount').removeClass('selected'); |
| 98 |
donation_amount_radio.closest('.suggested-donation-amount').addClass('selected'); |
| 99 |
// uncheck all the radio buttons. |
| 100 |
$('form#charitable-donation-form').find('input[type="radio"]').prop("checked", false); |
| 101 |
} |
| 102 |
} |
| 103 |
// is the form showing a "your donation amount" field due to session? |
| 104 |
if( $('form#charitable-donation-form').find('.charitable-your-donation-amount').length > 0 ) { // eslint-disable-line |
| 105 |
// first let's get the currency value of the amount that was just selected. |
| 106 |
custom_donation_textbox = $('.charitable-template-donation-amounts').find('input[name="custom_donation_amount"]') |
| 107 |
custom_donation_amount = custom_donation_textbox.val(); |
| 108 |
if ( custom_donation_amount.length > 0 ) { |
| 109 |
$('form#charitable-donation-form').find('.charitable-your-donation-amount').find('p strong').text( custom_donation_amount ); |
| 110 |
} |
| 111 |
} |
| 112 |
|
| 113 |
} ); |
| 114 |
|
| 115 |
// Sharing that requires JS. |
| 116 |
|
| 117 |
// Grab link from the DOM |
| 118 |
const mastodonShareButton = document.querySelector('.charitable-mastodon-share'); |
| 119 |
|
| 120 |
if ( mastodonShareButton !== null ) { |
| 121 |
|
| 122 |
// When a user clicks the link |
| 123 |
mastodonShareButton.addEventListener('click', (e) => { |
| 124 |
|
| 125 |
// If the user has already entered their instance and it is in localstorage |
| 126 |
// write out the link href with the instance and the current page title and URL |
| 127 |
if(localStorage.getItem('mastodon-instance')) { |
| 128 |
mastodonShareButton.href = ` |
| 129 |
https://${localStorage.getItem('mastodon-instance')}/share?text=${encodeURIComponent(document.title)}%0A${encodeURIComponent(location.href)}`; |
| 130 |
// otherwise, prompt the user for their instance and save it to localstorage |
| 131 |
} else { |
| 132 |
e.preventDefault(); |
| 133 |
let instance = window.prompt( |
| 134 |
'Please tell me your Mastodon instance' |
| 135 |
); |
| 136 |
localStorage.setItem('mastodon-instance', instance); |
| 137 |
} |
| 138 |
|
| 139 |
}); |
| 140 |
|
| 141 |
} |
| 142 |
|
| 143 |
})( jQuery ); // eslint-disable-line |
| 144 |
|
| 145 |
|
