Asset definitions are collections of static files (JavaScript, CSS) defined in Python code and (re)used in Django views and templates.
An example of asset definition is Media class that you can
define in Django forms.
django-asset-definitions aim to extend the application of asset definitions beyond forms and use them as the main
way to describe and organize JavaScript and CSS files.
pip install django-asset-definitionsimport asset_definitions
my_media = asset_definitions.Media(
js=(
"media.js",
"""<script>window.addEventListener("load", function() {console.log("Loaded!");});</script>""",
),
css={
"all": (
"media.css",
),
}
)extended_media = my_media + asset_definitions.Media(
js=("extension.js", )
)import asset_definitions
class MyView(asset_definitions.MediaDefiningView, ...):
class Media:
js = (
"media.js",
)
css = {
"all": (
"media.css",
),
}
...Form media is added to view media automatically:
import asset_definitions
from django.views.generic import FormView
class MyFormView(asset_definitions.MediaDefiningView, FormView):
...{{ view.media.render }}Or:
{{ view.media.js.render }}
{{ view.media.css.render }}See an extended example below.
asset_definitions.Mediaprovides the same API asdjango.forms.Media. In fact, it is inherited fromdjango.forms.Media.- It is safe to combine
asset_definitions.Mediawithdjango.forms.Media. asset_definitions.Mediaobjects are lazy. If two or more instances ofasset_definitions.Mediaare combined, the result is computed only when media is rendered. It is safe to usereverse_lazy()withasset_definitions.Media. It is important if you define your assets on a module level.Mediaclass inMediaDefiningViewdoes not supportextendoption. To add to the media defined in a parent view class you should overrideget_mediamethod and usesuper(MyView, self).get_media().
myapp/urls.py:
urlpatterns = (
url("/", MyView.as_view()),
url("/global-variables.js", global_js_variables, name="global_js_variables"),
)myapp/views.py:
import asset_definitions
from . import assets
class MyView(assets_definition.MediaDefiningView, TemplateView):
template_name = "template.html"
class Media:
js = ("media.js", )
css = {"all": ("media.css", )}
def get_media():
return (
assets.global_js_variables +
assets.jquery +
super(MyView, self).get_media()
)
def global_js_variables(request):
js_content = 'const CURRENT_USER="{}";'.format(request.user)
return HttpResponse(js_content, content_type="application/javascript")myapp/assets.py:
import asset_definitions
from django.core import urlresolvers
global_js_variables = asset_definition.Media(
js=urlresolvers.reverse_lazy("global_js_variables"),
)
jquery = asset_definitions.Media(
js="jquery.js"
)myapp/templates/template.html:
<html>
<head>
{{ view.media.css.render }}
</head>
<body>
...
{{ view.media.js.render }}
</body>
</html>