This is documentation for Yle new global header. You should be able to use header in your project with these instructions. Header can be used as AMD-module or "normal" way when it is in global scope. Remember to add doctype to your html-document.
For using Yle global header you also need to include yleTunnus in your project. More info about yleTunnus can be found here http://docs.developer.yle.fi/#/tunnus-getting-started
You also need some other dependencies. These dependencies are not bundled to header files.
var header = yleHeader(config);
var defaultConfig = {
test: false,
siteUrl: '#',
siteName: null,
promoteTunnus: false,
loginApiAppId: null,
loginApiAppKey: null,
search: {
source: null,
options: {},
inputWidth: 240
},
tracking: {
account: 'yleiset'
}
};
| Key | Type | Description |
|---|---|---|
| siteUrl | String | Where header logo link should point to. |
| siteName | String | This is set to .yle__global-header__logo__link element text. Also used to determine if user has already clicked tunnus icon at your site. Set for example "Yle Uutiset" or "Yle Urheilu" |
| promoteTunnus | Boolean | Should your site promote yleTunnus? If this is set to true we show small notification icon at the next of tunnus icon until user clicks tunnus icon. If you have set yleTunnus banner, set this true. |
| search.source | Object / Array of object | Typeahead dataset parameter. Can be used to change search backend. |
| search.options | Object | Typeahead options. |
| search.inputWidth | Integer | Search input width in pixels. |
| loginApiAppId | String | App id's for tunnus, needed for fetching email address for logged in user. |
| loginApiAppKey | String | App keys for tunnus, needed for fetching email address for logged in user. |
| test | Boolean | Used internally to determine if we need to call test APIs or production APIs. |
| tracking.account | String | Used for comscore tracking. For production leave value to 'yleiset' and for test set it to 'test'. |
Header provides couple callbacks for yleTunnus. You need to call these in correct places. Callbacks are named same way as in yleTunnus sdk.
Header triggers events in some situations. Events are fires if user clicks header (anywhere), opens or closes menu
| Event | Description | Data |
|---|---|---|
| header-click | Triggered when user clicks header somewhere. |
{clickedItem: string} representation of header element user has clicked.
Could be one of the following:
|
| menu-open | Triggered when user opens some of the dropdown menus. | - |
| menu-close | Triggered when user closes some of the dropdown menus. | - |
You can also trigger 'close-menus' event to close all header menus.
$('.yle__global-header')
.on('header-click', function(ev) {
console.log(ev.clickedItem);
})
.on('menu-open', function(ev) {
console.log('menu-open');
})
.on('menu-close', function(ev) {
console.log('menu-close');
});
$('.yle__global-header').trigger('close-menus');
var header = yleHeader(headerConfig);
var tunnus = yleTunnus(
tunnusConfig,
function(userId, nickname) {
header.onAlreadyLoggedIn(userId, nickname)
},
function() {
header.onNotLoggedIn();
}
);
tunnus.initHeader(header);
$('.yle__global-header__tunnus__login').on('click', function() {
tunnus.login(
function(userId, nickname) {
header.onLoginSuccess(userId, nickname);
},
function() {
header.onLoginFailed();
},
tunnus.contexts.header
);
});
$('.yle__global-header__tunnus__links__logout').on('click', function() {
tunnus.logout(
function() {
header.onLogoutSuccess();
},
function() {
header.onLogoutFailed();
}
);
});
.yle__global-header__wrap {
padding: 0 80px;
}
.yle__global-header__logo__link--image {
background:url(http://uutiset.beta.yle.fi/public/img/yle_uutiset.svg) center center no-repeat;
background-size: 94px 30px;
height: 30px;
width: 94px;
}
.yle__global-header--background {
background: #ff0000;
}
.yle__global-header__navigation--background {
background: #fdddf0;
}
.yle__global-header__search__form__input--background--focus {
background: #000000;
}
.yle__global-header__toggle__links--border ul li a{
border-bottom: 1px solid black;
}
.yle__global-header .yle__global-header__font--color {
color: #ffaa00;
}
.yle__global-header__search__form__input::-webkit-input-placeholder{color:#ffaa00}
.yle__global-header__search__form__input:-moz-placeholder{color:#ffaa00}
.yle__global-header__search__form__input::-moz-placeholder{color:#ffaa00}
.yle__global-header__search__form__input:-ms-input-placeholder{color:#ffaa00}
.yle__global-header__search .tt-menu {
background-color: #00ffaa;
}
.yle__global-header__search .tt-suggestion {
color: #ffffaa;
}
.yle__global-header__toggle--active {
background: #555;
}
.yle__global-header__toggle__links ul li:hover {
background: #555;
}
Clone repo and checkout header branch. Then run following commands.
$ npm install
$ echo "127.0.0.1 header-test.yle.fi" >> /etc/hosts
$ grunt
After that you should be able to access dev site from http://header-test.yle.fi:4000. Then just hackhackhack until ready. Grunt tasks automatically builds new header for you when it detects changes. If you want to manually build header files run
$ grunt build-header
After that files are built in build/header/ directory.
Files for header can be found in following directories
Run test in browserstack
$ ./node_modules/.bin/nightwatch -t test/header.js -c test/nightwatch.json -e ff31tablet,ie9tablet
More possible device configurations can be found at test/nightwatch.json file.