From 3ab31220d49258919b2b1bc07590503657477798 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 23 Jan 2024 18:26:15 +0530 Subject: [PATCH 1/3] initial commit --- blocks/page-tabs/page-tabs.js | 40 +++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 23143127c..9555dc687 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -1,5 +1,5 @@ import { - a, div, li, nav, span, ul, + a, div, img, li, nav, option, select, span, ul, } from '../../scripts/dom-builder.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; @@ -63,6 +63,27 @@ function createTabList(tabs, currentTab) { ); } +function createDropdownList(tabs, currentTab) { + const dropdownWrapper = div( + { class: 'block w-full px-4 py-2 bg-white md:hidden order-last' }, + select( + { id: 'selectedTab', class: 'block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none' }, + ...tabs.map((tab) => { + const isSelectedTab = tab.id === currentTab; + const navItem = option( + { value: tab.name, selected: isSelectedTab }, + img({ + class: 'w-6 h-6', loading: 'lazy', alt: tab.icon, src: tab.icon, + }), + tab.name, + ); + return navItem; + }), + ), + ); + return dropdownWrapper; +} + export default async function decorate(block) { const main = block.closest('main'); const pageTabsContainer = main.querySelector('.page-tabs-container'); @@ -102,18 +123,33 @@ export default async function decorate(block) { return { name: tabName, id: tabId, icon: iconName }; }); + // For Desktop const navList = createTabList(tabs, currentTab); - const navElement = nav( div({ class: 'flex justify-center' }, navList), ); + // For Mobile + const dropdownList = createDropdownList(tabs, currentTab); + const headerEl = document.querySelector('header'); + headerEl.append(dropdownList); + block.innerHTML = ''; block.append(navElement); pageTabsContainer.classList.add(...'hidden mb-4 -mt-16 md:block !p-0'.split(' ')); main.querySelector('.product-hero-container').classList.add(...'!pb-32'.split(' ')); } + window.addEventListener('change', () => { + const e = document.getElementById('selectedTab'); + const { value } = e.options[e.selectedIndex]; + + const currentTab = window.location.hash?.replace('#', '') || e.options[e.selectedIndex].selected; + if (!currentTab) return; + + if (!currentTab.includes(value.toLowerCase())) window.location.hash = `#${value.toLowerCase()}`; + }); + window.addEventListener('hashchange', () => { const currentTab = window.location.hash?.replace('#', '') || tabSections[0].getAttribute('.aria-labelledby'); if (!currentTab) return; From a200ef627eb7982814faf63b44a3d1ce2e025594 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 23 Jan 2024 20:31:17 +0530 Subject: [PATCH 2/3] added eventListener to dropdown --- blocks/page-tabs/page-tabs.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 9555dc687..0387f8136 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -63,15 +63,15 @@ function createTabList(tabs, currentTab) { ); } -function createDropdownList(tabs, currentTab) { +// For mobile view +function createDropdownList(tabs) { const dropdownWrapper = div( { class: 'block w-full px-4 py-2 bg-white md:hidden order-last' }, select( { id: 'selectedTab', class: 'block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none' }, ...tabs.map((tab) => { - const isSelectedTab = tab.id === currentTab; const navItem = option( - { value: tab.name, selected: isSelectedTab }, + { value: tab.name }, img({ class: 'w-6 h-6', loading: 'lazy', alt: tab.icon, src: tab.icon, }), @@ -130,9 +130,9 @@ export default async function decorate(block) { ); // For Mobile - const dropdownList = createDropdownList(tabs, currentTab); - const headerEl = document.querySelector('header'); - headerEl.append(dropdownList); + const dropdownList = createDropdownList(tabs); + const headerEl = document.querySelector('main'); + headerEl.prepend(dropdownList); block.innerHTML = ''; block.append(navElement); @@ -142,12 +142,8 @@ export default async function decorate(block) { window.addEventListener('change', () => { const e = document.getElementById('selectedTab'); - const { value } = e.options[e.selectedIndex]; - - const currentTab = window.location.hash?.replace('#', '') || e.options[e.selectedIndex].selected; - if (!currentTab) return; - - if (!currentTab.includes(value.toLowerCase())) window.location.hash = `#${value.toLowerCase()}`; + const { innerText } = e.options[e.selectedIndex]; + window.location.hash = `#${innerText.toLowerCase()}`; }); window.addEventListener('hashchange', () => { From d942bb35a43de0507842fd95849f0d0a1e50066e Mon Sep 17 00:00:00 2001 From: wz914876 Date: Wed, 24 Jan 2024 10:20:25 +0530 Subject: [PATCH 3/3] review comments changes --- blocks/page-tabs/page-tabs.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js index 637be7f0e..f3b65a969 100644 --- a/blocks/page-tabs/page-tabs.js +++ b/blocks/page-tabs/page-tabs.js @@ -1,5 +1,5 @@ import { - a, div, li, nav, span, ul, + a, div, li, nav, option, select, span, ul, } from '../../scripts/dom-builder.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { getProductResponse } from '../../scripts/scripts.js'; @@ -64,6 +64,23 @@ function createTabList(tabs, currentTab) { ); } +// For mobile view +function createDropdownList(tabs, currentTab) { + const dropdownWrapper = div( + { class: 'block w-full px-4 py-2 bg-white md:hidden order-last' }, + select( + { id: 'selectedTab', class: 'block w-auto py-2 pl-4 text-base border border-gray-300 rounded text-danaherblue-600 focus:outline-none' }, + ...tabs.map((tab) => { + const isSelectedTab = tab.id === currentTab; + const navItem = option({ value: tab.name }, tab.name); + if (isSelectedTab) navItem.setAttribute('selected', isSelectedTab); + return navItem; + }), + ), + ); + return dropdownWrapper; +} + function hasProducts(productResponse) { return productResponse?.raw?.objecttype === 'Family' && productResponse?.raw?.numproducts > 0; } @@ -141,16 +158,25 @@ export default async function decorate(block) { }); const navList = createTabList(filteredTabs, currentTab); - const navElement = nav( div({ class: 'flex justify-center' }, navList), ); + // For Mobile View + const dropdownList = createDropdownList(tabs, currentTab); + main.prepend(dropdownList); + block.innerHTML = ''; block.append(navElement); pageTabsContainer.classList.add(...'hidden mb-4 -mt-16 md:block !p-0'.split(' ')); } + const selectEl = document.getElementById('selectedTab'); + selectEl.addEventListener('change', (event) => { + const innerText = event.target.value; + window.location.hash = `#${innerText.toLowerCase()}`; + }); + window.addEventListener('hashchange', () => { const currentTab = window.location.hash?.replace('#', '') || tabSections[0].getAttribute('.aria-labelledby'); if (!currentTab) return;