forked from sunstar-engineering/sunstar-engineering
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added network-item block, modified horizontal tabs hero
- Loading branch information
Dragos Cristian Bute
committed
Sep 20, 2023
1 parent
ebf763a
commit d4b750d
Showing
10 changed files
with
431 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,129 @@ | ||
| import { getNamedValueFromTable } from '../../scripts/scripts.js'; | ||
|
|
||
| function normalizeURL(url) { | ||
| if (url.endsWith('/')) { | ||
| return url; | ||
| } | ||
| return url.concat('/'); | ||
| } | ||
| export function createTabs(block, text) { | ||
| const ul = block.querySelector('ul'); | ||
| if (!ul) return null; | ||
|
|
||
| function getImage(block) { | ||
| const div = getNamedValueFromTable(block, 'Image'); | ||
| div.classList.add('hero-horiz-tabs-img'); | ||
| return div; | ||
| } | ||
| const tabs = [...ul.querySelectorAll('li')].map((li) => { | ||
| const title = li.textContent; | ||
| const name = title.toLowerCase().trim(); | ||
| return { | ||
| title, | ||
| name, | ||
| $tab: li, | ||
| }; | ||
| }); | ||
|
|
||
| const panel = document.createElement('div'); | ||
| panel.classList.add('hero-horiz-tabs-panel'); | ||
| if (text) panel.appendChild(text); | ||
|
|
||
| export function getTabs(block, curLocation) { | ||
| const tabs = document.createElement('nav'); | ||
| const div = getNamedValueFromTable(block, 'tabs'); | ||
| const nav = document.createElement('nav'); | ||
| nav.classList.add('hero-horiz-tabs-nav'); | ||
|
|
||
| div.querySelectorAll('ul > li > a').forEach((a) => { | ||
| if (normalizeURL(a.href) === normalizeURL(curLocation.href)) { | ||
| a.classList.add('current'); | ||
| nav.replaceChildren(ul); | ||
| panel.appendChild(nav); | ||
| block.replaceChildren(panel); | ||
|
|
||
| // search referenced sections and move them inside the tab-container | ||
| const wrapper = block.parentElement; | ||
| const container = wrapper.parentElement; | ||
| const sections = document.querySelectorAll('[data-tab]'); | ||
|
|
||
| // move the tab's sections before the tab riders. | ||
| [...sections].forEach((tabContent) => { | ||
| const name = tabContent.dataset.tab.toLowerCase().trim(); | ||
|
|
||
| const tab = tabs.find((t) => t.name === name); | ||
| if (tab) { | ||
| const sectionWrapper = document.createElement('div'); | ||
|
|
||
| // copy the classes from the section to the wrapper | ||
| [...tabContent.classList].forEach((c) => { | ||
| sectionWrapper.classList.add(c); | ||
| }); | ||
|
|
||
| sectionWrapper.classList.add(); | ||
| const tabDiv = document.createElement('div'); | ||
| tabDiv.classList.add('tab-item'); | ||
| tabDiv.append(...tabContent.children); | ||
| tabDiv.classList.add('hidden'); | ||
| sectionWrapper.append(tabDiv); | ||
| container.insertBefore(sectionWrapper, wrapper); | ||
|
|
||
| // remove it from the dom | ||
| tabContent.remove(); | ||
| tab.$content = tabDiv; | ||
| } | ||
| tabs.appendChild(a); | ||
| }); | ||
| return tabs; | ||
| } | ||
|
|
||
| function getImage(block) { | ||
| const div = getNamedValueFromTable(block, 'Image'); | ||
| if (!div) return null; | ||
| div.classList.add('hero-horiz-tabs-img'); | ||
| return div; | ||
| } | ||
|
|
||
| function getText(block) { | ||
| const div = getNamedValueFromTable(block, 'Contents'); | ||
| if (!div) return null; | ||
| div.classList.add('hero-horiz-tabs-text'); | ||
| return div; | ||
| } | ||
|
|
||
| export default async function decorate(block, curLocation = window.location) { | ||
| const text = getText(block); | ||
| export default function decorate(block) { | ||
| const image = getImage(block); | ||
| const tabs = getTabs(block, curLocation); | ||
| const text = getText(block); | ||
| const tabs = createTabs(block, text); | ||
|
|
||
| // move the tab riders in front | ||
| const wrapper = block.parentElement; | ||
| const container = wrapper.parentElement; | ||
| container.insertBefore(wrapper, container.firstElementChild); | ||
|
|
||
| tabs.forEach((tab, index) => { | ||
| const button = document.createElement('button'); | ||
| const { $tab, title, name } = tab; | ||
| button.textContent = title.split(','); | ||
| button.classList.add('tab'); | ||
|
|
||
| const leftDiv = document.createElement('div'); | ||
| leftDiv.classList.add('hero-horiz-tabs-panel'); | ||
| leftDiv.append(text); | ||
| leftDiv.append(tabs); | ||
| $tab.replaceChildren(button); | ||
|
|
||
| block.replaceChildren(leftDiv); | ||
| block.append(image); | ||
| $tab.addEventListener('click', () => { | ||
| const activeButton = block.querySelector('button.active'); | ||
|
|
||
| if (activeButton !== $tab) { | ||
| activeButton.classList.remove('active'); | ||
| // remove active class from parent li | ||
| activeButton.parentElement.classList.remove('active'); | ||
|
|
||
| button.classList.add('active'); | ||
| // add active class to parent li | ||
| $tab.classList.add('active'); | ||
|
|
||
| tabs.forEach((t) => { | ||
| if (name === t.name) { | ||
| t.$content.classList.remove('hidden'); | ||
| } else { | ||
| t.$content.classList.add('hidden'); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| if (index === 0) { | ||
| button.classList.add('active'); | ||
| // add active class to parent li | ||
| $tab.classList.add('active'); | ||
| if (tab.$content) tab.$content.classList.remove('hidden'); | ||
| } | ||
| }); | ||
|
|
||
| if (image) { | ||
| block.append(image); | ||
| } else { | ||
| block.classList.add('no-image'); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| .horizontal-list ul { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .horizontal-list.careers-tags ul { | ||
| font-size: var(--body-font-size-xs); | ||
| } | ||
|
|
||
| .horizontal-list li { | ||
| display: inline-block; | ||
| margin-right: 1rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .horizontal-list li::before { | ||
| display: inline-block; | ||
| content: ''; | ||
| background: inherit; | ||
| background-color: var(--text-color); | ||
| height: 0.75rem; | ||
| width: 0.75rem; | ||
| margin-right: 0.25rem; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .horizontal-list li:last-child { | ||
| margin-right: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export default function decorate(block) { | ||
| const list = block.children[0].children[0].children[0]; | ||
|
|
||
| block.replaceChildren(list); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.