Locale settings

Text and settings within JavaScript-enhanced modules can be updated for the specific locale they are to be used in through the addition of a separate JavaScript file. The locale used is determined by the lang attribute that has been set on the html element for the document; if no match is found, the English defaults will be used.

The additional JavaScript file should contain a JSON object with all the required test/settings within it, and should be linked as follows (note that if you are only including locale variants for existing Framework components and no other JavaScript files, you will still need to include the init.js file to determine the correct path and implementation for your locale file):

<script id="js-init" src="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/init.js" data-app="[ App JS url ]" data-require="[ requireJS config file url ]" data-settings="[ component settings file url ]" data-locale="[ locale JS file url ]" integrity="[ init integrity digest ]" async></script>

Your locale file will be loaded in using RequireJS before any of the other modules for the page are loaded so please be aware of the size of the file you are loading as it will block other JavaScript from running until it is ready.

Note that the file may contain settings for more than one locale.

Example locale JS file

var FRAMEWORK = window.FRAMEWORK || {};
FRAMEWORK.extend = FRAMEWORK.extend || {};FRAMEWORK.extend.locale = {
	'...' : {
		aContextHelp : {
			formText : '...',
			closeText : '...',
		},
		aDate : {
			locale : '...',
			format : '...',
			previousMonth : '...',
			nextMonth : '...',
			months : [ '...', '...', '...', '...', '...', '...', '...', '...', '...', '...', '...', '...' ],
			weekdays : [ '...', '...', '...', '...', '...', '...', '...' ],
			weekdaysShort : [ '...', '...', '...', '...', '...', '...', '...' ],
			interactionInstruction : '...',
			triggerLabelSingle : '...',
			confirmLabelSingle : '...',
			triggerLabelRange : '...',
			confirmLabelRange : '...',
			clearLabel : '...',
			totalSelectedSingular : '...',
			totalSelectedPlural : '...',
			yearLabel : '...',
			monthLabel : '...',
			startDateTitle : '...',
			endDateTitle : '...',
		},
		aFileUpload : { multipleCaption : '...' },
		aPlusMinus : {
			plus : '...',
			minus : '...',
		},
		aTextarea : {
			multipleCaption : '...',
			limitMessage : '...',
			limitMetMessage : '...',
		},
		mChapterIndex : {
			previousText : '...',
			nextText : '...',
		},
		mCardNotification : { closeText : '...' },
		mCheckboxGroupMultiselect : {
			pleaseSelect : '...',
			allSelected : '...',
			selected : '...',
			selectAll : '...',
		},
		mCookiePolicy : {
			successfullySaved : '...',
			failed : '...',
		},
		mCreditCard : {
			default : '...',
			noMatch : '...',
			amex : '...',
		},
		mFormRowHelp : {
			showMore : '...',
			showLess : '...',
		},
		mMediaPlayer : {
			progress : '...',
			progressTime : '...',
			restart : '...',
			rewind : '...',
			play : '...',
			playVideo : '...',
			playAudio : '...',
			pause : '...',
			forward : '...',
			mute : '...',
			volume : '...',
			captions : '...',
			subtitles : '...',
			fullscreen : '...',
			seconds : '...',
			on : '...',
			off : '...',
		},
		mPredictiveSearch : {
			instruction : '...',
			resultsFound : '...',
			noResults : '...',
		},
		mShowMore : {
			expand : '...',
			contract : '...',
			about : ' ... ',
			description : '...',
		},
		mStickyCtaBar : { mobileText : '...' },
		mTabs : {
			previousText : '...',
			nextText : '...',
			loadingText : '...',
		},
		oAccessibilitySettings : {
			error : '...',
			reduced : '...',
			success : '...',
		},
		oCarousel : {
			previousPageLong : '...',
			previousPage : '...',
			page : '...',
			nextPageLong : '...',
			nextPage : '...',
		},
		oFaqPanel : { showMore : '...' },
		oMasthead : {
			menuText : '...',
			closeText : '...',
			loadingText : '...',
			switcherInitial : '...',
			switcherSelection : '...',
			primaryNavigationLabel : '...',
		},
		oModal : {
			closeText : '...',
			loadingText : '...',
		},
		oWallet : {
			nextButton : '...',
			previousButton : '...',
		},
	},
};

