topic Re: How to load resource files with require.js in Integration, Extension & APIs

How to load resource files with require.js

rbecher — Wed, 26 Nov 2014 08:28:04 GMT

Hi,

I try to adopt a solution into an extension which uses font-awesome.css which loads font files from a sub-folder. Now I'm getting this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4848/fonts/fontawesome-webfont.woff?v=4.2.0

Do I have to place the resource files somewhere else or is there a way to load them or point the path to with require.js?

- Ralf

Re: How to load resource files with require.js

Stefan_Walther — Wed, 26 Nov 2014 14:09:44 GMT

Hi Ralf,

I am doing it like this:

var faUrl = '/extensions/extensionName/lib/external/fontawesome/css/font-awesome.min.css';
wiUtils.addStyleLinkToHeader('wiFonts-fa', faUrl);

/**
 * Adds a style to the link header with the given id.
 * 
 * If the style with the given key is already part of the header, nothing
 * will happen. 
 * @param key of the 
 * @param link to the style sheet.
 */
addStyleLinkToHeader: function (key, link) {

  $(document).ready(function () {

   var idPattern = 'wiStyleLinked_' + key;
   if ($('#' + idPattern).length === 0) {
   var $lnk = $(document.createElement('link'));
   $lnk.attr('rel', 'stylesheet');
   $lnk.attr('href', link);
   $lnk.attr('id', idPattern);
   $("head").append($lnk);
   }
  });
},

And in the css file change the path relative to your css to point correctly to the font files:

url('../fonts/fontawesome-webfont.eot?v=4.0.3')

Re: How to load resource files with require.js

Stefan_Walther — Wed, 26 Nov 2014 14:13:34 GMT

You can certainly also use require.js but since the requirejs css plugin is not included it's a bit harder and you have to load the css with text! first then add it again to the header (as demonstrated in all the other examples where css is injected into the header).

Re: How to load resource files with require.js

rbecher — Wed, 26 Nov 2014 20:36:16 GMT

Hi Stefan,

thanks this works good. I would prefer this method over require.js text! loading for all css files..

- Ralf