| @@ -17,47 +17,67 @@ | ||
| 17 | 17 | |
| 18 | 18 | function toggleOpts( opt, show, c ) { |
| 19 | 19 | const opts = jQuery( opt ).closest( '.frm_form_action_settings' ).find( c ); |
| 20 | 20 | if ( show ) { |
| 21 | - opts.show(); | |
| 21 | + opts.css( 'display', '' ); | |
| 22 | + opts.removeClass( 'frm_hidden' ); | |
| 22 | 23 | } else { |
| 23 | - opts.hide(); | |
| 24 | + opts.css( 'display', 'none' ); | |
| 25 | + opts.addClass( 'frm_hidden' ); | |
| 24 | 26 | } |
| 25 | 27 | } |
| 26 | 28 | |
| 27 | 29 | function toggleGateway() { |
| 28 | - if ( ! this.checked ) { | |
| 29 | - return; | |
| 30 | - } | |
| 30 | + const gateway = this.value; | |
| 31 | + const { checked } = this; | |
| 31 | 32 | |
| 32 | - const gateway = this.value; | |
| 33 | - const checked = this.checked; | |
| 33 | + toggleOpts( this, checked, `.show_${ gateway }` ); | |
| 34 | 34 | |
| 35 | - toggleOpts( this, checked, '.show_' + gateway ); | |
| 35 | + const gateways = [ 'stripe', 'square', 'paypal' ]; | |
| 36 | + const toggleOff = gateways.filter( g => g !== gateway ); | |
| 36 | 37 | |
| 37 | - const toggleOff = 'stripe' === gateway ? 'square' : 'stripe'; | |
| 38 | 38 | const settings = jQuery( this ).closest( '.frm_form_action_settings' ); |
| 39 | - const showClass = 'show_' + settings.find( '.frm_gateway_opt input:checked' ).attr( 'value' ); | |
| 40 | - const gatewaySettings = settings.get( 0 ).querySelectorAll( '.show_' + toggleOff ); | |
| 39 | + const showClass = `show_${ settings.find( '.frm_gateway_opt input:checked' ).attr( 'value' ) }`; | |
| 41 | 40 | |
| 42 | - gatewaySettings.forEach( | |
| 43 | - setting => { | |
| 44 | - if ( ! setting.classList.contains( showClass ) ) { | |
| 45 | - setting.style.display = 'none'; | |
| 46 | - } | |
| 41 | + toggleOff.forEach( | |
| 42 | + function( gateway ) { | |
| 43 | + const gatewaySettings = settings.get( 0 ).querySelectorAll( `.show_${ gateway }` ); | |
| 44 | + gatewaySettings.forEach( | |
| 45 | + setting => { | |
| 46 | + if ( ! setting.classList.contains( showClass ) ) { | |
| 47 | + setting.style.display = 'none'; | |
| 48 | + } | |
| 49 | + } | |
| 50 | + ); | |
| 47 | 51 | } |
| 48 | 52 | ); |
| 49 | 53 | |
| 50 | 54 | wp.hooks.doAction( 'frm_trans_toggled_gateway', { gateway, checked, settings } ); |
| 55 | + | |
| 56 | + document.querySelectorAll( '.frm-billing-section-heading' ).forEach( function( el ) { | |
| 57 | + el.textContent = gateway === 'paypal' ? el.dataset.billingLabel : el.dataset.customerLabel; | |
| 58 | + } ); | |
| 51 | 59 | } |
| 52 | 60 | |
| 53 | 61 | function frmTransLiteAdminJS() { |
| 54 | 62 | return { |
| 55 | - init: function() { | |
| 63 | + init() { | |
| 56 | 64 | const actions = document.getElementById( 'frm_notification_settings' ); |
| 57 | - if ( actions !== null ) { | |
| 65 | + if ( actions ) { | |
| 58 | 66 | jQuery( actions ).on( 'change', '.frm_trans_type', toggleSub ); |
| 59 | - jQuery( '.frm_form_settings' ).on( 'change', '.frm_gateway_opt input', toggleGateway ); | |
| 67 | + | |
| 68 | + document.addEventListener( | |
| 69 | + 'change', | |
| 70 | + function( event ) { | |
| 71 | + if ( ! event.target || ! event.target.checked || 'radio' !== event.target.type ) { | |
| 72 | + return; | |
| 73 | + } | |
| 74 | + | |
| 75 | + if ( event.target.closest( '.frm-long-icon-buttons' ) && event.target.closest( '.frm_form_action_settings' ) ) { | |
| 76 | + toggleGateway.call( event.target ); | |
| 77 | + } | |
| 78 | + } | |
| 79 | + ); | |
| 60 | 80 | } |
| 61 | 81 | |
| 62 | 82 | document.querySelectorAll( '.frm_trans_ajax_link' ).forEach( |
| 63 | 83 | link => link.addEventListener( |
| @@ -88,9 +108,9 @@ | ||
| 88 | 108 | url: href, |
| 89 | 109 | data: { |
| 90 | 110 | nonce: frm_trans_vars.nonce |
| 91 | 111 | }, |
| 92 | - success: function( html ) { | |
| 112 | + success( html ) { | |
| 93 | 113 | jQuery( loadingImage ).replaceWith( html ); |
| 94 | 114 | } |
| 95 | 115 | } ); |
| 96 | 116 | }; |