Tagged: javascript

Following JS file can be included, that can disable

• Mouse Right Click
• Opening of developer console in Browser
• Disable Cut / Copy / Paste

Following is the code

You just need to unzip this. This will show an amd folder. this contains the compiled file as well.

put that folder into plugin

and call this js by putting this php code on any page

// remember : local_poc means you are writing local plugin name as poc, so you will put amd folder in poc directory

//if you are writing block then, 
//$PAGE->requires->js_call_amd('block_poc/disabler', 'init');

$PAGE->requires->js_call_amd('local_poc/disabler', 'init');

for more about javascript in moodle , read following

After moodle 2.9 , there is a change, how the js should be added in the php page, specially for the jQuery.

<script type="javascript"> console.log('working');</script>

Jquery library played a vital role for the utilisation of JS. if you want to use jquery, you can include Jquery library from CDN.

In moodle, it is already there.

but if you want to utilize this OR you user $ or jQuery in developer console , it will not be available.

Long story in short,

you need to include jQuery explicitly on the php page by adding this line before header output. (echo $OUTPUT->header();)

$PAGE->requires->jquery();

Now jQuery will be available and you can freely use that.

How to include other/custom Js files ?

//js
$PAGE->requires->js(new moodle_url('/js file path'), true);
// css
$PAGE->requires->css(new moodle_url('/js file path'), true);

how to utilise the existing pre-built module or the way to write up javascript module for moodle.

From Moodle 2.9 , moodle supports js written using AMD (Asynchronous Module Definition). So how to write that ? The overall idea is , you will be writing a query plugin , that will be compiled before including on page and will be included from PHP.

1. you will be writing a js file with jQuery plugin architecture.you need to put your file in folder structure <plugin>/amd/src/<jsfile>.js
2. you will compiling that through grunt. grunt will require the node js setup on machine. Moodle already comes with grunt file for AMD modules. so, you just need to setup nodejs, and grunt. after compiling , there will be build folder inside amd and minified js file will be there
3. that can be included using php code

Step-1 : writing JS file.

let say you are writing local plugin and plugin name is poc.

you need to create a folder structure “<root>/local/poc/amd/src/demo.js”

define(['jquery'], function($) {
//  java script code
function logMe(str){
console.log(str);
}

var callthisoninit = function (phpparam){
logMe("working");
};
// as this return variable will be invoked , when we include this plugin through php. you can name it as you want
return callthisoninit;
});

Step-2 : Compiling Part

[this is process, steps may be different for as per OS]

• Install NVM first ( this is node version manager, it will install suitable node verison)
• go to moodle codebase root directory as grunt file is there,
  nvm install
  nvm use
• now install the node modules
  npm install
• Install the grunt
  npm install -g grunt-cli
• Remember this : you need to go to the directory where the amd folder is. if you run this on moodle codebase root, it will re-compile all amd src.
• hope , you are on the path : <codebase>/local/poc
• run the grunt
  grunt amd
• It will show the message on successful compilation. 1 files created. it should automatically create build folder and minified file in /local/poc/amd/ directory. If you don’t find it there, check the directory where the moodle codebase is.
• Compiling is done.
  

Step-3: Include the compile Module through PHP

It is recommended to use below code in config.php to prevent js caching

$CFG->cachejs = false;

go to the php file, and write the following lines

// local_poc : <codebase>/local/poc
// demo : js file name without .js
// callthisoninit the function name that should be called as the js loads
// $param : php value if we want to pass into javascript code
// like any id, or other values

$PAGE->requires->js_call_amd('local_poc/demo', 'callthisoninit', array($param));

Now , we have successfully wrote the JS plugin

You can also utilise the prebuilt JS plugin with your plugin while writing JS file.

// core/tree is the moodle javascript module and now it will be available to use with Tree variable
 
define(['jquery','core/tree'], function($, Tree) {
//  java script code
function logMe(str){
console.log(str);
}

var callthisoninit = function (phpparam){
logMe("working");
console.log(Tree);
};
// as this return variable will be invoked , when we include this plugin through php. you can name it as you want
return callthisoninit;
});

More about java script in Moodle , https://docs.moodle.org/dev/Javascript_Modules

More useful Javascript Modules are : https://docs.moodle.org/dev/Useful_core_Javascript_modules