feat: add translations

Makefile

@@ -21,4 +21,28 @@ docs-build:
 	cd $(HUGO); hugo
 
 .PHONY: docs
-docs: docs-copy docs-build
+docs: docs-copy docs-build
+
+#
+# Translation
+#
+
+.PHONY: l10n-push
+l10n-push:
+	cd l10n && tx -d push -s --skip --no-interactive
+
+.PHONY: l10n-pull
+l10n-pull:
+	cd l10n && tx -d pull -a
+
+.PHONY: l10n-clean
+l10n-clean:
+	cd l10n && make clean
+
+.PHONY: l10n-read
+l10n-read: node_modules
+	cd l10n && rm -rf template.pot && make extract
+
+.PHONY: l10n-write
+l10n-write: node_modules
+	cd l10n && rm -rf translations.json && make translations

__mocks__/lodash-es/merge.js

@@ -0,0 +1,3 @@
+import merge from 'lodash-es/merge'
+
+module.exports = merge

changelog/unreleased/enhancement-translations

@@ -0,0 +1,5 @@
+Enhancement: Add translations
+
+We've added vue-gettext library to add support for translations.
+
+https://github.com/owncloud/file-picker/pull/49

jest.config.js

@@ -11,13 +11,13 @@ module.exports = {
     '<rootDir>/src/**/*.{vue, js}',
     '!<rootDir>/src/main.js',
     '!<rootDir>/src/services/auth.js',
-    '!<rootDir>/src/assets/**/*'
+    '!<rootDir>/src/assets/**/*',
   ],
   coverageDirectory: '<rootDir>/coverage',
   moduleFileExtensions: ['js', 'vue'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
-    '^.+\\.(css|scss)$': 'babel-jest'
+    '^.+\\.(css|scss)$': 'babel-jest',
   },
   modulePaths: ['<rootDir>'],
   rootDir: path.resolve(__dirname, './'),
@@ -31,6 +31,7 @@ module.exports = {
     '^.+\\.js$': 'babel-jest',
     '^.+\\.vue$': 'vue-jest',
     '^.+\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/__mocks__/file.js'
-  }
+      '<rootDir>/__mocks__/file.js',
+  },
+  transformIgnorePatterns: ['node_modules/(?!lodash-es/.*)'],
 }

l10n/.tx/config

@@ -0,0 +1,11 @@
+[main]
+host = https://www.transifex.com
+lang_map = cs_CZ: cs
+
+[owncloud.file-picker]
+file_filter = locale/<lang>/file-picker.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
+

l10n/Makefile

@@ -0,0 +1,42 @@
+# On OSX the PATH variable isn't exported unless "SHELL" is also set, see: http://stackoverflow.com/a/25506676
+SHELL = /bin/bash
+NODE_BINDIR = ../node_modules/.bin
+export PATH := $(NODE_BINDIR):$(PATH)
+
+INPUT_FILES = ..
+
+# Where to write the files generated by this makefile.
+OUTPUT_DIR = .
+
+# Template file
+TEMPLATE_FILE = ./template.pot
+
+# Available locales.
+LOCALES = de fr es it cs gl
+
+# Name of the generated .po files for each available locale.
+LOCALE_FILES = $(shell find locale -name '*.po')
+
+# Makefile Targets
+.PHONY: clean extract translations
+
+clean:
+	rm -f $(TEMPLATE_FILE);
+	rm -rf locale;
+
+extract: $(TEMPLATE_FILE)
+
+translations: $(OUTPUT_DIR)/translations.json
+
+# Create a main .pot template, then generate .po files for each available language.
+# Thanks to Systematic: https://github.com/Polyconseil/systematic/blob/866d5a/mk/main.mk#L167-L183
+$(TEMPLATE_FILE):
+# Extract gettext strings from each template file and create a POT dictionary template.
+# Generate .po files for each available language.
+	export GETTEXT_SOURCES=`find $(INPUT_FILES)/src -name '*.vue' -o -name '*.js'`; \
+	node ../node_modules/easygettext/src/extract-cli.js --attribute v-translate --output $(OUTPUT_DIR)/template.pot $$GETTEXT_SOURCES;
+
+# Generate translations.json file from .pot template.
+.PHONY: $(OUTPUT_DIR)/translations.json
+$(OUTPUT_DIR)/translations.json:
+	gettext-compile --output $(OUTPUT_DIR)/translations.json $(patsubst %,$(OUTPUT_DIR)/locale/%/file-picker.po,$(LOCALES));

l10n/translations.json

