main/LocalizeMenu.js

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;