Forums

Load CSS and Javascript No Matter What

Permalink
I am working on a tool for Concrete that uses a Jquery plugin (javascript) and a CSS file.

I need these to be loaded no matter what - sitewide. It will be a part of the front-end toolbar. So far, I got the package to install a button to the toolbar. My problem is that the CSS and javascript don't show up in the footer and header.

Here is what I have my package controller: 

public function on_start()
   {
      $al = AssetList::getInstance();
      $al->register(   'css', 'ez_preview/style', 'css/previewer.css',
         array (   'version'   => '1.0',
            'position'   => Asset::ASSET_POSITION_HEADER,
            'minify'    => true,
            'combine'   => true),
         $this
      );
      $al->register(   'javascript', 'ez_preview/script', 'js/previewer.js',
         array (   'version'   => '1.0',
            'position'   => Asset::ASSET_POSITION_FOOTER,
            'minify'    => true,
            'combine'   => true),
Viewing 15 lines of 21 lines. View entire code block.


The CSS and javascript live in /mypackage/css and mypackage/js.

How do I get them to show up?
PineCreativeLabs
 
mesuva replied on at Permalink Reply
mesuva
If I'm understanding you correctly, the challenge here is that you want to inject assets into the page, but not through the use of a block or a page controller.

So my suggestion would be to investigate using events, hooking into something like the on_before_render function.

Check this out for an example of an event in a package:http://documentation.concrete5.org/developers/packages/modifying-st...

I'd suggest doing setting it up as described but using the on_before_render event.

With the on_before_render event, the function gets passed an event object, and that object has within a view object, which I believe you can call 'addFooterItem' and 'addHeaderItem' on.

Here's a rough guess at what might work as a package function:
public function on_start()
{
    \Events::addListener(
        'on_before_render',
        function ($e) {
            $view = $e->getArgument('view');
           $view->addFooterItem($html->javascript('pathwhatever.js'));
           // $view->requireAsset('asset_handle');  // this might work in this content
        }
   );
}

I think the main thing to watch out for is that this is going to apply to EVERY page in the site, so dashboard pages as well. So you'd have to put some code in to check that it's just a normal page that you're doing this one.

I've done this in 5.6 with something like this to check in the on_start():
$req = Request::get();
$p = $req->getRequestedPage();
if (!$p->isAdminArea()) {
    // do what needs to happen
}

But I've not tried this in 5.7. Hopefully that helps a bit!
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
This doesn't seem to work. I'm getting an error: 
Call to a member function javascript() on a non-object
mesuva replied on at Permalink Reply
mesuva
That's because $html hasn't been defined anywhere (it was just a rough example).

You could try something like:
$view->addFooterItem(Core::make('helper/html')->javascript('pathwhatever.js'));

Then just make sure you have a use Core; statement at the top of your package controller.
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
Ok, that helped a bit - the CSS and JS now show up in header and footer. But, I'm still having a problem. It is adding "concrete/css/" and "concrete/js/" in front of what's in my updated code below: 

\Events::addListener(
         'on_before_render',
         function ($e) {
            $view = $e->getArgument('view');
            $view->addHeaderItem(Core::make('helper/html')->css('css/previewer.css'));
            $view->addFooterItem(Core::make('helper/html')->javascript('js/previewer.js'));
         }
      );


So, the JS has a URL like this now: "concrete/js/js/previewer.js".
It really should look like: "package/js/previewer.js", or have a full URL to it.
mesuva replied on at Permalink Reply
mesuva
Try passing in your package handle:
$view->addHeaderItem(Core::make('helper/html')->css('css/previewer.css', 'packagehandle'));
 $view->addFooterItem(Core::make('helper/html')->javascript('js/previewer.js','packagehandle'));