Putting Jquery Functions in a Separate file - Joomla

Question

I am building sites in Joomla. I've been adding more and more small jQuery snippets all over the place and I feel like the sites and templates are becoming disorganized. Is there a way to put ALL the jQuery functions inside a single .js file, then include that file inside Joomla's template index.php and finally call any of those functions from any page on Joomla?

For example, inside template index.php:

<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>

Inside sample.js, something like:

<script type="text/javascript">

$(document).ready(function(){
  $(".ease").slideUp(1).delay(400).slideDown(700);
});

$(document).ready(function() {
    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown(400);
    }, 
    function(){
        $('.menu>li>ul').stop(true,true).slideUp();
    });
});
</script>

Inside Joomla Module, something like:

<div class="ease">
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

I am just not sure how to structure the .js file - do I need to use anything else than just script type="text/javascript"? when do I use $(document).ready? etc. All your help would be appreciated.

Answer 1

you don't need separate document.ready blocks all could be done in one wrapping block

$(document).ready(function(){
    $(".ease").slideUp(1).delay(400).slideDown(700);

    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown(400);
    }, 
    function(){
        $('.menu>li>ul').stop(true,true).slideUp();
    });
});

In order to structure the file properly I'd say have one file which is for the core functionality and more precisely you should have separate files for templates, components and modules. for example:

Template

templates/my_template/js/scripts.js

Components

components/com_test1/js/script.js
components/com_test2/js/script.js
components/com_test2/js/script.js

Modules

modules/mod_test1/js/script.js
modules/mod_test1/js/script.js
modules/mod_test1/js/script.js

This way things will be clear what file is responsible for what piece of code. In the files itself if they become quite big you can add some annotations for example:

(function($) {
    # 1. Main menu
    # 2. Accordion block home page
    # 3. Lightbox/Pop-up overlays
    # 4. Tabbed content
    # 5. Misc

    # 1. Main menu
    $('.main-menu').on('click' someFunction);

    # 2. Accordion block home page
    $('.accordion').on('click' someFunction);

    # 3. Lightbox/Pop-up overlays
    //...
})(jQuery);

Answer 2

Ok, I realized this is how it's done. Start out index.php by:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('jquery.framework');
$document = JFactory::getDocument();
$document->addScript(JUri::root() . 'templates/MyTemplate/mainmenu.js');
?>

Inside mainmenu.js, use jQuery instead of $ so it does not conflict with Mootools:

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

Hope this helps somebody down the road.