Language Selector extension

Code for adding the functionality of language selector option in the header of the SCA website.

Code: Entry point File (Java Script)

define(
	'ConsuleSolution.languageSelector.language', [
	  'SC.Configuration',
	  'Utils',
	  'Header.View',
	  'consulesolution_languageselector_language.tpl',
	  'js.cookie'
	],
	function(
	  Configuration,
	  Utils,
	  HeaderView,
	  consulesolution_languageselector_language_tpl,
	  Cookie
	) {
	  'use strict';
	  return {
		mountToApp: function mountToApp(container) {
		  var lanObj;
		  var currObj;
		  var currentLanguageSymbol
		  var langCode
		  var symbol;
		  var localeArray = [];
		  var currentURL;
		  _.extend(HeaderView.prototype, {
			events: {
			  'click [data-action="show-sitesearch"]': 'showSiteSearch', // Keeping to be backward compatible
			  'click [data-action="header-sidebar-show"]': 'showSidebar',
			  'click [data-action="header-sidebar-hide"]': 'hideSidebar',
			  'click [data-type="header-sidebar-menu"]': 'hideSidebar',
			  'keydown [data-action="header-sidebar-hide-esc"]': 'hideSidebarOnEsc',
			  'change [data-action="lang-selector"]': 'langSelector' //languague selector
			},
			initialize: _.wrap(HeaderView.prototype.initialize, function(fn) {
			  Backbone.history.on('all', this.verifyShowSiteSearch, this);
			  this.application = this.options.application;
			  this.on('afterViewRender', function() {
				  setTimeout(function () {
					  var data = $('[data-action="lang-selector"] :selected').val();
					  var selcectedLanguage = Cookie.get("selectedLang");
					  console.log("cookie", selcectedLanguage)
					  if (selcectedLanguage && selcectedLanguage !== data) {
						  console.log("cookie2", selcectedLanguage)
						  $("." + selcectedLanguage + " img").trigger("click");
						  $('.selectedoption').val(selcectedLanguage).trigger('change');
					  }
					  else {
						  $("." + data + " img").trigger("click");
					  }
				  }, 1500)
			  });
			}),
			langSelector: function() {
			  var selectedOption = this.$('[data-action = "lang-selector"]').val();
			  Cookie.set("selectedLang", selectedOption,{ expires: 365 });
			  if (SC.SESSION) {
				lanObj = SC.ENVIRONMENT.availableLanguages
				_.each(lanObj, function(each) {
				  localeArray.push(each.locale);
				  if (each.locale == selectedOption) {
					each.isSelected = true;
					currObj = each;
				  }
				})
				SC.SESSION.currentLanguage = currObj;
				SC.ENVIRONMENT.currentLanguage = currObj;
				currentLanguageSymbol = currObj.name;
				langCode = currObj.locale;
				symbol = currObj.name;
				$("." + langCode + " img").trigger("click");
				currentURL = window.location.href;
				var updateURL = isAnyWordInArrayPresentInString(localeArray, currentURL, selectedOption);
				if (updateURL) {
				  window.location.href = updateURL;
				} else {
				  currentURL = window.location.href;
				  var existingURL = currentURL + "?lang=" + langCode
				  window.location.href = existingURL;
				}
			  }
  
			  function isAnyWordInArrayPresentInString(arrayOfWords, searchString, replacementWord) {
				for (var i = 0; i < arrayOfWords.length; i++) {
				  var wordToSearch = arrayOfWords[i];
				  if (searchString.includes(wordToSearch)) {
					searchString = searchString.replace(wordToSearch, replacementWord);
					return searchString;
				  }
				}
				return false;
			  }
			},
			getContext: _.wrap(HeaderView.prototype.getContext, function(fn) {
			  var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
			  lanObj = SC.ENVIRONMENT.availableLanguages
			  originalRet.currentLanguageSymbol = currentLanguageSymbol;
			  originalRet.langCode = langCode;
			  originalRet.symbol = symbol;
			  _.each(lanObj, function(line) {
				if (window.location.href.indexOf(line.locale) != -1) {
				  line.isSelected = true;
				}
			  })
			  originalRet.availableLanguages = lanObj;
			  return originalRet;
			})
		  });
		}
	  };
	});