https://www.dearstelladesign.com/js/translation.js

1// Required for Google Translate
2function googleTranslateElementInit() {
3  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,fr,iw', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
4}
5
6// Use to close Google Translate and restore to original language
7function closeGoogle() {
8  var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
9  if(!iframe) return;
10
11  var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
12  var restore_el = innerDoc.getElementsByTagName("button");
13
14  for(var i = 0; i < restore_el.length; i++){
15    if(restore_el[i].id.indexOf("restore") >= 0) {
16      restore_el[i].click();
17      var close_el = innerDoc.getElementsByClassName("goog-close-link");
18      close_el[0].click();
19      return;
20    }
21  }
22}
23
24// Return flag icon to default when user clicks close on Google Translate tab
25function returnToDefault() {
26  var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
27  if (iframe) {
28    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
29    innerDoc.getElementsByClassName("goog-close-link")[0].addEventListener("click", function(event) {
30      $(".language.btn:first-child").html("<img src='flags/usa-flag-sm.png' alt='USA' style='cursor: pointer;'> &nbsp; English");
31      var googleIndex = window.location.href.indexOf("#googtrans");
32      sessionStorage.removeItem("previousHtml");
33      closeGoogle();
34      window.location.href = window.location.href.substring(0, googleIndex);
35    });
36  }
37}
38
39// functions called on browser load
40function start() {
41  googleTranslateElementInit();
42  returnToDefault();
43  // variables for url calculation
44  let indexHostname = window.location.href.indexOf(window.location.pathname);
45  let sizeOfPathname = window.location.pathname.length;
46  let indexAfterPathname = indexHostname + sizeOfPathname;
47  let pageUrl = window.location.href.substring(0, indexAfterPathname);
48  let pageQueryString = window.location.href.substring(indexAfterPathname);
49  let lengthOfGoogleString = "#googtrans(en|en)".length;
50
51  // event handler for spanish
52  $('*[id^="spanish"]').click(function() {
53      if(window.location.href.indexOf("#googtrans(en|es)") === -1) {
54
55        if(window.location.search) {
56          window.location.href = window.location.pathname + window.location.search + "#googtrans(en|es)";
57        } else {
58          window.location.href = window.location.pathname + "#googtrans(en|es)";
59        }
60
61
62        if ((window.location.href.indexOf("?") !== -1) && (window.location.href.indexOf("#googtrans") !== -1)) {
63          location.reload(); 
64        } else if (window.location.href.indexOf("?") === -1) {
65          location.reload();
66        }
67
68      } 
69  });
70
71  //event handler for hebrew
72  $('*[id^="hebrew"]').click(function() {
73      if(window.location.href.indexOf("#googtrans(en|iw)") === -1) {
74
75        if(window.location.search) {
76          window.location.href = window.location.pathname + window.location.search + "#googtrans(en|iw)";
77        } else {
78          window.location.href = window.location.pathname + "#googtrans(en|iw)";
79        }
80
81
82        if ((window.location.href.indexOf("?") !== -1) && (window.location.href.indexOf("#googtrans") !== -1)) {
83          location.reload(); 
84        } else if (window.location.href.indexOf("?") === -1) {
85          location.reload();
86        }
87
88      } 
89  });
90
91  // event handler for french
92  $('*[id^="french"]').click(function(){
93      if(window.location.href.indexOf("#googtrans(en|fr)") === -1) {
94
95        if(window.location.search) {
96          window.location.href = window.location.pathname + window.location.search + "#googtrans(en|fr)";
97        } else {
98          window.location.href = window.location.pathname + "#googtrans(en|fr)";
99        }
100
101
102        if ((window.location.href.indexOf("?") !== -1) && (window.location.href.indexOf("#googtrans") !== -1)) {
103          location.reload(); 
104        } else if (window.location.href.indexOf("?") === -1) {
105          location.reload();
106        }
107
108      } 
109  });
110
111  // event handler for english
112  $('*[id^="english"]').click(function(){
113      sessionStorage.removeItem("previousHtml");
114      closeGoogle();
115      var googleIndex = window.location.href.indexOf("#googtrans");
116      window.location.href = window.location.href.substring(0, googleIndex);
117    });

118}
119
120// run returnToDefault() on window load
121//window.onload = start;
122if($ === jQuery) {
123  $(window).bind("load",start);
124} else {
125  if(window.addEventListener){
126    window.addEventListener('load', start);
127  }else{
128    window.attachEvent('onload', start);
129  }
130}
131
132
133// if no previous flag in sessionStorage default to USA flag
134if (sessionStorage)
135  $(".language.btn:first-child").html(sessionStorage['previousHtml']);
136else
137  $(".language.btn:first-child").html("<img src='flags/usa-flag-sm.png' alt='USA' style='cursor: pointer;'> &nbsp; English");
138
139// return flag Icon to previous flag
140$(function(){
141$(".language.dropdown-menu li a").click(function(){
142  sessionStorage['previousHtml'] = $(this).html();
143});
144
145});
146
147$('.language a').click(function(e) {
148  e.preventDefault();
149  //do other stuff when a click happens
150});
151
152