Fix language switcher links render

skilld-labs · Oct 25, 2019 · 2015b30 · 2015b30
1 parent 2003eae
commit 2015b30
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 16 deletions.
diff --git a/skilld_lang_dropdown.module b/skilld_lang_dropdown.module
@@ -6,6 +6,8 @@
  */
 
 use Drupal\Core\Url;
+use Drupal\Core\Template\Attribute;
+use Drupal\Component\Serialization\Json;
 
 /**
  * Implements hook_language_switch_links_alter().
@@ -41,10 +43,97 @@ function skilld_lang_dropdown_theme($existing, $type, $theme, $path) {
       'template' => 'dropdown-button',
       'variables' => [
         'attributes' => [],
+        'set_active_class' => FALSE,
         'links' => [],
         'button_icon' => '',
         'button_text' => '',
       ],
     ],
   ];
 }
+
+function template_preprocess_dropdown_button(&$variables) {
+  $links = $variables['links'];
+  if (!empty($links)) {
+    $variables['links'] = [];
+    foreach ($links as $key => $link) {
+      $item = [];
+      $link += [
+        'ajax' => NULL,
+        'url' => NULL,
+      ];
+
+      $li_attributes = new Attribute($link['attributes']);
+      $keys = ['title', 'url'];
+
+      $link_element = [
+        '#type' => 'link',
+        '#title' => $link['title'],
+        '#options' => array_diff_key($link, array_combine($keys, $keys)),
+        '#url' => $link['url'],
+        '#ajax' => $link['ajax'],
+      ];
+
+      // Handle links and ensure that the active class is added on the LIs, but
+      // only if the 'set_active_class' option is not empty. Links templates
+      // duplicate the "is-active" class handling of l() and
+      // LinkGenerator::generate() because they need to be able to set the
+      // "is-active" class not on the links themselves (<a> tags), but on the
+      // list items (<li> tags) that contain the links. This is necessary for
+      // CSS to be able to style list items differently when the link is active,
+      // since CSS does not yet allow one to style list items only if they
+      // contain a certain element with a certain class. That is, we cannot yet
+      // convert this jQuery selector to a CSS selector:
+      // jQuery('li:has("a.is-active")')
+      if (isset($link['url'])) {
+        if (!empty($variables['set_active_class'])) {
+
+          // Also enable set_active_class for the contained link.
+          $link_element['#options']['set_active_class'] = TRUE;
+
+          if (!empty($link['language'])) {
+            $li_attributes['hreflang'] = $link['language']->getId();
+          }
+
+          // Add a "data-drupal-link-query" attribute to let the
+          // drupal.active-link library know the query in a standardized manner.
+          // Only add the data- attribute. The "is-active" class will be
+          // calculated using JavaScript, to prevent breaking the render cache.
+          if (!empty($link['query'])) {
+            $query = $link['query'];
+            ksort($query);
+            $li_attributes['data-drupal-link-query'] = Json::encode($query);
+          }
+
+          /** @var \Drupal\Core\Url $url */
+          $url = $link['url'];
+          if ($url->isRouted()) {
+            // Add a "data-drupal-link-system-path" attribute to let the
+            // drupal.active-link library know the path in a standardized
+            // manner. Only add the data- attribute. The "is-active" class will
+            // be calculated using JavaScript, to prevent breaking the render
+            // cache.
+            $system_path = $url->getInternalPath();
+            // @todo System path is deprecated - use the route name and parameters.
+            // Special case for the front page.
+            $li_attributes['data-drupal-link-system-path'] = $system_path == '' ? '<front>' : $system_path;
+          }
+        }
+
+        $item['link'] = $link_element;
+      }
+
+      // Handle title-only text items.
+      $item['text'] = $link['title'];
+      if (isset($link['attributes'])) {
+        $item['text_attributes'] = new Attribute($link['attributes']);
+      }
+
+      // Handle list item attributes.
+      $item['attributes'] = new Attribute($li_attributes);
+
+      // Add the item to the list of links.
+      $variables['links'][$key] = $item;
+    }
+  }
+}
diff --git a/src/Plugin/Block/LangDropDownSwitcher.php b/src/Plugin/Block/LangDropDownSwitcher.php
@@ -417,7 +417,7 @@ public function build() {
           ];
           break;
 
-        case LANGDROPDOWN_SIMPLE_SELECT:
+        case self::LANGDROPDOWN_SIMPLE_SELECT:
           $form = $this->formBuilder->getForm(LanguageDropdownForm::class, $links->links, $this->configuration);
 
           $output = [
@@ -448,6 +448,7 @@ public function build() {
                 "language-switcher-{$links->method_id}",
               ],
             ],
+            '#set_active_class' => TRUE,
             '#cache' => [
               'contexts' => [
                 'user.permissions',

diff --git a/templates/dropdown-button.html.twig b/templates/dropdown-button.html.twig
@@ -7,21 +7,19 @@
 
 <div class="block">
   <button class="active" aria-expanded="false">{{ button_icon }}{{ button_text }}</button>
-  <div class="dropdown">
-    <ul>
-      {% for key, item in links %}
-        {% if item.url|render|trim is not empty %}
-          <li class="{{ item.attributes.class|join(' ') }}">
-            <a href="{{ item.link }}">
-              {{ item.title.icon }}{{ item.title.title }}
-            </a>
+    <div class="dropdown">
+      <ul{{ attributes }}>
+        {%- for item in links -%}
+          <li{{ item.attributes }}>
+          {%- if item.link -%}
+            {{ item.link }}
+          {%- elseif item.text_attributes -%}
+            <span{{ item.text_attributes }}>{{ item.text }}</span>
+          {%- else -%}
+            {{ item.text }}
+          {%- endif -%}
           </li>
-        {% else %}
-          <li class="{{ item.attributes.class|join(' ') }}">
-            {{ item.title.icon }}{{ item.title.title }}
-          </li>
-        {% endif %}
-      {% endfor %}
-    </ul>
+        {%- endfor -%}
+      </ul>
   </div>
 </div>