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

This commit is contained in:
Kevin MacMartin 2018-04-29 23:27:44 -04:00
parent 59f6444cd2
commit 5895333e7e
6 changed files with 81 additions and 20 deletions

View file

@ -66,7 +66,7 @@ For this to work on browsers that aren't on the computer running gulp, the `BS_H
## Public ## 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: 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/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/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/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/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/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/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 * `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 ### 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 ```php
@lang([ @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 ```html
{{ Language::select([ 'en' => "This is a sentence", 'fr' => "C'est une phrase" ]) }} <lang :c-strings="{ en: 'This is a sentence', fr: 'C'est une phrase' }" />
``` ```
## Dashboard ## Dashboard

View file

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

View file

@ -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>

View file

@ -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>

View file

@ -3,7 +3,18 @@
@section('page-includes') @section('page-includes')
<script src="/js/lib.js?version={{ env('CACHE_BUST') }}"></script> <script src="/js/lib.js?version={{ env('CACHE_BUST') }}"></script>
<link rel="stylesheet" href="/css/app.css?version={{ env('CACHE_BUST') }}" /> <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 @endsection
@section('page-content') @section('page-content')