Code Monkey home page Code Monkey logo

django-asset-definitions's Introduction

django-asset-definitions

Tests Status

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.

Installation

pip install django-asset-definitions

Usage

Define:

import asset_definitions

my_media = asset_definitions.Media(
    js=(
        "media.js",
        """<script>window.addEventListener("load", function() {console.log("Loaded!");});</script>""",
    ),
    css={
        "all": (
            "media.css",
        ),
    }
)

Combine:

extended_media = my_media + asset_definitions.Media(
    js=("extension.js", )
)

Define in views:

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):
    ...

Use in templates:

{{ view.media.render }}

Or:

{{ view.media.js.render }}
{{ view.media.css.render }}

See an extended example below.

asset_definitions.Media and django.forms.Media

  1. asset_definitions.Media provides the same API as django.forms.Media. In fact, it is inherited from django.forms.Media.
  2. It is safe to combine asset_definitions.Media with django.forms.Media.
  3. asset_definitions.Media objects are lazy. If two or more instances of asset_definitions.Media are combined, the result is computed only when media is rendered. It is safe to use reverse_lazy() with asset_definitions.Media. It is important if you define your assets on a module level.
  4. Media class in MediaDefiningView does not support extend option. To add to the media defined in a parent view class you should override get_media method and use super(MyView, self).get_media().

Example:

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>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.