How to load custom JS libraries in the responsive webhelp transformation
How to load custom JS libraries in the responsive webhelp transformation
Hi!
I am attempting to use additional JS libraries, such as DataTables, in the responsive webhelp output by loading the libraries in the webhelp.fragment.head fragment. However, this results in a broken output where only the header and the footer of the layout is visible and no content can be seen. Any idea what may be the cause of this? Do I need to add the additional libraries to the RequireJS configuration? I am using oXygen XML Editor 20.0.
Best regards,
Antti
I am attempting to use additional JS libraries, such as DataTables, in the responsive webhelp output by loading the libraries in the webhelp.fragment.head fragment. However, this results in a broken output where only the header and the footer of the layout is visible and no content can be seen. Any idea what may be the cause of this? Do I need to add the additional libraries to the RequireJS configuration? I am using oXygen XML Editor 20.0.
Best regards,
Antti
Re: How to load custom JS libraries in the responsive webhelp transformation
Hello,
The problem is that the DataTables JS library is defined as a RequireJs module and it cannot be loaded via an HTML <script> tag. It should be loaded using a "require" call or as a dependency of another module. Unfortunatelly the RequireJS configuration used in WebHelp is not extendable (at least not by means of the Publishing Template mechanisms). It is not recommended to manually edit the configuration file in the WebHelp Responsive plugin because the modifications will not be portable and will be lost in case of an upgrade.
I have already registered an improvement request on our side in order to address this situation.
I have managed to load the DataTables library using a "require" call placed inline inside a <script> tag. I have added a sample Publishing Template in the following GitHub project: https://github.com/oxygenxml/oxygen-pub ... te-samples
The template is located at "templates/data-tables".
The XML fragment file containing the JS code looks as follows:
If you want to use a local version of the DataTables library, please download it and place the contents of the archive under a "DataTables" directory inside the Publishing Template directory. Replace the CDN references with the corresponding local references in the above script (see the commented lines). Also you will have to uncomment the "fileset" reference in the Publishing Template descriptor (opt) file.
Regards,
Alin
The problem is that the DataTables JS library is defined as a RequireJs module and it cannot be loaded via an HTML <script> tag. It should be loaded using a "require" call or as a dependency of another module. Unfortunatelly the RequireJS configuration used in WebHelp is not extendable (at least not by means of the Publishing Template mechanisms). It is not recommended to manually edit the configuration file in the WebHelp Responsive plugin because the modifications will not be portable and will be lost in case of an upgrade.
I have already registered an improvement request on our side in order to address this situation.
I have managed to load the DataTables library using a "require" call placed inline inside a <script> tag. I have added a sample Publishing Template in the following GitHub project: https://github.com/oxygenxml/oxygen-pub ... te-samples
The template is located at "templates/data-tables".
The XML fragment file containing the JS code looks as follows:
Code: Select all
<html>
<head>
<!-- The DataTables library styles (for local use please uncomment the following line) -->
<!--<link rel="stylesheet" type="text/css" href="${oxygen-webhelp-template-dir}/DataTables/datatables.min.css"/>-->
<link rel="stylesheet" type="text/css"
href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script><!--
// The path of the output directory relative to the current page.
var path2root = $('meta[name=wh-path2root]').attr('content');
// WebHelp Responsive template directory: ${oxygen-webhelp-output-dir}/oxygen-webhelp/template/
var templateDirPath = path2root + "oxygen-webhelp/template/";
// WebHelp Responsive lib directory: ${oxygen-webhelp-output-dir}/oxygen-webhelp/
var whAssetsDirPath = path2root + "oxygen-webhelp/";
var config = {
// Multiversion Support (http://requirejs.org/docs/api.html#multiversion)
context: "publishing-template",
paths: {
// The DataTables library (for local use please uncomment the following line)
//"data-tables": templateDirPath + "DataTables/datatables.min",
"data-tables": "http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min",
// JQuery
"jquery": whAssetsDirPath + "lib/jquery/jquery-3.1.1.min",
"jquery-private" : whAssetsDirPath + "app/jquery-private/jquery-private"
},
// Map modules to use noconflict: @see http://requirejs.org/docs/jquery.html#noconflictmap
map: {
"*": {
"jquery": "jquery-private",
},
"jquery-private": {
"jquery": "jquery"
}
}
};
var reqTemplate = require.config(config);
reqTemplate([ 'jquery', 'data-tables'], function ($) {
$(document).ready(function () {
$('.table').DataTable();
});
});
//-->
</script>
</head>
</html>
Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Re: How to load custom JS libraries in the responsive webhelp transformation
Hi,
Have you figured out a better way to load custom js-libraries?
I'm trying to use a JS-Cookie library (https://github.com/js-cookie/js-cookie) and can't make it work.
Any help would be appreciated.
Thanks.
Have you figured out a better way to load custom js-libraries?
I'm trying to use a JS-Cookie library (https://github.com/js-cookie/js-cookie) and can't make it work.
Any help would be appreciated.
Thanks.
Re: How to load custom JS libraries in the responsive webhelp transformation
Thank you, alin. Your solution worked nicely. I hope that in the future there'll be an easier way to load RequireJS modules. 
Re: How to load custom JS libraries in the responsive webhelp transformation
Hi,Jani wrote:Hi,
Have you figured out a better way to load custom js-libraries?
I'm trying to use a JS-Cookie library (https://github.com/js-cookie/js-cookie) and can't make it work.
Any help would be appreciated.
Thanks.
For the time being, what Alin suggested is the only available solution.
We already have an improvement request logged in our internal issue/improvement tracking system so our development team will analyze the possibility to improve this functionality in a future version of oXygen.
Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support
oXygen XML Editor and Author Support
Re: How to load custom JS libraries in the responsive webhelp transformation
I think this may also be tied to jQuery UI widgets not working. Should they be initialized using RequireJS as well?
We use a jQuery UI dialog to allow the user to jump between different versions of our user guides and in the older versions the jQuery UI library is not loaded by RequireJS. All the versions of the user guides use the same JavaScript file to switch between the different user guide versions so we'd ideally need a RequireJS and a non-RequireJS initialization of the jQuery UI dialog.
We use a jQuery UI dialog to allow the user to jump between different versions of our user guides and in the older versions the jQuery UI library is not loaded by RequireJS. All the versions of the user guides use the same JavaScript file to switch between the different user guide versions so we'd ideally need a RequireJS and a non-RequireJS initialization of the jQuery UI dialog.