Merge pull request #468 from codimd/fix/moment-js-locale

[1.x] Fix: Set moment.js locale to users' locale (#275)

locales/en.json

@@ -124,5 +124,7 @@
     "Limited - Signed-in people can edit (forbid guests)": "Limited - Signed-in people can edit (forbid guests)",
     "Locked - Only owner can edit": "Locked - Only owner can edit",
     "Protected - Only owner can edit (forbid guests)": "Protected - Only owner can edit (forbid guests)",
-    "Private - Only owner can view & edit": "Private - Only owner can view & edit"
+    "Private - Only owner can view & edit": "Private - Only owner can view & edit",
+    "changed": "changed",
+    "created": "created"
 }

public/js/extra.js

@@ -27,6 +27,7 @@ require('prismjs/components/prism-makefile')
 require('prismjs/components/prism-gherkin')
 
 require('./lib/common/login')
+require('./locale')
 require('../vendor/md-toc')
 var Viz = require('viz.js')
 const ui = getUIElements()
@@ -35,7 +36,8 @@ const ui = getUIElements()
 window.createtime = null
 window.lastchangetime = null
 window.lastchangeui = {
-  status: $('.ui-status-lastchange'),
+  statusChanged: $('.ui-status-lastchange.changed'),
+  statusCreated: $('.ui-status-lastchange.created'),
   time: $('.ui-lastchange'),
   user: $('.ui-lastchangeuser'),
   nouser: $('.ui-no-lastchangeuser')
@@ -47,9 +49,11 @@ export function updateLastChange () {
   if (!window.lastchangeui) return
   if (window.createtime) {
     if (window.createtime && !window.lastchangetime) {
-      window.lastchangeui.status.text('created')
+      window.lastchangeui.statusChanged.hide()
+      window.lastchangeui.statusCreated.show()
     } else {
-      window.lastchangeui.status.text('changed')
+      window.lastchangeui.statusChanged.show()
+      window.lastchangeui.statusCreated.hide()
     }
     const time = window.lastchangetime || window.createtime
     window.lastchangeui.time.html(moment(time).fromNow())

public/js/locale.js

@@ -1,32 +1,40 @@
 /* eslint-env browser, jquery */
 /* global Cookies */
 
-var lang = 'en'
-var userLang = navigator.language || navigator.userLanguage
-var userLangCode = userLang.split('-')[0]
-var locale = $('.ui-locale')
-var supportLangs = []
-$('.ui-locale option').each(function () {
-  supportLangs.push($(this).val())
-})
-if (Cookies.get('locale')) {
-  lang = Cookies.get('locale')
+const supported = ['en', 'zh-CN', 'zh-TW', 'fr', 'de', 'ja', 'es', 'ca', 'el', 'pt', 'it', 'tr', 'ru', 'nl', 'hr', 'pl', 'uk', 'hi', 'sv', 'eo', 'da', 'ko', 'id', 'sr', 'vi', 'ar', 'cs', 'sk']
+
+function detectLang () {
+  if (Cookies.get('locale')) {
+    let lang = Cookies.get('locale')
     if (lang === 'zh') {
       lang = 'zh-TW'
     }
-} else if (supportLangs.indexOf(userLang) !== -1) {
-  lang = supportLangs[supportLangs.indexOf(userLang)]
-} else if (supportLangs.indexOf(userLangCode) !== -1) {
-  lang = supportLangs[supportLangs.indexOf(userLangCode)]
+    return lang
+  }
+  const userLang = navigator.language || navigator.userLanguage
+  const userLangCode = userLang.split('-')[0]
+  if (supported.includes(userLangCode)) {
+    return userLangCode
+  } else if (supported.includes(userLang)) {
+    return userLang
+  }
+  return 'en'
 }
 
-locale.val(lang)
-$('select.ui-locale option[value="' + lang + '"]').attr('selected', 'selected')
+const lang = detectLang()
+const localeSelector = $('.ui-locale')
 
-locale.change(function () {
+// the following condition is needed as the selector is only available in the intro/history page
+if (localeSelector.length > 0) {
+  localeSelector.val(lang)
+  $('select.ui-locale option[value="' + lang + '"]').attr('selected', 'selected')
+  localeSelector.change(function () {
     Cookies.set('locale', $(this).val(), {
       expires: 365,
       sameSite: 'strict'
     })
     window.location.reload()
-})
+  })
+}
+
+window.moment.locale(lang)

public/views/codimd/body.ejs

@@ -7,8 +7,9 @@
             <small>
                 <span>
                     <span class="ui-lastchangeuser" style="display: none;">&thinsp;<i class="ui-user-icon small" data-toggle="tooltip" data-placement="right"></i></span>
-                    <span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o fa-fw" style="width: 18px;"></i></span>
-                    &nbsp;<span class="text-uppercase ui-status-lastchange"></span>
+                    <span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o fa-fw" style="width: 18px;"></i></span>&nbsp;
+                    <span class="text-uppercase ui-status-lastchange changed"><%= __('changed') %></span>
+                    <span class="text-uppercase ui-status-lastchange created"><%= __('created') %></span>
                     <span class="ui-lastchange text-uppercase"></span>
                 </span>
                 <span class="ui-permission dropdown pull-right">