Themes

Custom JavaScript in Boost Theme

 
Picture of Jeremy Bell
Custom JavaScript in Boost Theme
 

I want to add some custom JavaScript to the Boost Theme.  I'm running on 3.2.3.

What I've tried (note this process worked for other themes):

  1. Create a "javascript" folder in my Boost theme folder.
  2. Add the line $THEME->javascripts_footer=array('customJavaScript'); to the Boost config.php file.





Any ideas on where I'm suppose to put my custom javascript?

 
Average of ratings: -
It's only an avatar...
Re: Custom JavaScript in Boost Theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

Perhaps if you explained what it is you are adding to this theme that requires JS to make it work...we may be able to help you.

Thanks

Mary

 
Average of ratings: -
Picture of Jeremy Bell
Re: Custom JavaScript in Boost Theme
 

Hello,

Are you saying it's not possible to add a custom javascript file with the theme?

Thanks,

Jeremy

 
Average of ratings: -
It's only an avatar...
Re: Custom JavaScript in Boost Theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

You have already shown how to do this in your original question, I assumed that is what you had done, so your quesion came as a bit of a shock, that is why I asked you to explain what you were trrying to achive.

You started off saying that the JS code worked in other themes. So why do you think Boost is any different? Have you tried it yet?  There is no reason as far as I know to suggest it wont work. If the code worked in other themes then it should work in Boost.

My only concern is that it is not good practice to add to CORE themes, but better to make a child theme based on Boost, such as the Photo theme.

Hope this answers your question?

Thanks

Mary

 
Average of ratings: -
Picture of Jeremy Bell
Re: Custom JavaScript in Boost Theme
 

That method doesn't work anymore for the Boost architecture it seems.

 
Average of ratings: -
It's only an avatar...
Re: Custom JavaScript in Boost Theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

It may well help if you read this section of the Moodle Doc on the subject of JavaScript in a Mustache Template

https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F

 
Average of ratings: -
Picture of Chris Kenniburg
Re: Custom JavaScript in Boost Theme
Particularly helpful MoodlersPlugin developers

Adding js is a bit different on boost based themes.  I was able to get js tooltips working by adding this to the bottom the mustache templates:

https://github.com/dbnschools/moodle-theme_fordson/blob/master/templates/columns2.mustache#L130

I'm not even sure this is 100% correctly done.  We stumbled across how to do it.  The old way of adding js doesn't apply to the best of my knowledge.

This page near the bottom shows how to use JavaScript in a page.

https://docs.moodle.org/dev/Templates

 
Average of ratings: -
Picture of Jeremy Bell
Re: Custom JavaScript in Boost Theme
 
@Chris


Yea that's a bummer that we can't just slap in a custom js file. Looks like I'll have to learn how to override templates and then add JS using mustache.  That's going to take awhile to learn! lol

 
Average of ratings: -
It's only an avatar...
Re: Custom JavaScript in Boost Theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Don't under estimate it...you will probably find it quite easy once you get into the swing of things.

At least we have jQuery now...a year or so ago we didn't hence the JS directory.

I am not a JS coder, but I have managed to add a script or two into Moodle before today. LOL

Sorry I wasn't much help as I was not aware that the old style of doing things had changed.

Ah well you live and learn!

Cheers

Mary

 
Average of ratings: -
Raymond
Re: Custom JavaScript in Boost Theme
 

Hi Mary,

I'm hoping that maybe you can help me here. I searched through forums for jquery ui usage and this is the first post I could find.

I did this in my discuss.js file

   require(['jquery', 'jqueryui'], function ($, jqui) {

    // JQuery is available via $

    // JQuery UI is available via $.ui

    $.ui("#draggable").draggable();

});

and then in discuss.php file I included this file using $PAGE->requires->js('/mod/discussions/js/discuss.js');

I then have a div in discuss.php with an id of draggable. But when i test for the draggable capability which comes with jquery ui, nothing happens. And I have cleared my caches quite thoroughly.

Please point me in the right direction here on how I can get my plugin to start using jquery UI.

Regards, Ray

 
Average of ratings: -
It's only an avatar...
Re: Custom JavaScript in Boost Theme
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Raymond, 

I am no expert, but wondered if you should have used 

$.ui instead of jqui

In the function part on the first line?

function($, $.ui)

A wild guess...to tell you the truth this is all beyond me at the moment.

Besides, I am off to London tomorrow to see my two new grand-children...twin girls.

JQuery will have to wait until I get back next week.

Kind regards,

Mary

 
Average of ratings: -
Gareth J Barnard
Re: Custom JavaScript in Boost Theme
Core developersParticularly helpful MoodlersPlugin developers

require(['jquery', 'jqueryui'], function ($, jqui) {
    // JQuery is available via $
    // JQuery UI is available via $.ui
    $.ui("#draggable").draggable();
});
Is wrong as the comment does not match the parameters to the function.  Thus jQueryUI is available via 'jqui' and not '$.ui'.

But given https://jqueryui.com/draggable/ then it looks like jQueryUI is added to '$', so try just '$("#draggable").draggable();'.

Then looking at: https://docs.moodle.org/dev/jQuery#What_about_JQuery_UI_.3F - looks odd.

 
Average of ratings: -
Raymond
Re: Custom JavaScript in Boost Theme
 
Hi guys,


Thanks for the responses. At least this confirms that I'm not as daft as I thought I was!! I have tried both

require(['jquery', 'jqueryui'], function ($, jqui) {
    // JQuery is available via $
    // JQuery UI is available via $.ui
    $.jqui("#draggable").draggable();
});
and

require(['jquery', 'jqueryui'], function ($) {
    // JQuery is available via $
    // JQuery UI is available via $.ui
    $("#draggable").draggable();
});
and still, I'm not getting any jquery ui functionality in the browser.
 
Average of ratings: -
Picture of Richard Oelmann
Re: Custom JavaScript in Boost Theme
Core developersParticularly helpful MoodlersPlugin developersTesters

Hi Jeremy

With regard to the mustache templates, while I still can't say I like them and find them just another layer, I would say they are not that difficult to get your head around, and once you can get to grips with the basics, overriding existing templates to add a line like the java script call is really quite straightforward - for simple things like that, it's easier than overriding a renderer. 

When you get to writing your own and having to write functions to serve template contexts etc it starts to get more complex, but I'm getting there now with the theme I'm currently building. 

Richard 

 
Average of ratings: -
Picture of Jeremy Bell
Re: Custom JavaScript in Boost Theme
 

@Richard

Cool you give me hope that it's as easy as finding the right template and editing the template to include the JS call.

 
Average of ratings: -
Picture of Chris Kenniburg
Re: Custom JavaScript in Boost Theme
Particularly helpful MoodlersPlugin developers

Jeremy,

Today I had to figure this out and I can tell you how I did it.  

First, put custom javascript file in theme/javascript folder.  

https://github.com/dbnschools/moodle-theme_fordson/tree/master/javascript


Then call it in the theme layout file.  In this case I also had to use jquery as seen below.

https://github.com/dbnschools/moodle-theme_fordson/blob/master/layout/frontpage.php#L71-L72


Then it just seemed to work.  This was just to make a "back to top" scroll button appear.  I did not use the mustache template and i don't know how I would have done it differently.  

This worked for me and maybe it will help you.  The 3.3 version of Academi also calls some custom javascript so check out how they do it too.

 
Average of ratings: Useful (2)