Sharing (not an issue) : code to set time/duration of event(s)

[LebCit]

I'm sharing here, because I didn't found anything close after a lot of search (codex, kirki, stackoverflow, wordpress.stackexchange...).
Maybe someone did it before me with Kirki, but I just couldn't find it...

Case description:

I have a preloader and wanted to give my theme's users a way to set/choose the time/duration of the preloader before showing the site.
After a lot of research, as said before, I didn't find anything, and suddenly this crazy idea crossed my mind 🙄

My crazy idea :

To hide the preloader and show the site, after 1.5 second of preloading, I'm using a simple setTimeout() function :

setTimeout(function(){
    $('.preloader-wrapper').fadeOut();
}, 1500);

All I have to do is making a control that will give the users the ability to change this 1500ms in a range that I will define so they won't get crazy too 🤣

The solution

Obviously, the slider control was my best bet to define a range so :

// Set Preloader Animation Time
The_Clean_Blog_Kirki::add_field('thecleanblog', array(
    'type'        => 'slider',
    'settings'    => 'preloader_animation_time',
    'label'       => __( 'Set Preloader Animation Time', 'the-clean-blog' ),
    'section'     => 'preloader_settings',
    'default'     => 1500, // Set the default time to 1500ms
    'priority'    => 5,
    'choices'     => array(
        'min'  => '500', // minimum value 500ms
        'max'  => '3000', // maximum value 3000ms
        'step' => '500', // step of 500ms
    ),
    'transport'   => 'refresh', // to test the preloader time
    'output'      => array( // THIS IS THE INTERESTING PART, I'll EXPLAIN AFTER THE CODE !
        array(
            'element'  => '.preloader-wrapper',
            'property' => ' transition-duration',            
            'value_pattern' => '$',
        ),
    ),
));

Explanation : I had to find a CSS property that allow to set the duration of an event, obviously again, transition-duration was my best bet, but I also had to find a way to output the value of this transition-duration and I remembered doing it, long ago, with the value-pattern argument 😎 (this was the exact time of my crazy idea 🤣 ).

Now, all I had to do was really simple :
1- Localize my script
2- Pass the php variable to JS
3- Test my crazy idea 🙄

1- If someone is interested on how to do it, in functions.php :

function thecleanblog_scripts() {
... 
    // Localize the-clean-blog.js to pass php variables to JS.
    wp_enqueue_script('thecleanblog-script', get_theme_file_uri('/assets/js/the-clean-blog.js'), array('jquery'), '', true);
    $thecleanblogSettings = array (
        ... 
        'thecleanblog_preloader_animation_time' => get_theme_mod('preloader_animation_time', 1500),
        ... 
    );
    wp_localize_script('thecleanblog-script', 'thecleanblog_set', $thecleanblogSettings);
... 
}
add_action('wp_enqueue_scripts', 'thecleanblog_scripts');

2- Change the first setTimeout() function like so in the-clean-blog.js file that we had localized :

setTimeout(function(){
    $('.preloader-wrapper').fadeOut();
}, thecleanblog_set.thecleanblog_preloader_animation_time);

3- Test the AWESOMENESS of Kirki !!!
Everything goes as expected 😎 My crazy idea works 🤣

Final word

@aristath THANK YOU AGAIN AGAIN AND AGAIN, FROM THE BOTTOM OF MY HEART ❤️

[niklasp]

shouldnt the preloader hide after site load is complete not after fixed time 😸 ? close #2026

[LebCit]

The question is totally logic.
But for my theme, site load duration is between 1.5 and 3 seconds depending on content, while header is already displayed before loading with AJAX.
Users of my theme have this laps of time to play with the preloader.
I know because I've said it : it's a little bit of a crazy idea:joy:
SYA