import Cookies from '../vendor/jscookie';
import parseRegion from '../utils/text/parseRegion';
/**
* Localize menus so that they reflect the user's current region
*
* @module LocalizeMenu
* @prop {string} localizeLinkSelector - targets link elements that need to be localized
* @prop {string} localizeTextSelector - targets text elements that need to be localized
* @prop {string} highlightSelector - targets region lists so we can select the current region
* @prop {string} currentRegionClass - the class to apply to the current region in a region list
*/
const LocalizeMenu = {
localizeLinkSelector: '[data-localize-link]',
localizeTextSelector: '[data-localize-text]',
highlightSelector: '.c-regions__selector',
currentRegionClass: 'c-regions__current',
/**
* Parses region value and passes it along to localization functions
* @method init
*/
init() {
// grab region cookie and parse value
const region = Cookies.get( '_wpcom_geo' );
const regionName = parseRegion( region, 'name' );
const regionSlug = parseRegion( region, 'slug' );
this.localizeText( regionName );
this.localizeLink( regionSlug );
this.highlightCurrentRegion( regionName );
},
/**
* Updates text of any element with a `data-localize-text` attribute to current region
* @method localizeText
* @param {string} regionName - parsed region name (e.g. `New Brunswick`)
*/
localizeText( regionName ) {
const $items = document.querySelectorAll( this.localizeTextSelector );
// update items with localized text
[].forEach.call( $items, ( $item ) => {
$item.innerText = regionName; // eslint-disable-line no-param-reassign
});
},
/**
* Updates link url of any element with a `data-localize-link` attribute to region homepage.
* The `data-localize-link` attribute must have the homepage url as its value.
* @method localizeLink
* @param {string} regionSlug - parsed region slug (e.g. `new-brunswick`)
*/
localizeLink( regionSlug ) {
const $items = document.querySelectorAll( this.localizeLinkSelector );
// update items with localized text
[].forEach.call( $items, ( $item ) => {
const baseUrl = $item.dataset.localizeLink;
const regionUrl = `${baseUrl}${regionSlug}/`;
$item.setAttribute( 'href', encodeURI( regionUrl ) );
});
},
/**
* Scans list for element where text == current region, adds class to highlight
* @method highlightCurrentRegion
* @param {string} regionNAme - parsed region name (e.g. `New Brunswick`)
*/
highlightCurrentRegion( regionName ) {
const $regionLists = document.querySelectorAll( this.highlightSelector );
// highlight current region
[].forEach.call( $regionLists, ( $regionList ) => {
if ( $regionList.children.length > 0 ) {
const $currentRegionElem = [].filter.call( $regionList.children,
$regionElem => regionName === $regionElem.textContent.trim() );
if ( $currentRegionElem.length > 0 ) {
if ( $currentRegionElem[0].children.length > 0 ) {
const $currentRegionLink = $currentRegionElem[0].children[0];
$currentRegionLink.classList.add( this.currentRegionClass );
}
}
}
});
},
};
export default LocalizeMenu;