Create a wrapper component to set the text direction for i18n

If direction is passed in as a prop, this is used, otherwise the component
will check the store for the chosen language config and use the dir property
or default to 'ltr';
Add methods / properties to the store with actions and mutators.
When the language picker is created, update the store with the language config
matching the one chosen by the user / cookie.

Author: glenpike

src/App.vue

@@ -1,11 +1,13 @@
 <template>
   <div id="app">
-    <cd-header></cd-header>
-    <div class="cd-menu__content-container">
-      <router-view></router-view>
-      <cd-cookie-notice></cd-cookie-notice>
-    </div>
-    <cd-footer></cd-footer>
+    <cd-text-direction-wrapper>
+      <cd-header></cd-header>
+      <div class="cd-menu__content-container">
+        <router-view></router-view>
+        <cd-cookie-notice></cd-cookie-notice>
+      </div>
+      <cd-footer></cd-footer>
+    </cd-text-direction-wrapper>
   </div>
 </template>
 
@@ -14,11 +16,13 @@
   import cdHeader from './common/cd-header';
   import cdFooter from './common/cd-footer';
   import cdCookieNotice from './common/cd-cookie-notice';
+  import cdTextDirectionWrapper from './common/cd-text-direction-wrapper';
 
   export default {
     name: 'app',
     store,
     components: {
+      cdTextDirectionWrapper,
       cdHeader,
       cdFooter,
       cdCookieNotice,

src/common/cd-covid-banner.vue

@@ -1,25 +1,34 @@
 <template>
     <div class="cd-banner">
-      <p>
-         {{ $t('Thank you for your interest in joining the CoderDojo community!') }}
-         {{ $t('Due to the coronavirus pandemic, there are different restrictions in place across the world.') }}
-         {{ $t('Please follow the appropriate public health advice for your country or region before planning in-person club events.') }}
-      </p>
-      <p>
-        {{ $t('If you are ready to hold in-person club events soon, please') }}
-        <a class="cd-banner-link" href="https://zen.coderdojo.com/dashboard/start-dojo">{{ $t('register your details') }}</a>
-        {{ $t('and we will be in touch.') }}
-      </p>
-      <p>
-        {{ $t('If you’re not able to start your Dojo in person yet, there are many other ways that you can get involved in the meantime.') }}
-        {{ $t('Check out the exciting opportunities for young people, parents, volunteers, and educators to learn and get creative with tech through') }}
-        <a class="cd-banner-link" target="_blank" href="https://www.raspberrypi.org/learn/?utm_source=coderdojo&amp;utm_medium=covid-banner&amp;utm_campaign=dmah">{{ $t('Digital Making at Home') }}</a>
-        {{ $t('from the Raspberry Pi Foundation.') }}
-      </p>
+      <cd-text-direction-wrapper direction="ltr">
+        <p>
+          {{ $t('Thank you for your interest in joining the CoderDojo community!') }}
+          {{ $t('Due to the coronavirus pandemic, there are different restrictions in place across the world.') }}
+          {{ $t('Please follow the appropriate public health advice for your country or region before planning in-person club events.') }}
+        </p>
+        <p>
+          {{ $t('If you are ready to hold in-person club events soon, please') }}
+          <a class="cd-banner-link" href="https://zen.coderdojo.com/dashboard/start-dojo">{{ $t('register your details') }}</a>
+          {{ $t('and we will be in touch.') }}
+        </p>
+        <p>
+          {{ $t('If you’re not able to start your Dojo in person yet, there are many other ways that you can get involved in the meantime.') }}
+          {{ $t('Check out the exciting opportunities for young people, parents, volunteers, and educators to learn and get creative with tech through') }}
+          <a class="cd-banner-link" target="_blank" href="https://www.raspberrypi.org/learn/?utm_source=coderdojo&amp;utm_medium=covid-banner&amp;utm_campaign=dmah">{{ $t('Digital Making at Home') }}</a>
+          {{ $t('from the Raspberry Pi Foundation.') }}
+        </p>
+      </cd-text-direction-wrapper>
     </div>
 </template>
 
 <script>
+import cdTextDirectionWrapper from './cd-text-direction-wrapper';
+
+export default {
+  components: {
+    cdTextDirectionWrapper,
+  },
+};
 </script>
 
 <style scoped lang="less">

src/common/cd-text-direction-wrapper.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="lang-wrapper" v-bind:dir="textDirection">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['direction'],
+  computed: {
+    textDirection() {
+      if (this.direction) {
+        return this.direction;
+      }
+
+      const config = this.$store.getters.chosenLanguageConfig;
+      let direction = 'ltr';
+      if (config && config.dir) {
+        direction = config.dir;
+      }
+      return direction;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/locale/cd-lang-picker.vue

@@ -3,7 +3,7 @@
     <div class="col-md-4 col-sm-6">
       <span class="fa fa-language fa-2x cd-lang-picker__icon"></span>
       <select class="cd-lang-picker__select" v-model="lang">
-        <option v-for="availableLanguage in availableLanguages" :value="availableLanguage.code">{{ availableLanguage.name }} ({{ availableLanguage.country }})</option>
+        <option v-for="availableLanguage in availableLanguages" :value="availableLanguage.code" v-bind:key="availableLanguage.code">{{ availableLanguage.name }} ({{ availableLanguage.country }})</option>
       </select>
     </div>
     <div class="col-md-8 col-sm-6">
@@ -52,22 +52,26 @@
             this.setMomentLocale(val);
             this.$i18n.setLocaleMessage(val, strings);
             this.$i18n.locale = val;
+            const matchingLanguageConfig = find(this.availableLanguages,
+              language => language.code === val);
+            this.$store.dispatch('updateChosenLanguageConfig', matchingLanguageConfig);
           });
       },
     },
     async created() {
       this.availableLanguages = (await this.getAvailableLanguages()).body;
       const browserLocale = navigator.language.replace('-', '_');
-      const matchingLocale = find(this.availableLanguages,
+      const matchingLanguageConfig = find(this.availableLanguages,
         language => language.code === browserLocale);
       const langCookie = Cookie.get('NG_TRANSLATE_LANG_KEY');
       if (langCookie) {
         this.lang = langCookie.substring(1, langCookie.length - 1);
-      } else if (matchingLocale) {
+      } else if (matchingLanguageConfig) {
         this.lang = browserLocale;
       } else {
         this.lang = 'en_US';
       }
+      this.$store.dispatch('updateChosenLanguageConfig', matchingLanguageConfig);
     },
   };
 </script>

