From 5895333e7e960ec59cc27db469518f0f4a2c1bfa Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Sun, 29 Apr 2018 23:27:44 -0400 Subject: [PATCH] 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 | 30 ++++++++++++++------ resources/assets/js/app.js | 21 ++++++++++++-- resources/components/partials/.gitkeep | 0 resources/components/partials/lang.vue | 28 ++++++++++++++++++ resources/views/elements/variables.blade.php | 9 ------ resources/views/templates/public.blade.php | 13 ++++++++- 6 files changed, 81 insertions(+), 20 deletions(-) delete mode 100644 resources/components/partials/.gitkeep create mode 100644 resources/components/partials/lang.vue delete mode 100644 resources/views/elements/variables.blade.php diff --git a/readme.md b/readme.md index 91e51b8..626764b 100644 --- a/readme.md +++ b/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 + ``` ## Dashboard diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index f8a7e42..3624e7e 100644 --- a/resources/assets/js/app.js +++ b/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; }, diff --git a/resources/components/partials/.gitkeep b/resources/components/partials/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/resources/components/partials/lang.vue b/resources/components/partials/lang.vue new file mode 100644 index 0000000..1f29299 --- /dev/null +++ b/resources/components/partials/lang.vue @@ -0,0 +1,28 @@ + + + diff --git a/resources/views/elements/variables.blade.php b/resources/views/elements/variables.blade.php deleted file mode 100644 index cb3fd37..0000000 --- a/resources/views/elements/variables.blade.php +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/resources/views/templates/public.blade.php b/resources/views/templates/public.blade.php index 04c5cbf..0958999 100644 --- a/resources/views/templates/public.blade.php +++ b/resources/views/templates/public.blade.php @@ -3,7 +3,18 @@ @section('page-includes') - @include('elements.variables') + + @endsection @section('page-content')