===============================================================================
django-js-asset -- script tag with additional attributes for django.forms.Media
===============================================================================

.. image:: https://travis-ci.org/matthiask/django-js-asset.svg?branch=master
    :target: https://travis-ci.org/matthiask/django-js-asset

Usage
=====

Use this to insert a script tag via ``forms.Media`` containing additional
attributes (such as ``id`` and ``data-*`` for CSP-compatible data
injection.):

.. code-block:: python

    from js_asset import JS

    forms.Media(js=[
        JS("asset.js", {
            "id": "asset-script",
            "data-answer": "42",
        }),
    ])

The rendered media tag (via ``{{ media.js }}`` or ``{{ media }}`` will
now contain a script tag as follows, without line breaks:

.. code-block:: html

    <script type="text/javascript" src="/static/asset.js"
        data-answer="42" id="asset-script"></script>

The attributes are automatically escaped. The data attributes may now be
accessed inside ``asset.js``:

.. code-block:: javascript

    var answer = document.querySelector("#asset-script").dataset.answer;

Also, because the implementation of ``static`` differs between supported
Django versions (older do not take the presence of
``django.contrib.staticfiles`` in ``INSTALLED_APPS`` into account), a
``js_asset.static`` function is provided which does the right thing
automatically.

When adding external script assets, you should pass ``static=False`` to
the ``JS`` object to avoid passing the script URL through ``static()``.
In this case, you probably want to add ``defer`` or ``async``, and maybe
also ``integrity`` and ``crossorigin`` attributes. Please note that
boolean attributes are not properly supported, so specify them as
follows::

    JS(
        "https://cdn.example.com/script.js",
        {"defer": "defer"},
        static=False,
    )


Compatibility
=============

At the time of writing this app is compatible with Django 1.7 and better
(up to and including the Django master branch), but have a look at the
`Travis CI build <https://travis-ci.org/matthiask/django-js-asset>`_ for
definitive answers.