src/store/index.js

@@ -8,6 +8,7 @@ export default new Vuex.Store({
   state: {
     loggedInUser: null,
     dojo: null,
+    chosenLanguageConfig: null,
   },
   mutations: {
     setLoggedInUser(state, user) {
@@ -16,6 +17,9 @@ export default new Vuex.Store({
     setDojo(state, dojo) {
       Vue.set(state, 'dojo', dojo);
     },
+    setChosenLanguageConfig(state, chosenLanguageConfig) {
+      Vue.set(state, 'chosenLanguageConfig', chosenLanguageConfig);
+    },
   },
   actions: {
     async getLoggedInUser({ commit }) {
@@ -28,6 +32,9 @@ export default new Vuex.Store({
       const dojo = (await Vue.http.get(`${Vue.config.apiServer}/api/2.0/dojos/${dojoId}`)).body;
       commit('setDojo', dojo);
     },
+    updateChosenLanguageConfig({ commit }, chosenLanguageConfig) {
+      commit('setChosenLanguageConfig', chosenLanguageConfig);
+    },
   },
   getters: {
     loggedInUser: (state) => {
@@ -45,6 +52,7 @@ export default new Vuex.Store({
       state.loggedInUser.login !== null &&
       state.loggedInUser.login.id !== undefined,
     dojo: state => state.dojo,
+    chosenLanguageConfig: state => state.chosenLanguageConfig,
     // User properties
     hasRequests: (state, getters) => getters.isLoggedIn &&
       getters.loggedInUser.joinRequests &&