Using url_for() in a Javascript file with Jinja/Flask

Question

I'm converting a static HTML page to a Flask application which would dynamically change its CSS file depending on the screen size. However when switching to Flask, I have to grab URLs for a file in a HTML files like this:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>

However in my Javascript init.js I have this code to switch between CSS files.

(function($) {

    skel.init({
        reset: 'full',
        breakpoints: {
            'global':   { range: '*', href: 'static/css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
            'wide':     { range: '961-1880', href: 'static/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
            'normal':   { range: '961-1620', href: 'static/css/style-normal.css', containers: 960, grid: { gutters: 40 } },
            'narrow':   { range: '961-1320', href: 'static/css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
            'narrower': { range: '-960', href: 'static/css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
            'mobile':   { range: '-736', href: 'static/css/style-mobile.css', grid: { collapse: true } }
        },
        plugins: {
            layers: {
                sidePanel: {
                    hidden: true,
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'left',
                    animation: 'pushX',
                    width: 240,
                    height: '100%',
                    clickToHide: true,
                    html: '<div data-action="moveElement" data-args="header"></div>',
                    orientation: 'vertical'
                },
                sidePanelToggle: {
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'top',
                    height: '4em',
                    width: '5em',
                    html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>'
                }
            }
        }
    });

I'm not able to put a {{ url_for('static', filename='css/style.css')}} inside of Javascript. Is there any way I can do this?

Answer 1

You have two options:

1. Inline Javascript with Jinja: Quite simply, if you put your Javascript inside <script> tags, you can add the file using Jinja:

<script>
  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: {{ url_for ("static", filename="'css/style.css'" ) }},
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: {{ url_for ("static", filename="'css/style=wide.css'" ) }},
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: {{ url_for ("static", filename="'css/style-normal.css'" ) }},
                containers: 960,
                grid: { gutters: 40 }
            }
        })
</script>

2. Call the css files without using templating: You could just simply call the files without Jinja from your Javascript file.

  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: 'https://example.com/static/css/style.css', 
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: 'https://example.com/static/css/style-wide.css', 
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: 'https://example.com/static/css/style-normal.css',
                containers: 960,
                grid: { gutters: 40 }
            }
        })

The inability to use templating in your JS files is a problem with Flask and Jinja in my opinion. For your case though would it not be easier to simply use media queries in your CSS to set different properties depending on screen size?