Default locale settings (English)

You can use this information to check the default settings and also to look up formats and so on to ensure your locale settings match the expected pattern - some values contain variables to insert character counts, dates and so on, which can be seen in the settings below.

aContextHelp : {
	formText : 'Help',
	closeText : 'Close',
},
aDate : {
	locale : 'en-gb',
	format : 'DD/MM/YYYY',
	previousMonth : 'Previous month',
	nextMonth : 'Next month',
	months : [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
	weekdays : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
	weekdaysShort : [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
	interactionInstruction : 'Use the arrow keys to pick a date',
	triggerLabelSingle : 'Select date',
	confirmLabelSingle : 'Confirm date',
	triggerLabelRange : 'Select dates',
	confirmLabelRange : 'Confirm dates',
	clearLabel : 'Clear',
	totalSelectedSingular : 'Total days selected: <strong>{days} day</strong>',
	totalSelectedPlural : 'Total days selected: <strong>{days} days</strong>',
	yearLabel : 'Year',
	monthLabel : 'Month',
	startDateTitle : 'Set start date',
	endDateTitle : 'Set end date',
},
aFileUpload : { multipleCaption : '{count} files selected' },
aPlusMinus : {
	plus : 'plus',
	minus : 'minus',
},
aTextarea : {
	multipleCaption : '{count} characters left',
	limitMessage : 'There is a character limit of {count}',
	limitMetMessage : 'Character limit of {count} met',
},
mChapterIndex : {
	previousText : 'Previous',
	nextText : 'Next',
},
mCardNotification : { closeText : 'Close' },
mCheckboxGroupMultiselect : {
	pleaseSelect : 'Please select\u2026',
	allSelected : 'All selected',
	selected : ' selected',
	selectAll : 'Select all',
},
mCookiePolicy : {
	successfullySaved : 'The cookie setting has been successfully saved.',
	failed : 'Cookies are not enabled so your preference could not be saved.',
},
mCreditCard : {
	default : 'For %s, look for the three digits on the back',
	noMatch : 'Look for the three digits on the back',
	amex : 'For American Express, look for the four digits on the front',
},
mFormRowHelp : {
	showMore : 'Show more',
	showLess : 'Show less',
},
mMediaPlayer : {
	progress : 'played',
	progressTime : 'time',
	restart : 'Restart',
	rewind : 'Rewind',
	play : 'Play',
	playVideo : 'Play video',
	playAudio : 'Play audio',
	pause : 'Pause',
	forward : 'Forward',
	mute : 'Mute',
	volume : 'Volume',
	captions : 'Captions',
	subtitles : 'Subtitles',
	fullscreen : 'Fullscreen',
	seconds : 'seconds',
	on : 'on',
	off : 'off',
},
mPredictiveSearch : {
	instruction : 'When auto-complete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
	resultsFound : 'results are available.',
	noResults : 'No search results.',
},
mShowMore : {
	expand : 'Show more',
	contract : 'Show less',
	about : ' about ',
	description : 'this topic',
},
mStickyCtaBar : { mobileText : 'Ready to get going?' },
mTabs : {
	previousText : 'Previous',
	nextText : 'Next',
	loadingText : 'Please wait',
},
oAccessibilitySettings : {
	error : 'The ability to store your accessibility preferences for this website requires the use of cookies. Please enable cookies for this site so that we can save your preference or use the reduced motion setting on your device.',
	reduced : 'Animations and transitions have been automatically disabled for this website in accordance with your device settings.',
	success : 'Your preferences have been successfully updated.',
},
oCarousel : {
	previousPageLong : 'Previous, {x} of {y}',
	previousPage : 'Previous',
	page : '{x} of {y}',
	nextPageLong : 'Next, {x} of {y}',
	nextPage : 'Next',
},
oFaqPanel : { showMore : 'Show more' },
oMasthead : {
	menuText : 'Menu',
	closeText : 'Close',
	loadingText : 'Please wait',
	switcherInitial : 'Select your preferred option',
	switcherSelection : 'You are on {option}',
	primaryNavigationLabel : 'Primary navigation',
},
oModal : {
	closeText : 'Close',
	loadingText : 'Please wait',
},
oWallet : {
	nextButton : 'Next',
	previousButton : 'Back',
}