www: i18n in js

1 files changed, 84 insertions, 29 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index fa6d1307..a5da0849 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -20,6 +20,7 @@ require('whatwg-fetch');
 require('element-closest');
 require('classlist.js');
 var killy = require('killy');
+
 if (!('remove' in Element.prototype)) { // Firefox <23
     Element.prototype.remove = function() {
         if (this.parentNode) {
@@ -31,6 +32,54 @@ if (!('remove' in Element.prototype)) { // Firefox <23
 NodeList.prototype.forEach = Array.prototype.forEach;
 HTMLCollection.prototype.forEach = Array.prototype.forEach;
 
+const translations = {
+    'en': {
+        'message.inReplyTo': 'in reply to',
+        'message.reply': 'Reply',
+        'postForm.pleaseInputMessageText': 'Please input message text',
+        //'postForm.upload': 'upload',
+        'comment.writeComment': 'Write comment...',
+        'shareDialog.linkToMessage': 'Link to message',
+        'shareDialog.messageNumber': 'Message number',
+        'shareDialog.share': 'Share',
+        'loginDialog.pleaseIntroduceYourself': 'Please introduce yourself',
+        'loginDialog.registeredAlready': 'Registered already?',
+        'loginDialog.username': 'Username',
+        'loginDialog.password': 'Password',
+        'loginDialog.vk': 'vk.com',
+        'error.error': 'Error'
+    },
+    'ru': {
+        'message.inReplyTo': 'в ответ на',
+        'message.reply': 'Ответить',
+        'postForm.pleaseInputMessageText': 'Пожалуйста, введите текст сообщения',
+        'postForm.upload': 'загрузить',
+        'comment.writeComment': 'Написать комментарий...',
+        'shareDialog.linkToMessage': 'Ссылка на сообщение',
+        'shareDialog.messageNumber': 'Номер сообщения',
+        'shareDialog.share': 'Поделиться',
+        'loginDialog.pleaseIntroduceYourself': 'Пожалуйста, представьтесь',
+        'loginDialog.registeredAlready': 'Уже зарегистрированы?',
+        'loginDialog.username': 'Имя пользователя',
+        'loginDialog.password': 'Пароль',
+        'loginDialog.vk': 'ВКонтакте',
+        'error.error': 'Ошибка'
+    }
+};
+
+function getLang() {
+    return (window.navigator.languages && window.navigator.languages[0])
+        || window.navigator.userLanguage
+        || window.navigator.language;
+}
+function i18n(key, lang=undefined) {
+    const fallbackLang = 'ru';
+    lang = lang || getLang().split('-')[0];
+    return (translations[lang] && translations[lang][key])
+        || translations[fallbackLang][key]
+        || key;
+}
+
 var ws,
     pageTitle;
 
@@ -105,7 +154,7 @@ function wsIncomingReply(msg) {
     const unsetProto = (url) => url.replace(/^(https?:)?(?=\/\/)/i, '');
     let msgNum = '/' + msg.rid;
     if (msg.replyto > 0) {
-        msgNum += ` в ответ на <a href="#${msg.replyto}">/${msg.replyto}</a>`;
+        msgNum += ` ${i18n('message.inReplyTo')} <a href="#${msg.replyto}">/${msg.replyto}</a>`;
     }
     let photoDiv = (msg.photo === undefined) ? '' : `
             <div class="msg-media"><a href="//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}">
@@ -124,7 +173,7 @@ function wsIncomingReply(msg) {
                 </div>
             </div>
             <div class="msg-txt">${killy.format(msg.body, msg.mid, false)}</div>${photoDiv}
-            <div class="msg-links">${msgNum} &middot; <a class="msg-reply-link" href="#">Ответить</a></div>
+            <div class="msg-links">${msgNum} &middot; <a class="msg-reply-link" href="#">${i18n('message.reply')}</a></div>
             <div class="msg-comment" style="display: none;"></div>
         </div>`;
 
@@ -213,7 +262,7 @@ function unfoldPostForm() {
 
 function newMessage() {
     if (document.querySelector('#newmessage textarea').value.length == 0) {
-        openDialog('<p class="dialogtxt">Пожалуйста, введите текст сообщения</p>');
+        openDialog('<p class="dialogtxt">' + i18n('postForm.pleaseInputMessageText') + '</p>');
         return false;
     }
     return true;
@@ -267,7 +316,7 @@ function taWrapper() {
     txtarea.setAttribute('name', 'body');
     txtarea.setAttribute('rows', 1);
     txtarea.setAttribute('class', 'reply narrow');
-    txtarea.setAttribute('placeholder', 'Написать комментарий...');
+    txtarea.setAttribute('placeholder', i18n('comment.writeComment'));
     var txtKeypress = function (e) {
         postformListener(e.target, e);
     };
@@ -359,13 +408,13 @@ function attachMessagePhoto(div) {
         inp.style.width = 0;
         inp.style.height = 0;
         inp.addEventListener('change', function () {
-            div.textContent = 'загрузить (✓)';
+            div.textContent = i18n('postForm.upload') + ' (✓)';
         });
         f.appendChild(inp);
         inp.click();
     } else {
         finput.remove();
-        div.textContent = 'загрузить';
+        div.textContent = i18n('postForm.upload');
     }
 }
 
@@ -383,23 +432,25 @@ function unfoldReply() {
 }
 
 function showMessageLinksDialog(mid, rid) {
-    var hlink = window.location.protocol + '//juick.com/' + mid,
-        mlink = '#' + mid;
+    let hlink = window.location.protocol + '//juick.com/' + mid;
+    let mlink = '#' + mid;
     if (rid > 0) {
         hlink += '#' + rid;
         mlink += '/' + rid;
     }
-    var hlinkenc = encodeURIComponent(hlink),
-        html = '<div class="dialogshare">Ссылка на сообщение:'
-            + '<div onclick="this.selectText()" class="dialogl">' + hlink + '</div>'
-            + 'Номер сообщения:'
-            + '<div onclick="this.selectText()" class="dialogl">' + mlink + '</div>'
-            + 'Поделиться:<ul>'
-            + '<li><a href="https://www.facebook.com/sharer/sharer.php?u=' + hlinkenc + '" onclick="return openSocialWindow(this)"></a></li>'
-            + '<li><a href="https://twitter.com/intent/tweet?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -32px 0;"></a></li>'
-            + '<li><a href="https://vk.com/share.php?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -64px 0;"></a></li>'
-            + '<li><a href="https://plus.google.com/share?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -96px 0;"></a></li>'
-            + '</ul></div>';
+    let hlinkenc = encodeURIComponent(hlink);
+    let html = `
+        <div class="dialogshare">
+            ${i18n('shareDialog.linkToMessage')}: <div onclick="this.selectText()" class="dialogl">${hlink}</div>
+            ${i18n('shareDialog.messageNumber')}: <div onclick="this.selectText()" class="dialogl">${mlink}</div>
+            ${i18n('shareDialog.share')}:
+            <ul>
+                <li><a href="https://www.facebook.com/sharer/sharer.php?u=${hlinkenc}" onclick="return openSocialWindow(this)"></a></li>
+                <li><a href="https://twitter.com/intent/tweet?url=${hlinkenc}" onclick="return openSocialWindow(this)" style="background-position: -32px 0;"></a></li>
+                <li><a href="https://vk.com/share.php?url=${hlinkenc}" onclick="return openSocialWindow(this)" style="background-position: -64px 0;"></a></li>
+                <li><a href="https://plus.google.com/share?url=${hlinkenc}" onclick="return openSocialWindow(this)" style="background-position: -96px 0;"></a></li>
+            </ul>
+        </div>`;
 
     openDialog(html);
 }
@@ -459,15 +510,19 @@ function checkUsername() {
 /******************************************************************************/
 
 function openDialogLogin() {
-    var html = '<div class="dialoglogin"><p>Пожалуйста, представьтесь:'
-        + '<a href="/_fblogin" id="signfb">Facebook</a> '
-        + '<a href="/_vklogin" id="signvk">ВКонтакте</a></p>'
-        + '<p>Уже зарегистрированы?</p>'
-        + '<form action="/login" method="POST">'
-        + '<input class="signinput" type="text" name="username" placeholder="Имя пользователя"/><br/>'
-        + '<input class="signinput" type="password" name="password" placeholder="Пароль"/><br/>'
-        + '<input class="signsubmit" type="submit" value="OK"/>'
-        + '</form></div>';
+    let html = `
+        <div class="dialoglogin">
+            <p>${i18n('loginDialog.pleaseIntroduceYourself')}:
+                <a href="/_fblogin" id="signfb">Facebook</a>
+                <a href="/_vklogin" id="signvk">${i18n('loginDialog.vk')}</a>
+            </p>
+            <p>${i18n('loginDialog.registeredAlready')}</p>
+            <form action="/login" method="POST">
+                <input class="signinput" type="text" name="username" placeholder="${i18n('loginDialog.username')}"/><br/>
+                <input class="signinput" type="password" name="password" placeholder="${i18n('loginDialog.password')}"/><br/>
+                <input class="signsubmit" type="submit" value="OK"/>
+            </form>
+        </div>`;
     openDialog(html);
     return false;
 }
@@ -492,7 +547,7 @@ function likeMessage(e, mid) {
                 }
             })
             .catch(function () {
-                e.closest('article').appendChild(resultMessage('Ошибка'));
+                e.closest('article').appendChild(resultMessage(i18n('error.error')));
             });
     }
     return false;