1const isMobileSimpleTabs = deviceTypeUtils.methods.isMobile(); 2let hash, typeTab, redTabs, bindingTabs, yearTabs, verticalTabs, editMode = false; 3 4if (!SimpleTabsEventBus) { 5 var SimpleTabsEventBus = new Vue(); 6} 7 8document.addEventListener('DOMContentLoaded', function (event) { 9 if (window.tabSpinner !== 'true') { 10 loadingAnimations.methods.loadGeneralAnimation({ 11 renderLocation: 'spinner', 12 path: '/content/dam/digital-commons/vodafone-spinner.json', 13 defaultColor: true, 14 withMask: false, 15 style: 'margin: 100px auto; display: block; width: 100px; height: 100px;' 16 }); 17 } 18 setColorActiveArrow(window.colorPicked); 19}); 20 21window.addEventListener('load', deepLinkingST); 22 23window.addEventListener('load', function () { 24 var elementNumberContents = document.querySelector('.filter-tab p'); 25 if (elementNumberContents != null) { 26 elementNumberContents.click(); 27 elementNumberContents.removeAttribute('onclick'); 28 } 29}); 30 31onhashchange = (event) => { 32 if(tabsType === "binding_tabs"){ 33 const tab = document.getElementById(`${event.target.location.hash}::binding-tabs-navbar-item`); 34 if(tab) { 35 changeBindingTab(tab); 36 } 37 } 38}; 39 40window.addEventListener('load', function () { 41 var elem = document.getElementById(hash); 42 if (elem) { 43 var tealiumEvent = null; 44 try { 45 tealiumEvent = new Event('load'); 46 } catch (error) { 47 tealiumEvent = document.createEvent('Event'); 48 tealiumEvent.initEvent('load', true, true); 49 } 50 elem.dispatchEvent(tealiumEvent); 51 } 52}); 53 54window.addEventListener('load', function () { 55 let tabs = document.getElementsByClassName('circle-tabs__tab');; 56 let typeTab; 57 58 if (tabs.length === 0) { 59 tabs = document.getElementsByClassName('tabs__tab'); 60 } else { 61 typeTab = 'circle-tabs__tab'; 62 } 63 64 if (tabs.length > 0) { 65 typeTab = 'tabs__tab'; 66 } 67 68 if (window.location.hash === '' && tabs.length > 0 && typeTab) { 69 tabActiveClass(!window.defaultTabId ? tabs[0].id : `#${window.defaultTabId}`, typeTab, true); 70 } 71}); 72 73window.addEventListener('load', function () { 74 if (window.stickyTab) { 75 document.addEventListener('scroll', hideHeaderMenu); 76 } 77}); 78 79window.addEventListener('onScroll', () => { 80 const isHomePage = document.location.href.includes("vodafone.pt") && document.location.href.split("vodafone.pt/")[1] === "", 81 homePageActiveTab = document.querySelector('.js-tabs-tab.tabs__tab.tabs__tab--active'), 82 homePageSimpTabsParent = document.querySelector('.js-tabs-navigation.tabs__navigation.tabs__navigation--fixed'); 83 let hasAlreadyRanTealium = true; 84 if(hasAlreadyRanTealium && homePageActiveTab && isHomePage && homePageSimpTabsParent && isInViewport(homePageSimpTabsParent)) { 85 tealium_simpleTabs.methods.handleTabInteractionClick(homePageActiveTab.innerText); 86 hasAlreadyRanTealium = false; 87 } 88 if (homePageSimpTabsParent && !isInViewport(homePageSimpTabsParent)) { 89 hasAlreadyRanTealium = true; 90 } 91 92 function isInViewport(el) { 93 const rect = el?.getBoundingClientRect(); 94 return ( 95 rect.top >= 0 && 96 rect.left >= 0 && 97 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 98 rect.right <= (window.innerWidth || document.documentElement.clientWidth) 99 100 ); 101 } 102}) 103 104function hideHeaderMenu(event) { 105 const simpleTabs = document.getElementById(componentId); 106 const headerMenu = document.querySelectorAll(".nav-header__wrapper--sticky")[0]; 107 const headerSticky = document.querySelectorAll(".boxShadow")[0]; 108 const divider = document.querySelector(".binding-tabs-divider"); 109 110 headerMenu.style.transition = "all 0.1s ease-in-out"; 111 112 if(headerSticky.getBoundingClientRect().top-headerMenu.offsetHeight < 0 && simpleTabs.getBoundingClientRect().bottom >= 0){ 113 114 headerSticky.classList.add("binding-tabs-navbar-sticky"); 115 headerMenu.style.top = `-${headerMenu.offsetHeight}px`; 116 if (simpleTabs.getBoundingClientRect().top < 0) { 117 headerSticky.style.boxShadow = "0px 0px 8px 2px rgba(0, 0, 0, 0.16)"; 118 } else { 119 headerSticky.style.boxShadow = "unset"; 120 } 121 } else { 122 headerMenu.style.top = "0px"; 123 headerSticky.style.boxShadow = "unset"; 124 } 125} 126 127function initTabs (componentID, defaultID) { 128 const comp = document.getElementById(componentID);
129 editMode = comp.getAttribute('isEditMode') === 'true'; 130 131 redTabs = comp.getElementsByClassName('red-underscore-navbar-item'); 132 bindingTabs = comp.getElementsByClassName('binding-tabs-navbar-item'); 133 yearTabs = comp.getElementsByClassName('year-tabs--tab'); 134 verticalTabs = comp.getElementsByClassName('vertical-tabs--tab'); 135 136 redTabs.length > 0 && initRedTabs(defaultID); 137 138 bindingTabs.length > 0 && initBindingTabs(defaultID); 139 verticalTabs.length > 0 && getTabs(verticalTabs, defaultID, 'vertical-tabs--tab'); 140 yearTabs.length > 0 && getTabs(yearTabs, defaultID, 'year-tabs--tab'); 141} 142 143function getParameterByName(name, url) { 144 if (!url) url = window.location.href; 145 name = name.replace(/[\[\]]/g, '\\$&'); 146 var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), 147 results = regex.exec(url); 148 if (!results) return null; 149 if (!results[2]) return ''; 150 return decodeURIComponent(results[2].replace(/\+/g, ' ')); 151} 152 153function setColorActiveArrow(colorPicked) { 154 if (document.querySelector('.tabs__disruptive__nav--tab--item--active::after') == null) { 155 var style = '<style>.tabs__disruptive__nav--tab--item--active::after { border-top-color: ' + colorPicked + ' !important; }</style>'; 156 $(style).appendTo('head'); 157 } 158} 159 160function getTabs(tabs, defaultTabId, typeTab) { 161 if (this.isMobile) { 162 const navbar = document.getElementsByClassName('vertical-tabs--nav'); 163 if (navbar.length !== 0) { 164 navbar[0].style.margin = '0 -20px'; 165 } 166 } 167 if (window.location.hash === '') { 168 tabActiveClass(!defaultTabId ? tabs[0].id : `#${defaultTabId}`, typeTab, true); 169 } else { 170 getNewHash(tabs, typeTab, defaultTabId, true); 171 } 172} 173 174function getNewHash(tabs, typeTab, defaultTabId, init = false) { 175 let arrayHash = getArrayHash(); 176 177 for (let i = 0; i < tabs.length; i++) { 178 for (let j = 0; j < arrayHash.length; j++) { 179 if (tabs[i].id === ('#' + arrayHash[j])) { 180 hash = tabs[i].id; 181 tabActiveClass(hash, typeTab); 182 return; 183 } else { 184 hash = !defaultTabId ? tabs[0].id : `#${defaultTabId}`; 185 } 186 } 187 } 188 tabActiveClass(hash, typeTab, init); 189} 190 191function getArrayHash() { 192 let hash = window.location.hash; 193 return hash.split('#').filter(Boolean); 194} 195 196function deepLinkingST() { 197 if (window.tabSpinner !== 'true') { 198 setTimeout(function () { 199 loadingAnimations.methods.removeAnimation('spinner'); 200 setVisible('spinner', false); 201 setVisible('simpTabs', true); 202 }, 1000); 203 } else { 204 setVisible('simpTabs', true); 205 } 206 207 var idActiveTab = getParameterByName('activeTab'); 208 var idComponentId = getParameterByName('id'); 209 210 if ((idActiveTab !== null && idActiveTab !== '') || (idComponentId !== null && idComponentId !== '')) { 211 if (document.getElementById(idComponentId) != null && document.getElementById(idActiveTab) != null) { 212 213 var tabsDeterminer = document.getElementById('container-' + idComponentId); 214 var elA = document.getElementById('nav-' + idComponentId); 215 var _childA$classList; 216 var childA = elA.children; 217 var elDiv = document.getElementById('div-' + idComponentId); 218 var childDiv = elDiv.children; 219 220 var adition = []; 221 var aditionDark = '' 222 if (tabsDeterminer.attributes.getNamedItem('data-classes') != null && tabsDeterminer.attributes.getNamedItem('data-classes').value.includes('circle-tabs__tab--active')) { 223 if (tabsDeterminer.attributes.getNamedItem('data-classes').value.includes('none')) { 224 adition = ['circle-tabs__tab--active']; 225 } else if (tabsDeterminer.attributes.getNamedItem('data-classes').value.includes('circle-tabs__tab--active')) { 226 adition = ['circle-tabs__tab--active', 'circle-tabs__tab--dark--active']; 227 } else { 228 adition = ['circle-tabs__tab--active']; 229 } 230 } else if (tabsDeterminer.attributes.getNamedItem('data-classes') != null && tabsDeterminer.attributes.getNamedItem('data-classes').value.includes('tabs__disruptive__nav--tab--item--active')) { 231 adition = ['tabs__disruptive__nav--tab--item--active']; 232 } else { 233 adition = ['tabs__tab--active']; 234 } 235 236 for (var i = 0; i < childDiv.length; i++) { 237 if (childDiv[i].id === idActiveTab) { 238 (_childA$classList = childA[i].classList).add.apply(_childA$classList, adition); 239 childDiv[i].style.display = 'block'; 240 241 if (window.equalHeights != undefined && !adition.contains('vertical-tabs--active')) { 242 equalHeights(); 243 } 244 } else { 245 (_childA$classList = childA[i].classList).remove.apply(_childA$classList, adition); 246 childDiv[i].style.display = 'none'; 247 } 248 } 249 } 250 } 251} 252 253function checkEqualHeightsSimpleT(tabID, colorPicked) { 254 if (window.equalHeights != undefined) { 255 tabElem = document.getElementById(tabID); 256 if (!tabElem) return; 257 fadeIn(tabElem.id); 258 if (tabElem.style.display == 'none') { 259 tabElem.style.display = 'block'; 260 if (!tabElem.classList.contains('vertical-tabs--tab')) { 261 equalHeights(SimpleTabsEventBus.$emit('changedActiveTab')); 262 } 263 tabElem.style.display = 'none'; 264 } 265 } 266 tealium_simpleTabs.methods.handleTabInteractionClick(tabID); 267} 268 269function setVisible(selector, visible) { 270 if (selector == 'spinner') { 271 var getID = document.getElementById(selector); 272 if (getID) { 273 getID.style.display = visible ? 'block' : 'none'; 274 } 275 } 276 if (selector == 'simpTabs') { 277 var getClass = document.getElementsByClassName(selector); 278 if (!getClass) return; 279 for (var x = 0; x < getClass.length; x++) { 280 if (getClass[x]) { 281 getClass[x].style.opacity = visible ? '1' : '0'; 282 } 283 } 284 } 285} 286 287function fadeIn(tabID) { 288 var ua = window.navigator.userAgent; 289 var isIE = /MSIE|Trident/.test(ua); 290 if (!isIE) { 291 var value = document.querySelector('#fadeIn').dataset.value; 292 if (value) { 293 var element = document.getElementById(tabID); 294 var el = document.getElementsByClassName('dialog--fadeIn')[0]; 295 if (element && el) { 296 el.classList.remove('dialog--fadeIn'); 297 element.classList.add('dialog--fadeIn'); 298 } 299 } 300 } 301} 302 303function changeFilterTabContentNumber(numberContents, targetComponentId) { 304 if (numberContents != null && numberContents != '') { 305 if (targetComponentId != null && targetComponentId != '') { 306 var targetComponent = document.getElementById(targetComponentId); 307 targetComponent.innerHTML = numberContents; 308 } 309 } 310} 311 312function onLoadFilterTabSetActive(targetId, listJson) { 313 var activeId = document.querySelector('.filter-tab__list--item--active').getAttribute('id').replace('#', ''); 314 var listElements = JSON.parse(listJson); 315 var elementArrayActive = listElements.filter(function (element) { 316 return element.tab_id == activeId; 317 }); 318 changeFilterTabContentNumber(elementArrayActive[0].filter_tab_number_contents, targetId); 319} 320 321function tabActiveClass(tabID, typeTab, init = false) { 322 const tabElem = document.getElementById(tabID); 323 const typeActive = typeTab.replace('--tab', '--active'); 324 const component_id = tabElem.parentNode.getAttribute('component-id'); 325 const defaultTabId = tabElem.parentNode.getAttribute('default-tab-id'); 326 const component = document.getElementById(component_id); 327 328 if (tabElem) { 329 let tabs = component.getElementsByClassName(typeTab); 330 331 for (let tab of tabs) { 332 if (tab.classList.contains(typeActive)) { 333 tab.classList.remove(typeActive); 334 } 335 336 if (tabElem.id === tab.id) { 337 tab.classList.add(typeActive); 338 } 339 } 340 341 if (typeTab === 'year-tabs--tab') { 342 !isMobileSimpleTabs ? hideTabs(component, tabs, tabID) : verticalTabsScrollInto(component, tabElem, 'year-tabs--nav'); 343 } else if (typeTab === 'vertical-tabs--tab') { 344 verticalTabsScrollInto(component, tabElem, 'vertical-tabs--nav'); 345 } 346 347 if (!init) { 348 changeHashUrl(tabElem.id); 349 tabElem.click(); 350 } else if (defaultTabId) { 351 if (tabs.length > 0) {
352 const tempId = tabs[0].id?.split('#').filter(Boolean)[0]; 353 if (tempId) { 354 let tempElement = document.getElementById(tempId); 355 if(tempElement && !editMode) { 356 tempElement.style.display = 'none'; 357 } 358 tempElement = document.getElementById(defaultTabId); 359 if(tempElement) { 360 tempElement.style.display = 'block'; 361 } 362 } 363 } 364 } 365 equalHeights(); 366 } 367} 368 369function changeYearTab(action, element) { 370 let newTab; 371 if (element) { 372 if (action === 'next') { 373 newTab = getNextSibling(element, '.year-tabs--tab'); 374 } else if (action === 'prev') { 375 newTab = getPreviousSibling(element, '.year-tabs--tab'); 376 } 377 if (newTab) { 378 changeHashUrl(newTab.id); 379 newTab.click(); 380 equalHeights(); 381 } 382 } 383} 384 385function getNextSibling(elem, selector) { 386 let sibling = elem.nextElementSibling; 387 388 while (sibling) { 389 if (sibling.matches(selector)) return sibling; 390 sibling = sibling.nextElementSibling 391 } 392}; 393 394function getPreviousSibling(elem, selector) { 395 let sibling = elem.previousElementSibling; 396 397 while (sibling) { 398 if (sibling.matches(selector)) return sibling; 399 sibling = sibling.previousElementSibling 400 } 401}; 402 403function verticalTabsScrollInto(component, tabToCenter, typeTab) { 404 let navComponent = component.getElementsByClassName(typeTab)[0]; 405 let widthToScroll = 0; 406 let index = Array.from(navComponent.children).indexOf(tabToCenter); 407 408 if (index === 0) { 409 widthToScroll = 0 410 } else { 411 let previousTab = navComponent.children[index - 1]; 412 const navComponentStyles = getComputedStyle(navComponent) 413 widthToScroll = typeTab === 'vertical-tabs--nav' ? previousTab.offsetLeft + (previousTab.offsetWidth / 2) : previousTab.offsetLeft - (previousTab.offsetWidth / 2) - (parseInt(navComponentStyles.gap.replace('px',''))/2); 414 } 415 if (navComponent) { 416 $(navComponent).animate({ scrollLeft: widthToScroll }, 500); 417 } 418} 419 420function hideTabs(component, tabs, tabID) { 421 let activePos; 422 for (let i = 0; i < tabs.length; i++) { 423 tabs[i].classList.add('hide-tab'); 424 if (tabs[i] === tabs[tabID]) { 425 activePos = i; 426 } 427 } 428 showButtons(component, activePos) 429 tabs[activePos].classList.remove('hide-tab'); 430 if (activePos !== 0) { 431 tabs[activePos - 1].classList.remove('hide-tab'); 432 } 433 if (activePos !== (tabs.length - 1)) { 434 tabs[activePos + 1].classList.remove('hide-tab'); 435 } 436} 437 438function showButtons(component, activePos) { 439 const buttons = component.getElementsByClassName('yearTabsButtons') 440 if (buttons.length > 0) { 441 for (let button of buttons) { 442 button.classList.add('hide-button'); 443 } 444 let leftButton = 2 * activePos 445 if (activePos !== 0) { 446 buttons[leftButton].classList.remove('hide-button'); 447 } 448 if (activePos !== ((buttons.length / 2) - 1)) { 449 buttons[leftButton + 1].classList.remove('hide-button'); 450 } 451 } 452} 453 454function setHorizontalScroll (slider, scrollInfo) { 455 slider.scrollLeft = 0; 456 slider.addEventListener('mousedown', (e) => { 457 scrollInfo.isDown = true; 458 slider.classList.add('active'); 459 scrollInfo.startX = e.pageX - slider.offsetLeft; 460 scrollInfo.scrollLeft = slider.scrollLeft; 461 }); 462 slider.addEventListener('mouseleave', () => { 463 scrollInfo.isDown = false; 464 slider.classList.remove('active'); 465 }); 466 slider.addEventListener('mouseup', () => { 467 scrollInfo.isDown = false; 468 slider.classList.remove('active'); 469 }); 470 slider.addEventListener('mousemove', (e) => { 471 if (!scrollInfo.isDown) return; 472 e.preventDefault(); 473 const x = e.pageX - slider.offsetLeft; 474 const walk = (x - scrollInfo.startX) * 3; 475 slider.scrollLeft = scrollInfo.scrollLeft - walk; 476 }); 477} 478 479function initRedTabs (defaultTabId) { 480 const initHash = window.location.hash ? window.location.hash : null; 481 let id = initHash || defaultTabId || redTabs[0].id; 482 if (!id.includes('#')) { 483 id = `#${id}`; 484 } 485 486 if(!id.includes('::red-underscore-navbar-item')) { 487 id = `${id}::red-underscore-navbar-item`; 488 } 489 490 const element = document.getElementById(id); 491 const component_id = element.parentNode.getAttribute('component-id'); 492 const isMobile = deviceTypeUtils.methods.isMobile(); 493 if (isMobile) { 494 const component = document.getElementById(component_id); 495 setHorizontalScroll(component.querySelector('.red-underscore-navbar'), { isDown: false, startX: '', scrollLeft: '' }); 496 } 497 498 changeRedTab(element, true); 499 setPaddingTabs(component_id, 'red'); 500} 501 502function initBindingTabs (defaultTabId) { 503 const initHash = window.location.hash ? window.location.hash : null; 504 let id = initHash || defaultTabId || bindingTabs[0].id; 505 if (!id.includes('#')) { 506 id = `#${id}`; 507 } 508 509 if(!id.includes('::binding-tabs-navbar-item')) { 510 id = `${id}::binding-tabs-navbar-item`; 511 } 512 513 const element = document.getElementById(id); 514 const component_id = element.parentNode.parentElement.getAttribute('component-id');
515 const tabContent = document.getElementById(element.id.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::binding-tabs-navbar-content'); 516 const tabContentButton = document.getElementById(element.id.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::binding-tabs-navbar-content-button'); 517 const isMobile = deviceTypeUtils.methods.isMobile(); 518 519 if (isMobile) { 520 const component = document.getElementById(component_id); 521 setHorizontalScroll(component.querySelector('.binding-tabs-navbar'), { isDown: false, startX: '', scrollLeft: '' }); 522 } 523 524 changeBindingTab(element, true); 525 setPaddingTabs(component_id, 'binding'); 526 527 if (!editMode && tabContent && tabContent.classList.contains('show-button')){ 528 const conditionInString = tabContent?.dataset?.condition || 3, 529 tabCondition = parseInt(conditionInString); 530 applyShowMoreButton(tabContent, tabContentButton, tabCondition); 531 } 532} 533 534function setPaddingTabs (id, tabType) { 535 const isDesktop = deviceTypeUtils.methods.isDesktop(); 536 if (isDesktop) { 537 const container = document.getElementById(id); 538 let elements = ''; 539 if (tabType == 'red'){ 540 elements = container.getElementsByClassName('red-underscore-navbar-item'); 541 } else { 542 elements = container.getElementsByClassName('binding-tabs-navbar-item'); 543 } 544 if (elements) { 545 for (let i = 0; i < elements.length; i++) { 546 const element = elements[i]; 547 } 548 } 549 } 550} 551 552function removeActiveTab (id, tabType) { 553 const comp = document.getElementById(id); 554 let element = ''; 555 556 if (tabType == 'red'){ 557 element = comp.getElementsByClassName('red-underscore-navbar-item--active'); 558 if (element) { 559 element[0]?.firstElementChild.classList.remove('red-underscore-navbar-title--active'); 560 element[0]?.classList.remove('red-underscore-navbar-item--active'); 561 } 562 } else { 563 element = comp.getElementsByClassName('binding-tabs-navbar-item--active'); 564 if (element) { 565 const title = element[0]?.querySelector("span"); 566 element[0]?.classList.remove('binding-tabs-navbar-item--active'); 567 if (title) { 568 title.classList.remove("binding-tabs-navbar-title--active"); 569 } 570 } 571 } 572} 573 574function addActiveTab (element, tabType) { 575 if (element && tabType == 'red') { 576 element.classList.add('red-underscore-navbar-item--active'); 577 if (element.firstElementChild) { 578 element.firstElementChild.classList.add('red-underscore-navbar-title--active'); 579 } 580 } else { 581 if (element.lastElementChild) { 582 const title = element.querySelector("span"); 583 element.classList.add('binding-tabs-navbar-item--active'); 584 if (title) { 585 title.classList.add("binding-tabs-navbar-title--active"); 586 } 587 } 588 } 589} 590 591function removeActiveContentTab (id) { 592 const comp = document.getElementById(id); 593 const element = comp.getElementsByClassName('display--block')[0]; 594 if (element) { 595 element.classList.add('display--none'); 596 element.classList.remove('display--block'); 597 } 598} 599 600function addActiveContent (element, tabType) { 601 602 let id = ''; 603 604 if (element) { 605 if (tabType == 'red') { 606 id = element.id.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::red-underscore-navbar-content'; 607 } else { 608 id = element.id.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::binding-tabs-navbar-content'; 609 } 610 document.getElementById(id)?.firstElementChild?.classList.remove('display--none'); 611 document.getElementById(id)?.firstElementChild?.classList.add('display--block'); 612 } 613} 614 615function changeRedTab (element, init = false) { 616 617 const tabType = 'red'; 618 619 if (!init) { 620 changeHashUrl(element.id.split('::')[0]) 621 } else if(init && window.location.hash && element) { 622 scrollToTabsPosition(element, 20); 623 } 624 removeActiveTab(element.parentNode.getAttribute('component-id'), tabType); 625 removeActiveContentTab(element.parentNode.getAttribute('component-id'), tabType); 626 addActiveTab(element, tabType); 627 addActiveContent(element, tabType); 628 equalHeights(); 629} 630 631function changeBindingTab (element, init = false) { 632 const tabType = 'binding'; 633 634 if (!init) {
635 changeHashUrl(element.id.split('::')[0]) 636 } else if(init && window.location.hash && element && window.applySmoothScroll == 'true') { 637 scrollToTabsPosition(element, 20); 638 } 639 // element = clicked element 640 // elementId = tabs' component id 641 // tabsComponent = tabs' component element 642 // tabContent = tab's content element 643 // tabContentButton = tab's content button 644 645 const elementId = element.parentNode.parentElement.getAttribute('component-id'); 646 647 const tabsComponent = document.getElementById(elementId); 648 const tabContent = document.getElementById(element.id.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::binding-tabs-navbar-content'); 649 const tabContentButton = document.getElementById(element.id.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::binding-tabs-navbar-content-button'); 650 651 if(!init || init && window.applySmoothScroll == 'true') { 652 scrollToTabsPosition(tabsComponent, 20); 653 } 654 655 const containerElement = element.parentNode.parentNode; 656 657 scrollTabsCenterPage(containerElement, element); 658 659 removeActiveTab(elementId, tabType); 660 removeActiveContentTab(elementId, tabType); 661 addActiveTab(element, tabType); 662 addActiveContent(element, tabType); 663 equalHeights(); 664 665 if (!editMode && tabContent && tabContent.classList.contains('show-button')){ 666 const conditionInString = tabContent?.dataset?.condition || 3, 667 tabCondition = parseInt(conditionInString); 668 applyShowMoreButton(tabContent, tabContentButton, tabCondition); 669 } 670 this.removeFlickerClasses(); 671} 672 673function scrollTabsCenterPage (containerElement, selectedItem) { 674 const scrollTo = containerElement.scrollLeft + selectedItem.getBoundingClientRect().left - containerElement.getBoundingClientRect().width / 2 + selectedItem.getBoundingClientRect().width / 2; 675 containerElement.scrollLeft = scrollTo; 676} 677 678/** 679 * Scroll page to the HTML element position 680 * @param {HTMLElement} element - HTML Element to scroll to. 681 * @param {number} extraScroll - (optional) Additional value to add to the scroll 682 */ 683function scrollToTabsPosition (element, extraScroll) { 684 const headerElement = document.getElementById('headerMenu'); 685 let offsetPosition = 0; 686 if (headerElement){ 687 const headerHeight = headerElement.getBoundingClientRect().height; 688 offsetPosition = element.getBoundingClientRect().top + window.pageYOffset - headerHeight - extraScroll; 689 } else { 690 offsetPosition = element.getBoundingClientRect().top + window.pageYOffset - extraScroll; 691 } 692 window.scrollTo({ top: offsetPosition, behavior: "smooth" }); 693} 694 695function changeHashUrl (id) { 696 if (window.location.href.includes('#')) { 697 history.pushState({}, '', window.location.href.split('#')[0] + id); 698 } else { 699 history.pushState({}, '', window.location.href + id); 700 } 701} 702 703function applyShowMoreButton (tabContentElement, tabContentButton, tabCondition) { 704 const componentName = window.location.href.indexOf("/business") > -1 ? ".vf_dataBindingVBU" : ".vf_dataBindingV2"; 705 const tabsContentBindings = tabContentElement.children[0].querySelectorAll(componentName); 706 707 if (tabsContentBindings && tabsContentBindings.length > tabCondition) { 708 for (let i = tabCondition; i < tabsContentBindings.length; i++) { 709 if (!tabsContentBindings[i].parentNode?.id?.includes('toggle') && tabsContentBindings[i].classList.contains(componentName.split('.').join(""))){ 710 tabsContentBindings[i].classList.add('display--none'); 711 } 712 } 713 } 714 ShowSeeMoreButton(tabContentButton, true); 715} 716 717function showAllBindings (tabId) { 718 719 const tabElements = document.getElementById(tabId).children[0].children; 720 const buttonElement = document.getElementById(tabId.split('#').filter(Boolean)[0].split('::').filter(Boolean)[0] + '::binding-tabs-navbar-content-button'); 721 let userContext; 722 723 // tracking 724 const selectedTabName = tabId.split('::').filter(Boolean)[0], 725 buttonCopy = buttonElement.innerText; 726 727 if (window.location.href.indexOf("business") > -1) { 728 userContext = 'business'; 729 } 730 tealium_simpleTabs.methods.handleShowMorePackagesButtonClick(buttonCopy, selectedTabName, userContext); 731 // ----- x ----- 732 733 if (tabElements) { 734 for (let i = 0; i < tabElements.length; i++) { 735 if (tabElements[i].classList.contains('vf_experienceFragment')){ 736 const bindingNode = tabElements[i].children[0].children[0].children[0].children[0]; 737 if ((bindingNode.classList.contains('vf_dataBindingV2') || bindingNode.classList.contains('vf_dataBindingVBU')) && bindingNode.classList.contains('display--none')){ 738 bindingNode.classList.remove('display--none'); 739 } 740 } else { 741 if (tabElements[i].classList.contains('display--none')){ 742 tabElements[i].classList.remove('display--none'); 743 } 744 } 745 } 746 } 747 ShowSeeMoreButton(buttonElement, false); 748} 749 750function ShowSeeMoreButton (buttonElement, showButton) { 751 if (showButton) { 752 if (buttonElement.classList.contains('display--none')){ 753 buttonElement.classList.remove('display--none'); 754 } 755 } else { 756 buttonElement.classList.add('display--none'); 757 } 758} 759 760function removeFlickerClasses() { 761 const flickerElements = document.querySelectorAll('.flicker'); 762 if (flickerElements.length > 0) { 763 for (let element of flickerElements) { 764 element.classList.remove('flicker'); 765 } 766 } 767} 768 769function equalHeights(cb) { 770 let parentNode = document.getElementsByClassName('equalrows'); 771 if (parentNode.length) { 772 let parentProps, childNodes; 773 let tallest = 0; 774 775 for (const element of parentNode) { 776 parentProps = element.getAttribute("data-equal").split(';'); 777 // Iterate through child nodes (even if there are multiple selectors) 778 for (const item of parentProps) { 779 childNodes = [].slice.call(element.querySelectorAll(item)); 780 tallest = 0; 781 // Return the tallest element height 782 for (let el of childNodes) {
783 if (element.id != "carousel") 784 el.style.height = ''; // Reset style 785 let eleHeight = el.offsetHeight; 786 tallest = (eleHeight > tallest ? eleHeight : tallest); 787 } 788 789 // Apply to all, inside that parent node 790 for (const element of childNodes) { 791 if (tallest !== 0) 792 element.style.height = tallest + "px"; 793 } 794 } 795 } 796 } 797 if (cb) { 798 cb(); 799 } 800}
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.