Add ability to run scripts per page

[joelanman]

Currently all scripts are added at the end of the page, in layout.html.

This means if you have a script on one page that relies on jQuery, there's no way to add it after jQuery is loaded.

Propose changing this in layout.html

{% block body_end %}
  {% include "includes/scripts.html" %}
  <!-- GOV.UK Prototype kit {{releaseVersion}} -->
{% endblock %}

to

{% block body_end %}
  {% include "includes/scripts.html" %}
  {% block page_script %}{% endblock %}
  <!-- GOV.UK Prototype kit {{releaseVersion}} -->
{% endblock %}

[paulmsmith]

That makes it simpler for people not aware of super() which is a less obvious work around I've tended to use.

Overview of Super

Super gives the ability to effectively append or prepend to the block because using super() outputs contents of the parent block (in this example the stuff inside body_end within layout.html) inside a child block (the stuff inside body_end within the actual page template).

For example: In the page template (page.html)

{% block body_end %}
  {{ super() }}
  <script src="/public/javascripts/mypagescript.js"></script>
{% endblock %}

would output:

<!-- Javascript -->
<script src="/public/javascripts/details.polyfill.js"></script>
<script src="/public/javascripts/jquery-1.11.3.js"></script>
<script src="/public/javascripts/govuk/selection-buttons.js"></script>
<script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
<script src="/public/javascripts/govuk/show-hide-content.js"></script>
<script src="/public/javascripts/application.js"></script>
<!-- GOV.UK Prototype kit v4.0.0 -->
<script src="/public/javascripts/mypagescript.js"></script>

A suggestion might be:

inside layout.html

{% block body_end %}
  {% block scripts %}
    {% include "includes/scripts.html" %}
    {% block page_scripts %}{% endblock %}
  {% endblock %}
  <!-- GOV.UK Prototype kit {{releaseVersion}} -->
{% endblock %}

This would allow overriding/removing/editing of all scripts on a page or just adding additional scripts after the global scripts.

Enables overriding all scripts in page.html:

{% block scripts %}
  <script src="/public/javascripts/myscript-1.js"></script>
  <script src="/public/javascripts/myscript-2.js"></script>
  <script src="/public/javascripts/mypagescript.js"></script>
{% endblock %}

or

Enables just including additional page.html specific scripts similar to your proposal

{% block page_scripts %}   
  <script src="/public/javascripts/mypagescript-1.js"></script>
  <script src="/public/javascripts/mypagescript-2.js"></script>
  <script src="/public/javascripts/mypagescript-3.js"></script>
{% endblock %}

[joelanman]

that super() suggestion is smart, I hadn't thought of it. But yeah I think a new block would avoid introducing people to new syntax, and the name of the block could be clearer than body_end

on your suggestion of adding scripts block - its not strictly necessary is it? You could just define body_end? It's not as nice a name, but I'm wondering if its worth adding an extra block, and how many times you'll need to remove all scripts? For one thing it'll break the autodata store feature

[paulmsmith]

I've wanted to do it a few times. What I've ended up doing is duplicating some of the contents of includes/scripts.html then removing or changing some lines. I've not only wanted to do that on a per page basis but I've also wanted to do it when creating custom layouts for specific sections of a service/app.

Overriding body_end would remove the version comment and possibly be less obvious to other/future contributors as to why it has been overridden.

I'm probably not the target user (I'm an advanced user) but my suggestion adds a little more flexibility and another block 'hook' for people be more targeted and direct in what they're doing with their templates IMO.

[joelanman]

cool, thanks, I've made a PR: #373

[timpaul]

#373 is merged so closing this now.