elstar IT

Last week John Jardin pointed me to a very interested progress bar project, Pace JS.

It is a loading progress bar which runs out of the box only by adding the Javascript and CSS theme. There is a possibility to configure it, but it is not necessary.

Getting started

I added in bower.json file the Bower package name and run Bower to update my client side framework in my On Disk Project.
{
“name”: “bower4xpages”,
“version”: “0.0.1”,
“dependencies”: {
“bootstrap.growl”: “latest”,
“eonasdan-bootstrap-datetimepicker”: “latest”,
“moment”: “latest”,
“underscore”: “latest”,
“fontawesome”: “latest”,
“pace”:”latest”
},
“private”: true
}

Next step is to refresh my On Disk Project in the Navigator inside the Domino Designer and sync the Database with my On Disk Project.

Include it

In my theme I only have to add 2 new entries

<resource>
		<content-type>application/x-javascript</content-type>
		<href>libs/pace/pace.js</href>
	</resource>
	
	<resource>
		<content-type>text/css</content-type>
		<href>libs/pace/themes/blue/pace-theme-minimal.css</href>
	</resource>

Build my application an reload a page in my XPages app……… but there was an javascript.

There is a need to disable in the AMD loader in the javascript file, or use the working around at XSnippets.

To disable AMD in the Pace.js file, replace this

if (typeof define === 'function' && define.amd) {
    define(['pace'], function() {
      return Pace;
    });
  } else if (typeof exports === 'object') {
    module.exports = Pace;
  } else {
    if (options.startOnPageLoad) {
      Pace.start();
    }
  }

By this

if (options.startOnPageLoad) {
      Pace.start();
    }

Happy coding…