replacing js files



I want to add a new button to the H5P Action Bar and the most simple way to do this for me is to replace some of the original JS files with copies of them which contains my changes. And I want my changes to be protected from updates.

For this I want to use the H5P Mod Plugin.

function h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {
  if (isset($libraries['H5P.DragQuestion'])) {
    $scripts[] = (object) array(
      // Path can be relative to wp-content/uploads/h5p or absolute.
      'path' => '/score-tracking.js',
      'version' => '?ver=1.2.3' // Cache buster
add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

How do I use this code to do this? For example to replace the h5p-action-bar.js file.

That's my attempt:

unction h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {
  if (isset($libraries['H5P.ActionBar'])) {
    $scripts[] = (object) array(
      'path' => 'wp-content/plugins/h5p-mod/h5p-action-bar.js',
      'version' => '?ver=1.2.3'
add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);


Thank you!

otacke's picture

Hi Mr. Threepwood, mighty pirate!

There's no library called H5P.ActionBar. The action bar ist part of the H5P core.


Hi Oliver!

damn.. I mean Aaargh! :D

And how do I refer to the H5P core? Or is this not possible?

otacke's picture

Unfortunately you can't override core functions.

And is there another possibility to replace core JS files or outsource extensions for core JS files?

I already tried to monkey patch the core JS files, but unfortunately I wasn't able to load my monkey patch after the H5P files..

otacke's picture

I don't think there's a good way to do this except _really_ patching core. What are you trying to accomplish in the end?

I want to add a new button to the Action Bar and the only way I could do that was to edit the files in question (h5p-action-bar.js & h5p.js).

The problem is now, when there is a new H5P update, all my changes will be deleted.

otacke's picture

I got that you want to add a button, but what should it do?

Like the Rights of Use button, I want to make a CC button which shows license informations for every H5P element. Unfortunately the Rights of Use button shows only when there are pictures or videos in the H5P elements.

I know that you are working on something like this but I need this button as soon as possible and it must be quite flexible regarding the integration of e.g. metadata (LRMI) and copyright informations.

otacke's picture

I am working on that right now, and we're close to moving it over to the quality assurance phase (for Drupal 7). However, I guess the final version won't be out before July. If you need something right now, then you need to touch the core libraries, indeed. It's possible that if you put your stuff in separate functions and just add calls to them, a simple merge might be enough to get your stuff in after we have published the update. Can't promise that, though.

However: Someone from the university of Hamburg was asking for the export of license information lately. Maybe you could pool your resources and add export function(s) to the regular copyright view? It might need some visual design guide by us on top, but it's probably basically offering a button (+ a select box for different formats) that will trigger the conversion and offer a file for download?

Yeah, she is my colleague :D We are just working on different days and different parts.

We will try something new with the monkey patch and in worst case we use our current solution until your version is ready. It's not "update-save" but it works.

Thank you very much for your time and help!

Und liebe Grüße aus dem UK! :)

otacke's picture

Just pay each other then! ;-)

That's what the button and the pupup looks like right now: