add ability to choose language

Added ability to choose language. Default = auto.

css/style.css

@@ -1394,13 +1394,13 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 /*************************************
 **************************** LOGIN PAGE
 **************************************/
-.login .module, .sounds .module {
+.login .module, .sounds .module, .keys .module, .language .module {
     padding: 20px;
     width: 500px;
     margin: 10px auto;
     border: 5px solid #c7cdda;
 }
-.login .module p, .sounds .module p {
+.login .module p, .sounds .module p, .keys .module p, .language .module p {
     font: 14px "Open Sans", sans-serif;
     margin-bottom: 5px;
 
@@ -1417,7 +1417,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     background: #fff;
     transition: background-color 100ms linear;
 }
-.login .module select.local-usernames, .sndOpt, #keysOpt select{
+.login .module select.local-usernames, .sndOpt, #keysOpt select, #choseLanguage select{
     height: 30px;
     font: 13px/24px "Open sans";
     text-align: center;
@@ -1889,7 +1889,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     margin-right: -163px;
     font: 12px "Open Sans", sans-serif;
 }
-#notifyForm p {
+#notifyForm p, #choseLanguage p, #keysOpt p {
     margin-top: 15px;
 }
 /* Following page */

js/calm.js

@@ -181,10 +181,19 @@ function replaceEmoji() {
 	})
 }
 
+function setLang() {
+
+	$('#language').val(localStorage['locLang'] || 'auto')
+	$('#language').on('change', function(){
+		localStorage['locLang'] = $(this).val();
+	})
+}
+
 function InitOptions () {
 	soundNotifOptions();
 	volumeControl();
 	keysSend();
+	setLang();
 }
 function homeIntInit () {
 	modalDMIntr ();

js/interface_localization.js

@@ -4,23 +4,27 @@
 // uses Polyglot.js ( https://github.com/airbnb/polyglot.js ) to translate interface
 
 // translators: add your language code here such as "es" for Spanish, "ru" for Russian
-var knownLanguages = ["en","nl","it","fr","ru","de","zh"];
+var knownLanguages = ["en","nl","it","fr","ru","de","zh"], preferredLanguage;
 
-// detect language with JavaScript
-var preferredLanguage = window.navigator.userLanguage || window.navigator.language || "en";
-if(knownLanguages.indexOf(preferredLanguage) > -1){
-  // en for en or similar
-  preferredLanguage = preferredLanguage;
-}
-else if(knownLanguages.indexOf(preferredLanguage.split("-")[0]) > -1){
-  // en for en-US or similar
-  preferredLanguage = preferredLanguage.split("-")[0];
-}
-else{
-  // did not find match
-  preferredLanguage = "en";
+if(!localStorage['locLang'] || localStorage['locLang'] == 'auto'){
+  if(!localStorage['locLang']) localStorage['locLang'] = 'auto';
+  // detect language with JavaScript
+  preferredLanguage = window.navigator.userLanguage || window.navigator.language || "en";
+  if(knownLanguages.indexOf(preferredLanguage) > -1){
+    // en for en or similar
+    preferredLanguage = preferredLanguage;
+  }
+  else if(knownLanguages.indexOf(preferredLanguage.split("-")[0]) > -1){
+    // en for en-US or similar
+    preferredLanguage = preferredLanguage.split("-")[0];
+  }
+  else{
+    // did not find match
+    preferredLanguage = "en";
+  }
+}else{
+  preferredLanguage = localStorage['locLang'];
 }
-
 // set up Polyglot
 polyglot = new Polyglot();
 var wordset = {};

options.html

@@ -48,6 +48,28 @@
 
   <div class="wrapper">
 
+    <div class="language">
+
+      <div class="module">
+        <p> Language </p>
+        <div>
+            <form action="" id="choseLanguage">
+              <p>Use language</p>
+              <select name="" id="language">
+                <option value="auto">Auto</option>
+                <option value="en">English</option>
+                <option value="ru">Russian</option>
+                <option value="zh">Chinese</option>
+        				<option value="de">German</option>
+        				<option value="fr">French</option>
+        				<option value="it">Italian</option>
+        				<option value="nl">Dutch</option>
+              </select>
+            </form>
+        </div>
+      </div>
+    </div>
+
     <div class="sounds">
 
       <div class="module">
@@ -74,24 +96,26 @@
               </select>
               <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
             </form>
-    <audio id="player"></audio>
+            <audio id="player"></audio>
         </div>
       </div>
-      
-      <div class="keys">
+    </div>
 
-      <div class="module">
-        <p> Keys </p>
-        <div>
-            <form action="" id="keysOpt">
-              <p>Send key</p>
-              <select name="" id="keysSend">
-                <option value="1">Enter</option>
-                <option value="2">Ctrl/Cmd+Enter</option>
-              </select>
-            </form>
+      <div class="keys">
+        <div class="module">
+          <p> Keys </p>
+          <div>
+              <form action="" id="keysOpt">
+                <p>Send key</p>
+                <select name="" id="keysSend">
+                  <option value="1">Enter</option>
+                  <option value="2">Ctrl/Cmd+Enter</option>
+                </select>
+              </form>
+          </div>
         </div>
-     
-    
+      </div>
+  </div>
+
   </body>
 </html>