, (*1)
Introduction
Extract Translations is a simple provision of translation listing, designed for providing use to the front end (IE: in JavaScript)., (*2)
License
Extract Translations is open-sourced software licensed under the MIT license, (*3)
Installation
To get started with Extract Translations, use Composer to add the package to your project's dependencies:, (*4)
composer require casa-parks/extract-translations
Configuration
After installing, register the CasaParks\ExtractTranslations\ExtractTranslationsServiceProvider in your config/app.php configuration file:, (*5)
'providers' => [
// Other service providers...
CasaParks\ExtractTranslations\ExtractTranslationsServiceProvider::class,
],
Basic Usage
Create a simple view composer, like so:, (*6)
<?php
namespace App\Composers;
use CasaParks\ExtractTranslations\Builder as TranslationsExtractorBuilder;
use Illuminate\Contracts\View\View;
class TranslationsComposer
{
/**
* The translations extractor builder.
*
* @var \CasaParks\ExtractTranslations\Builder
*/
protected $builder;
/**
* Whether the data is cached or not.
*
* @var bool
*/
protected $cached;
/**
* The view data.
*
* @var array
*/
protected $data;
/**
* Creates a new translations composer.
*
* @param \CasaParks\ExtractTranslations\Builder $builder
*/
public function __construct(TranslationsExtractorBuilder $builder)
{
$this->builder = $builder;
}
/**
* Compose the view.
*
* @param \Illuminate\Contracts\View\View $view
*
* @return void
*/
public function compose(View $view)
{
if (! $this->cached) {
$this->cache();
}
$view->with($this->data);
}
/**
* Cache the data.
*
* @return void
*/
protected function cache()
{
$this->cached = true;
$translations = $this->builder
->locales('en', 'de')
->groups('pagination', 'validation')
->service();
$this->data = compact('translations');
}
}
Add this view composer, into your app (or composer) service provider's boot method:, (*7)
/**
* Register any composers for your application.
*
* @return void
*/
public function boot()
{
// ...
// assuming `layout` is your common layout template.
$this->app['view']->composer('layout', 'App\Composers\TranslationsComposer');
// ...
}
In your common layout template file:, (*8)
<head>
<!-- ... -->
<script>window.translations = {!! $translations->toJson() !!}</script>
<!-- ... -->
</head>
Then utilise as required in your JavaScript., (*9)
Advanced Usage
Personally, I wouldn't want all of this work to occur on every page load. What I would do is have a translation api (we know that if the translations are going to be used on the front end then the user definitely has JavaScript enabled anyway, right?)., (*10)
I'd have a simple API controller, like so:, (*11)
namespace App\Http\Controllers\Api;
use CasaParks\ExtractTranslations\Builder;
class TranslationController extends Controller
{
/**
* Get the available translations.
*
* @param \CasaParks\ExtractTranslations\Builder $builder
*
* @return \Illuminate\Http\JsonResponse
*/
public function list(Builder $builder)
{
return $builder->locales('en', 'de')
->groups('pagination', 'validation')
->service();
}
}
A simple API route (in routes/api.php or your equivalent):, (*12)
$router->get('/api/translations', [
'as' => 'get::api.translations',
'uses' => 'Api\TranslationController@list',
]);
Then in your front end (IE, with axios):, (*13)
window.axios.get('/api/translations')
.then(translations => window.translations = translations);
Bonus Usage
You can even do this on a per-language basis, as a hot-swap, something like:, (*14)
namespace App\Http\Controllers\Api;
use CasaParks\ExtractTranslations\Builder;
class TranslationController extends Controller
{
/**
* Get the available translations.
*
* @param string $translation
* @param \CasaParks\ExtractTranslations\Builder $builder
*
* @return \Illuminate\Http\JsonResponse
*/
public function get($translation, Builder $builder)
{
$translations = $builder->locales($translation)
->groups('pagination', 'validation')
->service()
->toArray();
return array_get($translations, $translation, []);
}
}
$router->get('/api/translations/{translation}', [
'as' => 'get::api.translation',
'uses' => 'Api\TranslationController@get',
]);
function translate(translation) {
window.axios.get(`/api/translations/${translation}`)
.then(translations => window.translations = translations);
}
Wallogit.com
