MoodleDocs - User contributions [en]

Javascript Modules

2018-09-04T12:03:51Z

Patrickthibaudeau: /* Useful links */

{{Moodle 2.9}}

= Javascript Modules =

== What is a Javascript module and why do I care? ==

A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript.

== Why should I package my code as a module? ==

By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:

a) Each smaller piece is simpler to understand / debug

b) Each smaller piece is simpler to test

c) You can re-use common code instead of duplicating it

= How do I write a Javascript module in Moodle? =

Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format.

To edit or create an AMD module in Moodle you need to do a couple of things.

== Install grunt ==

The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.

This means you first have to '''install nodejs''' - and its package manager [https://www.npmjs.com/ npm]. The details of how to install those packages will vary by operating system, but on Linux it's probably similar to "sudo apt-get install nodejs npm". There are downloadable packages for other operating systems here: http://nodejs.org/download/. Moodle currently requires node "lts/carbon" (>=8.9 <9).

Once this is done, you can '''run the command''':

npm install
npm install -g grunt-cli

from the top of the Moodle directory to install all of the required tools. (You may need extra permissions to use the -g option.)

== Development mode ==

To avoid having to constantly run grunt, make sure you set the following in your config.php

<code php>
// Prevent JS caching
$CFG->cachejs = false;
</code>

Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!

In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(

== Running grunt ==

You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.

See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.

If you get the error message

/usr/bin/env: node: No such file or directory

Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911

On Ubuntu 14.04 this fixed it for me:

sudo ln -fs /usr/bin/nodejs /usr/local/bin/node

Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.

== Minimum (getting started) module for plugins ==

This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...

<code javascript>
// Put this file in path/to/plugin/amd/src
// You can call it anything you like

define(['jquery'], function($) {

return {
init: function() {

// Put whatever you like here. $ is available
// to you as normal.
$(".someclass").change(function() {
alert("It changed!!");
});
}
};
});
</code>

This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,
<code javascript>
define(['jquery', 'core/str', 'core/ajax'], function($, str, ajax) {
</code>

The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...

<code php>
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');
</code>

Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed.

js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...

<code php>
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));
</code>

...calls

<code javascript>
return {
init: function(first, last) {
}
</code>

A more comprehensive explanation follows...

== "Hello World" I am a Javascript Module ==
Lets now create a simple Javascript module so we can see how to lay things out.

Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code.

After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js).

Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes.

Lets create a simple module now:

blocks/overview/amd/src/helloworld.js
<code javascript>
// Standard license block omitted.
/*
* @package block_overview
* @copyright 2015 Someone cool
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

/**
* @module block_overview/helloworld
*/
define(['jquery'], function($) {

/**
* Give me blue.
* @access private
* @return {string}
*/
var makeItBlue = function() {
// We can use our jquery dependency here.
return $('.blue').show();
};

/**
* @constructor
* @alias module:block_overview/helloworld
*/
var greeting = function() {
/** @access private */
var privateThoughts = 'I like the colour blue';

/** @access public */
this.publicThoughts = 'I like the colour orange';

};

/**
* A formal greeting.
* @access public
* @return {string}
*/
greeting.prototype.formal = function() {
return 'How do you do?';
};

/**
* An informal greeting.
* @access public
* @return {string}
*/
greeting.prototype.informal = function() {
return 'Wassup!';
};
return greeting;
});
</code>

The most interesting line above is:
<code>
define(['jquery'], function($) {
</code>

All AMD modules must call "define()" as the first and only global scoped piece of code. This ensures the javascript code contains no global variables and will not conflict with any other loaded module. The name of the module does not need to be specified because it is determined from the filename and component (but it can be listed in a comment for JSDoc as shown here).

The first argument to "define" is the list of dependencies for the module. This argument must be passed as an array, even if there is only one. In this example "jquery" is a dependency. "jquery" is shipped as a core module is available to all AMD modules.

The second argument to "define" is the function that defines the module. This function will receive as arguments, each of the requested dependencies in the same order they were requested. In this example we receive JQuery as an argument and we name the variable "$" (it's a JQuery thing). We can then access JQuery normally through the $ variable which is in scope for any code in our module.

The rest of the code in this example is a standard way to define a Javascript module with public/private variables and methods. There are many ways to do this, this is only one.

It is important that we are returning 'greeting'. If there is no return then your module will be declared as undefined.

== Loading modules dynamically ==
What do you do if you don't know in advance which modules will be required? Stuffing all possible required modules in the define call is one solution, but it's ugly and it only works for code that is in an AMD module (what about inline code in the page?). AMD lets you load a dependency any time you like.
<code javascript>

// Load a new dependency.
require(['mod_wiki/timer'], function(timer) {
// timer is available to do my bidding.
});
</code>

== Including an external javascript/jquery library ==
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:

'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''
e.g.
<code javascript>
define("typeahead.js", *[ "jquery" ], function(a0) {
return factory(a0);
});
</code>
will not work, as moodle injects it's own define name when loading the library.

If the library is in AMD format and has a define:
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )
* download the module in both normal and minified versions
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir
* /theme/mytheme/amd/src/jquery.countdown.js

you can now include the module and initialise it (there are multiple ways to do this)
php:

1. Create your own AMD module and initialise it:

In your PHP file:
<code php>
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'initialise', $params);
</code>

Javascript module:
<code javascript>
// /theme/mytheme/amd/src/countdowntimer.js
define(['jquery', 'theme_mytheme/jquery.countdown'], function($, c) {
return {
initialise: function ($params) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
}
};
});
</code>

2. Put the javascript into a mustache template:
<code javascript>
// /theme/mytheme/templates/countdowntimer.mustache

{{#js}}
require(['jquery', 'theme_mytheme/jquery.countdown'], function($) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
{{/js}}
</code>

3. Call the javascript directly from php (although who would want to put javascript into php? ergh):
<code php>
$PAGE->requires->js_amd_inline('
require(['theme_mytheme/jquery.countdown'], function(min) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
');
</code>

== Embedding AMD code in a page ==
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.

<code php>
$PAGE->requires->js_call_amd($modulename, $functionname, $params);
</code>

that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.
Notes:
* the $modulename is the 'componentname/modulename' discussed above
* the $functionname is the name of a public function exposed by the amd module.
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please).
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.

AMD / JS code can also be embedded on a page via mustache templates
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F

== But I have a mega JS file I don't want loaded on every page? ==
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.

== Useful links ==
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)
* [[Useful_core_Javascript_modules]]
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau

[[Category:AJAX]]
[[Category:Javascript]]

Javascript Modules

2018-08-03T19:35:08Z

Patrickthibaudeau: /* Useful links */

{{Moodle 2.9}}

= Javascript Modules =

== What is a Javascript module and why do I care? ==

A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript.

== Why should I package my code as a module? ==

By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:

a) Each smaller piece is simpler to understand / debug

b) Each smaller piece is simpler to test

c) You can re-use common code instead of duplicating it

= How do I write a Javascript module in Moodle? =

Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format.

To edit or create an AMD module in Moodle you need to do a couple of things.

== Install grunt ==

The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.

This means you first have to '''install nodejs''' - and its package manager [https://www.npmjs.com/ npm]. The details of how to install those packages will vary by operating system, but on Linux it's probably similar to "sudo apt-get install nodejs npm". There are downloadable packages for other operating systems here: http://nodejs.org/download/. Moodle currently requires node "lts/carbon".

Once this is done, you can '''run the command''':

npm install
npm install -g grunt-cli

from the top of the Moodle directory to install all of the required tools. (You may need extra permissions to use the -g option.)

== Development mode ==

To avoid having to constantly run grunt, make sure you set the following in your config.php

<code php>
// Prevent JS caching
$CFG->cachejs = false;
</code>

Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!

In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(

== Running grunt ==

You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.

See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.

If you get the error message

/usr/bin/env: node: No such file or directory

Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911

On Ubuntu 14.04 this fixed it for me:

sudo ln -fs /usr/bin/nodejs /usr/local/bin/node

Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.

== Minimum (getting started) module for plugins ==

This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...

<code javascript>
// Put this file in path/to/plugin/amd/src
// You can call it anything you like

define(['jquery'], function($) {

return {
init: function() {

// Put whatever you like here. $ is available
// to you as normal.
$(".someclass").change(function() {
alert("It changed!!");
});
}
};
});
</code>

This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,
<code javascript>
define(['jquery', 'core/str', 'core/ajax'], function($, str, ajax) {
</code>

The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...

<code php>
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');
</code>

Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed.

js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...

<code php>
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));
</code>

...calls

<code javascript>
return {
init: function(first, last) {
}
</code>

A more comprehensive explanation follows...

== "Hello World" I am a Javascript Module ==
Lets now create a simple Javascript module so we can see how to lay things out.

Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code.

After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js).

Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes.

Lets create a simple module now:

blocks/overview/amd/src/helloworld.js
<code javascript>
// Standard license block omitted.
/*
* @package block_overview
* @copyright 2015 Someone cool
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

/**
* @module block_overview/helloworld
*/
define(['jquery'], function($) {

/**
* Give me blue.
* @access private
* @return {string}
*/
var makeItBlue = function() {
// We can use our jquery dependency here.
return $('.blue').show();
};

/**
* @constructor
* @alias module:block_overview/helloworld
*/
var greeting = function() {
/** @access private */
var privateThoughts = 'I like the colour blue';

/** @access public */
this.publicThoughts = 'I like the colour orange';

};

/**
* A formal greeting.
* @access public
* @return {string}
*/
greeting.prototype.formal = function() {
return 'How do you do?';
};

/**
* An informal greeting.
* @access public
* @return {string}
*/
greeting.prototype.informal = function() {
return 'Wassup!';
};
return greeting;
});
</code>

The most interesting line above is:
<code>
define(['jquery'], function($) {
</code>

All AMD modules must call "define()" as the first and only global scoped piece of code. This ensures the javascript code contains no global variables and will not conflict with any other loaded module. The name of the module does not need to be specified because it is determined from the filename and component (but it can be listed in a comment for JSDoc as shown here).

The first argument to "define" is the list of dependencies for the module. This argument must be passed as an array, even if there is only one. In this example "jquery" is a dependency. "jquery" is shipped as a core module is available to all AMD modules.

The second argument to "define" is the function that defines the module. This function will receive as arguments, each of the requested dependencies in the same order they were requested. In this example we receive JQuery as an argument and we name the variable "$" (it's a JQuery thing). We can then access JQuery normally through the $ variable which is in scope for any code in our module.

The rest of the code in this example is a standard way to define a Javascript module with public/private variables and methods. There are many ways to do this, this is only one.

It is important that we are returning 'greeting'. If there is no return then your module will be declared as undefined.

== Loading modules dynamically ==
What do you do if you don't know in advance which modules will be required? Stuffing all possible required modules in the define call is one solution, but it's ugly and it only works for code that is in an AMD module (what about inline code in the page?). AMD lets you load a dependency any time you like.
<code javascript>

// Load a new dependency.
require(['mod_wiki/timer'], function(timer) {
// timer is available to do my bidding.
});
</code>

== Including an external javascript/jquery library ==
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:

'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''
e.g.
<code javascript>
define("typeahead.js", *[ "jquery" ], function(a0) {
return factory(a0);
});
</code>
will not work, as moodle injects it's own define name when loading the library.

If the library is in AMD format and has a define:
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )
* download the module in both normal and minified versions
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir
* /theme/mytheme/amd/src/jquery.countdown.js

you can now include the module and initialise it (there are multiple ways to do this)
php:

1. Create your own AMD module and initialise it:

In your PHP file:
<code php>
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'initialise', $params);
</code>

Javascript module:
<code javascript>
// /theme/mytheme/amd/src/countdowntimer.js
define(['jquery', 'theme_mytheme/jquery.countdown'], function($, c) {
return {
initialise: function ($params) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
}
};
});
</code>

2. Put the javascript into a mustache template:
<code javascript>
// /theme/mytheme/templates/countdowntimer.mustache

{{#js}}
require(['jquery', 'theme_mytheme/jquery.countdown'], function($) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
{{/js}}
</code>

3. Call the javascript directly from php (although who would want to put javascript into php? ergh):
<code php>
$PAGE->requires->js_amd_inline('
require(['theme_mytheme/jquery.countdown'], function(min) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
');
</code>

== Embedding AMD code in a page ==
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.

<code php>
$PAGE->requires->js_call_amd($modulename, $functionname, $params);
</code>

that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.
Notes:
* the $modulename is the 'componentname/modulename' discussed above
* the $functionname is the name of a public function exposed by the amd module.
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please).
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.

AMD / JS code can also be embedded on a page via mustache templates
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F

== But I have a mega JS file I don't want loaded on every page? ==
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.

== Useful links ==
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)
* [[Useful_core_Javascript_modules]]
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau (Oohoo.biz)

[[Category:AJAX]]
[[Category:Javascript]]

Guide to adding third party jQuery for AMD

2018-08-03T17:34:04Z

Patrickthibaudeau: /* Using your third party plugins in your custom java-script */

== Introduction ==

Since Moodle 2.9, Java-script AMD modules are best practice for inserting Java-script in Moodle plugins. Finding it hard to find good documentation, I decided to share the steps I used to add third party jQuery libraries to my plugin. 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 [https://fullcalendar.io/ 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

== Using your third party plugins in your custom java-script ==
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
});
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
});
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

== But wait! The CSS is not loaded ==
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

''Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.''
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Javascript Modules

2018-08-03T12:30:54Z

Patrickthibaudeau: /* Useful links */

{{Moodle 2.9}}

= Javascript Modules =

== What is a Javascript module and why do I care? ==

A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript.

== Why should I package my code as a module? ==

By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:

a) Each smaller piece is simpler to understand / debug

b) Each smaller piece is simpler to test

c) You can re-use common code instead of duplicating it

= How do I write a Javascript module in Moodle? =

Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format.

To edit or create an AMD module in Moodle you need to do a couple of things.

== Install grunt ==

The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.

This means you first have to '''install nodejs''' - and its package manager [https://www.npmjs.com/ npm]. The details of how to install those packages will vary by operating system, but on Linux it's probably similar to "sudo apt-get install nodejs npm". There are downloadable packages for other operating systems here: http://nodejs.org/download/. Moodle currently requires node "lts/carbon".

Once this is done, you can '''run the command''':

npm install
npm install -g grunt-cli

from the top of the Moodle directory to install all of the required tools. (You may need extra permissions to use the -g option.)

== Development mode ==

To avoid having to constantly run grunt, make sure you set the following in your config.php

<code php>
// Prevent JS caching
$CFG->cachejs = false;
</code>

Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!

In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(

== Running grunt ==

You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.

See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.

If you get the error message

/usr/bin/env: node: No such file or directory

Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911

On Ubuntu 14.04 this fixed it for me:

sudo ln -fs /usr/bin/nodejs /usr/local/bin/node

Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.

== Minimum (getting started) module for plugins ==

This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...

<code javascript>
// Put this file in path/to/plugin/amd/src
// You can call it anything you like

define(['jquery'], function($) {

return {
init: function() {

// Put whatever you like here. $ is available
// to you as normal.
$(".someclass").change(function() {
alert("It changed!!");
});
}
};
});
</code>

This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,
<code javascript>
define(['jquery', 'core/str', 'core/ajax'], function($, str, ajax) {
</code>

The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...

<code php>
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');
</code>

Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed.

js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...

<code php>
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));
</code>

...calls

<code javascript>
return {
init: function(first, last) {
}
</code>

A more comprehensive explanation follows...

== "Hello World" I am a Javascript Module ==
Lets now create a simple Javascript module so we can see how to lay things out.

Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code.

After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js).

Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes.

Lets create a simple module now:

blocks/overview/amd/src/helloworld.js
<code javascript>
// Standard license block omitted.
/*
* @package block_overview
* @copyright 2015 Someone cool
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

/**
* @module block_overview/helloworld
*/
define(['jquery'], function($) {

/**
* Give me blue.
* @access private
* @return {string}
*/
var makeItBlue = function() {
// We can use our jquery dependency here.
return $('.blue').show();
};

/**
* @constructor
* @alias module:block_overview/helloworld
*/
var greeting = function() {
/** @access private */
var privateThoughts = 'I like the colour blue';

/** @access public */
this.publicThoughts = 'I like the colour orange';

};

/**
* A formal greeting.
* @access public
* @return {string}
*/
greeting.prototype.formal = function() {
return 'How do you do?';
};

/**
* An informal greeting.
* @access public
* @return {string}
*/
greeting.prototype.informal = function() {
return 'Wassup!';
};
return greeting;
});
</code>

The most interesting line above is:
<code>
define(['jquery'], function($) {
</code>

All AMD modules must call "define()" as the first and only global scoped piece of code. This ensures the javascript code contains no global variables and will not conflict with any other loaded module. The name of the module does not need to be specified because it is determined from the filename and component (but it can be listed in a comment for JSDoc as shown here).

The first argument to "define" is the list of dependencies for the module. This argument must be passed as an array, even if there is only one. In this example "jquery" is a dependency. "jquery" is shipped as a core module is available to all AMD modules.

The second argument to "define" is the function that defines the module. This function will receive as arguments, each of the requested dependencies in the same order they were requested. In this example we receive JQuery as an argument and we name the variable "$" (it's a JQuery thing). We can then access JQuery normally through the $ variable which is in scope for any code in our module.

The rest of the code in this example is a standard way to define a Javascript module with public/private variables and methods. There are many ways to do this, this is only one.

It is important that we are returning 'greeting'. If there is no return then your module will be declared as undefined.

== Loading modules dynamically ==
What do you do if you don't know in advance which modules will be required? Stuffing all possible required modules in the define call is one solution, but it's ugly and it only works for code that is in an AMD module (what about inline code in the page?). AMD lets you load a dependency any time you like.
<code javascript>

// Load a new dependency.
require(['mod_wiki/timer'], function(timer) {
// timer is available to do my bidding.
});
</code>

== Including an external javascript/jquery library ==
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:

'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''
e.g.
<code javascript>
define("typeahead.js", *[ "jquery" ], function(a0) {
return factory(a0);
});
</code>
will not work, as moodle injects it's own define name when loading the library.

If the library is in AMD format and has a define:
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )
* download the module in both normal and minified versions
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir
* /theme/mytheme/amd/src/jquery.countdown.js

you can now include the module and initialise it (there are multiple ways to do this)
php:

1. Create your own AMD module and initialise it:

In your PHP file:
<code php>
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'initialise', $params);
</code>

Javascript module:
<code javascript>
// /theme/mytheme/amd/src/countdowntimer.js
define(['jquery', 'theme_mytheme/jquery.countdown'], function($, c) {
return {
initialise: function ($params) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
}
};
});
</code>

2. Put the javascript into a mustache template:
<code javascript>
// /theme/mytheme/templates/countdowntimer.mustache

{{#js}}
require(['jquery', 'theme_mytheme/jquery.countdown'], function($) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
{{/js}}
</code>

3. Call the javascript directly from php (although who would want to put javascript into php? ergh):
<code php>
$PAGE->requires->js_amd_inline('
require(['theme_mytheme/jquery.countdown'], function(min) {
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
');
</code>

== Embedding AMD code in a page ==
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.

<code php>
$PAGE->requires->js_call_amd($modulename, $functionname, $params);
</code>

that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.
Notes:
* the $modulename is the 'componentname/modulename' discussed above
* the $functionname is the name of a public function exposed by the amd module.
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please).
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.

AMD / JS code can also be embedded on a page via mustache templates
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F

== But I have a mega JS file I don't want loaded on every page? ==
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.

== Useful links ==
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)
* [[Useful_core_Javascript_modules]]
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau

[[Category:AJAX]]
[[Category:Javascript]]

Guide to adding third party jQuery for AMD

2018-08-03T12:27:10Z

Patrickthibaudeau:

== Introduction ==

Since Moodle 2.9, Java-script AMD modules are best practice for inserting Java-script in Moodle plugins. Finding it hard to find good documentation, I decided to share the steps I used to add third party jQuery libraries to my plugin. 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 [https://fullcalendar.io/ 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

== Using your third party plugins in your custom java-script ==
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

== But wait! The CSS is not loaded ==
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

''Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.''
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:26:56Z

Patrickthibaudeau:

== Introduction ==

Since Moodle 2.9, Java-script AMD modules are best practice for inserting Java-script in Moodle plugins. Finding it hard to find good documentation, I decided to share the steps I used to add third party jQuery libraries to my plugin. 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 [https://fullcalendar.io/ 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

== Using your third party plugins in your custom java-script ==
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

== But wait! The CSS is not loaded ==
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

''Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.''
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:25:51Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

== Introduction ==

Since Moodle 2.9, Java-script AMD modules are best practice for inserting Java-script in Moodle plugins. Finding it hard to find good documentation, I decided to share the steps I used to add third party jQuery libraries to my plugin. 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 [https://fullcalendar.io/ 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

''Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.''
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:25:09Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

== 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. Finding it hard to find good documentation, I decided to share the steps I used to add third party jQuery libraries to my plugin. 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 [https://fullcalendar.io/ 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

''Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.''
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:22:03Z

Patrickthibaudeau: /* But wait! The CSS is not loaded */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

''Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.''
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:21:39Z

Patrickthibaudeau: /* But wait! The CSS is not loaded */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css in php. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:20:54Z

Patrickthibaudeau: /* Using your third party plugins in your custom java-script */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do so, see the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:19:58Z

Patrickthibaudeau: /* Using your third party plugins in your custom java-script */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>
'''##IMPORTANT##'''
Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:18:31Z

Patrickthibaudeau: /* Using your third party plugins in your custom java-script */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
''For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]'' 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]

=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:17:14Z

Patrickthibaudeau: /* File definitions */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,shim_export_value) {
return shim_export_value;
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>

=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules] 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]
=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:16:03Z

Patrickthibaudeau: /* Configure the shim file */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
''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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,'shim_export_value') {
return 'shim_export_value';
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>
=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules] 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]
=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:15:23Z

Patrickthibaudeau: /* Configure the shim file */

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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. 
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'' 
The final code looks like this.
<code 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'},
}
});
});
</code>

