Instant Translation Support"

4 files changed, 46 insertions, 25 deletions

diff --git a/static/js/globals.js b/static/js/globals.js
index ad0f4518..9100251b 100644
--- a/static/js/globals.js
+++ b/static/js/globals.js
@@ -7,8 +7,11 @@ gtag("js", new Date());
 gtag("config", "G-72XTC500FR");
 
 function changeLang(lang) {
-  document.cookie = "lang=" + lang + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
-  location.reload();
+  if (lang === "ja") {
+    translateJapanese();
+  } else {
+    restoreLang();
+  }
 }
 
 // Smooth scroll to anchor
diff --git a/static/js/tl.js b/static/js/tl.js
index 7eaf14a2..4cfdb7ff 100644
--- a/static/js/tl.js
+++ b/static/js/tl.js
@@ -9,31 +9,54 @@ function googleTranslateElementInit() {
   );
 }
 
-var currentLang = document.cookie.replace(
-  /(?:(?:^|.*;\s*)lang\s*\=\s*([^;]*).*$)|^.*$/,
-  "$1"
-);
-
-if (currentLang == "ja") {
-  triggerTranslation("ja");
-} else {
-  triggerTranslation("en");
+function restoreLang() {
+  localStorage.setItem("lang", "en");
+  $('#tl_ja').hide();
+  $('#tl_en').show();
+  var translateContainers = $('iframe');
+  if (translateContainers.length === 0) {
+    // nothing
+  } else {
+    translateContainers.each(function (index, element) {
+      if (element.contentWindow.document.getElementById(":1.restore")) {
+        console.log(element.contentWindow.document.getElementById(":1.restore"));
+        element.contentWindow.document.getElementById(":1.restore").click();
+      }
+    });
+  }
 }
 
-function triggerTranslation(language) {
+function translateJapanese() {
+  localStorage.setItem("lang", "ja");
+  $('#tl_en').hide();
+  $('#tl_ja').show();
   var selectEl = document.querySelector("select.goog-te-combo");
+  console.log(selectEl);
   if (!selectEl) {
     setTimeout(function () {
-      triggerTranslation(language);
+      translateJapanese();
     }, 10);
   } else if (!selectEl.options || selectEl.options.length === 0) {
     setTimeout(function () {
-      triggerTranslation(language);
+      translateJapanese();
     }, 10);
   } else {
-    selectEl.value = language;
+    selectEl.value = 'ja';
     selectEl.dispatchEvent(new Event("change"));
-    // visiblity of #main-section is hidden until translation is done, show it after translation is done
-    document.getElementById("main-section").style.visibility = "visible";
   }
 }
+
+// init
+var currentLang = localStorage.getItem("lang");
+if (!currentLang) {
+  currentLang = "en";
+  localStorage.setItem("lang", "en");
+}
+if (currentLang === "ja") {
+  $('#tl_en').hide();
+  $('#tl_ja').show();
+} else {
+  $('#tl_ja').hide();
+  $('#tl_en').show();
+  restoreLang();
+}
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index fa8c8ac9..12c4d6ea 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -93,7 +93,7 @@
         </div>
       </div>
 
-      <table id="main-section" cellpadding="0" cellspacing="0" {% if request.COOKIES.lang == 'ja' %}style="visibility: hidden"{% endif %}>
+      <table id="main-section" cellpadding="0" cellspacing="0">
         <tr>
           <td id="sidebar" valign="top">
             {% include 'blog/partials/sidebar.html' %}
@@ -148,13 +148,11 @@
     <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
     <script src="{% static 'js/globals.js' %}"></script>
     <script src="{% static 'js/phone_compatibility.js' %}"></script>
-    {% if request.COOKIES.lang == 'ja' %}
     <script
       type="text/javascript"
       src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
     ></script>
     <script src="{% static 'js/tl.js' %}"></script>
-    {% endif %}
     {% if request.COOKIES.summonOneko == 'true' %}
     <script src="{% static 'js/oneko.js' %}"></script>
     {% endif %} {% block scripts %} {% endblock %}
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 0944cc89..5b626915 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -133,11 +133,8 @@
                 <img src="{% static 'images/site/icons/translate.png' %}" alt="Translate" border="0">
             </span>
             <span>
-                {% if request.COOKIES.lang == 'ja' %}
-                <a href="javascript:changeLang('en');" class="notranslate">English</a>
-                {% else %}
-                <a href="javascript:changeLang('ja');" class="notranslate">日本語</a>
-                {% endif %}
+                <a href="javascript:changeLang('en');" id="tl_ja" style="display: none;" class="notranslate">English</a>
+                <a href="javascript:changeLang('ja');" id="tl_en" style="display: none;" class="notranslate">日本語</a>
             </span>
         </li>
         {% comment %} <li>