Using js in footer or registering js

Developing with Concrete
1

I have built a theme for presentation based on fullpage.js
Now I want to finetune all code for making a theme package so we can use it in our school.
The js code (base and init with settings) is currently pulled in from the footer. That works fine.

Question: Since all three pagetemplates rely on the same js code, should I better register fullpage.js as an asset?

What would be best and how can I register this plugin in the package controller?
I’m using elemental as a base , v.9.1

Thank you in advance

2

In the package controller.php you can add this line and then put your fullpage.js in a folder called js so packagename/js or where ever you want and then path to in the code.

    public function on_start()
    {
        $al = AssetList::getInstance();

        // Register fullpage.js
        $al->register('javascript', 'fullpage', 'js/fullpage.js', array('version' => '1.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'minify' => false, 'combine' => false), $this);

    }

then in the theme folder there is a page_theme.php and you can call it there.

class PageTheme extends Theme implements ThemeProviderInterface
{
    public function registerAssets()
    {
          $this->requireAsset('fullpage');
    }
}

this is where you can also call core assets if you need them

3

@TMDesigns

That is great and works. Exactly what I was looking for.

What I’m still not sure is, how to properly pull in the settings script with the options. Does that still go into the footer?

And, the author of the script recommends to use the fullpage.min.js. Is that OK? I remember that it’s better to use js/css unminified so the built-in minifier wouldn’t get confused.

Thanks again

4

If you look at the first part of @TMDesigns example, one of the options is ‘minify’.
As a general rule of thumb

  • For efficiency, scripts should be minified
  • Never minify anything twice (or it could be corrupted)

Hence if you are pulling in .min.js which is already minified, then the asset should not be minified again. Hence the first part of the example says ‘minify’ => false

‘combine’ is up to you. For a script used on every page, combining with other scripts for the cache may be more efficient. For a script used sporadically, it can be more efficient to not combine it.

5

@JohntheFish
That makes perfect sense, thank you for the clarification. Everything is now running smoothly.

1 Like