NOTE: This repository is no longer maintained and has been archived. The project has been moved to a new repository: elections-carousel-component.

Usage

Adding to a page:

Refer to the included elections.html for an example page.

• HTML: Add the 'class' attribute values of ec ec-results to an element in the markup:

<div class="ec ec-results">

(Shown here applied to a div, but may be applied to any element - for example: article or whatever is semantically required.)

• CSS: Add the (bundled) stylesheet found in the project's /dist/css directory to the section of the page using:

<link href="<path-to-your-page>/dist/css/main-<dynamic-bundle-hash>.css" media="all" rel="stylesheet" type="text/css" />

making the appropriate modifications to the 'path-to-your-page' and 'dynamic-bundle-hash' values.

• JS: Add the (bundled) script found in the project's /dist/js directory above the tag on the page using:

<script src="<path-to-your-page>/dist/js/main-<dynamic-bundle-hash>.js"></script>

making the appropriate modifications to the 'path-to-your-page' and 'dynamic-bundle-hash' values.

• Initialize the module: Initialize the ElectionsCarousel module (adding any optional parameters) as follows:

var ecarousel = require('./elections-carousel');
ecarousel.init({});

Running the build:

Automatic bundle hash updates:

Running the build ($ yarn run build:production) will automatically update both the CSS and JavaScript bundle hashes on the (included) elections.html page.

Edit get-bundle-hash.sh to change the page to 'your-custom-page-name.html'.

Keyboard support:

To use the carousel controls via the keyboard:

• Press the Tab key once -> the 'Back' control will have focus, ie. 'Back' is selected. (NOTE: The 'Back' control is not initially enabled, therefore proceed to the next step to select the 'Next' control).

• Press the Tab key again -> the 'Next' control will have focus.

• To move the carousel 'cards'/slides forward, press the Enter key. (This is equivalent to a mouse-click on the 'Next' control).

• Repeat as many times as desired to scroll through the riding 'cards'/slides.

• To move the riding 'cards'/slides backwards, press the Shift and Tab keys simultaneously to switch focus to the 'Back' control. Press the Enter key to activate the 'Back' control.

Running the Unit Tests

On the command line:

Run all (Tape) tests, and read the results, on the command line using the following:

$ yarn run test

Generate (Istanbul) code coverage reports using:

$ yarn run coverage

In the browser:

View (Istanbul) code coverage results in the browser at:

http://127.0.0.1:8080/coverage/lcov-report/