Chapter index

Notes for developers

Non-JS fallback

It is possible to use the chapter index with and without a non-js fallback. If technology prohibits, generating the non-js fallback simply include the empty placeholder and the JavaScript will build the component on the fly.

Ensure an introductory title is supplied for chapter 0, for example 'Introduction' or 'Foreword', by using the data attribute data-chapter-title on the first o-long-form-article-chapter area when no non-js fallback has been supplied.

Controling the chapter index component programatically

Chapter index can be controlled programatically to scroll to a section by index or id. The following method is available for use:

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-chapter-index' ], function ( mChapterIndexModule ) {
		var mChapterIndexEl = document.querySelector( '#chapterIndexId' ),
			mChapterIndexInstance = mChapterIndexModule.initInstance( mChapterIndexEl );		mChapterIndexInstance.goTo( 5 );
	});
});

Changing locale settings

Default next and previous hidden link text can be changed for a particular locale.

en: {
	mChapterIndex : {
		previousText : 'Previous',
		nextText : 'Next',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

Extension component

This component forms part of the 'long-form-article' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/long-form-article.css" rel="stylesheet" />

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will scroll the page to the selected chapter.