wmde /
FundraisingFrontend
| Conditions | 1 |
| Paths | 1 |
| Total Lines | 268 |
| 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.createMembershipStore( |
||
|
|
|||
| 6 | WMDE.createInitialStateFromViolatedFields( initData.data( 'violatedFields' ) ) |
||
| 7 | ), |
||
| 8 | actions = WMDE.Actions; |
||
| 9 | |||
| 10 | WMDE.StoreUpdates.connectComponentsToStore( |
||
| 11 | [ |
||
| 12 | WMDE.Components.createRadioComponent( store, $( '.membership-type-select' ), 'membershipType' ), |
||
| 13 | WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ), |
||
| 14 | WMDE.Components.createRadioComponent( store, $( '.salutation-select' ), 'salutation' ), |
||
| 15 | WMDE.Components.createRadioComponent( store, $( '#personal-title' ), 'title' ), |
||
| 16 | WMDE.Components.createValidatingTextComponent( store, $( '#first-name' ), 'firstName' ), |
||
| 17 | WMDE.Components.createValidatingTextComponent( store, $( '#last-name' ), 'lastName' ), |
||
| 18 | WMDE.Components.createValidatingTextComponent( store, $( '#company-name' ), 'companyName' ), |
||
| 19 | WMDE.Components.createValidatingTextComponent( store, $( '#street' ), 'street' ), |
||
| 20 | WMDE.Components.createValidatingTextComponent( store, $( '#post-code' ), 'postcode' ), |
||
| 21 | WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ), |
||
| 22 | WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ), |
||
| 23 | WMDE.Components.createValidatingTextComponent( store, $( '#email' ), 'email' ), |
||
| 24 | WMDE.Components.createValidatingTextComponent( store, $( '#date-of-birth' ), 'dateOfBirth' ), |
||
| 25 | WMDE.Components.createValidatingTextComponent( store, $( '#phone' ), 'phoneNumber' ), |
||
| 26 | WMDE.Components.createRadioComponent( store, $( '.payment-period-select' ), 'paymentIntervalInMonths' ), |
||
| 27 | WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ) ), |
||
| 28 | WMDE.Components.createBankDataComponent( store, { |
||
| 29 | ibanElement: $( '#iban' ), |
||
| 30 | bicElement: $( '#bic' ), |
||
| 31 | accountNumberElement: $( '#account-number' ), |
||
| 32 | bankCodeElement: $( '#bank-code' ), |
||
| 33 | bankNameFieldElement: $( '#field-bank-name' ), |
||
| 34 | bankNameDisplayElement: $( '#bank-name' ), |
||
| 35 | debitTypeElement: $( '.debit-type-select' ) |
||
| 36 | } ) |
||
| 37 | ], |
||
| 38 | store, |
||
| 39 | 'membershipFormContent' |
||
| 40 | ); |
||
| 41 | |||
| 42 | WMDE.StoreUpdates.connectValidatorsToStore( |
||
| 43 | function ( initialValues ) { |
||
| 44 | return [ |
||
| 45 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 46 | WMDE.FormValidation.createFeeValidator( initData.data( 'validate-fee-url' ) ), |
||
| 47 | actions.newFinishAmountValidationAction, |
||
| 48 | [ 'amount', 'paymentIntervalInMonths', 'addressType' ], |
||
| 49 | initialValues |
||
| 50 | ), |
||
| 51 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 52 | WMDE.FormValidation.createAddressValidator( initData.data( 'validate-address-url' ) ), |
||
| 53 | actions.newFinishAddressValidationAction, |
||
| 54 | [ |
||
| 55 | 'addressType', |
||
| 56 | 'salutation', |
||
| 57 | 'title', |
||
| 58 | 'firstName', |
||
| 59 | 'lastName', |
||
| 60 | 'companyName', |
||
| 61 | 'street', |
||
| 62 | 'postcode', |
||
| 63 | 'city', |
||
| 64 | 'country', |
||
| 65 | 'email' |
||
| 66 | ], |
||
| 67 | initialValues |
||
| 68 | ), |
||
| 69 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 70 | WMDE.FormValidation.createBankDataValidator( |
||
| 71 | initData.data( 'validate-iban-url' ), |
||
| 72 | initData.data( 'generate-iban-url' ) |
||
| 73 | ), |
||
| 74 | actions.newFinishBankDataValidationAction, |
||
| 75 | [ 'iban', 'accountNumber', 'bankCode', 'debitType' ], |
||
| 76 | initialValues |
||
| 77 | ), |
||
| 78 | WMDE.ReduxValidation.createValidationDispatcher( |
||
| 79 | WMDE.FormValidation.createSepaConfirmationValidator(), |
||
| 80 | actions.newFinishSepaConfirmationValidationAction, |
||
| 81 | [ 'confirmSepa', 'confirmShortTerm' ], |
||
| 82 | initialValues |
||
| 83 | ) |
||
| 84 | ]; |
||
| 85 | }, |
||
| 86 | store, |
||
| 87 | initData.data( 'initial-form-values' ), |
||
| 88 | 'membershipFormContent' |
||
| 89 | ); |
||
| 90 | |||
| 91 | // Connect view handlers to changes in specific parts in the global state, designated by 'stateKey' |
||
| 92 | WMDE.StoreUpdates.connectViewHandlersToStore( |
||
| 93 | [ |
||
| 94 | { |
||
| 95 | viewHandler: WMDE.View.createFormPageVisibilityHandler( { |
||
| 96 | personalData: $( "#personalDataPage" ), |
||
| 97 | bankConfirmation: $( '#bankConfirmationPage' ) |
||
| 98 | } ), |
||
| 99 | stateKey: 'formPagination' |
||
| 100 | }, |
||
| 101 | { |
||
| 102 | viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), { |
||
| 103 | amount: 'Betrag', |
||
| 104 | salutation: 'Anrede', |
||
| 105 | title: 'Titel', |
||
| 106 | firstName: 'Vorname', |
||
| 107 | lastName: 'Nachname', |
||
| 108 | companyName: 'Firma', |
||
| 109 | street: 'Straße', |
||
| 110 | postcode: 'PLZ', |
||
| 111 | city: 'Ort', |
||
| 112 | country: 'Land', |
||
| 113 | email: 'E-Mail' |
||
| 114 | } ), |
||
| 115 | stateKey: 'validationMessages' |
||
| 116 | }, |
||
| 117 | { |
||
| 118 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ), |
||
| 119 | stateKey: 'membershipFormContent.debitType' |
||
| 120 | }, |
||
| 121 | { |
||
| 122 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ), |
||
| 123 | stateKey: 'membershipFormContent.debitType' |
||
| 124 | }, |
||
| 125 | { |
||
| 126 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.person-name' ), 'person' ), |
||
| 127 | stateKey: 'membershipFormContent.addressType' |
||
| 128 | }, |
||
| 129 | { |
||
| 130 | viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.company-name' ), 'firma' ), |
||
| 131 | stateKey: 'membershipFormContent.addressType' |
||
| 132 | }, |
||
| 133 | { |
||
| 134 | viewHandler: WMDE.View.createFeeOptionSwitcher( $( '#amount-1' ), 1 ), |
||
| 135 | stateKey: 'membershipFormContent.paymentIntervalInMonths' |
||
| 136 | }, |
||
| 137 | { |
||
| 138 | viewHandler: WMDE.View.createFeeOptionSwitcher( $( '#amount-2' ), 6 ), |
||
| 139 | stateKey: 'membershipFormContent.paymentIntervalInMonths' |
||
| 140 | }, |
||
| 141 | { |
||
| 142 | viewHandler: WMDE.View.createPaymentIntervalAndAmountDisplayHandler( |
||
| 143 | $( '#membership-confirm-interval' ), |
||
| 144 | $( '#membership-confirm-fee'), |
||
| 145 | { |
||
| 146 | '0': 'einmalig', |
||
| 147 | '1': 'monatlich', |
||
| 148 | '3': 'quartalsweise', |
||
| 149 | '6': 'halbjährlich', |
||
| 150 | '12': 'jährlich' |
||
| 151 | }, |
||
| 152 | WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' ) |
||
| 153 | ), |
||
| 154 | stateKey: 'membershipFormContent' |
||
| 155 | }, |
||
| 156 | { |
||
| 157 | viewHandler: WMDE.View.createDisplayAddressHandler( { |
||
| 158 | fullName: $( '#membership-confirm-name' ), |
||
| 159 | street: $( '#membership-confirm-street' ), |
||
| 160 | postcode: $( '#membership-confirm-postcode' ), |
||
| 161 | city: $( '#membership-confirm-city' ), |
||
| 162 | country: $( '#membership-confirm-country' ), |
||
| 163 | email: $( '#membership-confirm-mail' ) |
||
| 164 | } ), |
||
| 165 | stateKey: 'membershipFormContent' |
||
| 166 | }, |
||
| 167 | { |
||
| 168 | viewHandler: WMDE.View.createBankDataDisplayHandler( |
||
| 169 | $( '#membership-confirm-iban' ), |
||
| 170 | $( '#membership-confirm-bic' ), |
||
| 171 | $( '#membership-confirm-bankname' ) |
||
| 172 | ), |
||
| 173 | stateKey: 'membershipFormContent' |
||
| 174 | }, |
||
| 175 | { |
||
| 176 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ), |
||
| 177 | stateKey: 'membershipInputValidation.firstName' |
||
| 178 | }, |
||
| 179 | { |
||
| 180 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ), |
||
| 181 | stateKey: 'membershipInputValidation.lastName' |
||
| 182 | }, |
||
| 183 | { |
||
| 184 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ), |
||
| 185 | stateKey: 'membershipInputValidation.street' |
||
| 186 | }, |
||
| 187 | { |
||
| 188 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ), |
||
| 189 | stateKey: 'membershipInputValidation.postcode' |
||
| 190 | }, |
||
| 191 | { |
||
| 192 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ), |
||
| 193 | stateKey: 'membershipInputValidation.city' |
||
| 194 | }, |
||
| 195 | { |
||
| 196 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ), |
||
| 197 | stateKey: 'membershipInputValidation.email' |
||
| 198 | }, |
||
| 199 | { |
||
| 200 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ), |
||
| 201 | stateKey: 'membershipInputValidation.companyName' |
||
| 202 | }, |
||
| 203 | { |
||
| 204 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#date-of-birth' ) ), |
||
| 205 | stateKey: 'membershipInputValidation.dateOfBirth' |
||
| 206 | }, |
||
| 207 | { |
||
| 208 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#phone' ) ), |
||
| 209 | stateKey: 'membershipInputValidation.phoneNumber' |
||
| 210 | }, |
||
| 211 | { |
||
| 212 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ), |
||
| 213 | stateKey: 'membershipInputValidation.iban' |
||
| 214 | }, |
||
| 215 | { |
||
| 216 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ), |
||
| 217 | stateKey: 'membershipInputValidation.bic' |
||
| 218 | }, |
||
| 219 | { |
||
| 220 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ), |
||
| 221 | stateKey: 'membershipInputValidation.account' |
||
| 222 | }, |
||
| 223 | { |
||
| 224 | viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ), |
||
| 225 | stateKey: 'membershipInputValidation.bankCode' |
||
| 226 | }, |
||
| 227 | { |
||
| 228 | viewHandler: WMDE.View.createCountrySpecificAttributesHandler( $( '#post-code' ), $( '#city' ), $( '#email' ) ), |
||
| 229 | stateKey: 'countrySpecifics' |
||
| 230 | } |
||
| 231 | ], |
||
| 232 | store |
||
| 233 | ); |
||
| 234 | |||
| 235 | // connect DOM elements to actions |
||
| 236 | |||
| 237 | function formDataIsValid() { |
||
| 238 | var validity = store.getState().validity, |
||
| 239 | addressIsValid = validity.address, |
||
| 240 | bankDataIsValid = validity.bankData; |
||
| 241 | return validity.amount && addressIsValid && bankDataIsValid; |
||
| 242 | } |
||
| 243 | |||
| 244 | $( '#continueFormSubmit' ).click( function () { |
||
| 245 | if ( formDataIsValid() ) { |
||
| 246 | store.dispatch( actions.newNextPageAction() ); |
||
| 247 | $( 'section#donation-amount, section#donation-sheet' ).hide(); |
||
| 248 | } |
||
| 249 | } ); |
||
| 250 | |||
| 251 | $( '.back-button' ).click( function () { |
||
| 252 | // TODO check if page is valid |
||
| 253 | store.dispatch( actions.newPreviousPageAction() ); |
||
| 254 | } ); |
||
| 255 | |||
| 256 | $( '#finishFormSubmit' ).click( function () { |
||
| 257 | // TODO check if page is valid |
||
| 258 | $( '#memForm' ).submit(); |
||
| 259 | } ); |
||
| 260 | |||
| 261 | // Initialize form pages |
||
| 262 | store.dispatch( actions.newAddPageAction( 'personalData' ) ); |
||
| 263 | store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) ); |
||
| 264 | |||
| 265 | // Set initial form values |
||
| 266 | store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) ); |
||
| 267 | |||
| 268 | } ); |
||
| 269 |
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.