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 50697ab
Showing
10 changed files
with
503 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,141 @@ | ||
| /* | ||
| * Copyright 2023 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| 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, | ||
| }; | ||
| }); | ||
|
|
||
| export function getTabs(block, curLocation) { | ||
| const tabs = document.createElement('nav'); | ||
| const div = getNamedValueFromTable(block, 'tabs'); | ||
| const panel = document.createElement('div'); | ||
| panel.classList.add('hero-horiz-tabs-panel'); | ||
| if (text) panel.appendChild(text); | ||
|
|
||
| div.querySelectorAll('ul > li > a').forEach((a) => { | ||
| if (normalizeURL(a.href) === normalizeURL(curLocation.href)) { | ||
| a.classList.add('current'); | ||
| const nav = document.createElement('nav'); | ||
| nav.classList.add('hero-horiz-tabs-nav'); | ||
|
|
||
| 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,43 @@ | ||
| /* | ||
| * Copyright 2023 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| .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,17 @@ | ||
| /* | ||
| * Copyright 2023 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| 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.