=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,'shim_export_value') {
return 'shim_export_value';
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>
=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules] 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]
=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

Guide to adding third party jQuery for AMD

2018-08-03T12:12:26Z

Patrickthibaudeau: Created page with "== 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 ar..."

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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''
<code 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'},
}
});
});
</code>
=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,'shim_export_value') {
return 'shim_export_value';
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>
=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules] 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]
=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

User:Patrick Thibaudeau

2018-08-03T12:06:48Z

Patrickthibaudeau: Blanked the page

User:Patrick Thibaudeau

2018-08-03T12:05:17Z

Patrickthibaudeau:

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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''
<code 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'},
}
});
});
</code>
=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,'shim_export_value') {
return 'shim_export_value';
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>
=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules] 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]
=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

Note: While working on this plugin, I noticed that jQueryUI css was not loading, so I downloaded jQueryUI and added the css to my plugin.
<code php>
$PAGE->requires->css('/local/writingcentre/css/jquery-ui.min.css');
</code>

User:Patrick Thibaudeau

2018-08-03T12:02:02Z

Patrickthibaudeau:

== 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.

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

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

=== 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
<code js>
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
}
});
});
</code>
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''
<code 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'},
}
});
});
</code>
=== 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.
<code js>
define(['your_plugin_type_and_name'/'name_of_your_config_file', 'shim_name'], function(unused,'shim_export_value') {
return 'shim_export_value';
}
);
</code>
Here is an example of the moment file.
<code js>
define(['local_writingcentre/config', 'moment'], function(unused,moment) {
return moment;
}
);
</code>

