i18n: switch to fluent

src/assets/javascripts/app.js

@@ -555,7 +555,7 @@ var vm = new Vue({
       })
     },
     moveFeedToNewFolder: function(feed) {
-      var title = prompt('Enter folder name:')
+      var title = prompt(this.$t('prompt_folder_name'))
       if (!title) return
       api.folders.create({'title': title}).then(function(folder) {
         api.feeds.update(feed.id, {folder_id: folder.id}).then(function() {
@@ -566,7 +566,7 @@ var vm = new Vue({
       })
     },
     createNewFeedFolder: function() {
-      var title = prompt('Enter folder name:')
+      var title = prompt(this.$t('prompt_folder_name'))
       if (!title) return
       api.folders.create({'title': title}).then(function(result) {
         vm.refreshFeeds().then(function() {
@@ -579,7 +579,7 @@ var vm = new Vue({
       })
     },
     renameFolder: function(folder) {
-      var newTitle = prompt('Enter new title', folder.title)
+      var newTitle = prompt(this.$t('prompt_new_title'), folder.title)
       if (newTitle) {
         api.folders.update(folder.id, {title: newTitle}).then(function() {
           folder.title = newTitle
@@ -590,7 +590,7 @@ var vm = new Vue({
       }
     },
     deleteFolder: function(folder) {
-      if (confirm('Are you sure you want to delete ' + folder.title + '?')) {
+      if (confirm(this.$t('confirm_delete_folder', {name: folder.title}))) {
         api.folders.delete(folder.id).then(function() {
           vm.feedSelected = null
           vm.refreshStats()
@@ -599,7 +599,7 @@ var vm = new Vue({
       }
     },
     updateFeedLink: function(feed) {
-      var newLink = prompt('Enter feed link', feed.feed_link)
+      var newLink = prompt(this.$t('prompt_feed_link'), feed.feed_link)
       if (newLink) {
         api.feeds.update(feed.id, {feed_link: newLink}).then(function() {
           feed.feed_link = newLink
@@ -607,7 +607,7 @@ var vm = new Vue({
       }
     },
     renameFeed: function(feed) {
-      var newTitle = prompt('Enter new title', feed.title)
+      var newTitle = prompt(this.$t('prompt_new_title'), feed.title)
       if (newTitle) {
         api.feeds.update(feed.id, {title: newTitle}).then(function() {
           feed.title = newTitle
@@ -615,7 +615,7 @@ var vm = new Vue({
       }
     },
     deleteFeed: function(feed) {
-      if (confirm('Are you sure you want to delete ' + feed.title + '?')) {
+      if (confirm(this.$t('confirm_delete_feed', {name: feed.title}))) {
         api.feeds.delete(feed.id).then(function() {
           vm.feedSelected = null
           vm.refreshStats()

src/assets/javascripts/i18n.js

@@ -321,14 +321,14 @@
       "ru": "Введите ссылку на ленту"
     },
     "confirm_delete_folder": {
-      "en": "Are you sure you want to delete",
-      "zh": "确定要删除",
-      "ru": "Вы уверены, что хотите удалить"
+      "en": "Are you sure you want to delete { $name }?",
+      "zh": "确定要删除{ $name }？",
+      "ru": "Вы уверены, что хотите удалить { $name }?"
     },
     "confirm_delete_feed": {
-      "en": "Are you sure you want to delete",
-      "zh": "确定要删除",
-      "ru": "Вы уверены, что хотите удалить"
+      "en": "Are you sure you want to delete { $name }?",
+      "zh": "确定要删除{ $name }？",
+      "ru": "Вы уверены, что хотите удалить { $name }?"
     },
     "alert_no_feeds": {
       "en": "No feeds found at the given url.",
@@ -351,22 +351,26 @@
       "ru": "Пароль"
     },
   };
-  class i18n {
-    constructor() {
-      this.lang = 'en'
-    }
-    setLang(lang) {
-      this.lang = lang
-    }
-    $t(code) {
-      return translations[code][this.lang]
-    }
+  function ftlFrom(lang) {
+    return Object.entries(translations)
+      .map(([key, langs]) => `${key} = ${langs[lang]}`)
+      .join('\n')
   }
   exports.i18n = {
-    install(Vue, opts) {
-      const x = new i18n();
-      Vue.prototype.$t = x.$t
-      Vue.prototype.$setLang = x.setLang
+    install(Vue) {
+      let bundle = null
+      Vue.prototype.$setLang = function (lang) {
+        const ftl = ftlFrom(lang)
+        const resource = new FluentBundle.FluentResource(ftl)
+        bundle = new FluentBundle.FluentBundle(lang)
+        bundle.addResource(resource)
+      }
+      Vue.prototype.$t = function (code, args) {
+        if (!bundle) return
+        const msg = bundle.getMessage(code)
+        if (!msg || !msg.value) return
+        return bundle.formatPattern(msg.value, args)
+      }
     }
   }
 })(window)