General developer forum

Hi Gareth,

Right... let's have a look at all of this. One of the things high up on my todo list is to improve the JS documentation that you're referring to here. It's getting better all the time, but it's not quite there yet.

So to start with, since you're backporting to Moodle 2.3, and 2.4, you need to be aware that we only started supporting Shifted Modules in Moodle 2.5. In older versions, you'll have to go for the un-shifted modules. There is a workaround which I'll note below to make it much easier. If you get the JS layout working well in 2.5, then it should just be a case of adding the workaround to support the older versions so that's what I'd recommend doing.

In summary, you're trying to use the event-nav-keys gallery module. I'm not very familiar with that module, but it seems that most of it is already supported by the core event-key module. There is some documentation at http://yuilibrary.com/yui/docs/event/key.html which details how you do it. Additionally, we don't yet properly support gallery modules fully in core though I'm hoping to fix that really soon now (famous last words). See MDL-36334 for some information on that. It is still possible, but again via workaroud.

You don't actually need to include the YUI gallery module from the PHP, you can do so by including the source in your JavaScript - this is really easy with Shiter. I'll mention how to do so in a moment after a quick summary of Shifter.

As you've seen the Shifter docs, you'll see that the directory structure is something like:

1682 moodle/lib/yui:master> tree src/tooltip/
src/tooltip/
├── build.json
├── js
├── tooltip.js
├── meta
    └── tooltip.json

2 directories, 3 files

You then run shifter from your JS module's directory. This shifter run creates the build directory and the three versions of the output:

1681 moodle/lib/yui:master> tree build/moodle-core-tooltip/
build/moodle-core-tooltip/
    ├── moodle-core-tooltip-debug.js
    ├── moodle-core-tooltip.js
    └── moodle-core-tooltip-min.js

0 directories, 3 files

In your case, your directory structure would be:

moodle/course/format/grid/yui/src/gridkeys/
├── build.json
├── js
│   └── gridkeys.js
└── meta
    └── gridkeys.json

You then just open the gridkeys src directory, and run Shifter.

In Moodle 2.5, to use the code, you can simply add one line of PHP:

$PAGE->requires->yui_module('moodle-format_grid-gridkeys', 'M.format_grid.gridkeys.init');

In order to include your gallery module (at least until we get MDL-36334 implemented), you can then add the minified version of the gallery module to the js directory, and in your build.json add:

"prependfiles": [ "js/gallery-event-nav-keys.js" ]

See the Shifter documentation for a more exact example: http://yui.github.io/shifter/#build.json

So once you've got that working for 2.5, you can easily backport it to 2.3/2.4 by creating the older-style directory, and copying the -min.js file into place.

In the tooltip example above, I'd just run something like:

1713 moodle/lib/yui:master> mkdir tooltip
1714 moodle/lib/yui:master> cp build/moodle-core-tooltip/moodle-core-tooltip-min.js tooltip/tooltip.js

(sorry, I don't know what the Windows equivelant would be)

If you want to be fancy, you can add a postexec to the build.json to do this for you each time you run shifter (I'll let you read up on that). You should be able to do so in a cross-platform fashion using node if you really want to. I might write something quickly to make it easier in.

Ping me if you need a hand,

Andrew