PHPackages                             idci/asset-loader-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. idci/asset-loader-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

idci/asset-loader-bundle
========================

Symfony2 bundle that provides features to load assets

v2.2.0(6y ago)163.9k↓38.1%1MITPHPPHP ^7.1.3

Since Jul 11Pushed 6y ago2 watchersCompare

[ Source](https://github.com/IDCI-Consulting/AssetLoaderBundle)[ Packagist](https://packagist.org/packages/idci/asset-loader-bundle)[ RSS](/packages/idci-asset-loader-bundle/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependencies (9)Versions (13)Used By (1)

AssetLoaderBundle
=================

[](#assetloaderbundle)

Introduction
------------

[](#introduction)

With the Symfony 2 (or 3) framework, we found it troublesome to load assets for custom form type widgets. A recurrent issue which comes up is the loading of front dependencies embedded to the widgets.

### Issue 1 - dependencies order

[](#issue-1---dependencies-order)

Let's say you want to create a form type, child of the text form type, whose widget will color the background of the input type text; as soon as the input is empty. Your widget will look like this:

Form/fields.html.twig

```
{%- block colored_text_widget -%}

      {{- form_widget(form) -}}

        .colored input[type="text"] {
            border-color: #c9302c,
            background-color: #f3d9d9
        }

        $(document).on('change', '.colored input[type="text"]', function () {
          if ($input.val()) {
            $input.css({
              'border-color': '#cccccc',
              'background-color': '#ffffff'
            });
          } else {
            $input.css({
              'border-color': '#c9302c',
              'background-color': '#f3d9d9'
            });
          }
        });

{%- endblock -%}
```

As you can see, this javascript code requires jQuery. JQuery will not be available when this script will be executed (unless you place the Jquery script in the head of the html document, but we don't want that)

A possible solution would be to wrap this code with the following vanilla function

```
window.addEventListener('load', function () {
    // code goes here ...
});
```

This way, when the code will be executed, Jquery should be ready to be used. But what if your widget is based on an entire library?

### Issue 2 - dependencies duplication

[](#issue-2---dependencies-duplication)

Given the same form type as in the example above, if you have a page in your web application that render this form 3 times, you will end up with your scripts and stylesheets duplicated 3 times in the DOM. You only need it once.

This bundle attempts to solve those issues.

Installation
------------

[](#installation)

Add the dependency in your `composer.json` file:

```
"require": {
    ...
    "idci/asset-loader-bundle": "dev-master"
},
```

Install these new dependencies in your application using composer:

```
$ php composer.phar update
```

Or with docker and docker-compose:

```
$ make composer-update
```

Register needed bundles in your application kernel:

```