Handlebars header template for KAT apps.
If using n-internal-tool
you'll have to add the path to your node-modules/@financial-times
directory as the partialsDirectory
option to n-internal-tool
so that it can resolve the partial location.
npm install --save @financial-times/kat-header
or
bower install --save kat-header
Use handlebars template
It will display a licence switcher form if a licenceList
property exists in the template. See the demo for example usage. /* You should provide a route for the core form to fallback to, this ideally would be a route that directs the user to the same page but for the licence selected via the form */
Pass an object with a nav
property to your handlebars template.
This will have a heading
property which will act as the heading of the page (defaults to "Knowledge & administration tools").
It also will take an items
property which is an array of objects to populate the navigation links, each of these have the following properties:
name
- String - the text to renderhref
- String - the URL to link toshowFlag
- String (optional) - if the nav item requires a flag to be on, the value of this is the flag name. When that flag is true this nav item will renderhideFlag
- String (optional) - if the nav item requires a flag to be off, the value of this is the flag name. When that flag is false this nav item will renderselected
- Boolean (optional) - when true this nav item will render as "selected" to denote the current page. Only one nav item should be "selected".last
- Boolean (optional) - when true this nav item will float to the right of the header
There is a default config object you can use by calling the function and extend if needed. Pass in the licenceId
as the first parameter in order to populate the link URLs, In order to mark an item as "selected" you can pass the trackable
value to the function which will mark that item as selected. You can use this in your controller as the example shown below:
const navigationConfig = require('@financial-times/kat-header/navigation-config');
res.render('index', navigationConfig('licenceId123')) // this won't show any tabs as selected
// or
res.render('overview', navigationConfig('licenceId123', 'overview', '/overview/')) // this will show overview as the selected tab
Include the styles for the header by adding the following to your SCSS
@import 'kmt-header/main';
Include the javascript by adding the following to your JS and initialise when ready using the init
function. This will add an enhanced experience to the licence switcher.
const katHeader = require('@financial-times/kat-header');
// when ready
katHeader.init();
Run the demos using
make build run
And view the demos on http://local.ft.com:5005/