Skip to content

Latest commit

 

History

History
82 lines (56 loc) · 2.3 KB

3_script.js.md

File metadata and controls

82 lines (56 loc) · 2.3 KB
Raw

2. Build Configuration  <  Previous Page

3. JavaScript Module

3.1. Polyfills

In order to support older browsers, polyfills that enable technologied required by the slider mechanism must be loaded. If you don't use any polyfill loader in your project, use polyfills.js file provided by HyperText Slider.

'use strict';

require('hyper-text-slider/lib/polyfills');

3.2. Booting HyperText Slider

Slider's scripting API is quite rich, but all we need is upgrading the slider, which will be declared on our web page.

var htSlider = require('hyper-text-slider');

window.addEventListener('load', function() {
  htSlider.boot(document.body);
});

Above script loads hyper-text-slider module and calls boot function after page loads.

3.3. Loading Fonts

We'll also use Google Fonts to load Roboto into our webpage.

window.WebFontConfig = {
  google: { families: [ 'Roboto:thin' ] },
};

(function() {
  var wfs = document.createElement('script');
  wfs.src = (document.location.protocol === 'https:'? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
  wfs.type = 'text/javascript';
  wfs.async = 'true';

  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(wfs, script);
}());

3.4. Dealing with FOUC

As resources loaded by our web page are quite heavy (CSS, JavaScipt and images), flash of unstyled content (FOUC) may occur. To deal with this problem we will add js class name on <html> element. This class will be styled in CSS (see 5.5. Page Visibility).

document.documentElement.classList.add('js');

 
Next Page  >  4. HTML Page