Skip to content

Instantly share code, notes, and snippets.

@wplit
Created July 19, 2024 10:57
Show Gist options
  • Save wplit/a10cc9b05074dbd20daa79c5ae60519a to your computer and use it in GitHub Desktop.
Save wplit/a10cc9b05074dbd20daa79c5ae60519a to your computer and use it in GitHub Desktop.
Tabs with focus removed when use hovers tabs
function xTabsToggleAccordionItem(e,t,a=!0){let r=0,l=a?t.duration:0;!0!==t.closeSibling&&e.closest(".x-tabs_content")&&e.closest(".x-tabs_content").querySelectorAll(".x-tabs_toggle[aria-expanded=true]").forEach((t,a)=>{let r=null!=t.nextElementSibling?t.nextElementSibling:t.closest(".x-tabs_content-item").querySelector(".x-tabs_panel");t!=e&&(t.setAttribute("aria-expanded","false"),r.xslideUp(l))});let s=null!=e.nextElementSibling?e.nextElementSibling:!!e.closest(".x-tabs_content-item")&&!!e.closest(".x-tabs_content-item").querySelector(".x-tabs_panel")&&e.closest(".x-tabs_content-item").querySelector(".x-tabs_panel");e.parentElement&&e.parentElement.parentElement&&(r=[...e.parentElement.parentElement.children].indexOf(e.parentElement)),s&&("true"!==e.getAttribute("aria-expanded")?(e.setAttribute("aria-expanded","true"),s.xslideDown(l),window.dispatchEvent(new Event("resize")),s.querySelector(".x-read-more_content")&&(s.querySelector(".x-read-more_content").style.maxHeight="",setTimeout(()=>{"function"==typeof doExtrasReadmore&&doExtrasReadmore(s)},0)),e.dispatchEvent(new Event("x_tabs_accordion:expand")),e.closest(".brxe-xtabs").dispatchEvent(new Event("x_tabs_accordion:expand")),e.closest(".brxe-xtabs").dispatchEvent(new Event("x_tabs_accordion:expand_"+r))):document.querySelector("body > .brx-body.iframe")||(e.setAttribute("aria-expanded","false"),s.xslideUp(l),e.dispatchEvent(new Event("x_tabs_accordion:collapse")),e.closest(".brxe-xtabs").dispatchEvent(new Event("x_tabs_accordion:collapse"))))}function xTabsSelectTab(e,t=!1,a=!0,r=!1,l=!1,s=!1){if(!e)return;let o=e.closest(".brxe-xtabs");!o.classList.contains(".x-tabs-mobile")&&(o.querySelector(".x-tabs_list").querySelectorAll(".x-tabs_tab-selected").forEach(e=>{e.classList.remove("x-tabs_tab-selected"),l||e.setAttribute("tabindex","-1"),e.setAttribute("aria-selected","false")}),e.classList.add("x-tabs_tab-selected"),e.setAttribute("tabindex","0"),e.setAttribute("aria-selected","true"),a&&e.focus(),r&&xTabsPositionToggleSlider(o.querySelector(".x-tabs_list").querySelector(".x-tabs_slider"),e),t||(t=[...e.parentElement.children].indexOf(e)),o.closest(".brxe-xtabs").dispatchEvent(new Event("x_tabs_accordion:expand")),o.closest(".brxe-xtabs").dispatchEvent(new Event("x_tabs_accordion:expand_"+t)),o.querySelector(".x-tabs_content")&&o.querySelector(".x-tabs_content").querySelectorAll('.x-tabs_panel:not(.brxe-xtabs .brxe-xtabs:not([data-x-id="'+o.getAttribute("data-x-id")+'"]) .x-tabs_panel )').forEach((e,a)=>{e.classList.remove("x-tabs_panel-current"),e.style.display="none",e.setAttribute("tabindex","-1"),a===t&&(e.classList.add("x-tabs_panel-current"),e.style.display="flex",s&&(e.closest(".x-tabs_content").style.height=e.offsetHeight+"px"),xTabsMaybeFocusablePanel(e),o.dispatchEvent(new Event("x_tabs:switch")),e.querySelector(".x-read-more_content")&&(e.querySelectorAll(".x-read-more_content").forEach(e=>{e.style.maxHeight=""}),setTimeout(()=>{"function"==typeof doExtrasReadmore&&(doExtrasReadmore(e),window.dispatchEvent(new Event("resize")))},0)))}),window.dispatchEvent(new Event("resize")))}function xTabsAllClicks(e){if(!e.target.closest(".x-tabs_tab")&&!e.target.closest(".x-tabs_toggle"))return;document.querySelector("body > .brx-body.iframe")||e.stopPropagation();let t;if(e.target.closest(".brxe-xtabs")&&(t=JSON.parse(e.target.closest(".brxe-xtabs").getAttribute("data-x-tabs"))),e.target.closest(".x-tabs_tab")){let a;e.target.closest(".x-tabs_tab").parentElement.classList.contains("x-tabs_list")&&(a=[...e.target.closest(".x-tabs_tab").parentElement.children].indexOf(e.target.closest(".x-tabs_tab"))),xTabsSelectTab(e.target.closest(".x-tabs_tab"),a,!1,"true"===t.animatedTabs,t.tabUnselect,t.adaptiveHeight)}e.target.closest(".x-tabs_toggle")&&xTabsToggleAccordionItem(e.target.closest(".x-tabs_toggle"),t)}function xTabsPositionToggleSlider(e,t,a=!0){a||document.querySelector("body > .brx-body.iframe")||(e.style.transition="none"),e&&t&&(e.style.left=t.offsetLeft+"px",e.style.width=t.offsetWidth+1+"px",e.style.height=t.offsetHeight+1+"px",e.style.top=t.offsetTop+"px",a||document.querySelector("body > .brx-body.iframe")||e.style.removeProperty("transition"))}function xTabsMaybeFocusablePanel(e){let t=e.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)').length;t?e.setAttribute("tabindex","-1"):e.setAttribute("tabindex","0")}function xTabs(){let e=!1;function t(e,t,a=!1){let r=a?a+"-":"",l;return e.id?e.id+"-"+r+(t+1):e.getAttribute("data-tabs-id")?e.getAttribute("data-tabs-id")+"-"+r+(t+1):e.getAttribute("data-x-id")+"-"+r+(t+1)}document.querySelector("body > .brx-body.iframe")&&(e=!0);let a=(e,t)=>{var a;return t=t||50,function r(){clearTimeout(a);var l=arguments,s=this;a=setTimeout(function t(){e.apply(s,l)},t)}};function r(e,t){var a;"none"===t.accordionBreakpoint?(e.classList.remove("x-tabs-mobile"),e.querySelector(".x-tabs_content").classList.remove("x-tabs_content-accordion"),e.querySelector(".x-tabs_list").classList.remove("x-tabs_list-accordion")):"none"!==t.accordionBreakpoint&&parseInt(window.innerWidth)<=parseInt(t.accordionBreakpoint)?(e.classList.contains("x-tabs-mobile")||(function e(t){let a=t.getAttribute("data-x-tabs"),r=a?JSON.parse(a):{};t.querySelectorAll(".x-tabs_toggle").forEach(e=>{e.setAttribute("aria-expanded","false")});let l=t.querySelector(".x-tabs_panel-current");l&&(l.style.display="none"),r.expandFirstItem&&(t.querySelectorAll(".x-tabs_toggle").forEach((e,t)=>{if(0===t){e.setAttribute("aria-expanded","true");return}}),t.querySelector(".x-tabs_content")&&Array.from(t.querySelector(".x-tabs_content").children).forEach((e,t)=>{let a=e.querySelector(".x-tabs_panel");a&&0===t&&(a.classList.add("x-tabs_panel-current"),a.style.removeProperty("display"))}))}(e),e.dispatchEvent(new Event("x_tabs:accordion"))),e.classList.add("x-tabs-mobile"),e.querySelectorAll(".x-tabs_panel").forEach(e=>{"tabpanel"===e.getAttribute("role")&&e.setAttribute("role","region")}),e.querySelector(".x-tabs_content")&&(e.querySelector(".x-tabs_content").style.removeProperty("height"),e.querySelector(".x-tabs_content").classList.add("x-tabs_content-accordion")),e.querySelector(".x-tabs_list")&&e.querySelector(".x-tabs_list").classList.add("x-tabs_list-accordion")):e.classList.contains("x-tabs-mobile")&&(e.classList.remove("x-tabs-mobile"),e.querySelectorAll(".x-tabs_panel").forEach(e=>{"region"===e.getAttribute("role")&&e.setAttribute("role","tabpanel")}),e.querySelector(".x-tabs_content")&&e.querySelector(".x-tabs_content").classList.remove("x-tabs_content-accordion"),e.querySelector(".x-tabs_list")&&e.querySelector(".x-tabs_list").classList.remove("x-tabs_list-accordion"),(a=e).querySelectorAll(".x-tabs_panel").forEach(e=>{e.style.removeProperty("display")}),xTabsSelectTab(a.querySelector(".x-tabs_tab-selected"),0,!1,!1),e.dispatchEvent(new Event("x_tabs:tabs")))}let l=function(l){l.querySelectorAll(".brxe-xtabs").forEach(l=>{let s=l.getAttribute("data-x-tabs"),o=s?JSON.parse(s):{},n="true"===o.animatedTabs,c=window.location.hash;if(r(l,o),l.querySelectorAll(".x-tabs_tab").forEach(e=>{e.setAttribute("tabindex","-1")}),window.addEventListener("resize",a(()=>{r(l,o)},0)),l.querySelector(".x-tabs_list")&&(l.querySelector(".x-tabs_list").querySelectorAll(".x-tabs_tab").forEach((e,a)=>{e.id||(e.id=t(l,a,"tab"))}),"vertical"===o.tabOrientation?l.querySelector(".x-tabs_list").setAttribute("aria-orientation","vertical"):l.querySelector(".x-tabs_list").setAttribute("aria-orientation","horizontal")),null!=c&&""!=c&&setTimeout(()=>{if(l.querySelector(c)){if(!l.querySelector(c).classList.contains("x-tabs_panel"))return;let e=Array.from(document.querySelector(c).closest(".x-tabs_content").children),t=document.querySelector(c).closest(".x-tabs_content-item"),a=Array.prototype.indexOf.call(e,t);l.classList.contains("x-tabs-mobile")?xTabsToggleAccordionItem(l.querySelectorAll(".x-tabs_content-item")[a].querySelector(".x-tabs_toggle"),o,!1):xTabsSelectTab(l.querySelector(".x-tabs_list").querySelectorAll(".x-tabs_tab")[a],a,!1,n,o.tabUnselect,o.adaptiveHeight),o.hashLink&&window.scrollTo({top:document.querySelector(c).offsetTop-o.scrollOffset,left:0,behavior:"smooth"})}},50),o.URLparam){let i=new URLSearchParams(window.location.search),b=i.get(o.URLParamKey);b=null!=b&&b.split("#")[0];let x=!1;b&&setTimeout(()=>{if(l.querySelector('[data-tab="'+b+'"]')?x=l.querySelector('[data-tab="'+b+'"]'):l.querySelector("#"+b)&&(x=l.querySelector("#"+b)),x&&x.classList.contains("x-tabs_panel")){let e=Array.from(x.closest(".x-tabs_content").children),t=x.closest(".x-tabs_content-item"),a=Array.prototype.indexOf.call(e,t);l.classList.contains("x-tabs-mobile")?xTabsToggleAccordionItem(l.querySelectorAll(".x-tabs_content-item")[a].querySelector(".x-tabs_toggle"),o,!1):xTabsSelectTab(l.querySelector(".x-tabs_list").querySelectorAll(".x-tabs_tab")[a],a,!1,n,o.tabUnselect,o.adaptiveHeight)}},50)}if(l.querySelector(".x-tabs_content")&&Array.from(l.querySelector(".x-tabs_content").children).forEach((e,a)=>{let r=e.querySelector(".x-tabs_panel");if(r){if(r.closest(".x-tabs_content")!==l.querySelector(".x-tabs_content"))return;r.id||(r.id=t(l,a,!1)),l.querySelectorAll(".x-tabs_tab")[a]&&r.setAttribute("aria-labelledby",l.querySelectorAll(".x-tabs_tab")[a].id),0===a?(!l.classList.contains("x-tabs-mobile")||o.expandFirstItem)&&(r.classList.add("x-tabs_panel-current"),xTabsMaybeFocusablePanel(r)):r.setAttribute("tabindex","-1"),o.hashLink&&!document.querySelector("body > .brx-body.iframe")&&document.querySelectorAll('a[href="#'+r.id+'"]').forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();let t=Array.from(document.querySelector("#"+r.id).closest(".x-tabs_content").children),a=document.querySelector("#"+r.id).closest(".x-tabs_content-item"),s=Array.prototype.indexOf.call(t,a);l.classList.contains("x-tabs-mobile")?xTabsToggleAccordionItem(l.querySelectorAll(".x-tabs_content-item")[s].querySelector(".x-tabs_toggle"),o,!1):xTabsSelectTab(l.querySelectorAll(".x-tabs_tab")[s],s,!1,o.animatedTabs,o.tabUnselect,o.adaptiveHeight),window.scrollTo({top:document.querySelector("#"+r.id).offsetTop-o.scrollOffset,left:0,behavior:"smooth"}),history.replaceState(void 0,void 0,"#"+r.id)})})}}),n&&!l.querySelector(".x-tabs_slider")){let d=document.createElement("div");if(d.classList.add("x-tabs_slider"),l.querySelector(".x-tabs_list")&&l.querySelector(".x-tabs_list").append(d),l.querySelector(".x-tabs_tab")&&xTabsPositionToggleSlider(d,l.querySelector(".x-tabs_tab")),"function"==typeof ResizeObserver){let u=new ResizeObserver(e=>{for(let t of e)xTabsPositionToggleSlider(d,l.querySelector(".x-tabs_tab-selected"),!1)});l.querySelector(".x-tabs_list")&&u.observe(l.querySelector(".x-tabs_list"),{box:"border-box"})}}l.removeEventListener("click",xTabsAllClicks,!0),l.addEventListener("click",xTabsAllClicks,!0);let y=l.querySelector(".x-tabs_list"),p=y?y.querySelectorAll(".x-tabs_tab"):[];if(p.forEach((t,a)=>{l.querySelectorAll(".x-tabs_panel")[a]&&setTimeout(()=>{t.setAttribute("aria-controls",Array.from(l.querySelector(".x-tabs_content").children)[a].querySelector(".x-tabs_panel").id)},0),t.matches(".x-tabs_tab:first-child")?(t.classList.add("x-tabs_tab-selected"),t.setAttribute("tabindex","0"),t.setAttribute("aria-selected","true")):o.tabUnselect&&t.setAttribute("tabindex","0"),o.hoverSelect&&!e&&t.addEventListener("mouseover",e=>{xTabsSelectTab(t,!1,!1,n,o.tabUnselect,o.adaptiveHeight)}),t.addEventListener("keydown",e=>{"ArrowLeft"===e.key&&"horizontal"===o.tabOrientation||"ArrowUp"===e.key&&"vertical"===o.tabOrientation?(e.preventDefault(),t.previousElementSibling?xTabsSelectTab(t.previousElementSibling,a-1,!0,n,o.tabUnselect,o.adaptiveHeight):xTabsSelectTab(p[p.length-1],p.length-1,!0,n,o.tabUnselect,o.adaptiveHeight)):"ArrowRight"===e.key&&"horizontal"===o.tabOrientation||"ArrowDown"===e.key&&"vertical"===o.tabOrientation?(e.preventDefault(),t.nextElementSibling&&t.nextElementSibling.classList.contains("x-tabs_tab")?xTabsSelectTab(t.nextElementSibling,a+1,!0,n,o.tabUnselect,o.adaptiveHeight):xTabsSelectTab(t.closest(".x-tabs_list").querySelector(".x-tabs_tab"),0,!0,n,o.tabUnselect,o.adaptiveHeight)):"Enter"===e.code||"Space"===e.code?o.tabUnselect&&xTabsSelectTab(t,a,!0,n,o.tabUnselect,o.adaptiveHeight):"Home"===e.code?(e.preventDefault(),xTabsSelectTab(t.closest(".x-tabs_list").querySelector(".x-tabs_tab"),0,!0,n,o.tabUnselect,o.adaptiveHeight)):"End"===e.code?(e.preventDefault(),xTabsSelectTab(p[p.length-1],p.length-1,!0,n,o.tabUnselect,o.adaptiveHeight)):"Tab"===e.code&&!e.shiftKey&&l.querySelector(".x-tabs_panel-current .x-tabs_panel-content")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > a[href]:first-child")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > h1:first-child > a[href]")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > h2:first-child > a[href]")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > h3:first-child > a[href]")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > h4:first-child > a[href]")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > h5:first-child > a[href]")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > h6:first-child > a[href]")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > button:first-child")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > input:first-child")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > textarea:first-child")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > select:first-child")&&!l.querySelector(".x-tabs_panel-current .x-tabs_panel-content > details:first-child")&&!l.querySelector('.x-tabs_panel-current .x-tabs_panel-content > [tabindex]:not([tabindex="-1"]:first-child')&&(e.preventDefault(),l.querySelector(".x-tabs_panel-current").focus())})}),l.querySelector(".x-tabs_content")){let S=Array.from(l.querySelector(".x-tabs_content").children);S.forEach((e,a)=>{let r=e.querySelector(".x-tabs_toggle");if(!r||!r.closest(".x-tabs_content"))return;let s=null!=r.nextElementSibling?r.nextElementSibling:!!r.closest(".x-tabs_content-item")&&!!r.closest(".x-tabs_content-item").querySelector(".x-tabs_panel")&&r.closest(".x-tabs_content-item").querySelector(".x-tabs_panel");r.id||(r.id=t(l,a,"toggle")),s&&(0===a&&o.expandFirstItem?(r.setAttribute("aria-expanded","true"),l.classList.contains("x-tabs-mobile")&&s.xslideDown(0)):r.setAttribute("aria-expanded","false"),r.setAttribute("aria-controls",s.id)),r.addEventListener("keydown",function(e){"ArrowUp"===e.key?(e.preventDefault(),0===a?S[S.length-1].querySelector(".x-tabs_toggle")&&S[S.length-1].querySelector(".x-tabs_toggle").focus():S[a-1].querySelector(".x-tabs_toggle")&&S[a-1].querySelector(".x-tabs_toggle").focus()):"ArrowDown"===e.key?(e.preventDefault(),S.length-1===a?S[0].querySelector(".x-tabs_toggle")&&S[0].querySelector(".x-tabs_toggle").focus():S[a+1].querySelector(".x-tabs_toggle")&&S[a+1].querySelector(".x-tabs_toggle").focus()):"Home"===e.code?(e.preventDefault(),S[0].querySelector(".x-tabs_toggle")&&S[0].querySelector(".x-tabs_toggle").focus()):"End"===e.code&&(e.preventDefault(),S[S.length-1].querySelector(".x-tabs_toggle")&&S[S.length-1].querySelector(".x-tabs_toggle").focus()),"BUTTON"!=r.tagName&&("Enter"===e.code||"Space"===e.code)&&(e.preventDefault(),e.stopPropagation(),xTabsToggleAccordionItem(r,o))})})}})};function s(e){if(void 0===e.detail.queryId){if(void 0===e.detail.popupElement)return;l(e.detail.popupElement)}setTimeout(()=>{document.querySelector(".brxe-"+e.detail.queryId)&&l(document.querySelector(".brxe-"+e.detail.queryId).parentElement)},0)}l(document),document.addEventListener("bricks/ajax/load_page/completed",s),document.addEventListener("bricks/ajax/pagination/completed",s),document.addEventListener("bricks/ajax/popup/loaded",s),document.addEventListener("bricks/ajax/end",s),window.doExtrasTabs=l,"undefined"!=typeof bricksextras&&(bricksextras.tabs={goto(e,t){let a=e?.target||!1,r=t?parseInt(t):0;a&&a.classList.contains("brxe-xtabs")&&(a.classList.contains("x-tabs-mobile")?a.querySelector(".x-tabs_content-item")&&a.querySelectorAll(".x-tabs_content-item")[r]&&a.querySelectorAll(".x-tabs_content-item")[r].querySelector(".x-tabs_toggle[aria-expanded=false]")&&a.querySelectorAll(".x-tabs_content-item")[r].querySelector(".x-tabs_toggle[aria-expanded=false]").click():a.querySelector(".x-tabs_tab")&&a.querySelectorAll(".x-tabs_tab")[r]&&a.querySelectorAll(".x-tabs_tab")[r].click())}})}document.addEventListener("DOMContentLoaded",()=>{bricksIsFrontend&&xTabs()});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment