wmde /
FundraisingFrontend
| Conditions | 2 |
| Paths | 8 |
| Total Lines | 253 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | $( function () { |
||
| 2 | /** global: WMDE */ |
||
| 3 | |||
| 4 | var initData = $( '#init-form' ), |
||
| 5 | store = WMDE.Store.createDonationStore( WMDE.createInitialStateFromViolatedFields( initData.data( 'violatedFields' ) ) ), |
||
|
|
|||
| 6 | actions = WMDE.Actions |
||
| 7 | ; |
||
| 8 | |||
| 9 | WMDE.StoreUpdates.connectComponentsToStore( |
||
| 10 | [ |
||
| 11 | WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ) ), |
||
| 12 | WMDE.Components.createRadioComponent( store, $( '.payment-type-select' ), 'paymentType' ), |
||
| 13 | WMDE.Components.createRadioComponent( store, $( '.interval-type-select' ), 'paymentIntervalInMonths' ), |
||
| 14 | WMDE.Components.createRadioComponent( store, $( '.payment-period-select' ), 'paymentIntervalInMonths' ), |
||
| 15 | WMDE.Components.createBankDataComponent( store, { |
||
| 16 | ibanElement: $( '#iban' ), |
||
| 17 | bicElement: $( '#bic' ), |
||
| 18 | accountNumberElement: $( '#account-number' ), |
||
| 19 | bankCodeElement: $( '#bank-code' ), |
||
| 20 | bankNameFieldElement: $( '#field-bank-name' ), |
||
| 21 | bankNameDisplayElement: $( '#bank-name' ), |
||
| 22 | debitTypeElement: $( '.debit-type-select' ) |
||
| 23 | } ), |
||
| 24 | WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ), |
||
| 25 | WMDE.Components.createRadioComponent( store, $( '.salutation' ), 'salutation' ), |
||
| 26 | WMDE.Components.createRadioComponent( store, $( '.personal-title' ), 'title' ), |
||
| 27 | WMDE.Components.createTextComponent( store, $( '#first-name' ), 'firstName' ), |
||
| 28 | WMDE.Components.createTextComponent( store, $( '#last-name' ), 'lastName' ), |
||
| 29 | WMDE.Components.createTextComponent( store, $( '#company-name' ), 'companyName' ), |
||
| 30 | WMDE.Components.createTextComponent( store, $( '#street' ), 'street' ), |
||
| 31 | WMDE.Components.createTextComponent( store, $( '#post-code' ), 'postcode' ), |
||
| 32 | WMDE.Components.createTextComponent( store, $( '#city' ), 'city' ), |
||
| 33 | WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ), |
||
| 34 | WMDE.Components.createTextComponent( store, $( '#email' ), 'email' ), |
||
| 35 | WMDE.Components.createCheckboxComponent( store, $( '#confirm_sepa' ), 'confirmSepa' ), |
||
| 36 | WMDE.Components.createCheckboxComponent( store, $( '#confirm_shortterm' ), 'confirmShortTerm' ) |
||
| 37 | ], |
||
| 38 | store, |
||
| 39 | 'donationFormContent' |
||
| 40 | ); |
||
| 41 | |||
| 42 | WMDE.StoreUpdates.connectValidatorsToStore( |
||
| 43 | function ( initialValues ) { |
||
| 44 | return [ |
||
| 45 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 46 | WMDE.FormValidation.createAmountValidator( initData.data( 'validate-amount-url' ) ), |
||
| 47 | actions.newFinishAmountValidationAction, |
||
| 48 | [ 'amount', 'paymentType' ], |
||
| 49 | initialValues |
||
| 50 | ), |
||
| 51 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 52 | WMDE.FormValidation.createAddressValidator( initData.data( 'validate-address-url' ) ), |
||
| 53 | actions.newFinishAddressValidationAction, |
||
| 54 | [ 'addressType', 'salutation', 'title', 'firstName', 'lastName', 'companyName', 'street', 'postcode', 'city', 'country', 'email' ], |
||
| 55 | initialValues |
||
| 56 | ), |
||
| 57 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 58 | WMDE.FormValidation.createBankDataValidator( initData.data( 'validate-iban-url' ), initData.data( 'generate-iban-url' ) ), |
||
| 59 | actions.newFinishBankDataValidationAction, |
||
| 60 | [ 'iban', 'accountNumber', 'bankCode', 'debitType', 'paymentType' ], |
||
| 61 | initialValues |
||
| 62 | ), |
||
| 63 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 64 | WMDE.FormValidation.createSepaConfirmationValidator(), |
||
| 65 | actions.newFinishSepaConfirmationValidationAction, |
||
| 66 | [ 'confirmSepa', 'confirmShortTerm' ], |
||
| 67 | initialValues |
||
| 68 | ) |
||
| 69 | ]; |
||
| 70 | }, |
||
| 71 | store, |
||
| 72 | initData.data( 'initial-form-values' ), |
||
| 73 | 'donationFormContent' |
||
| 74 | ); |
||
| 75 | |||
| 76 | // Connect view handlers to changes in specific parts in the global state, designated by 'stateKey' |
||
| 77 | WMDE.StoreUpdates.connectViewHandlersToStore( |
||
| 78 | [ |
||
| 79 | { |
||
| 80 | viewHandler: WMDE.View.createFormPageVisibilityHandler( { |
||
| 81 | payment: $( "#paymentPage" ), |
||
| 82 | personalData: $( "#personalDataPage" ), |
||
| 83 | bankConfirmation: $( '#bankConfirmationPage' ) |
||
| 84 | } ), |
||
| 85 | stateKey: 'formPagination' |
||
| 86 | }, |
||
| 87 | { |
||
| 88 | viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), { |
||
| 89 | amount: 'Betrag', |
||
| 90 | salutation: 'Anrede', |
||
| 91 | title: 'Titel', |
||
| 92 | firstName: 'Vorname', |
||
| 93 | lastName: 'Nachname', |
||
| 94 | company: 'Firma', |
||
| 95 | street: 'Straße', |
||
| 96 | postcode: 'PLZ', |
||
| 97 | city: 'Ort', |
||
| 98 | country: 'Land', |
||
| 99 | email: 'E-Mail' |
||
| 100 | } ), |
||
| 101 | stateKey: 'validationMessages' |
||
| 102 | }, |
||
| 103 | // show payment periods if interval payment is selected |
||
| 104 | { |
||
| 105 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.periode-2-list' ), /^(1|3|6|12)$/ ), |
||
| 106 | stateKey: 'donationFormContent.paymentIntervalInMonths' |
||
| 107 | }, |
||
| 108 | // Show bank data input when doing direct debit |
||
| 109 | { |
||
| 110 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '#bank-data' ), 'BEZ' ), |
||
| 111 | stateKey: 'donationFormContent.paymentType' |
||
| 112 | }, |
||
| 113 | // Show the right submit buttons on page 2, depending on payment type |
||
| 114 | { |
||
| 115 | viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit2' ), /^MCP|PPL|UEB/ ), |
||
| 116 | stateKey: 'donationFormContent.paymentType' |
||
| 117 | }, |
||
| 118 | { |
||
| 119 | viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit2' ), 'BEZ' ), |
||
| 120 | stateKey: 'donationFormContent.paymentType' |
||
| 121 | }, |
||
| 122 | // Hide anonymous payment when doing direct debit |
||
| 123 | { |
||
| 124 | viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '.anonymous-payment-select' ), /^MCP|PPL|UEB/ ), |
||
| 125 | stateKey: 'donationFormContent.paymentType' |
||
| 126 | }, |
||
| 127 | // Switch bank data input between IBAN/BIC and Account Number/Bank code |
||
| 128 | { |
||
| 129 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ), |
||
| 130 | stateKey: 'donationFormContent.debitType' |
||
| 131 | }, |
||
| 132 | { |
||
| 133 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ), |
||
| 134 | stateKey: 'donationFormContent.debitType' |
||
| 135 | }, |
||
| 136 | // Show only the right data fields for personal data |
||
| 137 | { |
||
| 138 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-person' ), 'person' ), |
||
| 139 | stateKey: 'donationFormContent.addressType' |
||
| 140 | }, |
||
| 141 | { |
||
| 142 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-company' ), 'firma' ), |
||
| 143 | stateKey: 'donationFormContent.addressType' |
||
| 144 | }, |
||
| 145 | { |
||
| 146 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-full' ), /firma|person/ ), |
||
| 147 | stateKey: 'donationFormContent.addressType' |
||
| 148 | }, |
||
| 149 | { |
||
| 150 | viewHandler: WMDE.View.createPaymentIntervalAndAmountDisplayHandler( |
||
| 151 | $( '.interval-text' ), |
||
| 152 | $( '.amount-formatted'), |
||
| 153 | { |
||
| 154 | '0': 'einmalig', |
||
| 155 | '1': 'monatlich', |
||
| 156 | '3': 'quartalsweise', |
||
| 157 | '6': 'halbjährlich', |
||
| 158 | '12': 'jährlich' |
||
| 159 | }, |
||
| 160 | WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' ) |
||
| 161 | ), |
||
| 162 | stateKey: 'donationFormContent' |
||
| 163 | }, |
||
| 164 | { |
||
| 165 | viewHandler: WMDE.View.createDisplayAddressHandler( { |
||
| 166 | fullName: $( '.confirm-name' ), |
||
| 167 | street: $( '.confirm-street' ), |
||
| 168 | postcode: $( '.confirm-postcode' ), |
||
| 169 | city: $( '.confirm-city' ), |
||
| 170 | country: $( '.confirm-country' ), |
||
| 171 | email: $( '.confirm-email' ) |
||
| 172 | } ), |
||
| 173 | stateKey: 'donationFormContent' |
||
| 174 | }, |
||
| 175 | { |
||
| 176 | viewHandler: WMDE.View.createBankDataDisplayHandler( |
||
| 177 | $( '.confirm-iban' ), |
||
| 178 | $( '.confirm-bic' ), |
||
| 179 | $( '.confirm-bank-name' ) |
||
| 180 | ), |
||
| 181 | stateKey: 'donationFormContent' |
||
| 182 | }, |
||
| 183 | { |
||
| 184 | viewHandler: WMDE.View.createCountrySpecificAttributesHandler( $( '#post-code' ), $( '#city' ), $( '#email' ) ), |
||
| 185 | stateKey: 'countrySpecifics' |
||
| 186 | } |
||
| 187 | ], |
||
| 188 | store |
||
| 189 | ); |
||
| 190 | |||
| 191 | // connect DOM elements to actions |
||
| 192 | |||
| 193 | function personalDataPageIsValid() { |
||
| 194 | var validity = store.getState().validity, |
||
| 195 | formContent = store.getState().donationFormContent, |
||
| 196 | addressIsValid = formContent.addressType === 'anonym' || validity.address, |
||
| 197 | bankDataIsValid = formContent.paymentType !== 'BEZ' || validity.bankData; |
||
| 198 | return validity.amount && addressIsValid && bankDataIsValid; |
||
| 199 | } |
||
| 200 | |||
| 201 | function paymentDataPageIsValid() { |
||
| 202 | var currentState = store.getState(); |
||
| 203 | return currentState.validity.amount || |
||
| 204 | ( currentState.donationFormContent.amount && currentState.donationFormContent.paymentType ) ; |
||
| 205 | } |
||
| 206 | |||
| 207 | $( '#continueFormSubmit1' ).click( function () { |
||
| 208 | if ( paymentDataPageIsValid() ) { |
||
| 209 | store.dispatch( actions.newNextPageAction() ); |
||
| 210 | } else { |
||
| 211 | alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
||
| 212 | } |
||
| 213 | } ); |
||
| 214 | |||
| 215 | $( '#continueFormSubmit2' ).click( function () { |
||
| 216 | if ( personalDataPageIsValid() ) { |
||
| 217 | store.dispatch( actions.newNextPageAction() ); |
||
| 218 | } else { |
||
| 219 | alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
||
| 220 | } |
||
| 221 | } ); |
||
| 222 | |||
| 223 | $( '#finishFormSubmit2' ).click( function () { |
||
| 224 | if ( personalDataPageIsValid() ) { |
||
| 225 | $( '#donForm2' ).submit(); |
||
| 226 | } else { |
||
| 227 | alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
||
| 228 | } |
||
| 229 | } ); |
||
| 230 | |||
| 231 | $( '#finishFormSubmit3' ).click( function () { |
||
| 232 | var validity = store.getState().validity; |
||
| 233 | if ( validity.amount && validity.address && validity.bankData && validity.sepaConfirmation ) { |
||
| 234 | $( '#donForm2' ).submit(); |
||
| 235 | } else { |
||
| 236 | alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
||
| 237 | } |
||
| 238 | } ); |
||
| 239 | |||
| 240 | // Set initial form values |
||
| 241 | store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) ); |
||
| 242 | |||
| 243 | // Initialize form pages |
||
| 244 | store.dispatch( actions.newAddPageAction( 'payment' ) ); |
||
| 245 | store.dispatch( actions.newAddPageAction( 'personalData' ) ); |
||
| 246 | store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) ); |
||
| 247 | |||
| 248 | // switch to personal page if payment data is filled in |
||
| 249 | if ( paymentDataPageIsValid() ) { |
||
| 250 | store.dispatch( actions.newNextPageAction() ); |
||
| 251 | } |
||
| 252 | |||
| 253 | } ); |
||
| 254 |
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.