@@ -0,0 +1,16 @@
+{
+  "cs_CZ": {
+    "Loading ownCloud File Picker": "Načítám ownCloud File Picker",
+    "Loading resources": "Načítám soubory",
+    "Home": "Domů",
+    "Please, select at least one resource. You can select a resource by clicking on its row or via its checkbox.": "Prosím, zvolte alespoň jeden soubor. Soubor můžete označit kliknutím na jeho řádek nebo přes zaškrtávací pole.",
+    "Select folder": "Zvolit složku",
+    "Select current folder": "Zvolit otevřenou složku",
+    "Select resources": "Zvolit soubory",
+    "Select %{ name }": "Označit %{ name }",
+    "Welcome to ownCloud File picker": "Vítejte v ownCloud File Pickeru",
+    "Please, click the button below to authenticate and get access to your data.": "Prosím, klikněte na tlačítko níže, abyste se autorizovali a získali tak přístup k vašim souborům.",
+    "Navigate into %{ name }": "Zobrazit %{ name }",
+    "Last modified %{ date }": "Naposledy upraveno %{ date }"
+  }
+}

package.json

@@ -39,6 +39,7 @@
     "core-js": "^3.11.1",
     "filesize": "^6.3.0",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "luxon": "^1.26.0",
     "oidc-client": "^1.11.5",
     "owncloud-design-system": "^6.2.0",
@@ -64,6 +65,7 @@
     "@vue/test-utils": "^1.1.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.6.3",
+    "easygettext": "^2.17.0",
     "eslint": "^7.25.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.9.0",

src/App.vue

@@ -4,7 +4,7 @@
       v-if="state === 'loading'"
       class="uk-height-1-1 uk-width-1-1 uk-flex uk-flex-middle uk-flex-center oc-border"
     >
-      <oc-spinner aria-label="Loading ownCloud file picker" />
+      <oc-spinner :aria-label="$gettext('Loading ownCloud File Picker')" />
     </div>
     <login v-if="state === 'unauthorized'" key="login-form" @login="authenticate" />
     <file-picker
@@ -24,83 +24,111 @@
 import sdk from 'owncloud-sdk'
 import DesignSystem from 'owncloud-design-system'
 import VueGettext from 'vue-gettext'
+import merge from 'lodash-es/merge'
 
 /* global Vue */
 if (!Vue.prototype.$client) {
   Vue.prototype.$client = new sdk()
 }
 
-if (!Vue.prototype.$gettext) {
-  Vue.use(VueGettext, {
-    silent: true,
-    translations: {}
-  })
-}
-
 import initVueAuthenticate from './services/auth'
 
 import { loadConfig } from './helpers/config'
 
+import filePickerTranslations from '../l10n/translations.json'
+import odsTranslations from 'owncloud-design-system/dist/system/translations.json'
+
 import FilePicker from './components/FilePicker.vue'
 import Login from './components/Login.vue'
 
+if (!Vue.prototype.$gettext) {
+  const supportedLanguages = {
+    en: 'English',
+    de: 'Deutsch',
+    es: 'Español',
+    cs: 'Czech',
+    fr: 'Français',
+    it: 'Italiano',
+    gl: 'Galego',
+  }
+  const translations = merge({}, filePickerTranslations, odsTranslations)
+
+  Vue.use(VueGettext, {
+    availableLanguages: supportedLanguages,
+    defaultLanguage: navigator.language.substring(0, 2),
+    translations,
+    silent: true,
+  })
+}
+
 export default {
   name: 'App',
 
   components: {
     FilePicker,
-    Login
+    Login,
   },
 
   props: {
     variation: {
       type: String,
       required: true,
-      validator: value => value === 'resource' || value === 'location'
+      validator: (value) => value === 'resource' || value === 'location',
     },
     configLocation: {
       type: String,
       required: false,
-      default: () => window.location.origin + '/file-picker-config.json'
+      default: () => window.location.origin + '/file-picker-config.json',
     },
     bearerToken: {
       type: String,
       required: false,
-      default: null
+      default: null,
     },
     configObject: {
       type: [Object, String],
       required: false,
-      default: null
+      default: null,
     },
     isSdkProvided: {
       type: Boolean,
       required: false,
-      default: false
+      default: false,
     },
     selectBtnLabel: {
       type: String,
       required: false,
-      default: null
+      default: null,
     },
     cancelBtnLabel: {
       type: String,
       required: false,
-      default: null
+      default: null,
     },
     isOdsProvided: {
       type: Boolean,
       required: false,
-      default: false
-    }
+      default: false,
+    },
+    locale: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   data: () => ({
     authInstance: null,
     state: 'loading',
-    config: null
+    config: null,
   }),
 
+  computed: {
+    currentLocale() {
+      return this.locale || navigator.language.substring(0, 2)
+    },
+  },
+
   created() {
     if (!this.isOdsProvided) {
       // TODO: After we enable importing single components, remove this
@@ -111,6 +139,7 @@ export default {
   },
 
   mounted() {
+    this.$language.current = this.currentLocale
     this.$refs.filePicker.focus()
   },
 
@@ -127,11 +156,11 @@ export default {
         this.$client.init({
           baseUrl: this.config.server,
           auth: {
-            bearer: bearerToken
+            bearer: bearerToken,
           },
           headers: {
-            'X-Requested-With': 'XMLHttpRequest'
-          }
+            'X-Requested-With': 'XMLHttpRequest',
+          },
         })
       }
 
@@ -176,8 +205,8 @@ export default {
         return
       }
       this.$emit('cancel')
-    }
-  }
+    },
+  },
 }
 </script>