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 19, 2023
1 parent
ebf763a
commit beb7915
Showing
10 changed files
with
403 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,124 @@ | ||
| import { getNamedValueFromTable } from '../../scripts/scripts.js'; | ||
|
|
||
| function normalizeURL(url) { | ||
| if (url.endsWith('/')) { | ||
| return url; | ||
| export function createTabs($block, text) { | ||
| const $ul = $block.querySelector('ul'); | ||
| if (!$ul) { | ||
| return null; | ||
| } | ||
| return url.concat('/'); | ||
| } | ||
| /** @type TabInfo[] */ | ||
| 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); | ||
| // turn ul html element into nav | ||
| const nav = document.createElement('nav'); | ||
| nav.classList.add('hero-horiz-tabs-nav'); | ||
|
|
||
| function getImage(block) { | ||
| const div = getNamedValueFromTable(block, 'Image'); | ||
| div.classList.add('hero-horiz-tabs-img'); | ||
| return div; | ||
| } | ||
| nav.replaceChildren($ul); | ||
| panel.appendChild(nav); | ||
| // move $ul below section div | ||
| $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(); | ||
| /** @type TabInfo */ | ||
| const tab = tabs.find((t) => t.name === name); | ||
| if (tab) { | ||
| const sectionWrapper = document.createElement('div'); | ||
|
|
||
| export function getTabs(block, curLocation) { | ||
| const tabs = document.createElement('nav'); | ||
| const div = getNamedValueFromTable(block, 'tabs'); | ||
| [...$tabContent.classList].forEach((c) => { | ||
| sectionWrapper.classList.add(c); | ||
| }); | ||
|
|
||
| div.querySelectorAll('ul > li > a').forEach((a) => { | ||
| if (normalizeURL(a.href) === normalizeURL(curLocation.href)) { | ||
| a.classList.add('current'); | ||
| sectionWrapper.classList.add(); | ||
| const $el = document.createElement('div'); | ||
| $el.classList.add('tab-item'); | ||
| $el.append(...$tabContent.children); | ||
| $el.classList.add('hidden'); | ||
| sectionWrapper.append($el); | ||
| $container.insertBefore(sectionWrapper, $wrapper); | ||
| $tabContent.remove(); | ||
| tab.$content = $el; | ||
| } | ||
| 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); | ||
| const image = getImage(block); | ||
| const tabs = getTabs(block, curLocation); | ||
| export default function decorate($block) { | ||
| const image = getImage($block); | ||
| 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'); | ||
|
|
||
| $tab.replaceChildren($button); | ||
|
|
||
| const leftDiv = document.createElement('div'); | ||
| leftDiv.classList.add('hero-horiz-tabs-panel'); | ||
| leftDiv.append(text); | ||
| leftDiv.append(tabs); | ||
| $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'); | ||
| } | ||
| }); | ||
|
|
||
| block.replaceChildren(leftDiv); | ||
| block.append(image); | ||
| if (image) $block.append(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: 12px; | ||
| width: 12px; | ||
| margin-right: 4px; | ||
| 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
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,83 @@ | ||
| .network-item div.tags { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .network-item .tags div { | ||
| display: flex; | ||
| font-size: var(--body-font-size-xs); | ||
| margin-right: 1rem; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .network-item .tags div::before { | ||
| display: inline-block; | ||
| content: ''; | ||
| background: inherit; | ||
| background-color: var(--text-color); | ||
| height: 12px; | ||
| width: 12px; | ||
| margin-right: 4px; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .network-item h3.title { | ||
| font-weight: var(--font-weight-bold); | ||
| } | ||
|
|
||
| .network-item .tags div.blue { | ||
| color: #009CBD; /* oral care */ | ||
| } | ||
|
|
||
| .network-item .tags div.yellow { | ||
| color: #D9AB41; /* safety mobility */ | ||
| } | ||
|
|
||
| .network-item .tags div.orange { | ||
| color: #F87C56; /* health beauty */ | ||
| } | ||
|
|
||
| .network-item .tags div.green { | ||
| color: #00A499; /* living environment */ | ||
| } | ||
|
|
||
| .network-item .tags div.green::before { | ||
| background-color: #00A499; /* living environment */ | ||
| } | ||
|
|
||
| .network-item .tags div.blue::before { | ||
| background-color: #009CBD; /* oral care */ | ||
| } | ||
|
|
||
| .network-item .tags div.yellow::before { | ||
| background-color: #D9AB41; /* safety mobility */ | ||
| } | ||
|
|
||
| .network-item .tags div.orange::before { | ||
| background-color: #F87C56; /* health beauty */ | ||
| } | ||
|
|
||
| .network-item .tags div:last-child { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| div.network-item { | ||
| margin-bottom: 24px; | ||
| border-bottom: 1px solid #3c465033; | ||
| } | ||
|
|
||
| .network-item div.our-hr a::after { | ||
| content: url("../../icons/angle-right-blue.svg"); | ||
| position:relative; | ||
| left: 0.3rem; | ||
| top: 0.5rem; | ||
| } | ||
|
|
||
| div.network-item h3.title, | ||
| div.network-item div.recruiting-link, | ||
| div.network-item div.career-opportunities, | ||
| div.network-item div.our-hr, | ||
| div.network-item div.website { | ||
| padding-bottom: 1rem; | ||
| } |
Oops, something went wrong.