fixed language switcher update on vue route change

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-06 22:02:48 +01:00
parent 8dadb8d3a5
commit ee908b4603
4 changed files with 110 additions and 17 deletions

View File

@ -0,0 +1,7 @@
materio_decoupled.path_translation_links:
path: 'materio_decoupled/path_translation_links'
defaults:
_controller: '\Drupal\materio_decoupled\Controller\MaterioDecoupledLanguageLinks::getPathTranslationLinks'
_title: 'Path translation links'
requirements:
_permission: 'access content'

View File

@ -0,0 +1,73 @@
<?php
namespace Drupal\materio_decoupled\Controller;
use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Drupal\Core\Language\LanguageManagerInterface;
use Drupal\Core\Url;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
/**
* Class AjaxHomeController.
*/
class MaterioDecoupledLanguageLinks extends ControllerBase {
/*
* @var \Drupal\Core\Entity\EntityTypeManagerInterface
*/
protected $languageManager;
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('language_manager')
);
}
/**
* Constructs a new MaterioDecoupledLanguageLinks object.
*
* @param \Drupal\Core\Language\LanguageManagerInterface $language_manager
* The language manager.
*/
public function __construct(LanguageManagerInterface $language_manager) {
$this->languageManager = $language_manager;
}
/**
* getPathTranslationLinks
*
* @return string
* Return translations links given a path.
*/
public function getPathTranslationLinks(Request $request) {
$post_data = json_decode( $request->getContent(),TRUE);
$path = $post_data['path'];
// build the links
$url_object = \Drupal::service('path.validator')->getUrlIfValid($path);
$route_name = $url_object->getRouteName();
$route_parameters = $url_object->getrouteParameters();
$languages = $this->languageManager->getNativeLanguages();
foreach ($languages as $key => $language) {
$url = Url::fromRoute($route_name, $route_parameters, ["language"=>$language]);
$links[$key] = [
"title" => $language->get('label'),
"url" => $url->toString()
];
}
$data = array(
"links" => $links
);
return new JsonResponse($data);
}
}

File diff suppressed because one or more lines are too long

View File

@ -53,6 +53,8 @@ Vue.use(VueSimpleAccordion, {
// ... Options go here // ... Options go here
}); });
import { MA } from 'vuejs/api/ma-axios'
(function (Drupal, drupalSettings, drupalDecoupled) { (function (Drupal, drupalSettings, drupalDecoupled) {
const MaterioTheme = function () { const MaterioTheme = function () {
let _v_sitebranding_block, _v_user_block, _v_header_menu, let _v_sitebranding_block, _v_user_block, _v_header_menu,
@ -163,27 +165,38 @@ Vue.use(VueSimpleAccordion, {
} }
document.querySelector('body').classList.add(...classes) document.querySelector('body').classList.add(...classes)
// update block language selection updateLanguageLinksBlock(to.path);
let links = document.querySelectorAll('#block-languageswitcher a.language-link')
let path = to.path.replace(/^\/\D{2,3}\//, '')
// remove language relative prefix from path classes (fr, en, etc)
.replace(/^\/\D{2,3}$/, '')
if(path !== ''){
path = '/'+path
}
links.forEach((link, i) => {
console.log("language link",path , link)
link.setAttribute('href', `/${link.getAttribute('hreflang')}${path}`)
});
// trigger router // trigger router
next() next()
}) })
} }
function updateLanguageLinksBlock(path){
// update block language selection
console.log("updateLanguageLinksBlock, path:", path);
let links = document.querySelectorAll('#block-languageswitcher a.language-link')
let params = {
path: path
// XDEBUG_SESSION_START: true
}
MA.post(`materio_decoupled/path_translation_links?`, params)
.then(({ data }) => {
console.log('Path translations links', data)
links.forEach((link, i) => {
console.log("language link",path , link)
let hreflang = link.getAttribute('hreflang')
link.setAttribute('href', data.links[hreflang].url)
link.innerHTML = data.links[hreflang].title
});
})
.catch(error => {
console.warn('Path translations links', error)
})
}
function initVSiteBrandingBlock () { function initVSiteBrandingBlock () {
_v_sitebranding_block = new Vue({ _v_sitebranding_block = new Vue({
store, store,