https://verba.nl/wp-content/plugins/clonable/assets/js/language-switcher.js?ver=2.13.3

1"use strict";
2
3function setMenuItemUrls() {
4  const items = document.querySelectorAll(".cl-language-switcher-link");
5  if (!items.length) return;
6
7  items.forEach(function (menuItem) {
8    const encoded = menuItem.getAttribute("data-href-encoded");
9    if (!encoded) return;
10    const decodedUrl = atob(encoded);
11    if (decodedUrl) menuItem.setAttribute("href", decodedUrl);
12  });
13}
14
15function updateCurrentLanguageDisplay(hreflang) {
16  if (!hreflang) return;
17  hreflang = hreflang.toLowerCase();
18
19  const menuItems = document.querySelectorAll(
20    ".clonable-menu-item-language-switcher",
21  );
22  if (!menuItems.length) return;
23
24  const normalizedHreflang = hreflang.replace(/_/g, "-");
25  const primaryHreflang = normalizedHreflang.split("-")[0];
26
27  menuItems.forEach(function (menuItem) {
28    let submenu = menuItem.querySelector(".sub-menu");
29    if (!submenu) {
30      const firstLink = menuItem.querySelector("a");
31      if (firstLink) {
32        submenu = firstLink.nextElementSibling;
33      }
34    }
35    if (!submenu) return;
36
37    const links = submenu.querySelectorAll(".cl-language-switcher-menu-item a");
38
39    let exactMatch = null;
40    let subtagMatch = null;
41
42    links.forEach(function (link) {
43      const linkHreflang = (link.getAttribute("hreflang") || "").toLowerCase().replace(/_/g, "-");
44      if (linkHreflang === normalizedHreflang) {
45        exactMatch = link.innerHTML;
46      } else if (linkHreflang.split("-")[0] === primaryHreflang) {
47        subtagMatch = link.innerHTML;
48      }
49    });
50
51    const matchedLinkHTML = exactMatch || subtagMatch;
52    if (!matchedLinkHTML) return;
53
54    // Update the top-level <a> content to reflect the current language
55    const topLevelLink = menuItem.querySelector("a:not(.sub-menu a)");
56
57    if (topLevelLink) {
58      topLevelLink.innerHTML = matchedLinkHTML;
59      // prevent default click behavior on the top-level link since it's not a real link
60      topLevelLink.addEventListener("click", function (event) {
61        event.preventDefault();
62      });
63    }
64  });
65}
66
67function updateBlockMenuItemDisplay(hreflang) {
68  if (!hreflang) return;
69  hreflang = hreflang.toLowerCase();
70
71  const menuItems = document.querySelectorAll(
72    ".clonable-language-switcher-block-submenu-item",
73  );
74  if (!menuItems.length) return;
75
76  menuItems.forEach(function (menuItem) {
77    const submenu = menuItem.querySelector(
78      ".clonable-language-switcher-block-submenu",
79    );
80    if (!submenu) return;
81
82    const normalizedHreflang = hreflang.replace(/_/g, "-");
83    const primaryHreflang = normalizedHreflang.split("-")[0];
84
85    // Find the matching link by comparing hreflang case-insensitively
86    const links = submenu.querySelectorAll(".cl-language-switcher-link");
87    let exactMatch = null;
88    let subtagMatch = null;
89    links.forEach(function (link) {
90      const linkHreflang = (link.getAttribute("hreflang") || "").toLowerCase().replace("_", "-");
91      if (linkHreflang === normalizedHreflang) {
92        exactMatch = link;
93      } else if (linkHreflang.split("-")[0] === primaryHreflang) {
94        subtagMatch = link;
95      }
96    });
97    const matchedLink = exactMatch || subtagMatch;
98    if (!matchedLink) return;
99
100    const matchedHTML = matchedLink.innerHTML;
101    if (!matchedHTML) return;
102
103    // Update the top-level <a> content to reflect the current language
104    const topLevelLink = menuItem.querySelector(
105      ":scope > a.wp-block-navigation-item__content",
106    );
107    
108    if (topLevelLink) {
109      topLevelLink.innerHTML = matchedHTML;
110    }
111  });
112}
113
114function hoverMenuItemShortcodeMenu() {
115  const shortcodeMenus = document.querySelectorAll(
116    ".clonable-language-switcher-shortcode",
117  );
118  if (!shortcodeMenus.length) return;
119
120  shortcodeMenus.forEach(function (menu) {
121    const navlinks = menu.querySelector("#menu-navlinks");
122    if (!navlinks) return;
123
124    navlinks.addEventListener("mouseenter", function () {
125      menu.classList.add("is-hovered");
126    });
127    navlinks.addEventListener("mouseleave", function () {
128      menu.classList.remove("is-hovered");
129    });
130
131    // Prevent click on top-level links to avoid confusion as they are not real links
132    menu
133      .querySelectorAll(".clonable-language-switcher")
134      .forEach(function (link) {
135        link.addEventListener("click", function (event) {
136          event.preventDefault();
137        });
138      });
139  });
140}
141
142document.addEventListener("DOMContentLoaded", function () {
143  const html = document.documentElement;
144  let hreflang = (html.getAttribute("lang") || html.lang || "").trim();
145
146  if (hreflang) {
147    updateCurrentLanguageDisplay(hreflang);
148    updateBlockMenuItemDisplay(hreflang);
149  }
150
151  setMenuItemUrls();
152  hoverMenuItemShortcodeMenu();
153
154  /* after initializing the menu, remove the data-loading attribute to show the menu items */
155  document.querySelectorAll("[data-loading]").forEach((el) => {
156    el.removeAttribute("data-loading");
157  });
158});