Include support for the multi-language feature in vue components, and move the env variables into the public template since it's only being included once

readme.md

@@ -66,7 +66,7 @@ For this to work on browsers that aren't on the computer running gulp, the `BS_H
 
 ## Public
 
-The default public facing website uses vue.js. To configure a non-SPA traditional website, look at the files in `traditional-bootstrap`.
+The default public facing website uses Vue.js. To configure a non-SPA traditional website, look at the files in `traditional-bootstrap`.
 
 The following list of files and directories are where various pieces of the public website are located:
 
@@ -74,9 +74,9 @@ The following list of files and directories are where various pieces of the publ
 * `resources/views/templates/public.blade.php`: The inner template for the public site
 * `resources/assets/fonts`: The folder containing website fonts (these get loaded into `public/fonts/` by the gulpfile)
 * `resources/assets/js/app.js`: The main javascript file that loads the public site
-* `resources/assets/js/mixins`: The folder containing vue.js mixins that can be applied globally in `resources/assets/js/app.js` or in individual components
+* `resources/assets/js/mixins`: The folder containing Vue.js mixins that can be applied globally in `resources/assets/js/app.js` or in individual components
 * `resources/assets/js/mixins/base-page.js`: The base-page mixin with page functionality that should be imported into all page components
-* `resources/components`: The folder containing vue.js components
+* `resources/components`: The folder containing Vue.js components
     * `resources/components/pages`: Page components that should be imported into vue-router in `resources/assets/js/app.js`
     * `resources/components/sections`: Section components (single-use per page) that should be imported into mixins or page components
     * `resources/components/partials`: Partial components (multi-use per page or section) that should be imported into mixins and/or page and section components
@@ -95,9 +95,23 @@ Other information about database interaction, routing, controllers, etc can be v
 
 ### Language
 
-The default language is set by the `DEFAULT_LANGUAGE` variable in the `.env` file. This will be the language used until it is changed, which can be done using the `/language/{lang}` route or directly using `Language::setSessionLanguage($lang)` where in both cases `lang` is the language code for a given language.
+The default language is set by the `DEFAULT_LANGUAGE` variable in the `.env` file; this will be the language used until the cookie has been updated.
 
-In the view, a block of text can be configured with multiple languages using the following syntax:
+The language cookie can be updated a number of ways:
+
+* Visiting a link to `/language/{lang}` will update the language to whatever `{lang}` is set to and then reload the current page.
+* Running `Language::setSessionLanguage($lang)` in PHP will update the language to whatever `$lang` is.
+* Running `this.$store.commit("setAppLang", lang);` in a Vue.js component will update the language to whatever `lang` is as well as update component text to the current language on-the-fly.
+
+A multi-language text block can be included in a number of ways depending where it's being done:
+
+In PHP or a Laravel blade:
+
+```php
+    {{ Language::select([ 'en' => "This is a sentence", 'fr' => "C'est une phrase" ]) }}
+```
+
+In a Laravel blade:
 
 ```php
     @lang([
@@ -106,10 +120,10 @@ In the view, a block of text can be configured with multiple languages using the
     ])
 ```
 
-or
+In a Vue.js component:
 
-```php
-    {{ Language::select([ 'en' => "This is a sentence", 'fr' => "C'est une phrase" ]) }}
+```html
+    <lang :c-strings="{ en: 'This is a sentence', fr: 'C'est une phrase' }" />
 ```
 
 ## Dashboard

resources/assets/js/app.js

@@ -21,13 +21,15 @@ import BlogPage from "pages/blog.vue";
 import ContactPage from "pages/contact.vue";
 import Error404Page from "pages/error404.vue";
 
-// Import section components
+// Import global components
 import NavSection from "sections/nav.vue";
 import FooterSection from "sections/footer.vue";
+import Lang from "partials/lang.vue";
 
-// Name the nav and footer components so they can be used globally
+// Name the global components
 Vue.component("nav-component", NavSection);
 Vue.component("footer-component", FooterSection);
+Vue.component("lang", Lang);
 
 // Create a router instance
 const router = new VueRouter({
@@ -57,6 +59,8 @@ const router = new VueRouter({
 const store = new Vuex.Store({
     state: {
         appName: env.appName,
+        appLang: env.appLang,
+        appDefaultLang: env.appDefaultLang,
         firstLoad: true,
         lastPath: ""
     },
@@ -66,6 +70,14 @@ const store = new Vuex.Store({
             return state.appName;
         },
 
+        getAppLang: state => {
+            return state.appLang;
+        },
+
+        getAppDefaultLang: state => {
+            return state.appDefaultLang;
+        },
+
         getFirstLoad: state => {
             return state.firstLoad;
         },
@@ -76,6 +88,11 @@ const store = new Vuex.Store({
     },
 
     mutations: {
+        setAppLang(state, value) {
+            state.appLang = value;
+            Vue.http.get(`/language/${value}`);
+        },
+
         setFirstLoad(state, value) {
             state.firstLoad = value;
         },

resources/components/partials/lang.vue

@@ -0,0 +1,28 @@
+<template>
+    <span
+        class="lang-component"
+        v-html="getLanguageString">
+    </span>
+</template>
+
+<script>
+    export default {
+        props: {
+            cStrings: {
+                type: Object
+            }
+        },
+
+        computed: {
+            getLanguageString() {
+                if (this.cStrings.hasOwnProperty(this.$store.getters.getAppLang)) {
+                    return this.cStrings[this.$store.getters.getAppLang];
+                } else if (this.cStrings.hasOwnProperty(this.$store.getters.getAppDefaultLang)) {
+                    return this.cStrings[this.$store.getters.getAppDefaultLang];
+                } else {
+                    return "";
+                }
+            }
+        }
+    };
+</script>

resources/views/elements/variables.blade.php

@@ -1,9 +0,0 @@
-<script type="text/javascript">
-    var env = {
-        appName: "{{ env('APP_NAME') }}",
-        appDesc: "{{ env('APP_DESC') }}",
-        apiToken: "{{ Auth::check() ? '?api_token=' . Auth::user()->api_token : '' }}",
-        csrfToken: "{{ csrf_token() }}",
-        debug: {{ Config::get('app.debug') ? 'true' : 'false' }}
-    };
-</script>

resources/views/templates/public.blade.php

@@ -3,7 +3,18 @@
 @section('page-includes')
     <script src="/js/lib.js?version={{ env('CACHE_BUST') }}"></script>
     <link rel="stylesheet" href="/css/app.css?version={{ env('CACHE_BUST') }}" />
-    @include('elements.variables')
+
+    <script type="text/javascript">
+        var env = {
+            appName: "{{ env('APP_NAME') }}",
+            appDesc: "{{ env('APP_DESC') }}",
+            appLang: "{{ Language::getSessionLanguage() }}",
+            appDefaultLang: "{{ env('DEFAULT_LANGUAGE') }}",
+            apiToken: "{{ Auth::check() ? '?api_token=' . Auth::user()->api_token : '' }}",
+            csrfToken: "{{ csrf_token() }}",
+            debug: {{ Config::get('app.debug') ? 'true' : 'false' }}
+        };
+    </script>
 @endsection
 
 @section('page-content')