Skip to main content

A resource manager for CSS and JS

Project description

Here is an example on how to use it with CSS resources.

First we setup some resources:

from quantumcore.resources import CSSResourceManager, css_from_pkg_stream
from quantumcore.resources import JSResourceManager, js_from_pkg_stream, jst_from_pkg_stream

r1 = css_from_pkg_stream(__name__,
                         'static/css/screen.css',
                         merge=True,
                         auto_reload=True)
r2 = css_from_pkg_stream(__name__,
                     'static/css/addons.css',
                     merge=True,
                     auto_reload=True)
r3 = css_from_pkg_stream(__name__,
                         'static/css/print.css',
                         merge=True,
                         name="print",
                         auto_reload=True)
css_manager = CSSResourceManager([r1,r2,r3],
                                 prefix_url="/css",
                                 auto_reload=True)

# JS
js_manager = JSResourceManager([
    js_from_pkg_stream(__name__,
                       'static/js/jquery.json-2.2.min.js',
                       merge=True, prio=2),
    js_from_pkg_stream(__name__,
                       'static/js/jquery.cookie.js',
                       merge=True,
                       minimize_method="jsmin",
                       prio=3),
    ], prefix_url="/js", auto_reload=True)

This defines two CSS and two JS resources.

Instantiating resources

A resource corresponds to one file on the filesystem. Here we use a shortcut called js_from_pkg_stream and css_from_pkg_stream to load a file from a package.

Mandatory common parameters for those functions are:

  • The __name__ is being used for identifying the filename inside a package.

  • The path is the path inside the package the __name__ belongs to.

Optional arguments are:

  • merge defines if the resource is allowed to be merged with other similar resources. Default is True.

  • With prio you can define the order of the resources inside a resource manager. Resources with lower numbers are loaded first. Default is 1.

  • name is an optional name under which resources can be clustered together. Resources with the same name can be retrieved together then. It defaults to "". In the example the first two CSS resources will be retrieved together because they both have the same empty name.

  • processors define an optional list of processor functions which take the resource contents as input and output another (e.g. compressed) version.

  • auto_reload defines whether the resource can be reloaded or not. Note that this must be set in the Resource and the Resource Manager.

CSS specific parameters

  • media fdefines the media type to be used for this stylesheet, e.g. print or screen. It can be a string or a list of strings. Default is ['screen', 'projection'].

JS specific parameters

  • minimize_method is either "jsmin" or None and if the first is given then the JavaScript code will also be minified, meaning the removal of whitespaces and shortening of variables.

Instantiating the Resource Classes

In case you have a string you can also directly instantiating the CSSResource or JSResource class:

r = CSSResource(
        source = u'my CSS',
        minimize_method = None,
        media = ['projection', 'screen'],
        type_ = u'text/css',
        ...
)

r = JSResource(
        source = u'my JS',
        minimize_method = None,
        type_ = u'text/css',
        ...
)

Except __name__ and filename all the above mentioned parameters apply.

Resource Managers

In the example above we have seen resource managers like this:

css_manager = CSSResourceManager([r1,r2,r3],
                 prefix_url="/css",
                 auto_reload=True)

js_manager = JSResourceManager([.....],
                 prefix_url="/js",
                 auto_reload=True)

They handle all the CSS and JS files used in a project eventually grouped into clusters.

Both versions take a prefix_url under which they are served later on. This defines which URLs will be computed by the manager instance.

Optional parameters are:

  • no_merge can be True or False and defines whether the resources are merged into clusters or not.

  • auto_reload defines whether the manager should test if resources have been changed and should be reloaded. This only works if the resources have auto_reload set to True as well.

We can also add resources later:

css_manager.append(resource3)
js_manager.append(resource4)

Now we can pass this resource object to a template, e.g. to a Chameleon template:

template.render(js_manager = js_manager, css_manager = css_manager)

The template code then looks like this:

<tal:block replace="structure css_resources()" />
<tal:block replace="structure js_resources()" />

This will render links to all the unnamed clusters (means resources with no name parameter given). You can also render links to all resources with a certain name like this:

<!--[if lt IE 8]>
    <tal:block replace="structure css_resources('ie')" />
<![endif]-->

will render all resources with name='ie'.

In the resulting HTML this will look similar to this:

<link href="/css/style.css?h=0140632a9c7bdfec7a2a73829e37d18a" media="projection, screen" rel="stylesheet" type="text/css" />
<link href="/css/ie.css?h=4e743c01195a9352f5b3763f8dcffd69" media="projection, screen" rel="stylesheet" type="text/css" />

<script src="/js/script.js?h=15b10405313c16a428bce63782ed86c7" type="text/javascript"></script>

As you can see the resources are clustered together into files if possible. Moreover a cache key is given to each resource link which will change if the contents change.

Serving resources

To serve those files we have to pass the URL to the resource registry. Inside a WSGI app this might look like this:

def __call__(self, environ, start_response):
    path = environ['PATH_INFO'].split("/")

    if path[1]=="css":
        css_manager.render_wsgi(environ, start_response)
    elif path[1]=="js":
        js_manager.render_wsgi(environ, start_response)

This will take the path inside the WSGI environment and check if it matches one of the generated URLs.

Without WSGI it might look like this:

code, data, headers = resources.render(url)

data is an iterator with the merged and minimized CSS file, code is the return code, usually 200 Ok. headers is a list of (key, value) tuples.

Change history

0.5 - (2010/04/06)

initial release

Download

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

quantumcore.resources-0.5.2dev.tar.gz (25.5 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page