//design guideline helper extension for corporate wrapper components //require: design-guide.base-components.js designGuide.corporatecomponents = { initialized : false, memory : { lastScrollTop : 0, bodyScrolled : false }, init : function(){ if(designGuide.corporatecomponents.initialized == false){ designGuide.corporatecomponents.initialized = true; //need to bind these during init as sometimes called through ajax designGuide.corporatecomponents.$header = $( '.idc-main-header' ); designGuide.corporatecomponents.$footer = $( '.idc-main-footer' ); designGuide.corporatecomponents.$toolbar = designGuide.corporatecomponents.$header.find( '>.toolbar' ); designGuide.corporatecomponents.$nav = designGuide.corporatecomponents.$header.find( '>nav' ); designGuide.corporatecomponents.components.init(); }; }, components : { init : function(){ $( document ).ready( function(){ //re-enable global animations $( 'body' ).removeClass( 'global-anim-off' ); } ); //init components designGuide.corporatecomponents.components.navigation.init(); designGuide.corporatecomponents.components.currentitem.init(); designGuide.corporatecomponents.components.currentlocation.init(); designGuide.corporatecomponents.components.footer.init(); designGuide.corporatecomponents.components.searchbox.init(); designGuide.corporatecomponents.components.mobilenavigation.init(); designGuide.corporatecomponents.components.skipLinks.init(); }, navigation : { init : function(){ //transparent navigation if(designGuide.corporatecomponents.$nav.length){ designGuide.corporatecomponents.components.navigation.toggleNavBg(); designGuide.corporatecomponents.components.navigation.makeAccessible(); $( window ).scroll( function(){ designGuide.corporatecomponents.components.navigation.toggleNavBg(); designGuide.corporatecomponents.components.navigation.toggleToolbar(); } ); } //toolbar location and user toggle on click designGuide.corporatecomponents.$toolbar.find( '.has-menu' ).each( function(){ var $btn = $( this ); var $toggle = $btn.find( '>button' ); var $menu = $btn.find( '.toolbar-menu' ); disableFocusToToolbarMenu($menu); //WHEN SUBNAV LOOSES FOCUS $(document).on('focusin touchstart mouseup', function(e){ if( !$menu.is( e.target ) // if the target of the click isn't the options container... && $menu.has( e.target ).length === 0 // ... nor a descendant of the options container... && !$toggle.is( e.target ) //... nor the toggle container... && $toggle.has( e.target ).length === 0 //... nor a descendant of the toggle container ){ if( $menu.parent().hasClass( 'is-expanded' ) ){ disableFocusToToolbarMenu($menu); } } }) //WHEN BUTTON IS CLICKED (enter key, spacebar as well counts here) $toggle.on('click', function(event){ if($(this).parent().hasClass('is-expanded')){ disableFocusToToolbarMenu($(this).next('.toolbar-menu')); }else{ enableFocusToToolbarMenu($(this).next('.toolbar-menu')); } }) //user account menu dropdown $menu.find( '.menu-dropdown' ).each( function(){ var $btn = $( this ); var $toggle = $btn.find( '>a' ); var $menu = $btn.find( '>span' ); $toggle.attr("aria-label", "Manage accounts: expand to see list of your accounts").attr("role",'button').attr("href",""); disableFocusToDropdownMenu($btn); $( document ).on( 'focusin touchstart mouseup', function( e ){ if( !$menu.is( e.target ) // if the target of the click isn't the options container... && $menu.has( e.target ).length === 0 // ... nor a descendant of the options container... && !$toggle.is( e.target ) //... nor the toggle container... && $toggle.has( e.target ).length === 0 //... nor a descendant of the toggle container ){ if( $btn.hasClass( 'is-active' ) ){ disableFocusToDropdownMenu($btn); } } } ); $toggle.on('click', function(event){ event.preventDefault(); if($(this).parent().hasClass('is-active')){ disableFocusToDropdownMenu($(this).parent()); }else{ enableFocusToDropdownMenu($(this).parent()); } }) } ); } ); function enableFocusToToolbarMenu($subnav){ $subnav.prev('button').attr("aria-expanded", true); var $links = $subnav.find('a'); $links.each(function(){ if($(this).closest('.menu-dropdown').length == 0){ $(this).removeAttr("tabindex aria-hidden"); } }); $subnav.parent().addClass('is-expanded'); } function disableFocusToToolbarMenu($subnav){ $subnav.prev('button').attr("aria-expanded", false); var $links = $subnav.find('a'); $links.each(function(){ if($(this).closest('.menu-dropdown').length == 0){ $(this).attr("tabindex",-1).attr("aria-hidden",true); } }); $subnav.parent().removeClass('is-expanded'); } function enableFocusToDropdownMenu($btn){ $btn.find('>button').attr("aria-expanded", true); $btn.find('a:not([role="button"])').removeAttr("tabindex aria-hidden"); $btn.addClass('is-active'); } function disableFocusToDropdownMenu($btn){ $btn.find('>button').attr("aria-expanded", false); $btn.find('a:not([role="button"])').attr("tabindex",-1).attr("aria-hidden",true); $btn.removeClass('is-active'); } }, makeAccessible: function(){ var $nav = designGuide.corporatecomponents.$nav; $nav.find('>ul').attr("role","menu"); $nav.find('>ul>li').attr("role","none"); $nav.find('>ul>li').find('>a,>button').attr("role","menuitem"); $nav.find('.sub-nav').each(function(index){ var $subnav = $(this); var subnavId = "header-subnav-"+index; $subnav.attr("id",subnavId); var $toggleBtn = $subnav.prev(); var toggleLabel =$toggleBtn.text(); var $keyboardBtn = $('') $keyboardBtn.insertBefore($subnav); disableFocusToSubnav($subnav); //WHEN SUBNAV LOOSES FOCUS $(document).on('focusin touchstart mouseup', function(e){ if( !$subnav.is( e.target ) // if the target of the click isn't the options container... && $subnav.has( e.target ).length === 0 // ... nor a descendant of the options container... && !$toggleBtn.is( e.target ) //... nor the toggle container... && $toggleBtn.has( e.target ).length === 0 //... nor a descendant of the toggle container ){ if( $subnav.parent().hasClass( 'is-expanded' ) ){ disableFocusToSubnav($subnav); } } }) //WHEN BUTTON clicked with spacebar / enter $keyboardBtn.on('keypress',function(e) { if(e.which == 13 || e.which == 32 ) { if($(this).parent().hasClass('is-expanded')){ disableFocusToSubnav($(this).next('.sub-nav')); }else{ enableFocusToSubnav($(this).next('.sub-nav')); } } }); //WHEN BUTTON IS HOVERED $subnav.parent().on('mouseenter mouseleave', function(){ if($(this).hasClass('is-expanded')){ disableFocusToSubnav($(this).find('.sub-nav')); }else{ enableFocusToSubnav($(this).find('.sub-nav')); } }) }); function enableFocusToSubnav($subnav){ $subnav.prev('button').attr("aria-expanded", true); $subnav.find('a').removeAttr("tabindex aria-hidden"); var fitsViewport = isInViewport($subnav); if(typeof fitsViewport == "object"){ if(fitsViewport.left == false){ $subnav.addClass('is-fixed fixed-to-left'); }else if(fitsViewport.right == false){ $subnav.addClass('is-fixed fixed-to-right'); } }; $subnav.parent().addClass('is-expanded'); } function disableFocusToSubnav($subnav){ $subnav.prev('button').attr("aria-expanded", false); $subnav.find('a').attr("tabindex",-1).attr("aria-hidden",true); $subnav.parent().removeClass('is-expanded'); } }, toggleNavBg : function(){ window.pageYOffset > 50 ? designGuide.corporatecomponents.$nav.addClass( 'bg-visible' ) : designGuide.corporatecomponents.$nav.removeClass( 'bg-visible' ); }, toggleToolbar : function(){ //--------------------- // TOOLBAR ONLY VISIBLE WHEN SCROLING UP //--------------------- if( document.readyState === "complete" ){ var st = $( window ).scrollTop(); if( st >= designGuide.corporatecomponents.memory.lastScrollTop && st > 300 ){ designGuide.corporatecomponents.$toolbar.addClass( 'is-outside' ); } else{ designGuide.corporatecomponents.$toolbar.removeClass( 'is-outside' ); } designGuide.corporatecomponents.memory.lastScrollTop = st; } } }, skipLinks: { init: function () { designGuide.corporatecomponents.components.skipLinks.build(); }, build: function () { var skipNavContainer = $('
'); skipNavContainer.append($('')); skipNavContainer.append($('')); skipNavContainer.append($('')); skipNavContainer.append($('')); skipNavContainer.append($('')); $('body').prepend(skipNavContainer); }, skipTo: function(el){ var scrollTarget, focusTarget; switch(el) { case 'toolbar': focusTarget = '.idc-main-header .toolbar'; break; case 'nav': focusTarget = '.idc-main-header nav > ul'; break; case 'search': focusTarget = '.idc-main-header #query'; break; case 'content': scrollTarget = '.idc-main-content'; focusTarget = scrollTarget; break; case 'footer': scrollTarget = '.idc-main-footer'; focusTarget = scrollTarget; break; } if(scrollTarget){ smoothScrollTo(scrollTarget, 0, 0, 0); } $(focusTarget).attr("tabindex",-1).focus(); $(focusTarget).removeAttr('tabindex'); } }, currentitem : { init : function(){ // //current menu item var $activeLink = designGuide.corporatecomponents.$nav.find( "[href='" + location.pathname + location.hash + "']" ); if( $activeLink.length == 1 ){ //if child of subnav if( $activeLink.closest( '.sub-nav' ).length ){ $activeLink = $activeLink.closest( '.sub-nav' ).prev(); } } else{ //custom cases for some pages var loc = window.location.pathname; if( loc.length === 1 || loc.indexOf( "/home.jsp" ) == 0 ){ $activeLink = designGuide.corporatecomponents.$nav.find( "[href='/']" ); } if( /\/research\/|\/IEP\/|\/search\/planned\/|\/idcstore\/|\/gotinsights\/|\/pricelease\/|\/vertical_markets\/|\/MarketScape\/|\/eagroup\/|\/gms\/|\/ITEPresentations\/|\/IEP\/|\/pvws\/|\/2010st\/|\/newsletters\/|\/prodserv|\/techinvestor\//g.test( loc ) ){ $activeLink = designGuide.corporatecomponents.$nav.find( "[href='/prodserv']" ); } if( loc.indexOf( "/contact" ) == 0 ){ $activeLink = designGuide.corporatecomponents.$nav.find( "[href='/contact/contact_custserv.jsp']" ); } } $activeLink.addClass( 'is-active' ); } }, currentlocation : { init: function(){ // map for all localization data let localizationMap = new Map(); localizationMap.set("cee", ["CEE", ["3_223"]]); localizationMap.set("ca", ["Canada", ["3_187"]]); localizationMap.set("mea", ["MEA", ["3_254"]]); localizationMap.set("ap", ["Asia / Pacific", ["3_328"]]); localizationMap.set("anz", ["ANZ", ["3_335", "3_329"]]); localizationMap.set("asean", ["ASEAN", ["3_342", "3_336", "3_333", "3_334"]]); localizationMap.set("in", ["India", ["3_332"]]); localizationMap.set("kr", ["South Korea", ["3_339"]]); localizationMap.set("tw", ["Taiwan", ["3_341"]]); localizationMap.set("jp", ["Japan", ["3_430"]]); localizationMap.set("cn", ["China", ["3_337"]]); localizationMap.set("de", ["Germany", ["3_200", "3_217"]]); localizationMap.set("cis", ["CIS", []]); localizationMap.set("cis_eng", ["CIS", []]); localizationMap.set("latam", ["Latin America", ["3_380"]]); localizationMap.set("eu", ["Europe", ["3_188", "3_223"]]); localizationMap.set("nordic", ["Nordic", ["3_192","3_196","3_216","3_209"]]); localizationMap.set("it", ["Italy", ["3_204"]]); localizationMap.set("fr", ["France", ["3_197"]]); localizationMap.set("es", ["Spain", ["3_212"]]); //--------------------- //Local sites set Location in toolbar and add filter for region to search //--------------------- var href = window.location.href; if(typeof sageContextRoot != "undefined" && sageContextRoot != ""){ href = "www.idc.com" + sageContextRoot; } // check if url contains specific regional slug function isRegionalURL(url, slug) { var rgx = new RegExp(`^((http(s)?:\/\/)?[a-zA-Z0-9@:%._\+~#=]*)?idc\.com\/${slug}([\/#].*)*$`); return rgx.test(url); } var location = "IDC Global"; var searchFilterGeo = []; // loop through all regional slugs and check the URL for (let [key, value] of localizationMap) { if(isRegionalURL(href, key)) { location = value[0]; searchFilterGeo = searchFilterGeo.concat(value[1]); break; } } $( '[data-idc-main-location-label]' ).text( location ).parent().attr('aria-label', 'Change site\'s region. Expand to see list of available regions. The selected region is: '+location+'.'); if( searchFilterGeo.length > 0 ){ var $targetDiv = $( '#header-search' ).find( '.query-wrap' ); searchFilterGeo.forEach( function( geoString ){ $targetDiv.prepend( '' ) } ); } } }, footer : { init: function(){ //--------------------- //STICKY FOOTER //--------------------- $('').insertBefore(designGuide.corporatecomponents.$footer); designGuide.corporatecomponents.components.footer.makeRoomForFooter(); $( window ).scroll( function(){ if( !designGuide.corporatecomponents.memory.bodyScrolled ){ designGuide.corporatecomponents.components.footer.makeRoomForFooter(); designGuide.corporatecomponents.memory.bodyScrolled = true; } } ); $( window ).resize( function(){ designGuide.corporatecomponents.memory.bodyScrolled = false; designGuide.corporatecomponents.components.footer.makeRoomForFooter(); } ); }, makeRoomForFooter : function(){ var footerHeight = designGuide.corporatecomponents.$footer.outerHeight(); var offset = 70; //break 70px ahead of running out of space var windowheight = window.innerHeight; var roomForFooter = 0; if( window.innerWidth > 1024 && windowheight > (footerHeight + offset) ){ roomForFooter = footerHeight; $( 'body' ).attr( 'data-sticky-footer', 'on' ); } else{ $( 'body' ).attr( 'data-sticky-footer', 'off' ); } $( '.idc-main-footer-reveal' ).height(roomForFooter) } }, searchbox : { init : function(){ //-------------- //Search overlay toggle on click //------------ var $idcSearch = designGuide.corporatecomponents.$nav.find( '.search' ); var $idcSearchInput = $idcSearch.find( 'input' ); $idcSearch.on( 'click', function( e ){ //when search menu isnt open if( !$( this ).hasClass( 'is-active' ) ){ if( window.innerWidth >= 640 && $( e.target ).is( 'button[type="submit"]' ) ){ //submits form } else{ e.preventDefault(); showHeaderSearch(); } } } ); $idcSearchInput.on( 'focus', function( e ){ showHeaderSearch(); } ); //hide search menu when mouse enters toolbar designGuide.corporatecomponents.$toolbar.on( 'mouseenter', function(){ hideIdcHeaderSearch(); } ) //hide search menu when clicked outside $( document ).on( 'focusin touchstart mouseup', function( e ){ if( !$idcSearch.is( e.target ) // if the target of the click isn't the options container... && $idcSearch.has( e.target ).length === 0 // ... nor a descendant of the options container... && !$idcSearchInput.is( e.target ) //... nor the toggle container... && $idcSearchInput.has( e.target ).length === 0 //... nor a descendant of the toggle container, && !$( '.ui-autocomplete' ).is( e.target ) //... nor jquery UI autocomplete menu or its child... && $( '.ui-autocomplete' ).has( e.target ).length === 0 ){ if( $idcSearch.hasClass( 'is-active' ) ){ hideIdcHeaderSearch(); } } } ); function showHeaderSearch(){ $idcSearch.addClass( 'is-active' ); } function hideIdcHeaderSearch(){ $idcSearch.removeClass( 'is-active' ); } //-------------- //Search language selector //------------ var $idcSearchLang = designGuide.corporatecomponents.$nav.find( '.language' ); $idcSearchLang.find( '>p' ).on( 'click', function(){ $idcSearchLang.find( '>ul' ).toggleClass( 'is-active' ); } ) $idcSearchLang.find( 'li' ).on( 'click', function(){ var lang = $( this ).text(); $idcSearchLang.find( '>ul' ).removeClass( 'is-active' ); $idcSearchLang.find( '>p' ).text( lang ); if( lang == "Any language" ){ lang = ""; } $idcSearch.find( '[name="lang"]' ).val( lang ); } ); } }, mobilenavigation : { init: function(){ var $idcMobileMenu = $( '#modal-idc-mobile-menu' ); //add location selector var $language = designGuide.corporatecomponents.$toolbar.find('.language'); if($language.length){ var langHTML = ''; langHTML += '' + $language.find('>.toolbar-button').text() + '
'; langHTML += '' + $( this ).find( '>a,>p' ).text() + '
'; //add main item title navHTML += '' + $( this ).text() + '
'; //add sub nav item title navHTML += '