Loading JavaScript AMD modules for the responsive WebHelp output

[eccc]

Hi,

I'm trying to load AMD modules using the publishing template but I can't seem to be able to define the paths to the JS libraries correctly. For instance, I'd like to initialize DataTables in this manner but I get the following error in the console:

require.js:5 GET file:///C:/[...]/out/webhelp-responsive/oxygen-webhelp/app/datatables.js 0 ()
Uncaught Error: Script error for "datatables", needed by: template-base-dir/resources/js/tables
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)

Here's my JS file, tables,js, that attempts to initialize DataTables:

Code: Select all

var rootDir = $('meta[name=wh-path2root]').attr('content'),

	templateDir = rootDir + 'oxygen-webhelp/template/',

	datatables = templateDir + 'resources/js/datatables.min';



define(['jquery', 'datatables'], function ($) {    

	$('.sortable').DataTable({

		paging: paging,

        	pagingType: 'simple_numbers',

        	pageLength: pageLength,

        	info: paging

	}); 

});

And in template-main.js, I have:

Code: Select all

define(['require'], function (require) {

    require(['./tables']);

});

Additionally, can I use the WebHelp localization framework in the DataTables initialization? I suppose I'd have to add the localization module as a dependency but how would one go about doing that?

Best,
Antti

[Kiyoshirue]

Hi there,

I'm having similar issues with defining the paths to the JS libraries. Getting Antti's issue resolved would most likely help me out as well.

Thanks,
Kiyoshirue

[alin]

Hello,

Supposing that your template directory would look like this:

Code: Select all

[js-modules]  --- the Publishing Template base dir

    - [js]

        - [datatables]

            - datatables.min.js

        - tables.js

        - template-main.js  

The tables.js should look as follows:

Code: Select all

define(["jquery", "localization", "./datatables/datatables.min"], function ($, i18n) {

    $(document).ready(function () {

        

        console.log("i18n: ", i18n.getLocalization('webhelp.search'));

        

        $('.table').DataTable();

    });

});

Note that the "tables.js" declares a dependency for the "localization" module. You can specify dependencies for any WebHelp core library using its module ID as defined in [WebHelp-Responsive-Base-Dir]/oxygen-webhelp/app/config.js

You should also update the JS related fileset from the template's descriptor file to recursively include all *.js files under the "js" directory:

Code: Select all

<resources>

            <css file="js-modules.css"/>

            <js-amd-module file="js/template-main.js"/>

            <fileset>

                <include name="js/**/*.js"/>

            </fileset>

        </resources>

You can find the template samples here: https://github.com/oxygenxml/oxygen-pub ... js-modules

Regards,
Alin

[eccc]

Thank you, that helped me solve the issue.

On a related note, our webhelp user guides share a JavaScript file that uses jQuery UI. We have different versions of our user guides in separate folders, like so:

<domain>/user-guide/<product version>/<language>/index.html

The JavaScript file shared by each user guide version is located under the following location:

<domain>/user-guide

So each HTML file in each documentation set has the following element:

<script type="text/javascript" src="../../<shared JS file>.js"></script>

Now, since the shared JavaScript file employs jQuery UI, I suppose the shared JS file should use the RequireJS define function to load the jQuery UI library for newer user guide versions that use RequireJS, and for older versions where jQuery UI is loaded via the script tag, the same jQuery UI stuff is done outside the define function.

Is there any way to achieve this using the JS file defined in the <js-amd-module/> element in the publishing template?

[alin]

Hello,

The JavaScript file referenced using the "<js-amd-module/>" element will only be loaded as an AMD module using a "require" call.

Furthermore, this JS file should reside in the Publishing Template's root directory. This means that it should be located in the same directory as the template's descriptor file (*.opt). The descriptor file cannot reference files outside that directory.
At publishing time, the contents of a template package will be copied in the output folder. So you cannot share the same instance of a file among different publications using the Publishing Template mechanism.

Regards,
Alin