Forums

Clean way to use JS and CSS from the packages folder

Permalink
Greetings internet!
I'm making a package for concrete. My package has some JS files and a few CSS files that need to be added to the head of my website. Is there a way to include them in the head when you install the package? I know I can copy them manually to the right place, but I'm trying to make my package as self contained as possible, for an easy setup.

It's simple enough to include a php that contains the <link> and <script> elements i need, but the problem is they don't have a url in the packages folder... I suspect concrete protects access to the packages folder via url?

Thanks.
slafleche
 
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
To add them to all pages, you need a on_start handler in the package controller to set up an on_before_render handler. Within that, you create a view instance and call addHeaderItem etc.

There are probably examples in some of the one of the boilerplate or starter packages in the marketplace. Also see my Load.UI addon.

To just add them to pages containing a block, you can use an on_block_load handler in the block controller. See my Ajax Lessons addon for examples of use with a block.
slafleche replied on at Permalink Reply
slafleche
You, sir, are awesome.
Thanks!
slafleche replied on at Permalink Reply
slafleche
Hey, so I took a look at your Load.ui plugin. I added on_start() and on_before_render(), but there's something I didn't hook up right. It does add a link to the head, but the links are broken.

Here are my functions:

public function on_start() {
        $packageDirectory = DIR_PACKAGES . '/super_image_slider/blocks/super_image_slider/controller.php';
        Events::extend('on_before_render', 'SuperImageSliderPackage', 'on_before_render', $packageDirectory);
    }
    public function on_before_render() {
        $cp = new Permissions(Page::getCurrentPage());
        $page = Page::getCurrentPage();
        $html = Loader::helper("html");
        $view = View::getInstance();
        $view->addHeaderItem($html->javascript("super_image_slider/custom/nivoSlider/jquery.nivo.slider.pack.js"));
        $view->addHeaderItem($html->css("super_image_slider/custom/nivoSlider/nivo-slider.css"));
        $view->addHeaderItem($html->javascript("super_image_slider/custom/nivoSlider/nivoSliderJS.js"));
    }
JohntheFish replied on at Permalink Reply
JohntheFish
The problem is most likely that you have given links relative to your package, not relative to the site.

The best way to be independant of all that is to use the 2 - parameter version of the html helper.

If you put your js in
packages/packagename/js/

$html->javascript("super_image_slider/custom/nivoSlider/jquery.nivo.slider.pack.js", 'package_handle')


And similar for css in packages/packagename/css/

If you want to keep the css and js for a jquery plugin together, you can start a path ../js/ etc to track across the tree.

Because you are using nivo, it may also be worth adding the third namespace array parameter to the html helper methods. That will help prevent script collisions if other addons on the same page use their own copies of nivo.
slafleche replied on at Permalink Reply
slafleche
Booyeah, it worked! Thank you so much!