and the fullcalender.js file
<code js>
define(['local_writingcentre/config', 'fullcalendar'], function(unused,fullCalendar) {
return fullCalendar;
}
);
</code>
=== Using your third party plugins in your custom java-script ===
So now that all is configured, you need to be able to use these third party plugins in your java-script files. 
Let's start by creating a java-script file. In this case, it is the code for managing the writingcentre. So let's call the file manage.js. 
This file must always start by defining the java-script that you require. In this case, we require jQuery, jQueryUI, moment and fullCalendar. I also add a variable wwwroot that I will use throughout the script. Note that this is not required, but it is my preferred way of working. 
For more information on what is required in this file, refer to [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules] 
Your file should look like the code below.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
//Do your java-script magic here
}

return {
init: function () {
initManage();
}
};
}
</code>
Now you are ready to use the third party libraries. Here is a sample of how I used fullCalendar. Note that this is not the complete java-script file, only a small portion of the code.
<code js>
define(['jquery', 'jqueryui', 'local_writingcentre/moment', 'local_writingcentre/fullcalendar'], function ($, jqui, moment, fullCalendar) {
var wwwroot = M.cfg.wwwroot;

function initManage() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
businessHours: {
start: opentime, // a start time (10am in this example)
end: closetime, // an end time (6pm in this example)
},
handleWindowResize: true,
contentHeight: 'auto',
minTime: opentime + ':00',
maxTime: closetime + ':00',
slotDuration: '00:10:00',
slotEventOverlap: true,
events:
{
url: wwwroot + '/local/writingcentre/events.php?servicetype=' + serviceType,
type: 'POST',
data: function () {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.format("MM"),
year: fecha.format("YYYY")
}
},
error: function(err) {
console.log(err);
alert('An error occured trying to retrieve the calendar events');

}
},

weekends: false,
defaultView: 'agendaWeek',
dayClick: function (date, jsEvent, view) {
var hour = date.format('HHmm');
var alldaydate = date.format('YYYYMMDD');
if ($('#allday-' + alldaydate).val() != 'true') {
window.location.href = wwwroot + "/local/writingcentre/appointment.php?defaultdate=" + date.format() + "&servicetype=" + serviceType;
} else {
alert('It is not passible to book an appointment on this day. Please select another time');
}

},
eventClick: function (event) {
var appointment = '';
if (event.firstvisit) {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
"Remaining seats: " + event.remaining + " " +
"Registered users: " +
event.registeredusers;

$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 'auto',
modal: true,
buttons: [
{
text: "Ok",
class: "btn btn-default",
click: function () {
$(this).dialog("close");
}
},
{
text: "Delete",
class: "btn btn-danger",
click: function () {
$(this).dialog("close");
$('#delete').dialog({
resizable: false,
height: 400,
modal: true,
buttons: [
{
text: "Confirm",
class: "btn btn-danger",
click: function () {
delete_event(event.id, wwwroot);
$(this).dialog("close");
}
},
{
text: "Cancel",
class: "btn btn-warning",
click: function () {
$(this).dialog("close");
}
}
]

});
}
}
]
});
} else if (event.event == 'true') {
if (event.closed == 1) {
alert('Sorry the Writing centre is closed during this time.')
} else {
appointment = event.title + " " +
event.start.format('YYYY-MM-DD HH:mm') + " " +
" Remaing seats: " + event.remaining;
$('#dialog_content').html(appointment);
$('#dialog').dialog({
resizable: false,
width: 600,
height: 300,
modal: true,
buttons: {
"Register": function () {
if (event.remaining == 0) {
alert('Sorry, this is event is full');
} else {
$.ajax({
url: "register.php?id=" + event.id,
dataType: "text",
success: function (result) {
alert(result);
window.location.href = wwwroot + "/local/writingcentre/index.php?defaultdate=" + event.start.format('YYYY-MM-DD HH:mm');
}
});
}
},
"Close": function () {
$(this).dialog("close");

}
}
});
}
}
}
});
}

