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.

Development

The distribution is contained in a Git repository, so simply clone the repository

$ git clone http://github.com/reneeb/Mojolicious-Plugin-JSLoader.git

and change into the newly-created directory.

$ cd Mojolicious-Plugin-JSLoader

The project uses Dist::Zilla to build the distribution, hence this will need to be installed before continuing:

$ cpanm Dist::Zilla

To install the required prequisite packages, run the following set of commands:

$ dzil authordeps --missing | cpanm
$ dzil listdeps --author --missing | cpanm

The distribution can be tested like so:

$ dzil test

To run the full set of tests (including author and release-process tests), add the --author and --release options:

$ dzil test --author --release

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)