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

5 Views

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:

Read More
<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?

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. 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>

  2. 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>