NAME

    Mojolicious::Plugin::JSLoader - move js loading to the end of the
    document

VERSION

    version 0.08

SYNOPSIS

    In your startup:

        sub startup {
            my $self = shift;
      
            # do some Mojolicious stuff
            $self->plugin( 'JSLoader' );
    
            # more Mojolicious stuff
        }

    In your template:

        <% js_load('js_file.js') %>

HELPERS

    This plugin adds a helper method to your web application:

 js_load

    This method requires at least one parameter: The path to the JavaScript
    file to load. An optional second parameter is the configuration. You
    can switch off the base for this JavaScript file this way:

      # <script type="text/javascript" src="$base/js_file.js"></script>
      <% js_load('js_file.js') %>
      
      # <script type="text/javascript" src="http://domain/js_file.js"></script>
      <% js_load('http://domain/js_file.js', {no_base => 1}); %>

  config for js_load

    There are several config options for js_load:

      * no_base

      Do not use the base url configured on startup when no_base is set to
      a true value.

        # <script type="text/javascript" src="http://domain/js_file.js"></script>
        <% js_load('http://domain/js_file.js', {no_base => 1}); %>

      * no_file

      If set to a true value, you have to pass pure JavaScript

        # <script type="text/javascript">alert('test');</script>
        <% js_load("alert('test')", {no_file => 1}); %>

      * on_ready

      If set to a true value - in combination with a true value for no_file
      - the javascript code is wrapped in $(document).ready(
      function(){...});. This is quite handy when you have jquery installed
      and you want to run some javascript when the document is loaded.

        # <script type="text/javascript">alert('test');</script>
        <% js_load("alert('test')", {no_file => 1}); %>

      * inplace

      Do not load the javascript at the end of the page, but where js_load
      is called.

        # <script type="text/javascript" src="http://domain/js_file.js"></script>
        <%= js_load('http://domain/js_file.js', {no_base => 1, inplace => 1}); %>

      * browser

      Load the javascript when a specific browser is used.

        # Load the javascript when Internet Explorer 8 is used
        # <script type="text/javascript" src="http://domain/js_file.js"></script>
        <%= js_load('http://domain/js_file.js', {inplace => 1, browser => { "Internet Explorer" => 8 }}); %>
      
        # Load the javascript when Internet Explorer lower than 8 or Opera 6 is used
        # <script type="text/javascript" src="http://domain/js_file.js"></script>
        <%= js_load('http://domain/js_file.js', {inplace => 1, browser => {"Internet Explorer" => 'lt 8', Opera => 6} }); %>
      
        # Load the javascript when Internet Explorer is not version 8
        <%= js_load('http://domain/js_file.js', {inplace => 1, browser => {"Internet Explorer" => '!8' } } ); %>

      There's the "special" browser default. So you are able to load
      javascript for e.g. everything but IE6

        # Load the javascript when Internet Explorer is not version 6
        <%= js_load('http://domain/js_file.js', {inplace => 1, browser => {"Internet Explorer" => '!6', default => 1 } } ); %>

      * check

      If you want to avoid 404 errors that might occur when the filname is
      built dynamically, you can pass check in the config options:

       # <public>/test.js exists, <public>/tester.js doesn't
       % js_load( 'tester.js' );
       % js_load( 'test.js' );
       
       # -> you'll get a 404 error for "tester.js"
      
       # <public>/test.js exists, <public>/tester.js doesn't
       % js_load( 'tester.js', { check => 1 } );
       % js_load( 'test.js', { check => 1 } );
       
       # -> no 404 error, the javascript tag for tester.js isn't added to the HTML

      When you pass check, it is checked whether Mojolicious can create a
      static file or not. So the "file" doesn't have to be a file on disk,
      but a "file" in the __DATA__ section is ok, too.

      Your class

        __DATA__
        @@ checktest.js
        $(document).ready( function(){ alert('check') } );

      Your template:

        % js_load( 'checktest.js' ); # works
        % js_load( 'checktest.js', { check => 1 } ); # works
        % js_load( 'checktest2.js', { check => 1 } ); # tag is not added as checktest2.js doesn't exist

HOOKS

    When you use this module, a hook for after_render is installed. That
    hook inserts the <script> tag at the end of the document or right
    before the closing <body> tag.

    To avoid that late loading, you can use inplace in the config:

      <%= js_load( 'test.js', {inplace => 1} ) %>

METHODS

 register

    Called when registering the plugin. On creation, the plugin accepts a
    hashref to configure the plugin.

        # load plugin, alerts are dismissable by default
        $self->plugin( 'JSLoader' );

  Configuration

        $self->plugin( 'JSLoader' => {
            base => 'http://domain/js',  # base for all <script> tags
        });

NOTES

    This plugin uses the stash key __JSLOADERFILES__, so you should avoid
    using this stash key for your own purposes.

AUTHOR

    Renee Baecker <reneeb@cpan.org>

COPYRIGHT AND LICENSE

    This software is Copyright (c) 2017 by Renee Baecker.

    This is free software, licensed under:

      The Artistic License 2.0 (GPL Compatible)