fixed language switcher update on vue route change

web/modules/custom/materio_decoupled/materio_decoupled.routing.yml

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

web/modules/custom/materio_decoupled/src/Controller/MaterioDecoupledLanguageLinks.php

@@ -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);
+  }
+
+}

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -53,6 +53,8 @@ Vue.use(VueSimpleAccordion, {
   // ... Options go here
 });
 
+import { MA } from 'vuejs/api/ma-axios'
+
 (function (Drupal, drupalSettings, drupalDecoupled) {
   const MaterioTheme = function () {
     let _v_sitebranding_block, _v_user_block, _v_header_menu,
@@ -163,27 +165,38 @@ Vue.use(VueSimpleAccordion, {
         }
         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
         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 () {
       _v_sitebranding_block = new Vue({
         store,