1/** 2 * navigation.js 3 * 4 * Handles toggling the navigation menu for small screens. 5 */ 6(function () { 7 var main = document.querySelector("main"); 8 var mobileMenu = document.getElementsByClassName("mobile_menu_root"); 9 var mobileMenuDefault = document.querySelector("#mobile_menu_default"); 10 var mobileMenuProduct = document.querySelector("#mobile_menu_product"); 11 var mobileMenuAI = document.querySelector("#mobile_menu_ai"); 12 var mobileMenuSolution = document.querySelector("#mobile_menu_solution"); 13 var mobileMenuTemplate = document.querySelector("#mobile_menu_template"); 14 var mobileMenuLearn = document.querySelector("#mobile_menu_learn"); 15 var mobileMenuPricing = document.querySelector("#mobile_menu_pricing"); 16 var localeDropdownContainer = document.querySelector("#locale_dropdown_container"); 17 var localeDropdownArrow = document.querySelector("#locale_dropdown_arrow"); 18 var localeDropdownIndicator = document.querySelector("#locale_dropdown_indicator"); 19 // Links for onboarding, privacy policy, and terms of service 20 var onboardingLink = document.querySelector('a[data-vg-test-label="sub-menu-item-get-started"]'); 21 var helpCenterLink = document.querySelector('a[data-vg-test-label="sub-menu-item-help-center"]'); 22 var privacyPolicyLink = document.querySelector('a[data-vg-test-label="footer-privacy-policy"]'); 23 var termsOfServiceLink = document.querySelector('a[data-vg-test-label="footer-terms-of-services"]'); 24 var mobileOnboardingLink = document.querySelector('#mobile_onboarding_link'); 25 var mobileHelpCenterLink = document.querySelector('#mobile_helpCenter_link'); 26 27 var activeTab = null; 28 29 function toggleHamburger() { 30 if (hamburger.classList.contains("hamburger_open")) { 31 hamburger.classList.remove("hamburger_open"); 32 for (var i = 0; i < mobileMenu.length; i++) { 33 mobileMenu[i].classList.remove("mobile_menu_show"); 34 } 35 } else { 36 hamburger.classList.add("hamburger_open"); 37 mobileMenuDefault.classList.add("mobile_menu_show"); 38 } 39 } 40 41 function closeHamburger() { 42 if (hamburger.classList.contains("hamburger_open")) { 43 hamburger.classList.remove("hamburger_open"); 44 for (var i = 0; i < mobileMenu.length; i++) { 45 mobileMenu[i].classList.remove("mobile_menu_show"); 46 } 47 } 48 } 49 50 function menuInfo(name) { 51 function removeClass() { 52 var mobileMenu = document.getElementsByClassName("mobile_menu_root"); 53 for (var i = 0; i < mobileMenu.length; i++) { 54 mobileMenu[i].classList.remove("mobile_menu_show"); 55 } 56 } 57 58 if (name === "default") { 59 removeClass(); 60 mobileMenuDefault.classList.add("mobile_menu_show"); 61 } else if (name === "top-nav-product") { 62 removeClass(); 63 mobileMenuProduct.classList.add("mobile_menu_show"); 64 } else if (name === "top-nav-ai") { 65 removeClass(); 66 mobileMenuAI.classList.add("mobile_menu_show"); 67 } else if (name === "top-nav-solutions") { 68 removeClass(); 69 mobileMenuSolution.classList.add("mobile_menu_show"); 70 } else if (name === "top-nav-templates") { 71 removeClass(); 72 mobileMenuTemplate.classList.add("mobile_menu_show"); 73 } else if (name === "top-nav-learn") { 74 removeClass(); 75 mobileMenuLearn.classList.add("mobile_menu_show"); 76 } else if (name === "top-nav-pricing") { 77 removeClass(); 78 mobileMenuPricing.classList.add("mobile_menu_show"); 79 } 80 } 81 82 function mouseEnterNavBar(name) { 83 if (activeTab) { 84 mouseLeaveNavBar(activeTab); 85 } 86 activeTab = name; 87 88 var currentTopNav = document.getElementById(activeTab); 89 if (!currentTopNav) { 90 return; 91 } 92 var dropdown = currentTopNav.querySelector("#dropdown"); 93 if (!dropdown) { 94 return; 95 } 96 97 dropdown.classList.add("menu_visible"); 98 } 99 100 function mouseLeaveNavBar(name) { 101 var tab = name || activeTab; 102 var currentTopNav = document.getElementById(tab); 103 if (!currentTopNav) { 104 return; 105 } 106 var dropdown = currentTopNav.querySelector("#dropdown"); 107 if (!dropdown) { 108 return; 109 } 110 111 dropdown.classList.remove("menu_visible"); 112 } 113 114 function localeDropdown() { 115 if (localeDropdownContainer.classList.contains("locale_dropdown_mobile")) { 116 localeDropdownContainer.classList.remove("locale_dropdown_mobile"); 117 localeDropdownArrow.classList.remove("locale_dropdown_show"); 118 localeDropdownIndicator.classList.remove("arrow-up"); 119 } else { 120 localeDropdownContainer.classList.add("locale_dropdown_mobile"); 121 localeDropdownArrow.classList.add("locale_dropdown_show"); 122 localeDropdownIndicator.classList.add("arrow-up"); 123 } 124 } 125 126 window.toggleHamburger = toggleHamburger; 127 window.closeHamburger = closeHamburger; 128 window.menuInfo = menuInfo; 129 window.mouseEnterNavBar = mouseEnterNavBar; 130 window.mouseLeaveNavBar = mouseLeaveNavBar; 131 window.localeDropdown = localeDropdown; 132 function link(url) { 133 window.location.href = url; 134 } 135 136 function getLang() { 137 var lang = {es: "Español", fr: "Français", it: "Italiano", pt: "Português", de: "Deutsche", ru: "PÑÑÑкий", ar: "عربÙ", da: "Dansk", fi: "Suomalainen", nb: "Norsk", nl: "Nederlands", sv:"Svenska", pl:"Polskie", ua:"УкÑаÑнÑÑка", th:"à¹à¸à¸¢", vi:"Tiếng Viá»t", tr: "Türkçe", hk: "ä¸æ", ja: "æ¥æ¬èª" }; 138 var i = window.location.hostname.indexOf(".venngage."); 139 var langCode = window.location.hostname.substring(i - 2, i); 140 if (lang[langCode]) { 141 return lang[langCode]; 142 } else {
143 return "English"; 144 } 145 } 146 147 var dropBtn = document.getElementById("locale_dropdown_lang"); 148 149 // Check if language footer exists 150 if (dropBtn) { 151 var currentLang = getLang(); 152 // Set button text to current page language 153 dropBtn.prepend(currentLang); 154 155 var hostname; 156 if (window.location.hostname.charAt(2) === '.') { 157 hostname = window.location.hostname.substring(3); 158 } else { 159 hostname = window.location.hostname; 160 } 161 162 var locale_dropdown_options = document.getElementsByClassName("locale_dropdown_option"); 163 var selectedLocale = document.querySelector('.locale_dropdown_select'); 164 165 for (var i = 0; i < locale_dropdown_options.length; i++) { 166 var selectedLang = locale_dropdown_options[i].textContent; 167 if (selectedLang === currentLang) { 168 selectedLocale.classList.remove('locale_dropdown_select'); 169 locale_dropdown_options[i].classList.add('locale_dropdown_select'); 170 break; 171 } 172 } 173 } 174 175 var termsOfServiceLinks = { 176 'en': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 177 'de': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 178 'es': 'https://help.venngage.com/hc/es/articles/11017601872781-Condiciones-de-servicio-2-4', 179 'fr': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 180 'it': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 181 'pt': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 182 'ru': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 183 'ja': 'https://help.venngage.com/hc/en-us/articles/11017601872781-Terms-of-Service-2-4', 184 }; 185 186 var privacyPolicyLinks = { 187 'en': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 188 'de': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 189 'es': 'https://help.venngage.com/hc/es/articles/11017596288525-Pol%C3%ADtica-de-Privacidad-2-0', 190 'fr': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 191 'it': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 192 'pt': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 193 'ru': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 194 'ja': 'https://help.venngage.com/hc/en-us/articles/11017596288525-Privacy-Policy-2-0', 195 }; 196 197 var onboardingArticleLinks = { 198 'en': 'https://help.venngage.com/hc/en-us/articles/11013433848205--WATCH-Video-Guide-to-Creating-Your-First-Design', 199 'de': 'https://help.venngage.com/hc/en-us/articles/11013433848205--WATCH-Video-Guide-to-Creating-Your-First-Design', 200 'es': 'https://help.venngage.com/hc/es/articles/11013433848205--VER-Video-gu%C3%ADa-para-crear-tu-primer-dise%C3%B1o', 201 'fr': 'https://help.venngage.com/hc/en-us/articles/11013433848205--WATCH-Video-Guide-to-Creating-Your-First-Design', 202 'it': 'https://help.venngage.com/hc/en-us/articles/11013433848205--WATCH-Video-Guide-to-Creating-Your-First-Design', 203 'pt': 'https://help.venngage.com/hc/pt-br/articles/11013433848205--V%C3%8A-ISTO-Guia-em-v%C3%ADdeo-para-criar-seu-primeiro-design', 204 'ru': 'https://help.venngage.com/hc/en-us/articles/11013433848205--WATCH-Video-Guide-to-Creating-Your-First-Design', 205 'ja': 'https://help.venngage.com/hc/en-us/articles/11013433848205--WATCH-Video-Guide-to-Creating-Your-First-Design', 206 }; 207 208 var helpCenterLinks = { 209 'en': 'https://help.venngage.com/hc/en-us/', 210 'de': 'https://help.venngage.com/hc/de-de/', 211 'es': 'https://help.venngage.com/hc/es/', 212 'fr': 'https://help.venngage.com/hc/fr-ca/', 213 'it': 'https://help.venngage.com/hc/en-us/', 214 'pt': 'https://help.venngage.com/hc/pt-br/', 215 'ru': 'https://help.venngage.com/hc/en-us/', 216 'ja': 'https://help.venngage.com/hc/en-us/', 217 }; 218 219 var currentLocale = document.documentElement.lang.split('-')[0]; 220 221 // There are two different onboarding/help center links on the page, one for desktop and one for mobile 222 // While footer uses the same footer links for both desktop and mobile. 223 if (onboardingLink) { 224 onboardingLink.href = onboardingArticleLinks[currentLocale] || onboardingArticleLinks['en']; 225 } 226 227 if (mobileOnboardingLink) { 228 mobileOnboardingLink.href = onboardingArticleLinks[currentLocale] || onboardingArticleLinks['en']; 229 var mobileTextWrapper = mobileOnboardingLink.querySelector('.mobile_menu_messageBoxItemText'); 230 if (mobileTextWrapper && mobileTextWrapper.dataset.url) { 231 mobileTextWrapper.dataset.url = onboardingArticleLinks[currentLocale] || onboardingArticleLinks['en']; 232 } 233 } 234 235 236 if (helpCenterLink) { 237 helpCenterLink.href = helpCenterLinks[currentLocale] || helpCenterLinks['en']; 238 } 239 240 if (mobileHelpCenterLink) { 241 mobileHelpCenterLink.href = helpCenterLinks[currentLocale] || helpCenterLinks['en']; 242 var mobileTextWrapper = mobileOnboardingLink?.querySelector('.mobile_menu_messageBoxItemText'); 243 if (mobileTextWrapper && mobileTextWrapper.dataset.url) { 244 mobileTextWrapper.dataset.url = helpCenterLinks[currentLocale] || helpCenterLinks['en']; 245 } 246 } 247 248 if (termsOfServiceLink) { 249 termsOfServiceLink.href = termsOfServiceLinks[currentLocale] || termsOfServiceLinks['en']; 250 } 251 252 if (privacyPolicyLink) { 253 privacyPolicyLink.href = privacyPolicyLinks[currentLocale] || privacyPolicyLinks['en']; 254 } 255 256 const isDOM = (el) => el instanceof HTMLElement; 257 258 document.addEventListener("DOMContentLoaded", function () { 259 const listNavButtons = document.querySelectorAll(".link_button_root"); 260 261 if (!listNavButtons.length) return; 262 263 listNavButtons.forEach((navButton) => { 264 navButton.addEventListener("keydown", function (event) { 265 if (event.code === "Enter" && navButton.parentElement.classList.contains("nav_navItem")) { 266 mouseEnterNavBar(navButton.parentElement.id); 267 268 const menuContainer = document.getElementById( 269 `dropdown_${navButton.parentElement.id.split("top-nav-")[1]}` 270 ); 271 const firstSubMenuButton = menuContainer.querySelector(".submenu_item_root"); 272 273 if (firstSubMenuButton) { 274 firstSubMenuButton.focus(); 275 } 276 277 event.preventDefault(); 278 } 279 }); 280 }) 281 282 document.addEventListener("keydown", function (event) { 283 if (activeTab) { 284 if (event.code === "Escape") { 285 const navButton = document.getElementById(activeTab).children[0]; 286 287 navButton.focus(); 288 mouseLeaveNavBar(); 289 event.preventDefault(); 290 } 291 292 if (event.code === "Tab") { 293 /** 294 * get the current focused parent of the dropdown to get all 295 * the submenus items 296 */ 297 const menuContainer = document.getElementById(`dropdown_${activeTab.split("top-nav-")[1]}`); 298 const allSubmenusButton = menuContainer.querySelectorAll("a"); 299 const lastSubmenuButton = allSubmenusButton[allSubmenusButton.length - 1]; 300 let nextMenuId = ''; 301 if ( 302 document.getElementById(activeTab).nextElementSibling && 303 document.getElementById(activeTab).nextElementSibling.id 304 ) { 305 nextMenuId = document.getElementById(activeTab).nextElementSibling.id; 306 } 307 308 lastSubmenuButton.addEventListener("focusout", function () { 309 if (nextMenuId.includes("top-nav")) { 310 mouseEnterNavBar(nextMenuId); 311 } else { 312 // there is no dropdown after the current one 313 // so we close the dropdown 314 mouseLeaveNavBar(); 315 } 316 }); 317 } 318 } 319 }) 320 321 const hideDropdown = () => { 322 if (localeDropdownContainer.classList.contains("locale_dropdown_mobile")) { 323 localeDropdownContainer.classList.remove("locale_dropdown_mobile"); 324 localeDropdownArrow.classList.remove("arrow-up"); 325 } 326 }; 327 328 const btnLangDropdown = document.getElementById("locale_dropdown_lang"); 329 btnLangDropdown.addEventListener("keydown", function (event) { 330 if (event.code === "Escape") { 331 hideDropdown(); 332 } 333 }); 334 335 localeDropdownContainer.addEventListener("keydown", function (event) { 336 if (event.code === "Escape") { 337 hideDropdown(); 338 btnLangDropdown.focus(); 339 } 340 }); 341 }); 342})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.