pronamic /
wp-pronamic-ideal
| Total Complexity | 48 |
| Complexity/F | 1.55 |
| Lines of Code | 382 |
| Function Count | 31 |
| Duplicated Lines | 382 |
| Ratio | 100 % |
| Changes | 0 | ||
Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.
Common duplication problems, and corresponding solutions are:
Complex classes like js/admin.js often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /* global tippy */ |
||
| 2 | ( function( $ ) { |
||
| 3 | /** |
||
| 4 | * Pronamic iDEAL config prototype |
||
| 5 | */ |
||
| 6 | var PronamicPayGatewayConfigEditor = function( element ) { |
||
| 7 | var obj = this; |
||
| 8 | var $element = $( element ); |
||
| 9 | |||
| 10 | // Elements |
||
| 11 | var elements = {}; |
||
| 12 | elements.variantId = $element.find( '#pronamic_gateway_id' ); |
||
| 13 | elements.extraSettings = $element.find( 'div.extra-settings' ); |
||
| 14 | elements.sectionHeaders = $element.find( '.gateway-config-section-header' ); |
||
| 15 | elements.tabs = $element.find( '.pronamic-pay-tabs' ); |
||
| 16 | elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' ); |
||
| 17 | elements.pkCertFieldsToggle = $( '#pk-cert-fields-toggle' ); |
||
| 18 | |||
| 19 | /** |
||
| 20 | * Update config fields |
||
| 21 | */ |
||
| 22 | this.updateFields = function() { |
||
| 23 | // Find selected variant |
||
| 24 | obj.selectedVariant = elements.variantId.find( 'option:selected' ); |
||
| 25 | |||
| 26 | obj.settings = obj.selectedVariant.data( 'pronamic-pay-settings' ); |
||
| 27 | |||
| 28 | // Hide all settings |
||
| 29 | $element.find( '.extra-settings' ).hide(); |
||
| 30 | |||
| 31 | // Show settings for variant |
||
| 32 | obj.settingElements = []; |
||
| 33 | |||
| 34 | if ( $.isArray( obj.settings ) ) { |
||
| 35 | $.each( obj.settings, function( index, value ) { |
||
| 36 | $element.find( '.setting-' + value ).show(); |
||
| 37 | } ); |
||
| 38 | } |
||
| 39 | |||
| 40 | $element.find( '.setting-' + obj.selectedVariant.val() ).show(); |
||
| 41 | |||
| 42 | // Set name of first tab item to name of selected provider |
||
| 43 | var providerName = obj.selectedVariant.text().split( ' - ' )[0].replace( / \(.*\)/, '' ); |
||
| 44 | |||
| 45 | elements.tabItems.find( ':visible' ).first().text( providerName ).click(); |
||
| 46 | |||
| 47 | $( '#pronamic-pay-gateway-description').html( obj.selectedVariant.attr( 'data-gateway-description' ) ); |
||
| 48 | |||
| 49 | if ( elements.pkCertFieldsToggle.length > 0 ) { |
||
| 50 | elements.extraSettings.find( 'tr.pk-cert' ).hide(); |
||
| 51 | } |
||
| 52 | }; |
||
| 53 | |||
| 54 | // Update row background color |
||
| 55 | this.updateRowBackgroundColor = function() { |
||
| 56 | // Set background color of visible even rows |
||
| 57 | var rows = elements.extraSettings.find( '.form-table tr' ); |
||
| 58 | |||
| 59 | rows.removeClass( 'even' ); |
||
| 60 | rows.filter( ':visible:even' ).addClass( 'even' ); |
||
| 61 | }; |
||
| 62 | |||
| 63 | /** |
||
| 64 | * Tabs |
||
| 65 | */ |
||
| 66 | this.initTabs = function() { |
||
| 67 | $.each(elements.sectionHeaders, function ( i, elm ) { |
||
| 68 | var item = $( elm ); |
||
| 69 | var title = item.find( 'h4' ).text(); |
||
| 70 | var settingsClasses = item.parents( 'div' )[0].className; |
||
| 71 | |||
| 72 | elements.tabItems.append( |
||
| 73 | $( '<li>' + title + '</li>' ).addClass( settingsClasses ).removeClass( 'pronamic-pay-tab' ) |
||
| 74 | ); |
||
| 75 | } ); |
||
| 76 | |||
| 77 | // Move tab items list after 'Mode' setting |
||
| 78 | elements.tabItems.next().after( elements.tabItems ); |
||
| 79 | |||
| 80 | elements.tabItems.find( 'li' ).click( obj.showTabSettings ); |
||
| 81 | }; |
||
| 82 | |||
| 83 | this.showTabSettings = function() { |
||
| 84 | var tabItem = $( this ); |
||
| 85 | |||
| 86 | // Show tab |
||
| 87 | elements.extraSettings.hide().eq( tabItem.index() ).show(); |
||
| 88 | }; |
||
| 89 | |||
| 90 | this.togglePkCertFields = function( e ) { |
||
| 91 | if ( e.preventDefault ) { |
||
| 92 | e.preventDefault(); |
||
| 93 | } |
||
| 94 | |||
| 95 | if ( elements.pkCertFieldsToggle.hasClass( 'active' ) ) { |
||
| 96 | elements.pkCertFieldsToggle.removeClass( 'active' ); |
||
| 97 | |||
| 98 | elements.extraSettings.find( 'tr.pk-cert' ).hide(); |
||
| 99 | } else { |
||
| 100 | elements.pkCertFieldsToggle.addClass( 'active' ); |
||
| 101 | |||
| 102 | elements.extraSettings.find( 'tr.pk-cert' ).show(); |
||
| 103 | } |
||
| 104 | |||
| 105 | obj.updateRowBackgroundColor(); |
||
| 106 | |||
| 107 | return false; |
||
| 108 | }; |
||
| 109 | |||
| 110 | /** |
||
| 111 | * Function calls |
||
| 112 | */ |
||
| 113 | obj.initTabs(); |
||
| 114 | |||
| 115 | obj.updateFields(); |
||
| 116 | |||
| 117 | elements.variantId.change( obj.updateFields ); |
||
| 118 | |||
| 119 | elements.pkCertFieldsToggle.click( obj.togglePkCertFields ); |
||
| 120 | }; |
||
| 121 | |||
| 122 | /** |
||
| 123 | * jQuery plugin - Pronamic iDEAL config editor |
||
| 124 | */ |
||
| 125 | $.fn.pronamicPayGatewayConfigEditor = function() { |
||
| 126 | return this.each( function() { |
||
| 127 | var $this = $( this ); |
||
| 128 | |||
| 129 | if ( $this.data( 'pronamic-pay-gateway-config-editor' ) ) { |
||
| 130 | return; |
||
| 131 | } |
||
| 132 | |||
| 133 | var editor = new PronamicPayGatewayConfigEditor( this ); |
||
| 134 | |||
| 135 | $this.data( 'pronamic-pay-gateway-config-editor', editor ); |
||
| 136 | } ); |
||
| 137 | }; |
||
| 138 | |||
| 139 | ////////////////////////////////////////////////// |
||
| 140 | |||
| 141 | /** |
||
| 142 | * Pronamic Pay Tabs |
||
| 143 | */ |
||
| 144 | var PronamicPayTabs = function( element ) { |
||
| 145 | var obj = this; |
||
| 146 | var $element = $( element ); |
||
| 147 | |||
| 148 | // Elements |
||
| 149 | var elements = {}; |
||
| 150 | elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' ); |
||
| 151 | elements.tabs = $element.find( '.pronamic-pay-tab' ); |
||
| 152 | elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' ); |
||
| 153 | |||
| 154 | // Update row background color |
||
| 155 | this.updateRowBackgroundColor = function() { |
||
| 156 | // Set background color of visible even rows |
||
| 157 | var rows = elements.tabs.find( '.form-table tr' ); |
||
| 158 | |||
| 159 | rows.removeClass( 'even' ); |
||
| 160 | rows.filter( ':visible:even' ).addClass( 'even' ); |
||
| 161 | }; |
||
| 162 | |||
| 163 | /** |
||
| 164 | * Tabs |
||
| 165 | */ |
||
| 166 | this.showTab = function( ) { |
||
| 167 | var tabItem = $( this ); |
||
| 168 | |||
| 169 | elements.tabItems.find( 'li' ).removeClass( 'active' ); |
||
| 170 | |||
| 171 | tabItem.addClass( 'active' ); |
||
| 172 | |||
| 173 | // Show tab |
||
| 174 | elements.tabs.hide().eq( tabItem.index() ).show(); |
||
| 175 | |||
| 176 | obj.updateRowBackgroundColor(); |
||
| 177 | |||
| 178 | obj.visibleTabItems = elements.tabItems.find( 'li:visible' ); |
||
| 179 | |||
| 180 | obj.activeTabItem = tabItem; |
||
| 181 | }; |
||
| 182 | |||
| 183 | this.responsiveTabs = function() { |
||
| 184 | if ( $( window ).width() > 960 ) { |
||
| 185 | elements.tabs.hide(); |
||
| 186 | |||
| 187 | if ( obj.activeTabItem ) { |
||
| 188 | // Activate last active tab |
||
| 189 | obj.activeTabItem.click(); |
||
| 190 | } else { |
||
| 191 | // Make first tab active |
||
| 192 | elements.tabItems.find( 'li:visible' ).first().click(); |
||
| 193 | } |
||
| 194 | } else { |
||
| 195 | if ( ! obj.visibleTabItems ) { |
||
| 196 | return; |
||
| 197 | } |
||
| 198 | |||
| 199 | elements.tabs.hide(); |
||
| 200 | |||
| 201 | $.each( obj.visibleTabItems, function( index, tabItem ) { |
||
| 202 | elements.tabs.eq( $( tabItem ).index() ).show(); |
||
| 203 | } ); |
||
| 204 | } |
||
| 205 | }; |
||
| 206 | |||
| 207 | /** |
||
| 208 | * Function calls |
||
| 209 | */ |
||
| 210 | elements.tabItems.find( 'li' ).click( obj.showTab ); |
||
| 211 | |||
| 212 | // Make first tab active |
||
| 213 | elements.tabItems.find( 'li:visible' ).first().click(); |
||
| 214 | |||
| 215 | $( window ).resize( obj.responsiveTabs ); |
||
| 216 | }; |
||
| 217 | |||
| 218 | /** |
||
| 219 | * jQuery plugin - Pronamic Pay Tabs |
||
| 220 | */ |
||
| 221 | $.fn.pronamicPayTabs = function() { |
||
| 222 | return this.each( function() { |
||
| 223 | var $this = $( this ); |
||
| 224 | |||
| 225 | if ( $this.data( 'pronamic-pay-tabs' ) ) { |
||
| 226 | return; |
||
| 227 | } |
||
| 228 | |||
| 229 | var tabs = new PronamicPayTabs( this ); |
||
| 230 | |||
| 231 | $this.data( 'pronamic-pay-tabs', tabs ); |
||
| 232 | } ); |
||
| 233 | }; |
||
| 234 | |||
| 235 | ////////////////////////////////////////////////// |
||
| 236 | |||
| 237 | /** |
||
| 238 | * Pronamic pay gateway test |
||
| 239 | */ |
||
| 240 | var PronamicPayGatewayTest = function( element ) { |
||
| 241 | var obj = this; |
||
| 242 | var $element = $( element ); |
||
| 243 | |||
| 244 | // Elements |
||
| 245 | var elements = {}; |
||
| 246 | elements.paymentMethods = $element.find( 'select[name="pronamic_pay_test_payment_method"]' ); |
||
| 247 | |||
| 248 | /** |
||
| 249 | * Update input visibility |
||
| 250 | */ |
||
| 251 | this.updateInputVisibility = function() { |
||
| 252 | var method = elements.paymentMethods.val(); |
||
| 253 | |||
| 254 | if ( '' !== method ) { |
||
| 255 | $element.find( '.pronamic-pay-test-payment-method' ).hide().filter( '.' + method ).show(); |
||
| 256 | } |
||
| 257 | |||
| 258 | // Hide subscription options for unsupported payment methods. |
||
| 259 | if ( 1 === elements.paymentMethods.find( 'option:selected' ).data( 'is-recurring' ) ) { |
||
| 260 | $( '#pronamic-pay-test-subscription' ).parents( 'tr' ).show(); |
||
| 261 | } else { |
||
| 262 | $( '#pronamic-pay-test-subscription' ).parents( 'tr' ).hide(); |
||
| 263 | $( '#pronamic-pay-test-subscription' ).prop( 'checked', false ).trigger( 'change' ); |
||
| 264 | } |
||
| 265 | }; |
||
| 266 | |||
| 267 | // Function calls |
||
| 268 | obj.updateInputVisibility(); |
||
| 269 | |||
| 270 | elements.paymentMethods.change( obj.updateInputVisibility ); |
||
| 271 | |||
| 272 | $element.on( 'keydown', 'input[name="test_amount"]', function( e ) { |
||
| 273 | if ( 13 === e.keyCode) { |
||
| 274 | $element.find('input[name="test_pay_gateway"]').click(); |
||
| 275 | } |
||
| 276 | }); |
||
| 277 | }; |
||
| 278 | |||
| 279 | /** |
||
| 280 | * jQuery plugin - Pronamic pay gateway test |
||
| 281 | */ |
||
| 282 | $.fn.pronamicPayGatewayTest = function() { |
||
| 283 | return this.each( function() { |
||
| 284 | var $this = $( this ); |
||
| 285 | |||
| 286 | if ( $this.data( 'pronamic-pay-gateway-test' ) ) { |
||
| 287 | return; |
||
| 288 | } |
||
| 289 | |||
| 290 | var gatewayTest = new PronamicPayGatewayTest( this ); |
||
| 291 | |||
| 292 | $this.data( 'pronamic-pay-gateway-test', gatewayTest ); |
||
| 293 | } ); |
||
| 294 | }; |
||
| 295 | |||
| 296 | ////////////////////////////////////////////////// |
||
| 297 | |||
| 298 | /** |
||
| 299 | * Pronamic iDEAL pay form options |
||
| 300 | */ |
||
| 301 | var PronamicPayFormOptions = function( element ) { |
||
| 302 | var obj = this; |
||
| 303 | var $element = $( element ); |
||
| 304 | |||
| 305 | // Elements |
||
| 306 | var elements = {}; |
||
| 307 | elements.amountMethod = $element.find( 'select[name="_pronamic_payment_form_amount_method"]' ); |
||
| 308 | |||
| 309 | /** |
||
| 310 | * Update amounts visibility |
||
| 311 | */ |
||
| 312 | this.updateAmountsVisibility = function() { |
||
| 313 | var method = elements.amountMethod.val(); |
||
| 314 | |||
| 315 | if ( method === 'choices_only' || method === 'choices_and_input' ) { |
||
| 316 | $element.find('input[name="_pronamic_payment_form_amount_choices\[\]"]').closest('div').show(); |
||
| 317 | } else { |
||
| 318 | $element.find('input[name="_pronamic_payment_form_amount_choices\[\]"]').closest('div').hide(); |
||
| 319 | } |
||
| 320 | }; |
||
| 321 | |||
| 322 | /** |
||
| 323 | * Maybe add an empty amount field |
||
| 324 | */ |
||
| 325 | this.maybeAddAmountChoice = function() { |
||
| 326 | elements.amountChoices = $element.find( 'input[name="_pronamic_payment_form_amount_choices\[\]"]' ); |
||
| 327 | var emptyChoices = elements.amountChoices.filter( function() { return this.value === ''; } ); |
||
| 328 | |||
| 329 | if ( emptyChoices.length === 0 ) { |
||
| 330 | var lastChoice = elements.amountChoices.last().closest( 'div' ); |
||
| 331 | var newChoice = lastChoice.clone(); |
||
| 332 | var choiceId = '_pronamic_payment_form_amount_choice_' + elements.amountChoices.length; |
||
| 333 | |||
| 334 | newChoice.find( 'input' ).attr( 'id', choiceId ).val( '' ); |
||
| 335 | newChoice.find( 'label' ).attr( 'for', choiceId ); |
||
| 336 | |||
| 337 | lastChoice.after( newChoice ); |
||
| 338 | } |
||
| 339 | }; |
||
| 340 | |||
| 341 | // Function calls |
||
| 342 | obj.updateAmountsVisibility(); |
||
| 343 | |||
| 344 | elements.amountMethod.change( obj.updateAmountsVisibility ); |
||
| 345 | |||
| 346 | $element.on( 'keyup', 'input[name="_pronamic_payment_form_amount_choices\[\]"]', function() { |
||
| 347 | obj.maybeAddAmountChoice(); |
||
| 348 | }); |
||
| 349 | }; |
||
| 350 | |||
| 351 | /** |
||
| 352 | * jQuery plugin - Pronamic iDEAL form options |
||
| 353 | */ |
||
| 354 | $.fn.pronamicPayFormOptions = function() { |
||
| 355 | return this.each( function() { |
||
| 356 | var $this = $( this ); |
||
| 357 | |||
| 358 | if ( $this.data( 'pronamic-pay-forms-options' ) ) { |
||
| 359 | return; |
||
| 360 | } |
||
| 361 | |||
| 362 | var formOptions = new PronamicPayFormOptions( this ); |
||
| 363 | |||
| 364 | $this.data( 'pronamic-pay-form-options', formOptions ); |
||
| 365 | } ); |
||
| 366 | }; |
||
| 367 | |||
| 368 | /** |
||
| 369 | * Ready |
||
| 370 | */ |
||
| 371 | $( document ).ready( function() { |
||
| 372 | $( '#pronamic-pay-gateway-config-editor' ).pronamicPayGatewayConfigEditor(); |
||
| 373 | $( '#pronamic_payment_form_options').pronamicPayFormOptions(); |
||
| 374 | $( '#pronamic_gateway_test').pronamicPayGatewayTest(); |
||
| 375 | $( '.pronamic-pay-tabs' ).pronamicPayTabs(); |
||
| 376 | |||
| 377 | // Tooltip |
||
| 378 | tippy( '.pronamic-pay-tip', { |
||
| 379 | arrow: true, |
||
| 380 | theme: 'pronamic-pay' |
||
| 381 | } ); |
||
| 382 | } ); |
||
| 383 | } )( jQuery ); |
||
| 384 |
