forked from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
29 changed files
with
3,243 additions
and
4 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
main .carousel-container { | ||
padding: 0; | ||
} | ||
|
||
main .carousel { | ||
display: flex; | ||
scroll-snap-type: x mandatory; | ||
overflow: scroll hidden; | ||
scroll-behavior: smooth; | ||
max-width: 1680px; | ||
margin: auto; | ||
} | ||
|
||
main .carousel picture { | ||
position: absolute; | ||
z-index: -1; | ||
top: 0; | ||
left: 0; | ||
bottom: 0; | ||
right: 0; | ||
box-sizing: border-box; | ||
} | ||
|
||
main .carousel img { | ||
object-fit: cover; | ||
width: 100%; | ||
height: 100%; | ||
object-position: 90%; | ||
} | ||
|
||
main .carousel > div { | ||
width: 100%; | ||
flex-shrink: 0; | ||
scroll-snap-align: start; | ||
position: relative; | ||
min-height: 580px; | ||
align-items: flex-end; | ||
display: flex; | ||
} | ||
|
||
main .carousel div.carousel-text { | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
background-color: white; | ||
min-height: 188px; | ||
padding: 0 28px; | ||
} | ||
|
||
main .carousel div.carousel-text p { | ||
margin: 10px 0 16px; | ||
line-height: 1.2; | ||
} | ||
|
||
main .carousel div.carousel-text h2 { | ||
margin: 0; | ||
margin-top: 16px; | ||
} | ||
|
||
main .carousel div.carousel-text .button { | ||
margin: 0; | ||
} | ||
|
||
|
||
main .carousel::-webkit-scrollbar { | ||
display: none; | ||
} | ||
|
||
main .carousel-wrapper { | ||
max-width: unset; | ||
} | ||
|
||
main .carousel-wrapper .carousel-buttons { | ||
text-align: center; | ||
margin-top: 0; | ||
position: absolute; | ||
display: flex; | ||
right: 0; | ||
left: 0; | ||
justify-content: center; | ||
} | ||
|
||
main .carousel-buttons button { | ||
display: block; | ||
height: 10px; | ||
width: 10px; | ||
padding: 0; | ||
margin: 5px; | ||
border-radius: 5px; | ||
background-color: var(--highlight-background-color); | ||
} | ||
|
||
main .carousel-buttons button.selected { | ||
background-color: var(--link-color); | ||
} |
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,21 @@ | ||
export default function decorate(block) { | ||
const buttons = document.createElement('div'); | ||
buttons.className = 'carousel-buttons'; | ||
[...block.children].forEach((row, i) => { | ||
const classes = ['image', 'text']; | ||
classes.forEach((e, j) => { | ||
row.children[j].classList.add(`carousel-${e}`); | ||
}); | ||
/* buttons */ | ||
const button = document.createElement('button'); | ||
button.title = 'Carousel Nav'; | ||
if (!i) button.classList.add('selected'); | ||
button.addEventListener('click', () => { | ||
block.scrollTo({ top: 0, left: row.offsetLeft - row.parentNode.offsetLeft, behavior: 'smooth' }); | ||
[...buttons.children].forEach((r) => r.classList.remove('selected')); | ||
button.classList.add('selected'); | ||
}); | ||
buttons.append(button); | ||
}); | ||
block.parentElement.append(buttons); | ||
} |
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,52 @@ | ||
/* stylelint-disable */ | ||
|
||
|
||
.featured-article { | ||
display: flex; | ||
flex-direction: row-reverse; | ||
flex-wrap: wrap; | ||
width: 100%; | ||
margin-bottom: 1em; | ||
} | ||
|
||
.featured-article .image { | ||
display: flex; | ||
-webkit-box-orient: vertical; | ||
flex-direction: column; | ||
flex: 2; | ||
} | ||
|
||
.featured-article .image picture { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
.featured-article .image img { | ||
margin-top: 0; | ||
margin-bottom: 0; | ||
object-fit: cover; | ||
object-position: top; | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
.featured-article .text { | ||
display: flex; | ||
flex-direction: column; | ||
flex: 1; | ||
background-color: #ebebeb; | ||
padding: 3.5em 2em 2em; | ||
} | ||
|
||
.featured-article .text p { | ||
font-size: 14px; | ||
margin: 0; | ||
line-height: 1.75; | ||
} | ||
|
||
.featured-article .text p.pretitle { | ||
font-size: 18px; | ||
font-weight: 700; | ||
margin: 0; | ||
line-height: 1.75; | ||
} |
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,71 @@ | ||
/** | ||
* Loads a fragment. | ||
* @param {string} path The path to the fragment | ||
* @returns {Document} The document | ||
*/ | ||
async function loadFragment(path) { | ||
if (path && path.startsWith('/')) { | ||
const resp = await fetch(path); | ||
if (resp.ok) { | ||
const parser = new DOMParser(); | ||
return parser.parseFromString(await resp.text(), 'text/html'); | ||
} | ||
} | ||
return null; | ||
} | ||
|
||
/** | ||
* Retrieves the content of metadata tags. | ||
* @param {string} name The metadata name (or property) | ||
* @param doc Document object to query for the metadata. Defaults to the window's document | ||
* @returns {string} The metadata value(s) | ||
*/ | ||
function getMetadata(name, doc = document) { | ||
const attr = name && name.includes(':') ? 'property' : 'name'; | ||
const meta = [...doc.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', '); | ||
return meta || ''; | ||
} | ||
|
||
/** | ||
* @param {HTMLElement} $block The header block element | ||
*/ | ||
export default async function decorate($block) { | ||
const link = $block.querySelector('a'); | ||
const path = link ? link.getAttribute('href') : $block.textContent.trim(); | ||
const doc = await loadFragment(path); | ||
if (!doc) { | ||
return; | ||
} | ||
// find metadata | ||
const title = getMetadata('og:title', doc); | ||
const desc = getMetadata('og:description', doc); | ||
|
||
const $pre = document.createElement('p'); | ||
$pre.classList.add('pretitle'); | ||
$pre.textContent = 'Featured Article'; | ||
|
||
const $h2 = document.createElement('h2'); | ||
$h2.textContent = title; | ||
|
||
const $p = document.createElement('p'); | ||
$p.textContent = desc; | ||
|
||
const $link = document.createElement('div'); | ||
$link.append(link); | ||
link.textContent = 'Read More'; | ||
link.className = 'button primary'; | ||
|
||
const $text = document.createElement('div'); | ||
$text.classList.add('text'); | ||
$text.append($pre, $h2, $p, $link); | ||
|
||
const $image = document.createElement('div'); | ||
$image.classList.add('image'); | ||
// find image | ||
const $hero = doc.querySelector('body > main picture'); | ||
if ($hero) { | ||
$image.append($hero); | ||
} | ||
|
||
$block.replaceChildren($image, $text); | ||
} |
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.