BoldGrid /
controls
| Conditions | 2 |
| Paths | 5 |
| Total Lines | 86 |
| 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 | var self, colorPalette, |
||
| 64 | colorPalette.bindTransitions = function() { |
||
| 65 | |||
| 66 | if ( ! self.configs.enableCustomizerTransitions ) { |
||
| 67 | return; |
||
| 68 | } |
||
| 69 | |||
| 70 | self.$palette_control_wrapper.on( 'click', '.boldgrid-active-palette li', function( e ) { |
||
| 71 | var transitionColor, |
||
| 72 | backgroundColor, |
||
| 73 | $previewerBody, |
||
| 74 | timeStartedCompile, |
||
| 75 | $this = $( this ), |
||
| 76 | originalColor = $this.css( 'background-color' ), |
||
| 77 | isNeutral = false, |
||
| 78 | desiredDelay = 350, |
||
| 79 | transitionDistance = 0.4, |
||
| 80 | darknessThreshold = 0.5; |
||
| 81 | |||
| 82 | if ( self.fadeEffectInProgress || ! e.originalEvent ) { |
||
| 83 | return; |
||
| 84 | } |
||
| 85 | |||
| 86 | // Get the previewer frame. |
||
| 87 | $previewerBody = colorPalette.getPreviewerBody(); |
||
| 88 | |||
| 89 | if ( self.hasNeutral && $this.is( ':last-of-type' ) ) { |
||
| 90 | isNeutral = true; |
||
| 91 | } |
||
| 92 | |||
| 93 | // Calculate the color to transition to. |
||
| 94 | backgroundColor = BrehautColorJs( originalColor ); |
||
| 95 | if ( backgroundColor.getLuminance() > darknessThreshold ) { |
||
| 96 | transitionColor = backgroundColor.darkenByAmount( transitionDistance ); |
||
| 97 | transitionColor = transitionColor.toCSS(); |
||
| 98 | } else { |
||
| 99 | transitionColor = backgroundColor.lightenByAmount( transitionDistance ); |
||
| 100 | transitionColor = transitionColor.toCSS(); |
||
| 101 | } |
||
| 102 | |||
| 103 | // Set color to transition to. |
||
| 104 | $this.css( 'background-color', transitionColor ); |
||
| 105 | if ( isNeutral ) { |
||
| 106 | $this.closest( '.boldgrid-active-palette' ).attr( 'data-neutral-color', transitionColor ); |
||
| 107 | } |
||
| 108 | |||
| 109 | // Enable transitions for the colors. |
||
| 110 | $previewerBody.addClass( 'color-palette-transitions' ); |
||
| 111 | |||
| 112 | // Compile. |
||
| 113 | colorPalette.update_theme_option(); |
||
| 114 | |||
| 115 | // Reset Color. |
||
| 116 | $this.css( 'background-color', originalColor ); |
||
| 117 | if ( isNeutral ) { |
||
| 118 | $this.closest( '.boldgrid-active-palette' ).attr( 'data-neutral-color', originalColor ); |
||
| 119 | } |
||
| 120 | |||
| 121 | timeStartedCompile = new Date().getTime(); |
||
| 122 | self.fadeEffectInProgress = true; |
||
| 123 | |||
| 124 | $window.one( 'boldgrid_sass_compile_done', function() { |
||
| 125 | var timeout = 0, |
||
| 126 | duration = new Date().getTime() - timeStartedCompile; |
||
| 127 | |||
| 128 | // The compile to fade back in should trigger at a minimum time of desiredDelay. |
||
| 129 | |||
| 130 | // If the compile time exceeds the min than the the timeout will be 0. |
||
| 131 | if ( duration < desiredDelay ) { |
||
| 132 | timeout = desiredDelay; |
||
| 133 | } |
||
| 134 | |||
| 135 | // Wait for compile to finish then fade back in. |
||
| 136 | $window.one( 'boldgrid_sass_compile_done', function( event, data ) { |
||
| 137 | setTimeout( function() { |
||
| 138 | colorPalette.update_iframe( data ); |
||
| 139 | setTimeout( function() { |
||
| 140 | $previewerBody.removeClass( 'color-palette-transitions' ); |
||
| 141 | self.fadeEffectInProgress = false; |
||
| 142 | }, 250 ); |
||
| 143 | }, timeout ); |
||
| 144 | } ); |
||
| 145 | |||
| 146 | colorPalette.update_theme_option( { source: 'color_palette_focus' } ); |
||
| 147 | } ); |
||
| 148 | } ); |
||
| 149 | }; |
||
| 150 |
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.