diff --git a/src/main.js b/src/main.js index 2acc1bc..c328104 100644 --- a/src/main.js +++ b/src/main.js @@ -2,11 +2,11 @@ import Vue from 'vue' import BootstrapVue from 'bootstrap-vue' import Meta from 'vue-meta' import Vue2TouchEvents from 'vue2-touch-events' +import VueMessages from './messages' +import App from './App' import router from './router' import store from './store' -import App from './App' - Vue.use(BootstrapVue, { BButton: { pill: true }, @@ -15,6 +15,7 @@ Vue.use(BootstrapVue, { }) Vue.use(Meta) Vue.use(Vue2TouchEvents) +Vue.use(VueMessages) // Register global components diff --git a/src/messages/fr.json b/src/messages/fr.json new file mode 100644 index 0000000..e1c4f52 --- /dev/null +++ b/src/messages/fr.json @@ -0,0 +1,10 @@ +{ + "title": "En françaiS au pluriel", + "sections": { + "home": "Accueil", + "library": "Bibliothèque", + "kit": "Kit de désapprentissage", + "gallery": "Créations numériques" + }, + "bounce_texts": "Textes rebonds" +} diff --git a/src/messages/index.js b/src/messages/index.js new file mode 100644 index 0000000..830c971 --- /dev/null +++ b/src/messages/index.js @@ -0,0 +1,35 @@ +import messages from './fr.json' + + +function getMessage (keyedPath, alt) { + console.log(keyedPath, alt) + let message + try { + message = keyedPath.split('.').reduce((parent, key) => { + return parent[key] + }, messages) + } catch { + // Silence errors like accessing a key on `undefined`. + } + return message === undefined + ? alt === undefined ? keyedPath : alt + : message +} + + +/* + * Allows separtion of static text content from its templates. + */ +export default class VueMessages { + static install (Vue) { + // Adds `this.$t('path.to.string', 'alt')` to every instances. + Vue.prototype.$t = getMessage + + // Adds `v-t="'path.to.string'"` directive to every elements. + Vue.directive('t', { + bind (el, { value }) { + el.textContent = getMessage(value) + } + }) + } +}