maddisondesigns / customizer-custom-controls

WordPress Customizer Custom Controls
403 stars 120 forks source link

Skyrocket_Alpha_Color_Control hangs whenever you slect several colors from the palette too fast #23

Closed ASL07 closed 4 years ago

ASL07 commented 4 years ago

Hi,

Whenever I switch quickly between the colors on the palette, after 10 clicks or so, the browser freezes, not responding again.

This doesn't happen with the default wordpress color picker.

maddisondesigns commented 4 years ago

This doesn't appear to be an issue to me. I tried replicating this and wasn't able to. The browser did slow down a bit but that was simply because the Customizer was trying to refresh the whole page every time I selected a new colour because my $wp_customize->add_setting() function was using 'transport' => 'refresh'. After waiting for the Customizer to finish the browser started responding again.

I would suggest that you look at what sort of refresh you're doing. If you're doing a partial refresh and calling your own function, I would look into that for starters.

Also, since you were having issues with your colour palettes not changing when they should be, it seems like you might have an issue with your code somewhere.

ASL07 commented 4 years ago

I have been doing more tests, and I can provide more details around the issue. For me, it is easily and consistently reproducible. It seems to only happen when you use hex colors on the palette and reset_alpha is true. It is not a problem for me, as I can use Skyrocket_Customize_Alpha_Color_Control which works fine, but maybe you want to check again.

I am able to make custom the palettes now. I am not sure what it was though, probably some weird thing when enqueing files. I am using Sage 9 theme with bedrock, so I needed to modify paths inside the files, because the Sage theme file structure is quite different from a standard wordpress theme.

Steps:

  1. Cloned your repo to my theme
  2. Modified paths of scripts/css/images to work with Sage 9 (I haven't touched anything else)
  3. Navigate to the customizer and open the "Sample Custom Controls" section, I am using chrome
  4. Change colors quickly between the color palette in the second control (WP ColorPicker Alpha Color Picker)
  5. The browser will hang forever after some time(not long) and never recover, sometimes it will show "The page has become irresponsive"

The first color control (Alpha Color Picker Control) and the third color control work well, so I decided to look into what was different between the second and the third control, which are both Skyrocket_Alpha_Color_Control controls.

The second one uses a hex palette and reset_alpha is set to true(default value). The third one uses rgba colors and reset_alpha is set to false. Just to test, I changed the third control, to use hex colors, and reset_alpha true, like this:

$wp_customize->add_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'sample_wpcolorpicker_alpha_color2',
            array(
                'label' => __( 'WP ColorPicker Alpha Color Picker', 'skyrocket' ),
                'description' => esc_html__( 'Sample color control with Alpha channel', 'skyrocket' ),
                'section' => 'sample_custom_controls_section',
                'input_attrs' => array(
//                  'resetalpha' => false,
                    'palette' => array(
                        '#000000',
                        '#ffffff',
                        '#dd3333',
                        '#dd9933',
                        '#eeee22',
                        '#81d742',
                        '#1e73be',
                        '#8224e3',
//                      'rgba(99,78,150,1)',
//                      'rgba(67,78,150,1)',
//                      'rgba(34,78,150,.7)',
//                      'rgba(3,78,150,1)',
//                      'rgba(7,110,230,.9)',
//                      'rgba(234,78,150,1)',
//                      'rgba(99,78,150,.5)',
//                      'rgba(190,120,120,.5)',
                    ),
                ),
            )
        ) );

Then, iI tested again, and the third control crashes like the second one

I would suggest that you look at what sort of refresh you're doing. If you're doing a partial refresh and calling your own function, I would look into that for starters.

Actually I was using postMessage, and just changing the background color on each change. I know this is not the issue, because, I switched the alpha color control for a standard wordpress color picker, and it worked well.