How to include h5p libraries in a content type

Submitted by serettig on Fri, 08/11/2017 - 23:10
serettig's picture
Forums: 
Developers

Hi,

I'm working on porting an existing module to h5p and I'm stuck at including libraries into my liberary. For starters I'd like to include FontAwesome, so I've added this to library.json:

"preloadedDependencies": [
    {
      "machineName": "FontAwesome",
      "majorVersion": 4,
      "minorVersion": 5
    }
  ]

FontAwesome does exist in the development folder and can be used by other libraries I've downloaded from h5p. However, simply referencing FontAwesome in the library doesn't seem to be enough, as the library isn't loaded and there is no reference to the FontAwesome css file in the created html markup. I've looked through already existing h5p libraries and can't see how libraries are loaded or initialized from code. Nevertheless, somehow a reference to FontAwesome's css file ends up in the html. The relevant documentation page seems to be about including libraries in the editor, but what I want is to use libraries to display the content to the end user.

I know that this probably is a trivial matter, but I'm lost here. If someone could help me out, but giving me hints at how to include FontAwesome (or any other library) this would be a great help! I've derived my project from h5p-boilerplate, if this is relevant.

Thanks!
Sebastian

thomasmars's picture

thomasmars

Mon, 08/14/2017 - 13:02

Hi,
Make sure that you have "H5P development mode" enabled.
The preloadedDependencies code that you have displayed looks good.
This should be enough to get FontAwesome to load.
Font awesome css will be injected into the header of your page, looks something like: @import url("http://localhost/sites/default/files/h5p/development/font-awesome/h5p-font-awesome.min.css?ouo56e");

For any other libraries, they will be available globally on the window through their machine name, e.g. "H5P.JoubelUI" if you have required the Joubel UI library.

Are you able to get your content type to run and produce an output ?

serettig's picture

serettig

Mon, 08/14/2017 - 18:52

Thanks for your reply, Thomas!

I got it working now! Your hint about the 'development mode' guided me in the right direction. Actually it was already enabled and my content type worked in general (but couldn't load external h5p libraries). I've simply created a new content with the type and now the external h5p libraries are imported correctly.

It seems as if library.json isn't updated for a content that already exists. I've updated the JavaScript code and semantics.json of my content type many times and there was no issue, but adding new dependencies in library.json doesn't seem to work for already existing content (at least for me).

Many thanks!

otacke's picture

otacke

Wed, 08/16/2017 - 08:19

True. It seems you actually have to edit a existing content in order for library changes to be recognized.