User:Patrick Thibaudeau

Step by step guide to adding third party jQuery for AMD

Since Moodle 2.9, Java-script AMD modules are best practice for inserting Java-script in Moodle plugins. Here are the steps required to add third party jQuery libraries. Note that there may be other ways to do this, however, this is the way I found that worked for my projects. Throughout this tutorial, I will be referring to the jQuery plugin called Fullcalendar. I use Fullcalender for a local plugin called writingcentre that I developed for Moodle 2.8. I needed to upgrade the plugin for Moodle 3.5 and figured I should use the new AMD model to add the java-script.

Create the folder structure

Although you can use any folder structure you like, this is my preferred way of laying out my folder structure.

1. You must create an amd folder with two subfolders: src and build.
2. Create a js folder. This folder will contain all third party jQuery/Java-scripts
3. Download the jQuery plugin and extract/copy it to your js folder.

The folder structure should be similar to the image below.

Configure the shim file

We need a file to configure requirejs so that the third party java-scripts can be used throughout our plugin.

In the amd->src folder create a file called config.js. Note that you can call this file what ever you want. Just remember that you will need to refer to it in later steps.

Enter the following code into the file define([], function () {

   window.requirejs.config({
       paths: {
          //Enter the paths to your required java-script files  
       },
       shim: {
          //Enter the "names" that will be used to refer to your libraries
       }
   });

}); In the case of FullCalendar, there are two java-script files required for the plugin to work. Add the path to the two files within the paths array and then add the name to refer to these files in the shim array. The final code looks like this.
M.cfg.wwwroot is a java-script function provided by Moodle that returns the url of your site.
Note: You must enter the paths and shim in the order that the files must load. In this case, moment.js must load before fullcalendar.js define([], function () {

   window.requirejs.config({
       paths: {
           "moment": M.cfg.wwwroot + '/local/writingcentre/js/fullcalendar-3.9.0/lib/moment.min',
           "fullcalendar": M.cfg.wwwroot + '/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min',
       },
       shim: {
           'moment': {exports: 'moment'},
           'fullcalendar': {exports: 'fullCalendar'},
       }
   });

});

File definitions

You must now define the third party files as AMD. For each shim in your configuration file, create a java-script file in the amd->src folder. In the above case, we would create two files: moment.js and fullcalendar.js Within each file, you will enter the following code. define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,'shim_export_value') {

     return 'shim_export_value';
  }

); Here is an example of the moment file. define(['local_writingcentre/config', 'moment'], function(unused,moment) {

     return moment;
  }

);

and the fullcalender.js file define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {

     return fullCalendar;
  }

);