diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 6ab0bcba..07888440 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -98,54 +98,14 @@ margin: 8px 0 24px; } -.cards.block .cards-list .cards-item .card-body a.name { - text-decoration: none; - font-family: var(--font-family-secondary); - font-size: var(--body-font-size-l); - line-height: var(--line-height-s); - color: var(--body-color); -} - -.cards.block .cards-list .cards-item .card-body div.title, -.cards.block .cards-list .cards-item .card-body div.teamname, -.cards.block .cards-list .cards-item .card-body div.phone, -.cards.block .cards-list .cards-item .card-body div.license { - font-size: var(--body-font-size-xxs); - font-weight: 600; - line-height: var(--line-height-m); - letter-spacing: var(--letter-spacing-m); - text-transform: uppercase; - color: var(--body-color); - padding: 1em 0; -} - -.cards.block .cards-list .cards-item .card-body div.teamname { - font-weight: 700; - letter-spacing: normal; - text-transform: none; -} - -.cards.block .cards-list .cards-item .card-body div.phone, -.cards.block .cards-list .cards-item .card-body div.license { - font-weight: var(--font-weight-normal); - text-transform: none; - letter-spacing: normal; - padding: 0; -} - .tertiary-background .cards.block .cards-list .cards-item .card-image p { background-color: var(--tertiary-color); } -.cards.block .cards-list .cards-item .card-body { - flex-grow: 1; -} - .cards.block .cards-list .cards-item .card-body .button-container { - margin-top: auto; + margin: 16px 0 0 ; height: 40px; display: flex; - align-self: flex-end; } /* Icons variation */ @@ -292,16 +252,6 @@ margin-bottom: 20px; } - .cards.block.agents .cards-list { - flex-flow: row wrap; - } - - .cards.block.agents .cards-list .cards-item { - flex: 0 0 20%; - margin-bottom: 20px; - min-width: 220px; - } - .cards.block.cards-1-cols .cards-list .cards-item .card-image { max-height: 500px; } diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index db840d3c..06f322db 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -1,10 +1,15 @@ -import { - createOptimizedPicture, - toClassName, -} from '../../scripts/aem.js'; -import { phoneFormat } from '../../scripts/util.js'; +export default function decorate(block) { + const cards = [...block.children]; + + // Check for a title row + if (!block.classList.contains('shade-icon') && block.children[0].children.length === 1) { + const wrapper = cards.shift(); + const title = wrapper.children[0]; + title.classList.add('title'); + wrapper.remove(); + block.prepend(title); + } -function buildCards(block, cards) { const list = document.createElement('div'); list.classList.add('cards-list'); block.append(list); @@ -50,117 +55,3 @@ function buildCards(block, cards) { }); } } - -function buildOfficeCards(list, data) { - data.forEach((item) => { - const cardsItem = document.createElement('div'); - cardsItem.className = 'cards-item'; - const cardImage = document.createElement('div'); - cardImage.className = 'card-image'; - const image = createOptimizedPicture(item.image, item.location, true); - image.style = 'padding-bottom: 75%'; - const type = document.createElement('p'); - type.innerText = item.type; - cardImage.append(image, type); - cardsItem.append(cardImage); - const cardBody = document.createElement('div'); - cardBody.className = 'card-body'; - const location = document.createElement('h3'); - location.innerText = item.location; - const address = document.createElement('p'); - address.innerHTML = item.address; - address.innerHTML += `
${item.cityStateZip}`; - address.innerHTML += `
Office: ${phoneFormat(item.phone)}`; - if (item.fax) address.innerHTML += `
Office Fax: ${phoneFormat(item.fax)}`; - const contact = document.createElement('p'); - contact.innerHTML = `${item.contactName}`; - contact.innerHTML += `
${item.contactTitle}`; - contact.innerHTML += `
${item.contactPhone}`; - contact.innerHTML += `
${item.contactEmail}`; - const contactBtn = document.createElement('p'); - contactBtn.className = 'button-container'; - contactBtn.innerHTML = `Visit Us`; - cardBody.append(location, address, contact, contactBtn); - cardsItem.append(cardBody); - list.append(cardsItem); - }); -} - -function buildAgentCards(list, data) { - const { pathname } = window.location; - const parts = pathname.split('/'); - const pageName = parts[parts.length - 1]; - const filteredData = data.filter((item) => item.office.toLowerCase() === pageName); - filteredData.forEach((item) => { - const cardsItem = document.createElement('div'); - cardsItem.className = 'cards-item'; - const cardImage = document.createElement('div'); - cardImage.className = 'card-image'; - const tmpImage = 'https://main--hsf-commonmoves--hlxsites.hlx.page/media/images/no-profile-image.png'; - const image = createOptimizedPicture(tmpImage, item.name, true); - image.style = 'padding-bottom: 75%'; - - cardImage.append(image); - cardsItem.append(cardImage); - const cardBody = document.createElement('div'); - cardBody.className = 'card-body'; - const nameLink = document.createElement('a'); - nameLink.className = 'name'; - nameLink.href = item.profile; - nameLink.innerText = item.name; - const title = document.createElement('div'); - title.className = 'title'; - title.innerText = item.title; - const team = document.createElement('div'); - team.className = 'teamname'; - team.innerText = item.team; - const phone = document.createElement('div'); - phone.className = 'phone'; - phone.innerText = phoneFormat(item.phone); - const license = document.createElement('div'); - license.className = 'license'; - license.innerText = item.license; - const contactBtn = document.createElement('p'); - contactBtn.className = 'button-container'; - contactBtn.innerHTML = `Agent Detail`; - cardBody.append(nameLink, title, team, phone, license, contactBtn); - cardsItem.append(cardBody); - list.append(cardsItem); - }); -} - -async function fetchIndex(url) { - const response = await fetch(url); - const json = await response.json(); - return json.data; -} - -export default async function decorate(block) { - const cards = [...block.children]; - - // Check for a title row - if (!block.classList.contains('shade-icon') && block.children[0].children.length === 1) { - const wrapper = cards.shift(); - const title = wrapper.children[0]; - title.classList.add('title'); - wrapper.remove(); - block.prepend(title); - } - // Check for JSON data - if (cards.length === 1 && cards[0].children.length === 1) { - const link = cards.shift(); - const url = new URL(link.querySelector('a[href]').href); - const jsonData = await fetchIndex(url.href); - link.remove(); - const list = document.createElement('div'); - list.classList.add('cards-list'); - block.append(list); - if (url.searchParams.has('sheet')) { - buildAgentCards(list, jsonData); - } else { - buildOfficeCards(list, jsonData); - } - } else { - buildCards(block, cards); - } -}