return {
init: function () {
initManage();
}
};
}
</code>

Remember, in order for your java-script to work, you must use grunt to compile your java-script and you must include your java-script in your templates or php files. For more information on how to do the section "Including an external javascript/jquery library" at [https://docs.moodle.org/dev/Javascript_Modules Javascript Modules]
=== But wait! The CSS is not loaded ===
The above steps only load the java-script. If your third party plugin also has CSS, you must load the CSS using $PAGE->requires->css. Here is how I added the CSS for fullCalendar.
<code php>
$PAGE->requires->css('/local/writingcentre/js/fullcalendar-3.9.0/fullcalendar.min.css', true);
</code>

User:Patrick Thibaudeau

2018-08-03T11:50:47Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

User:Patrick Thibaudeau

2018-08-03T11:35:38Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

User:Patrick Thibaudeau

2018-08-03T11:33:06Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

User:Patrick Thibaudeau

2018-08-03T11:22:39Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

User:Patrick Thibaudeau

2018-08-03T11:04:49Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

== Step by step guide to adding third party jQuery for AMD ==

Since Moodle 2.9, Javascript AMD modules are best practice for inserting Javascript 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 refering to the jQuery plugin called Fullcalendar. I used Fullcalender for a local plugin that I developed for Moodle 2.8. I needed to upgrade for Moodle 3.5 and figured I should use the new AMD model to add the javascript.

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

# You '''must''' create an amd folder with two subfolders: src and build.
# Create a js folder. This folder will contain all third party jQuery/Javascripts
# Download the jQuery plugin and extract/copy it to your js folder.

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

User:Patrick Thibaudeau

2018-08-03T11:03:38Z

Patrickthibaudeau: /* Step by step guide to adding third party jQuery for AMD */

== Step by step guide to adding third party jQuery for AMD ==

Since Moodle 2.9, Javascript AMD modules are best practice for inserting Javascript 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 refering to the jQuery plugin called Fullcalendar. I used Fullcalender for a local plugin that I developed for Moodle 2.8. I needed to upgrade for Moodle 3.5 and figured I should use the new AMD model to add the javascript.

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

# You '''must''' create an amd folder with two subfolders: src and build.
# Create a js folder. This folder will contain all third party jQuery/Javascripts

The folder structure should be similar to the image below. 

[[File:folderstructure1.png|caption]]

File:folderstructure1.png

2018-08-03T11:01:14Z

Patrickthibaudeau:

User:Patrick Thibaudeau

2018-08-03T10:59:53Z

Patrickthibaudeau: Created page with "== Step by step guide to adding third party jQuery for AMD == Since Moodle 2.9, Javascript AMD modules are best practice for inserting Javascript in Moodle plugins. Here are..."

== Step by step guide to adding third party jQuery for AMD ==

Since Moodle 2.9, Javascript AMD modules are best practice for inserting Javascript 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 refering to the jQuery plugin called Fullcalendar. I used Fullcalender for a local plugin that I developed for Moodle 2.8. I needed to upgrade for Moodle 3.5 and figured I should use the new AMD model to add the javascript.

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

# You '''must''' create an amd folder with two subfolders: src and build.
# Create a js folder. This folder will contain all third party jQuery/Javascripts

The folder structure should be similar to the image below.

Creating roles programmatically

2013-03-01T18:29:22Z

Patrickthibaudeau: /* install.php */

You may find that the default roles do not answer the needs of your plugin. In that case, you want to create a role programmatically.

==Setup==
We will use a plugin called myplugin.

It is best to create capabilities for your plugin first as they will be used to create the role. You can also use default Moodle capabilities. For more information, please refer to [[Roles#Programming_Interface]]
===install.php===
The first step is to create an install.php file in the db folder of your plugin.
<pre>/mod/myplugin/db/install.php</pre>

Open this new file in your favorite editor and add the following function
<pre>defined('MOODLE_INTERNAL') || die();

function xmldb_local_myplugin_install() {
global $CFG, $DB, $OUTPUT;

}</pre>

You need to identify the context. So add the following code snippit.
<pre>$context = context_system::instance();</pre>

Now lets find out if the role already exists. We will also need the manager role in order to add managers to the role. This is not required, but I like to add managers so that they can assign the role to other users. Otherwise, only site administrators can add roles.
<pre>$manager_role = $DB->get_record('role', array('shortname' => 'manager'));
$mwsync_superadmin_role = $DB->get_record('role', array('shortname' => 'local_myplugin_admin'));</pre>

Creating roles programmatically

2013-03-01T18:28:47Z

Patrickthibaudeau: /* Setup */

You may find that the default roles do not answer the needs of your plugin. In that case, you want to create a role programmatically.

==Setup==
We will use a plugin called myplugin.

It is best to create capabilities for your plugin first as they will be used to create the role. You can also use default Moodle capabilities. For more information, please refer to [[Roles#Programming_Interface]]
===install.php===
The first step is to create an install.php file in the db folder of your plugin.
<pre>/mod/myplugin/db/install.php</pre>

Open this new file in your favorite editor and add the following function
<pre>defined('MOODLE_INTERNAL') || die();

function xmldb_local_myplugin_install() {
global $CFG, $DB, $OUTPUT;

}</pre>

You need to identify the context. So add the following code snippit.
<pre>$context = context_system::instance();</pre>

Now lets find out if the role already exists. We will also need the manager role in order to add managers to the role. This is not required, but we like to add managers so that they can assign the role to other users. Otherwise, only site administrators can add roles.
<pre>$manager_role = $DB->get_record('role', array('shortname' => 'manager'));
$mwsync_superadmin_role = $DB->get_record('role', array('shortname' => 'local_myplugin_admin'));</pre>

Creating roles programmatically

2013-03-01T18:12:16Z

Patrickthibaudeau: /* Setup */

Creating roles programmatically

2013-03-01T18:05:19Z

Patrickthibaudeau: Created page with "You may find that the default roles do not answer the needs of your plugin. In that case, you want to create a role programmatically. ==Setup== The first step is to create an in..."

You may find that the default roles do not answer the needs of your plugin. In that case, you want to create a role programmatically.

==Setup==
The first step is to create an install.php file in the db folder of your plugin.
<pre>''moodle root''/mod/myplugin/db/install.php</pre>