Changes in javascript to rendered h5p content

Submitted by bluetea on Wed, 02/11/2015 - 11:21
Forums: 
General discussion

On Drupal site, I'd like to add classes and cosmetic changes to the content rendered by Question Set using my own javascript. E.g. add question numbers to the pager dots. How to trigger those changes? I was looking for some event when Question Set finishes rendering its content, but nothing found. When I put my javascript into document.ready, it doesn't find the Question Set content yet (my code runs before Question Set attach). Is there any possible way to do this?

falcon's picture

falcon

Wed, 02/11/2015 - 13:20

It's currently not possible. We have a lot of issues in our roadmap that makes it easier for sites to modify H5Ps.

I think the simplest clean way to enable you to do this is that you add something like

var $navigation = H5P.domAlter('H5P.QuestionSet', 'navigation', $navigation); 

to H5P.QuestionSet before the navigation is added to the document, and in your js you add:

H5P.registerDomHandler('H5P.QuestionSet', 'navigation', function($navigation) {
  // Alter navigation
}

And you'll have to create the H5P.registerDomHandler and H5P.domAlter functions in H5P.js in the H5P core. Does this sound like a solution? Is this something you could do?

bluetea

Thu, 02/12/2015 - 18:17

I didn't quite understand your idea. Here is some code that allowed me to trigger an event after attaching content to h5p-content (other than simply changing the templates). 

 

drupal/sites/all/modules/h5p/library/js/h5p.js 

H5P.queueListener = function(eventType, callback) {

    H5P.handlers = H5P.handlers || {};

    H5P.handlers[eventType] = callback;

};

H5P.addListener = function(eventType, $element) {

    H5P.handlers = H5P.handlers || {};

    if (typeof H5P.handlers[eventType] !== 'undefined') {

        $element.on(eventType, H5P.handlers[eventType]);

    }

}

after instance.attach($attachTo) add the listener to $attachTo DOM element and trigger the event:

H5P.addListener('attached', $attachTo);

$attachTo.trigger('attached');

  

drupal/sites/all/modules/custom/mymodule/js/mymodule_h5p.js

H5P.queueListener('attached', function(event) {

    $(event.currentTarget).find('.progress-dot').each(function(index) {

        $(this).html(index+1);

    });

});

For this to work, mymodule_h5p.js must be loaded after h5p is loaded.

falcon's picture

falcon

Fri, 02/13/2015 - 09:43

Yeah, nice, that will probably work. My idea was to add a trigger in the questionset library's attach function so that the event would be triggered prior to being attached to the dom. You can achieve the same from h5p.js as well but it will not always work. For instance in boardgame there are also question sets, and they are attached when you click on a hotspot so they won't be available when you go through the dom in the example above.

bluetea

Fri, 02/13/2015 - 10:37

Oh, I see...

I moved the two lines which trigger the event from h5p.js to questionset.js attach() method and it still works, so I'll leave it in questionset as you suggest.