django-html5boilerplate

django-html5boilerplate copied to clipboard

The HTML5BP google analytics snippet is already using Modernier.load:

Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});

We could do the same with other js loads via a templatetag. An example of what we might generate (based on the example from the modernizr docs):

{% loadjsif "Modernizr.geolocation" %}
    <script src="{{ STATIC_URL }}main/js/libs/geo.js" type="text/javascript" charset="utf-8"></script>
{% elseloadjs %}
    <script src="{{ STATIC_URL }}main/js/libs/geo-polyfill.js" type="text/javascript" charset="utf-8"></script>
{% endloadjsif %}

That might generate something like:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : '/static/main/js/libs/geo.js',
  nope: '/static/main/js/libs/geo-polyfill.js'
});

...or something like that. I wonder if Modernizr.load could also be useful to the loadjsuntil templatetag via syntax something like this:

Modernizr.load([
{
  load: "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js",
  complete: function() {
    if (!jQuery.ui) {
      Modernizr.load('/static/main/js/libs/jquery-ui.min.js');
    }
  }
}]

I'm not sure if the <script> tags still make sense in this scenario, but I think it would read pretty clearly in a template. Thoughts?

I'm not sure if the loadjsif tag is actually worth it. The Modernizr.load version seems shorter and more readable. It does have the benefit of decoupling the template from the implementation, but I don't know if that's enough of a payoff.

As for loadjsuntil, something like that could be good, but we can't just change the behavior of the tag:

{% loadjsuntil "jQuery.ui" %}
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="{{ STATIC_URL }}main/js/libs/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
{% endloadjsuntil %}
<script src="thing-that-uses-jquery-ui.js" type="text/javascript" charset="utf-8"></script>

This works now but, since Modernizr will load in parallel, it wouldn't work with the new behavior. We could add some kind of flag for the tag, but it still wouldn't allow you to specify fallbacks. I'm not sure there's a way to do that stuff declaratively though.