Including javascript files in theme config...

Including javascript files in theme config...

by Richard Bakos -
Number of replies: 10

Hello everyone,

Currently, I have some inline javascript in the frontpage.php and general.php files of my theme. I want to consolidate all of the scripting into a single js file and reference it in the config like so:

$THEME->javascripts = array(
    'jquery-1.9.0.min',
    'jquery-migrate-1.0.0.min',
    'custom',
);

If I take the inline javascript out though, and put them into a custom.js file, those functions disappear... So obviously the page is not pulling in the javascript file(s) from the array in the config file... I know the custom.js file isn't loading and it makes me wonder if the jquery libraries are not loading either... Here is the inline javascript:

jQuery('.backtotop').click(function(){
    jQuery('html, body').animate({scrollTop:0}, 'slow');
});

Is there a step that I am missing to get these js files to load via the array in the config file?

Average of ratings: -
In reply to Richard Bakos

Re: Including javascript files in theme config...

by Amy Groshek -
I have encountered issues with minification of already-minified files before. If Moodle's minification script tries to minify already-minified files, then the result is a silent fail, and half of your JS not making it into the page. You can test this by toggling Theme Designer Mode. If things are working with Theme Designer Mode on, then stop working when you turn it off (enabling cache and hence minification) you've got an error in your JS or minification is choking on an already minified file. You can also test by loading non-minified versions of your libraries, rather than minified.

Average of ratings: -
In reply to Amy Groshek

Re: Including javascript files in theme config...

by Richard Bakos -

Hello Amy,

Hmm... Well on my local instance of the this moodle project is in theme designer mode but the production server is not... Still, makes no difference on the local machine... Even with theme designer mode on, my script doesn't come through... The back-to-top arrow is there... It just doesn't function... I know there is no errors in my script so I'll try including the non-minified libraries in the config and see if that does anything... Thanks for the suggestion! Fingers crossed... 

Average of ratings: -
In reply to Richard Bakos

Re: Including javascript files in theme config...

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

If you haven't already, you need to place all your jQuery scripts in a javascript directory inside your theme.

moodle/theme/yourthemename/javascript

Also, the fact the custom.js is not being picked up may also depend on where your jQuery is being called from. If that snippet of code, you pasted above,  needs to be in a specific place within the body of the page then it's better being left where it was.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Including javascript files in theme config...

by Richard Bakos -

Hello Mary,

Yes, I've already placed all my javascript/jquery files in the themes javascript folder...

The script needs to be loaded right before the closing </body> tag, after the jquery library is loaded... I figured this would be the default behaviour, however, when I look at the source of a rendered page from the moodle instance, there is no trace of the jquery library or my script file... But I know it's loading jQuery into the document somehow because my script works inline and uses jQuery... 

I mean, it's not hurting anything leaving it inline or even pointing to it in the layout files like so:

<script src="<?php echo $CFG->wwwroot.'/theme/theme_name/javascript/custom.js' ?>"></script>

But... There has to be a way to load the files via the theme's config, right? Why else would such an array in the config file exist otherwise? I'm more just curious and wishing to further understand moodle development than anything else... Loading from the config file seems like it would be more efficient too... My employer tasked me with becoming the go-to guy in the company for everything Moodle... So fully understanding it, inside and out has become a goal of mine... While I think I have a pretty good grasp, I'm still learning all the time =)

So... Any further insight into loading .js files from the config file is appreciated... 

Average of ratings: -
In reply to Richard Bakos

Re: Including javascript files in theme config...

by Richard Bakos -

Edit/correction:

The script doesn't have to be loaded before the closing </body> task... It's just best practice to do so... It is however, required that it's loaded after the jQuery library...

Average of ratings: -
In reply to Richard Bakos

Re: Including javascript files in theme config...

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

You can use this method to add .js scripts into the head of the page...

$THEME->javascripts = array( 'jquery-1.9.0.min', 'jquery-migrate-1.0.0.min' );

and this method to add .js scripts at the foot of the page...

$THEME->javascripts_footer = array( 'custom' );

You also need to ensure that there are NO // infront of those lines in other word that they are NOT commented out!

Also you can leave off the <script></script> tags in the custom.js file if you have added them.

HTH

Mary

Average of ratings: -
In reply to Richard Bakos

Re: Including javascript files in theme config...

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I was just looking at this script and realise it works similar to one in the Decaf theme, the only difference is that Decaf scroller works using HTML/CSS only...

The HTML...(added to the bottom of the layout/general & layout/frontpage.php files)

<?php echo $OUTPUT->standard_end_of_body_html() ?>
<div id="back-to-top">
    <a class="arrow" href="#">&#9650;</a>
    <a class="text" href="#">Back to Top</a>
</div>
</body>
</html>

The CSS...(added to your theme's CSS file)

#back-to-top {
    position: fixed;
    bottom: 32px;
    right: 40px;
    text-align: center;
    cursor: pointer;
    opacity: .5;
    filter:alpha(opacity=50);
    display:none;
}
#back-to-top a.arrow {
    padding: 5px 10px;
    font-size: 36px;
    color: #333;
    background: #EEE;
    border: 1px solid #CCC;
    border-bottom: 1px solid #AAA;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
#back-to-top a.text {
    display: block;
    background-color: white;
    visibility: hidden;
    position: relative;
    top: 10px;
}
#back-to-top a {
    text-decoration: none;
    border: 0;
    outline: none;
}

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Including javascript files in theme config...

by Richard Bakos -

Heya Mary...

Thanks for that... It may prove to be useful in the future on another project... For this though, I'm just determined to get javascript loaded through the theme's config in an attempt to just learn how to do it... Down the road, there will be some javascript intensive stuff I'll be attempting to impliment that I certainly don't want to put inline... 

Also, the javascript+css method I have going uses less lines/characters... I'm a stickler when it comes to load time/file size... and I like the animated effect of sliding back to the top rather than just jumping back to the top... 

I could see this being useful for the end of articles/lessons/etc... Just as a text link... I think I might try this in a non-moodle personal project actually =)

Average of ratings: -
In reply to Richard Bakos

Re: Including javascript files in theme config...

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You may find this useful...

http://docs.moodle.org/dev/Using_jQuery_with_Moodle_2.0

Average of ratings: -
In reply to Mary Evans

Re: Including javascript files in theme config...

by Richard Bakos -

:facepalm:... How did I miss this??? Just read it and it makes sense and will probably help a lot getting past this hump... I hate it when two libs conflict... Is it common for people to have issues with Yui and jQuery conflicting in a moodle environment?

Average of ratings: Useful (1)