Modernizr check first, then move on to wp_register_script()/wp_enqueue_script

Question

I've been playing with Modernizr in WordPress lately and here's something that i'm trying to achive.

I'm adding an HTML5 input field in a custom options page, specifically:

<input type="number" />

Now with Modernizr i can test if the browser supports it like this:

Modernizr.load([
{
test: Modernizr.inputtypes.number, // this is the test
nope: [ load js,css etc ] // if it's not supported load your custom lib
complete: function() {
  // do something 
}]);

Would it be possible instead of manually loading my custom libraries in the "nope" method, to invoke the wp_register_script()/wp_enqueue_script functions?

I mean i could just register/en-queue my custom libraries but i'd like to do that only if it's necessary (if the browser doesn't have native support for this kind of input type.

Any ideas?

bueltge · Accepted Answer · 2011-08-23 08:35:19Z

Please check the example of Alex Hempton-Smith, maybe its help you.

<?php

function urls_of_enqueued_scrips( $handles = array() ) {
    global $wp_scripts, $wp_styles;

    foreach ( $wp_scripts->registered as $registered )
        $script_urls[ $registered->handle ] = $registered->src;

    foreach ( $wp_styles->registered as $registered )
        $style_urls[ $registered->handle ] = $registered->src;

    if ( empty( $handles ) ) {

        $handles = array_merge( $wp_scripts->queue, $wp_styles->queue );
        array_values( $handles );

    }

    $output = '';

    foreach ( $handles as $handle ) {

        if ( !empty( $script_urls[ $handle ] ) )
            $output .= $script_urls[ $handle ] . ',';

        if ( !empty( $style_urls[ $handle ] ) )
            $output .= $style_urls[ $handle ] . ',';

    }

    $output = substr( $output, 0, -1 );

    echo $output;

}

?>

<script>
Modernizr.load([
  {
    test : Modernizr.inputtypes.number,
    nope : [<?php urls_of_enqueued_scrips( array('spinbox') ); ?>],
    complete: function() {
      jQuery('.html5-number').spinbox();
    }
  }
]);
</script>

goldenapples · Accepted Answer · 2011-08-23 16:44:45Z

I would do it in this way (admittedly, it's not ideal, but I think its probably the easiest to read).

Create an array of all the conditional scripts you may need, and pass them to javascript using wp_localize_script (in 3.3 on, you will be able to use the much more logical alias wp_add_script_data as discussed here).

$conditional_scripts = array(
    'spinner' => get_stylesheet_directory_uri().'/js/spinbox.js',
    'datepicker' => get_stylesheet_directory_uri().'/js/datepicker.js'
    // etc, etc, etc.
);

/* You could tie the variables to anything, since I assume you're just using
   an inline script. But including it as a "localization" of modernizr makes
   as much sense as anything. */
wp_localize_script( 'modernizr', 'modernizrScripts', $conditional_scripts );

Then just access those variables in your Modernizr tests:

<script>
Modernizr.load([
  {
    test : Modernizr.inputtypes.number,
    nope : modernizrScripts.spinner,
    complete: function() {
      jQuery('.html5-number').spinbox();
    }
  },
  {
    test : Modernizr.inputtypes.date,
    nope : modernizrScripts.datepicker,
    complete: function() {
      jQuery('.html5-date').datepicker();
    }
  }
]);
</script>

Stack Exchange Network

Modernizr check first, then move on to wp_register_script()/wp_enqueue_script

2 Answers 2

Your Answer

Hot Network Questions

Modernizr check first, then move on to wp_register_script()/wp_enqueue_script

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions