From f8cd4da4b4561cde796f6a6bec0977da8c759e1c Mon Sep 17 00:00:00 2001 From: Amy Zhao Date: Thu, 25 May 2023 10:17:04 -0500 Subject: [PATCH 01/10] add socio economic data blocks --- .../property-details-economic-data.css | 0 .../property-details-economic-data.js | 63 +++ .../property-details-housing-trends.css | 0 .../property-details-housing-trends.js | 59 +++ .../property-details-occupancy.css | 0 .../property-details-occupancy.js | 65 +++ scripts/accordion.js | 47 +++ styles/templates/accordion/accordion.css | 116 +++++ .../property-details-table.css | 87 ++++ .../property-details/property-details.css | 396 ++++++++++++++++++ 10 files changed, 833 insertions(+) create mode 100644 blocks/property-details-economic-data/property-details-economic-data.css create mode 100644 blocks/property-details-economic-data/property-details-economic-data.js create mode 100644 blocks/property-details-housing-trends/property-details-housing-trends.css create mode 100644 blocks/property-details-housing-trends/property-details-housing-trends.js create mode 100644 blocks/property-details-occupancy/property-details-occupancy.css create mode 100644 blocks/property-details-occupancy/property-details-occupancy.js create mode 100644 scripts/accordion.js create mode 100644 styles/templates/accordion/accordion.css create mode 100644 styles/templates/property-details/property-details-table.css create mode 100644 styles/templates/property-details/property-details.css diff --git a/blocks/property-details-economic-data/property-details-economic-data.css b/blocks/property-details-economic-data/property-details-economic-data.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/property-details-economic-data/property-details-economic-data.js b/blocks/property-details-economic-data/property-details-economic-data.js new file mode 100644 index 00000000..08abeb0c --- /dev/null +++ b/blocks/property-details-economic-data/property-details-economic-data.js @@ -0,0 +1,63 @@ +import { createAccordionItem } from '../../scripts/accordion.js'; +import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; + +const socioEconomicAPI = 'https://www.bhhs.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; + +function createTableRow(levelData) { + const label = levelData.level == 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; + var rowHTML = ` + + +
${label}
+ + +
${levelData.medianIncome}
+ + + ${levelData.unemploymentPercent} + % + + ${levelData.costOfLivingIndex} + + + `; + return rowHTML; +} + +export default async function decorate(block) { + const resp = await fetch(socioEconomicAPI); + if (resp.ok) { + const econData = await resp.json(); + const data = econData.data; + const citation = 'Data provided by U.S. Census Bureau'; + var econTableHTML = ` +
+
+
+ + + + + + + + + `; + data.forEach((elem) => { + econTableHTML += createTableRow(elem); + }); + econTableHTML += ` + +
Median House. IncomeUnemploymentCost of Living Index
+
+
+
+ `; + var econAccordionItem = createAccordionItem('economic-data', 'Economic Data', econTableHTML, citation); + block.append(econAccordionItem); + decorateIcons(block); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details.css`); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details-table.css`); + } +} diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.css b/blocks/property-details-housing-trends/property-details-housing-trends.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.js b/blocks/property-details-housing-trends/property-details-housing-trends.js new file mode 100644 index 00000000..4d65f9f1 --- /dev/null +++ b/blocks/property-details-housing-trends/property-details-housing-trends.js @@ -0,0 +1,59 @@ +import { createAccordionItem } from '../../scripts/accordion.js'; +import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; + +const socioEconomicAPI = 'https://www.bhhs.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; + +function createTableRow(levelData) { + const label = levelData.level == 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; + var rowHTML = ` + + +
${label}
+ + + ${levelData.homeValueAppreciationPercent} + % + ${levelData.medianHomeAge}y + + + `; + return rowHTML; +} + +export default async function decorate(block) { + const resp = await fetch(socioEconomicAPI); + if (resp.ok) { + const econData = await resp.json(); + const data = econData.data; + const citation = 'Market data provided by U.S. Census Bureau'; + var housingTableHTML = ` +
+
+
+ + + + + + + + + `; + data.forEach((elem) => { + housingTableHTML += createTableRow(elem); + }); + housingTableHTML += ` + +
Home AppreciationMedian Age
+
+
+
+ `; + var housingAccordionItem = createAccordionItem('housing-trends', 'Housing Trends', housingTableHTML, citation); + block.append(housingAccordionItem); + decorateIcons(block); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details.css`); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details-table.css`); + } +} diff --git a/blocks/property-details-occupancy/property-details-occupancy.css b/blocks/property-details-occupancy/property-details-occupancy.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/property-details-occupancy/property-details-occupancy.js b/blocks/property-details-occupancy/property-details-occupancy.js new file mode 100644 index 00000000..96005e75 --- /dev/null +++ b/blocks/property-details-occupancy/property-details-occupancy.js @@ -0,0 +1,65 @@ +import { createAccordionItem } from '../../scripts/accordion.js'; +import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; + +const socioEconomicAPI = 'https://www.commonmoves.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; + +function createTableRow(levelData) { + const label = levelData.level == 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; + var rowHTML = ` + + +
${label}
+ + + ${levelData.ownerOccupiedPercent} + % +
+ + + ${levelData.renterOccupiedPercent} + % + + ${levelData.vacancyPercent} + % + + `; + return rowHTML; +} +export default async function decorate(block) { + const resp = await fetch(socioEconomicAPI); + if (resp.ok) { + const econData = await resp.json(); + const data = econData.data; + const citation = 'Market data provided by U.S. Census Bureau'; + var occupancyHTML = ` +
+
+
+ + + + + + + + + `; + data.forEach((elem) => { + occupancyHTML += createTableRow(elem); + }); + occupancyHTML += ` + +
OwnedRentedVacant
+
+
+
+ `; + var occupancyAccordionItem = createAccordionItem('occupancy', 'Occupancy', occupancyHTML, citation); + block.append(occupancyAccordionItem); + decorateIcons(block); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details.css`); + loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details-table.css`); + } +} diff --git a/scripts/accordion.js b/scripts/accordion.js new file mode 100644 index 00000000..75f6d543 --- /dev/null +++ b/scripts/accordion.js @@ -0,0 +1,47 @@ +function openAccordion() { + var parent = this.closest('.accordion-item'); + parent.classList.toggle('collapse'); +} + +function createAccordionHeader(heading, tooltipText) { + const accordionTitle = document.createElement('div'); + accordionTitle.className = 'accordion-title'; + var headerHTML = ` +
+
+
+
+

${heading}

+ `; + if(tooltipText) { + headerHTML += ` +
+ + + ${tooltipText} +
+ `; + } + headerHTML += ` +
+
+
+
+ `; + accordionTitle.innerHTML = headerHTML; + return accordionTitle; +} + +export function createAccordionItem(className, headerTitle, innerHTML, citation='') { + const accordionItem = document.createElement('div'); + accordionItem.className = `accordion-item ${className}`; + const accordionTitle = createAccordionHeader(headerTitle, citation); + const accordionBody = document.createElement('div'); + accordionBody.className = 'accordion-body'; + accordionBody.innerHTML = innerHTML; + accordionItem.append(accordionTitle); + accordionItem.append(accordionBody); + var accordionHeader = accordionItem.querySelector('.accordion-header'); + accordionHeader.addEventListener('click', openAccordion); + return accordionItem; +} diff --git a/styles/templates/accordion/accordion.css b/styles/templates/accordion/accordion.css new file mode 100644 index 00000000..64de4235 --- /dev/null +++ b/styles/templates/accordion/accordion.css @@ -0,0 +1,116 @@ +.accordion-item .accordion-body { + max-height: 999em; + overflow: hidden; + transition: max-height .6s; +} + +.accordion-item.collapse .accordion-body { + max-height: 0; +} + +.accordion-header { + border-top: 1px solid var(--grey); + cursor: pointer; + padding: 16px 30px 16px 0; + position: relative; + display: block; +} + +.accordion-header-title { + display: inline-block; + font-family: var(--font-family-georgia); + font-weight: var(--font-weight-semibold); + line-height: 26px; + margin: 0 5px 0 0; + font-size: 22px; +} + +.accordion-item .accordion-header::after { + border-color: var(--body-color) transparent transparent transparent; + border-style: solid; + border-width: 6px 5px 0 5px; + content: ''; + display: block; + height: 0; + margin-top: -5px; + position: absolute; + right: 2px; + top: 50%; + transition: transform .3s linear; + transform: rotate(0); + width: 0; +} + +.accordion-item.collapse .accordion-header::after { + transform: rotate(90deg); + transition: transform .3s linear; +} + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip svg { + height: 19px; + width: 19px; +} + +.tooltip .icon-info_circle_dark { + display: none; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 290px; + background-color: var(--black); + color: var(--white); + text-align: left; + padding: 14px 18px; + position: absolute; + z-index: 1; + top: 100%; + left: 0; + margin: 12px 0 0 -10px; + font-family: var(--font-family-proxima); + font-size: var(--body-font-size-s); + letter-spacing: .44px; + line-height: 22px; +} + +.tooltip:hover .icon-info_circle { + display: none; +} + +.tooltip:hover .icon-info_circle_dark { + display: block; +} + +.tooltip:hover .tooltiptext { + visibility: visible; +} + +.tooltip .tooltiptext::before { + content: ''; + position: absolute; + bottom: 100%; + left: 8px; + border-width: 10px; + border-style: solid; + border-color: transparent transparent var(--black) transparent; +} + +@media (min-width: 992px) { + .accordion-header { + padding: 27px 30px 30px 0; + } + + .accordion-header-title { + font-size: var(--body-font-size-xl); + letter-spacing: -0.43px; + } + + .accordion-item .accordion-header::after { + border-width: 9px 7px 0 7px; + } +} diff --git a/styles/templates/property-details/property-details-table.css b/styles/templates/property-details/property-details-table.css new file mode 100644 index 00000000..84069a41 --- /dev/null +++ b/styles/templates/property-details/property-details-table.css @@ -0,0 +1,87 @@ +.cmp-socio-economic-data--table { + width: 100%; + position: relative; +} + +.cmp-socio-economic-data--table thead { + vertical-align: top; +} + +.cmp-socio-economic-data--table thead th { + padding: 40px 0 20px; + font-family: var(--font-family-proxima); + font-weight: var(--normal-page-width); + font-size: var(--body-font-size-m); + line-height: 23px; + letter-spacing: initial; + color: var(--body-color); +} + +.cmp-socio-economic-data--table tbody { + display: table-row-group; + vertical-align: middle; + border-color: inherit; +} + +.cmp-socio-economic-data--table tbody tr:first-of-type { + background: var(--light-grey); +} + +.cmp-socio-economic-data--table tbody tr { + border-top: 1px solid var(--light-grey); + padding: 0 20px; + position: relative; +} + +.cmp-socio-economic-data--table td { + width: 25%; + padding: 40px 0; +} + +.cmp-socio-economic-data--table h6 { + margin: 0; + padding-left: 20px; + font-size: var(--body-font-size-s); + line-height: 35px; + font-family: var(--font-family-proxima); + text-transform: uppercase; +} + +.cmp-socio-economic-data__stat { + position: relative; + font-size: var(--body-font-size-xxxl); + font-family: var(--font-family-proxima); + font-weight: var(--font-weight-light); +} + +.cmp-socio-economic-data__stat .percentage { + content: "%"; + font-size: var( --body-font-size-l); + letter-spacing: 0; + vertical-align: super; + margin-left: 0; + margin-top: -7px; + position: absolute; +} + +.cmp-socio-economic-data__stat .progress-bar { + width: calc(100% - 100px); + position: relative; + margin-left: 80px; +} + +.cmp-socio-economic-data__stat .progress-owner { + height: 2px; + background: var(--primary-color); + position: absolute; + left: 0; + margin-top: -15px; +} + +.cmp-socio-economic-data__stat .progress-renter { + height: 2px; + background: var(--light-grey); + position: absolute; + right: 0; + margin-top: -15px; +} diff --git a/styles/templates/property-details/property-details.css b/styles/templates/property-details/property-details.css new file mode 100644 index 00000000..ae04c76c --- /dev/null +++ b/styles/templates/property-details/property-details.css @@ -0,0 +1,396 @@ +.property-container { + max-width: var(--normal-page-width); + margin: 0 auto; + width: 100%; + padding: 0 var(--section-padding); +} + +.accordion-item .property-container { + max-width: var(--normal-page-width); + padding-left: 0; + padding-right: 0; +} + +.property-row { + display: flex; + flex-wrap: wrap; + margin: 0 -15px; +} + +.col { + position: relative; + width: 100%; + min-height: 1px; + padding-right: var(--section-padding); + padding-left: var(--section-padding); +} + +.col-auto { + flex: 0 0 auto; + width: auto; + max-width: none; +} + +.col-3 { + flex: 0 0 25%; + max-width: 25%; +} + +.col-4 { + flex: 0 0 33.333%; + max-width: 33.333%; +} + +.col-5 { + flex: 0 0 41.667%; + max-width: 41.667%; +} + +.col-6 { + flex: 0 0 50%; + max-width: 50%; +} + +.col-7 { + flex: 0 0 58.333%; + max-width: 58.333%; +} + +.col-9 { + flex: 0 0 75%; + max-width: 75%; +} + +.col-10 { + flex: 0 0 83.333%; + max-width: 83.333%; +} + +.col-12 { + flex: 0 0 100%; + max-width: 100%; +} + +.d-none { + display: none !important; +} + +.d-block { + display: block !important; +} + +.d-flex { + display: flex !important; +} + +.justify-content-end { + justify-content: flex-end !important; +} + +.m-auto { + margin: auto !important; +} + +.mr-3, .mx-3 { + margin-right: 1rem !important; +} + +.mt-2, .my-2 { + margin-top: 0.5rem !important; +} + +.mr-2, .mx-2 { + margin-right: 0.5rem !important; +} + +.mt-3, .my-3 { + margin-top: 1rem !important; +} + +.mb-3, .my-3 { + margin-bottom: 1rem !important; +} + +.w-100 { + width: 100% !important; +} + +.p-0 { + padding: 0 !important; +} + +.pl-1, .px-1 { + padding-left: 0.25rem !important; +} + +.pb-1, .py-1 { + padding-bottom: 0.25rem !important; +} + +.pr-1, .px-1 { + padding-right: 0.25rem !important; +} + +.pt-1, .py-1 { + padding-top: 0.25rem !important; +} + +.pl-2, .px-2 { + padding-left: 0.5rem !important; +} +.pr-2, .px-2 { + padding-right: 0.5rem !important; +} + +.pb-3, .py-3 { + padding-bottom: 1rem !important; +} + +.pt-3, .py-3 { + padding-top: 1rem !important; +} + +.pb-4, .py-4 { + padding-bottom: 1.5rem !important; +} + +.pb-content { + padding-bottom: 57px; +} + +.order-0 { + order: 0; +} + +.order-1 { + order: 1; +} + +.order-2 { + order: 2; +} + +.order-3 { + order: 3; +} + +.align-items-center { + align-items: center !important; +} + +@media (min-width: 576px) { + .property-container { + max-width: 540px; + } + + .m-sm-0 { + margin: 0 !important; + } +} + +@media (min-width: 600px) { + .property-container { + max-width: 720px; + } + + .col-md-2 { + flex: 0 0 16.667%; + max-width: 16.667%; + } + + .col-md-3 { + flex: 0 0 25%; + max-width: 25%; + } + + .col-md-4 { + flex: 0 0 33.333%; + max-width: 33.333%; + } + + .col-md-5 { + flex: 0 0 41.667%; + max-width: 41.667%; + } + + .col-md-6 { + flex: 0 0 50%; + max-width: 50%; + } + + .col-md-8 { + flex: 0 0 66.667%; + max-width: 66.667%; + } + + .col-md-10 { + flex: 0 0 83.333%; + max-width: 83.333%; + } + + .offset-md-1 { + margin-left: 8.333%; + } + + .mt-md-0, .my-md-0 { + margin-top: 0 !important; + } + + .mb-md-0, .my-md-0 { + margin-bottom: 0 !important; + } + + .pb-content { + padding-bottom: 80px; + } +} + +@media (min-width: 992px) { + .property-container { + max-width: 960px; + } + + .col-lg-1 { + flex: 0 0 8.333%; + max-width: 8.333%; + } + + .col-lg-2 { + flex: 0 0 16.667%; + max-width: 16.667%; + } + + .col-lg-3 { + flex: 0 0 25%; + max-width: 25%; + } + + .col-lg-4 { + flex: 0 0 33.333%; + max-width: 33.333%; + } + + .col-lg-5 { + flex: 0 0 41.667%; + max-width: 41.667%; + } + + .col-lg-6 { + flex: 0 0 50%; + max-width: 50%; + } + + .col-lg-7 { + flex: 0 0 58.333%; + max-width: 58.333%; + } + + .col-lg-8 { + flex: 0 0 66.667%; + max-width: 66.667%; + } + + .col-lg-12 { + flex: 0 0 100%; + max-width: 100%; + } + + .offset-lg-0 { + margin-left: 0; + } + + .offset-lg-1 { + margin-left: 8.333%; + } + + .d-lg-block { + display: block !important; + } + + .d-lg-flex { + display: flex !important; + } + + .d-lg-none { + display: none !important; + } + + .order-lg-1 { + order: 1; + } + + .order-lg-2 { + order: 2; + } + + .order-lg-3 { + order: 3; + } + + .order-lg-4 { + order: 4; + } + + .pt-lg-0, .py-lg-0 { + padding-top: 0 !important; + } + + .pl-lg-0, .px-lg-0 { + padding-left: 0 !important; + } + + .pb-lg-1, .py-lg-1 { + padding-bottom: 0.25rem !important; + } + + .pt-lg-1, .py-lg-1 { + padding-top: 0.25rem !important; + } + + .mb-lg-2, .my-lg-2 { + margin-bottom: 0.5rem !important; + } + + .mt-lg-3, .my-lg-3 { + margin-top: 1rem !important; + } +} + +@media (min-width: 1200px) { + .property-container { + max-width: 1400px; + } + + .col-xl-1 { + flex: 0 0 8.333%; + max-width: 8.333%; + } + + .col-xl-2 { + flex: 0 0 16.667%; + max-width: 16.667%; + } + + .col-xl-4 { + flex: 0 0 33.333%; + max-width: 33.333%; + } + + .col-xl-5 { + flex: 0 0 41.667%; + max-width: 41.667%; + } + + .col-xl-6 { + flex: 0 0 50%; + max-width: 50%; + } + + .offset-xl-6 { + margin-left: 50%; + } + + .pb-content { + padding-bottom: 100px; + } +} From 11199708a28b103b40ee5c0f341b016ff94b8fa6 Mon Sep 17 00:00:00 2001 From: Amy Zhao Date: Thu, 25 May 2023 10:37:12 -0500 Subject: [PATCH 02/10] fix lint --- .../property-details-economic-data.css | 0 .../property-details-economic-data.js | 14 +++++++------- .../property-details-housing-trends.css | 0 .../property-details-housing-trends.js | 14 +++++++------- .../property-details-occupancy.css | 0 .../property-details-occupancy.js | 14 +++++++------- scripts/accordion.js | 15 ++++++++++----- 7 files changed, 31 insertions(+), 26 deletions(-) delete mode 100644 blocks/property-details-economic-data/property-details-economic-data.css delete mode 100644 blocks/property-details-housing-trends/property-details-housing-trends.css delete mode 100644 blocks/property-details-occupancy/property-details-occupancy.css diff --git a/blocks/property-details-economic-data/property-details-economic-data.css b/blocks/property-details-economic-data/property-details-economic-data.css deleted file mode 100644 index e69de29b..00000000 diff --git a/blocks/property-details-economic-data/property-details-economic-data.js b/blocks/property-details-economic-data/property-details-economic-data.js index 08abeb0c..1832eacb 100644 --- a/blocks/property-details-economic-data/property-details-economic-data.js +++ b/blocks/property-details-economic-data/property-details-economic-data.js @@ -4,8 +4,8 @@ import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; const socioEconomicAPI = 'https://www.bhhs.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; function createTableRow(levelData) { - const label = levelData.level == 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; - var rowHTML = ` + const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; + const rowHTML = `
${label}
@@ -27,10 +27,10 @@ function createTableRow(levelData) { export default async function decorate(block) { const resp = await fetch(socioEconomicAPI); if (resp.ok) { - const econData = await resp.json(); - const data = econData.data; + const socioEconJSON = await resp.json(); + const { data: socioEconData } = socioEconJSON; const citation = 'Data provided by U.S. Census Bureau'; - var econTableHTML = ` + let econTableHTML = `
@@ -43,7 +43,7 @@ export default async function decorate(block) { `; - data.forEach((elem) => { + socioEconData.forEach((elem) => { econTableHTML += createTableRow(elem); }); econTableHTML += ` @@ -53,7 +53,7 @@ export default async function decorate(block) {
`; - var econAccordionItem = createAccordionItem('economic-data', 'Economic Data', econTableHTML, citation); + const econAccordionItem = createAccordionItem('economic-data', 'Economic Data', econTableHTML, citation); block.append(econAccordionItem); decorateIcons(block); loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.css b/blocks/property-details-housing-trends/property-details-housing-trends.css deleted file mode 100644 index e69de29b..00000000 diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.js b/blocks/property-details-housing-trends/property-details-housing-trends.js index 4d65f9f1..8baf298e 100644 --- a/blocks/property-details-housing-trends/property-details-housing-trends.js +++ b/blocks/property-details-housing-trends/property-details-housing-trends.js @@ -4,8 +4,8 @@ import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; const socioEconomicAPI = 'https://www.bhhs.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; function createTableRow(levelData) { - const label = levelData.level == 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; - var rowHTML = ` + const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; + const rowHTML = `
${label}
@@ -23,10 +23,10 @@ function createTableRow(levelData) { export default async function decorate(block) { const resp = await fetch(socioEconomicAPI); if (resp.ok) { - const econData = await resp.json(); - const data = econData.data; + const socioEconJSON = await resp.json(); + const { data: socioEconData } = socioEconJSON; const citation = 'Market data provided by U.S. Census Bureau'; - var housingTableHTML = ` + let housingTableHTML = `
@@ -39,7 +39,7 @@ export default async function decorate(block) { `; - data.forEach((elem) => { + socioEconData.forEach((elem) => { housingTableHTML += createTableRow(elem); }); housingTableHTML += ` @@ -49,7 +49,7 @@ export default async function decorate(block) {
`; - var housingAccordionItem = createAccordionItem('housing-trends', 'Housing Trends', housingTableHTML, citation); + const housingAccordionItem = createAccordionItem('housing-trends', 'Housing Trends', housingTableHTML, citation); block.append(housingAccordionItem); decorateIcons(block); loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); diff --git a/blocks/property-details-occupancy/property-details-occupancy.css b/blocks/property-details-occupancy/property-details-occupancy.css deleted file mode 100644 index e69de29b..00000000 diff --git a/blocks/property-details-occupancy/property-details-occupancy.js b/blocks/property-details-occupancy/property-details-occupancy.js index 96005e75..90d8cdbe 100644 --- a/blocks/property-details-occupancy/property-details-occupancy.js +++ b/blocks/property-details-occupancy/property-details-occupancy.js @@ -4,8 +4,8 @@ import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; const socioEconomicAPI = 'https://www.commonmoves.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; function createTableRow(levelData) { - const label = levelData.level == 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; - var rowHTML = ` + const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; + const rowHTML = `
${label}
@@ -29,10 +29,10 @@ function createTableRow(levelData) { export default async function decorate(block) { const resp = await fetch(socioEconomicAPI); if (resp.ok) { - const econData = await resp.json(); - const data = econData.data; + const socioEconJSON = await resp.json(); + const { data: socioEconData } = socioEconJSON; const citation = 'Market data provided by U.S. Census Bureau'; - var occupancyHTML = ` + let occupancyHTML = `
@@ -45,7 +45,7 @@ export default async function decorate(block) { `; - data.forEach((elem) => { + socioEconData.forEach((elem) => { occupancyHTML += createTableRow(elem); }); occupancyHTML += ` @@ -55,7 +55,7 @@ export default async function decorate(block) {
`; - var occupancyAccordionItem = createAccordionItem('occupancy', 'Occupancy', occupancyHTML, citation); + const occupancyAccordionItem = createAccordionItem('occupancy', 'Occupancy', occupancyHTML, citation); block.append(occupancyAccordionItem); decorateIcons(block); loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); diff --git a/scripts/accordion.js b/scripts/accordion.js index 75f6d543..a5dd559d 100644 --- a/scripts/accordion.js +++ b/scripts/accordion.js @@ -1,19 +1,19 @@ function openAccordion() { - var parent = this.closest('.accordion-item'); + const parent = this.closest('.accordion-item'); parent.classList.toggle('collapse'); } function createAccordionHeader(heading, tooltipText) { const accordionTitle = document.createElement('div'); accordionTitle.className = 'accordion-title'; - var headerHTML = ` + let headerHTML = `

${heading}

`; - if(tooltipText) { + if (tooltipText) { headerHTML += `
@@ -32,7 +32,7 @@ function createAccordionHeader(heading, tooltipText) { return accordionTitle; } -export function createAccordionItem(className, headerTitle, innerHTML, citation='') { +function createAccordionItem(className, headerTitle, innerHTML, citation = '') { const accordionItem = document.createElement('div'); accordionItem.className = `accordion-item ${className}`; const accordionTitle = createAccordionHeader(headerTitle, citation); @@ -41,7 +41,12 @@ export function createAccordionItem(className, headerTitle, innerHTML, citation= accordionBody.innerHTML = innerHTML; accordionItem.append(accordionTitle); accordionItem.append(accordionBody); - var accordionHeader = accordionItem.querySelector('.accordion-header'); + const accordionHeader = accordionItem.querySelector('.accordion-header'); accordionHeader.addEventListener('click', openAccordion); return accordionItem; } + +export { + createAccordionItem, + createAccordionHeader, +}; From 8f9d6168bf75abbede856eef9d4e1360f948aeb3 Mon Sep 17 00:00:00 2001 From: Amy Zhao Date: Thu, 25 May 2023 15:35:19 -0500 Subject: [PATCH 03/10] save work --- .../property-details-metadata.css | 3 ++ .../property-details-metadata.js | 42 +++++++++++++++++++ scripts/scripts.js | 9 ++++ 3 files changed, 54 insertions(+) create mode 100644 blocks/property-details-metadata/property-details-metadata.css create mode 100644 blocks/property-details-metadata/property-details-metadata.js diff --git a/blocks/property-details-metadata/property-details-metadata.css b/blocks/property-details-metadata/property-details-metadata.css new file mode 100644 index 00000000..5bd672e5 --- /dev/null +++ b/blocks/property-details-metadata/property-details-metadata.css @@ -0,0 +1,3 @@ +.property-details-metadata.block { + display: none; +} diff --git a/blocks/property-details-metadata/property-details-metadata.js b/blocks/property-details-metadata/property-details-metadata.js new file mode 100644 index 00000000..0adbb43a --- /dev/null +++ b/blocks/property-details-metadata/property-details-metadata.js @@ -0,0 +1,42 @@ +const urlParams = new URLSearchParams(window.location.search); +export const DOMAIN = urlParams.get('env') === 'stage' ? 'ignite-staging.bhhs.com' : 'www.bhhs.com'; +const API_URL = `https://${DOMAIN}/bin/bhhs`; + +async function getPropertyByPropId(propId) { + const endpoint = `${API_URL}/CregPropertySearchServlet?SearchType=ListingId&ListingId=${propId}&ListingStatus=1,2,3&ApplicationType=FOR_SALE,FOR_RENT,RECENTLY_SOLD`; + const resp = await fetch(endpoint); + if (resp.ok) { + const data = await resp.json(); + /* eslint-disable-next-line no-underscore-dangle */ + return data; + } + /* eslint-disable-next-line no-console */ + console.log('Unable to retrieve property information.'); + return undefined; +} + +async function getSocioEconomicData(latitude, longitude) { + const endpoint = `${API_URL}/pdp/socioEconomicDataServlet?latitude=${latitude}&longitude=${longitude}`; + const resp = await fetch(endpoint); + if (resp.ok) { + const data = await resp.json(); + /* eslint-disable-next-line no-underscore-dangle */ + return data; + } + /* eslint-disable-next-line no-console */ + console.log('Unable to retrieve socioeconomic data.'); + return undefined; +} + +function getPropIdFromPath() { + const url = window.location.pathname; + const idx = url.indexOf('pid-') + 'pid-'.length; + return url.substring(idx); +} + +export default async function decorate(block) { + const propId = getPropIdFromPath(); + const propertyData = await getPropertyByPropId(propId); + + block.remove(); +} \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index 2a2eae04..ce96a356 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -104,6 +104,14 @@ function buildLiveByMetadata(main) { } } +function buildPropertyDetailsMetadata(main) { + if(getMetadata('template') === 'property-details-template') { + const section = document.createElement('div'); + section.append(buildBlock('property-details-metadata', { elems: [] })); + main.prepend(section); + } +} + /** * Build Floating image block * @param {Element} main The container element @@ -180,6 +188,7 @@ function buildLuxuryTheme() { function buildAutoBlocks(main) { try { buildHeroBlock(main); + buildPropertyDetailsMetadata(main); buildLiveByMetadata(main); buildFloatingImages(main); buildSeparator(main); From 7af7f50ea98ac3db099467d2a9f63ef63ec2f48c Mon Sep 17 00:00:00 2001 From: Amy Zhao Date: Thu, 25 May 2023 16:16:50 -0500 Subject: [PATCH 04/10] add API --- .../property-details-economic-data.js | 8 +-- .../property-details-housing-trends.js | 8 +-- .../property-details-metadata.js | 53 +++++++++++++++---- .../property-details-occupancy.js | 8 +-- scripts/scripts.js | 2 +- 5 files changed, 51 insertions(+), 28 deletions(-) diff --git a/blocks/property-details-economic-data/property-details-economic-data.js b/blocks/property-details-economic-data/property-details-economic-data.js index 1832eacb..d951a921 100644 --- a/blocks/property-details-economic-data/property-details-economic-data.js +++ b/blocks/property-details-economic-data/property-details-economic-data.js @@ -1,8 +1,6 @@ import { createAccordionItem } from '../../scripts/accordion.js'; import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; -const socioEconomicAPI = 'https://www.bhhs.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; - function createTableRow(levelData) { const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; const rowHTML = ` @@ -25,10 +23,8 @@ function createTableRow(levelData) { } export default async function decorate(block) { - const resp = await fetch(socioEconomicAPI); - if (resp.ok) { - const socioEconJSON = await resp.json(); - const { data: socioEconData } = socioEconJSON; + if (window.socioEconomicData && window.socioEconomicData.data) { + const socioEconData = window.socioEconomicData.data; const citation = 'Data provided by U.S. Census Bureau'; let econTableHTML = `
diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.js b/blocks/property-details-housing-trends/property-details-housing-trends.js index 8baf298e..dacf0799 100644 --- a/blocks/property-details-housing-trends/property-details-housing-trends.js +++ b/blocks/property-details-housing-trends/property-details-housing-trends.js @@ -1,8 +1,6 @@ import { createAccordionItem } from '../../scripts/accordion.js'; import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; -const socioEconomicAPI = 'https://www.bhhs.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; - function createTableRow(levelData) { const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; const rowHTML = ` @@ -21,10 +19,8 @@ function createTableRow(levelData) { } export default async function decorate(block) { - const resp = await fetch(socioEconomicAPI); - if (resp.ok) { - const socioEconJSON = await resp.json(); - const { data: socioEconData } = socioEconJSON; + if (window.socioEconomicData && window.socioEconomicData.data) { + const socioEconData = window.socioEconomicData.data; const citation = 'Market data provided by U.S. Census Bureau'; let housingTableHTML = `
diff --git a/blocks/property-details-metadata/property-details-metadata.js b/blocks/property-details-metadata/property-details-metadata.js index 0adbb43a..77ceb479 100644 --- a/blocks/property-details-metadata/property-details-metadata.js +++ b/blocks/property-details-metadata/property-details-metadata.js @@ -2,6 +2,34 @@ const urlParams = new URLSearchParams(window.location.search); export const DOMAIN = urlParams.get('env') === 'stage' ? 'ignite-staging.bhhs.com' : 'www.bhhs.com'; const API_URL = `https://${DOMAIN}/bin/bhhs`; +const keys = [ + 'ListPriceUS', + 'StreetName', + 'City', + 'StateOrProvince', + 'PostalCode', + 'Latitude', + 'Longitude', + 'LotSizeAcres', + 'LotSizeSquareFeet', + 'LivingAreaUnits', + 'Media', + 'SmallMedia', + 'PropId', + 'OpenHouses', + 'CourtesyOf', +]; + +function pick(obj, ...args) { + return args.reduce((res, key) => ({ ...res, [key]: obj[key] }), { }); +} + +function getPropIdFromPath() { + const url = window.location.pathname; + const idx = url.indexOf('pid-') + 'pid-'.length; + return url.substring(idx); +} + async function getPropertyByPropId(propId) { const endpoint = `${API_URL}/CregPropertySearchServlet?SearchType=ListingId&ListingId=${propId}&ListingStatus=1,2,3&ApplicationType=FOR_SALE,FOR_RENT,RECENTLY_SOLD`; const resp = await fetch(endpoint); @@ -28,15 +56,22 @@ async function getSocioEconomicData(latitude, longitude) { return undefined; } -function getPropIdFromPath() { - const url = window.location.pathname; - const idx = url.indexOf('pid-') + 'pid-'.length; - return url.substring(idx); -} - export default async function decorate(block) { - const propId = getPropIdFromPath(); + let property = {}; + let socioEconomicData = {}; + const propId = '348257210'; + getPropIdFromPath(); const propertyData = await getPropertyByPropId(propId); - + if (propertyData) { + property = pick(propertyData, ...keys); + if (property.Latitude && property.Longitude) { + const socioEconData = await getSocioEconomicData(property.Latitude, property.Longitude); + if (socioEconData) { + socioEconomicData = socioEconData; + } + } + } + window.property = property; + window.socioEconomicData = socioEconomicData; block.remove(); -} \ No newline at end of file +} diff --git a/blocks/property-details-occupancy/property-details-occupancy.js b/blocks/property-details-occupancy/property-details-occupancy.js index 90d8cdbe..88ad6c52 100644 --- a/blocks/property-details-occupancy/property-details-occupancy.js +++ b/blocks/property-details-occupancy/property-details-occupancy.js @@ -1,8 +1,6 @@ import { createAccordionItem } from '../../scripts/accordion.js'; import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; -const socioEconomicAPI = 'https://www.commonmoves.com/bin/bhhs/pdp/socioEconomicDataServlet?latitude=42.56574249267578&longitude=-70.76632690429688'; - function createTableRow(levelData) { const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; const rowHTML = ` @@ -27,10 +25,8 @@ function createTableRow(levelData) { return rowHTML; } export default async function decorate(block) { - const resp = await fetch(socioEconomicAPI); - if (resp.ok) { - const socioEconJSON = await resp.json(); - const { data: socioEconData } = socioEconJSON; + if (window.socioEconomicData && window.socioEconomicData.data) { + const socioEconData = window.socioEconomicData.data; const citation = 'Market data provided by U.S. Census Bureau'; let occupancyHTML = `
diff --git a/scripts/scripts.js b/scripts/scripts.js index ce96a356..93b1a7eb 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -105,7 +105,7 @@ function buildLiveByMetadata(main) { } function buildPropertyDetailsMetadata(main) { - if(getMetadata('template') === 'property-details-template') { + if (getMetadata('template') === 'property-details-template') { const section = document.createElement('div'); section.append(buildBlock('property-details-metadata', { elems: [] })); main.prepend(section); From fa5e9c366f55b7907f1316e3b2fd8a7bb6df7e3a Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Mon, 20 May 2024 13:09:27 -0600 Subject: [PATCH 05/10] update to use creg api --- .../property-details-economic-data.css | 0 .../property-details-economic-data.js | 2 +- .../property-details-housing-trends.css | 0 .../property-details-housing-trends.js | 2 +- .../property-details-metadata.js | 30 ++++--------------- .../property-details-occupancy.css | 0 .../property-details-occupancy.js | 2 +- scripts/apis/creg/creg.js | 19 ++++++++++++ scripts/apis/creg/workers/economic.js | 20 +++++++++++++ scripts/scripts.js | 1 + 10 files changed, 49 insertions(+), 27 deletions(-) create mode 100644 blocks/property-details-economic-data/property-details-economic-data.css create mode 100644 blocks/property-details-housing-trends/property-details-housing-trends.css create mode 100644 blocks/property-details-occupancy/property-details-occupancy.css create mode 100644 scripts/apis/creg/workers/economic.js diff --git a/blocks/property-details-economic-data/property-details-economic-data.css b/blocks/property-details-economic-data/property-details-economic-data.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/property-details-economic-data/property-details-economic-data.js b/blocks/property-details-economic-data/property-details-economic-data.js index d951a921..7ae0dbef 100644 --- a/blocks/property-details-economic-data/property-details-economic-data.js +++ b/blocks/property-details-economic-data/property-details-economic-data.js @@ -1,5 +1,5 @@ import { createAccordionItem } from '../../scripts/accordion.js'; -import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; +import { decorateIcons, loadCSS } from '../../scripts/aem.js'; function createTableRow(levelData) { const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.css b/blocks/property-details-housing-trends/property-details-housing-trends.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.js b/blocks/property-details-housing-trends/property-details-housing-trends.js index dacf0799..9804b334 100644 --- a/blocks/property-details-housing-trends/property-details-housing-trends.js +++ b/blocks/property-details-housing-trends/property-details-housing-trends.js @@ -1,5 +1,5 @@ import { createAccordionItem } from '../../scripts/accordion.js'; -import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; +import { decorateIcons, loadCSS } from '../../scripts/aem.js'; function createTableRow(levelData) { const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; diff --git a/blocks/property-details-metadata/property-details-metadata.js b/blocks/property-details-metadata/property-details-metadata.js index 77ceb479..3adc7bbe 100644 --- a/blocks/property-details-metadata/property-details-metadata.js +++ b/blocks/property-details-metadata/property-details-metadata.js @@ -1,6 +1,4 @@ -const urlParams = new URLSearchParams(window.location.search); -export const DOMAIN = urlParams.get('env') === 'stage' ? 'ignite-staging.bhhs.com' : 'www.bhhs.com'; -const API_URL = `https://${DOMAIN}/bin/bhhs`; +import { getDetails, getEconomicDetails } from '../../scripts/apis/creg/creg.js'; const keys = [ 'ListPriceUS', @@ -31,35 +29,19 @@ function getPropIdFromPath() { } async function getPropertyByPropId(propId) { - const endpoint = `${API_URL}/CregPropertySearchServlet?SearchType=ListingId&ListingId=${propId}&ListingStatus=1,2,3&ApplicationType=FOR_SALE,FOR_RENT,RECENTLY_SOLD`; - const resp = await fetch(endpoint); - if (resp.ok) { - const data = await resp.json(); - /* eslint-disable-next-line no-underscore-dangle */ - return data; - } - /* eslint-disable-next-line no-console */ - console.log('Unable to retrieve property information.'); - return undefined; + const resp = await getDetails(propId); + return resp[0]; } async function getSocioEconomicData(latitude, longitude) { - const endpoint = `${API_URL}/pdp/socioEconomicDataServlet?latitude=${latitude}&longitude=${longitude}`; - const resp = await fetch(endpoint); - if (resp.ok) { - const data = await resp.json(); - /* eslint-disable-next-line no-underscore-dangle */ - return data; - } - /* eslint-disable-next-line no-console */ - console.log('Unable to retrieve socioeconomic data.'); - return undefined; + const resp = await getEconomicDetails(latitude, longitude); + return resp[0]; } export default async function decorate(block) { let property = {}; let socioEconomicData = {}; - const propId = '348257210'; + const propId = '370882966'; getPropIdFromPath(); const propertyData = await getPropertyByPropId(propId); if (propertyData) { diff --git a/blocks/property-details-occupancy/property-details-occupancy.css b/blocks/property-details-occupancy/property-details-occupancy.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/property-details-occupancy/property-details-occupancy.js b/blocks/property-details-occupancy/property-details-occupancy.js index 88ad6c52..cac0711d 100644 --- a/blocks/property-details-occupancy/property-details-occupancy.js +++ b/blocks/property-details-occupancy/property-details-occupancy.js @@ -1,5 +1,5 @@ import { createAccordionItem } from '../../scripts/accordion.js'; -import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js'; +import { decorateIcons, loadCSS } from '../../scripts/aem.js'; function createTableRow(levelData) { const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; diff --git a/scripts/apis/creg/creg.js b/scripts/apis/creg/creg.js index 50a93e5b..802b7056 100644 --- a/scripts/apis/creg/creg.js +++ b/scripts/apis/creg/creg.js @@ -67,3 +67,22 @@ export async function getDetails(...listingIds) { }); }); } + +/** + * Gets the economic details for the specified listing. + * + * @param {string} lat latitude + * @param {string} long longitude + * @return {Promise} resolving the economic details + */ +export async function getEconomicDetails(lat, long) { + return new Promise((resolve) => { + const worker = new Worker(`${window.hlx.codeBasePath}/scripts/apis/creg/workers/economic.js`, { type: 'module' }); + worker.onmessage = (e) => resolve(e.data); + worker.postMessage({ + api: CREG_API_URL, + lat, + long, + }); + }); +} \ No newline at end of file diff --git a/scripts/apis/creg/workers/economic.js b/scripts/apis/creg/workers/economic.js new file mode 100644 index 00000000..99fccffd --- /dev/null +++ b/scripts/apis/creg/workers/economic.js @@ -0,0 +1,20 @@ +/** + * Handle the Worker event. Fetches economic details for the provided lat/long. + * + * @param {Object} event the worker event. + * @param {string} event.data.api the URL to fetch. + * @param {string} event.data.lat latitude + * @param {string} event.data.long longitude + */ +onmessage = async (event) => { + const { api, lat, long } = event.data; + const promises = []; + promises.push( + fetch(`${api}/pdp/socioEconomicDataServlet?latitude=${lat}&longitude=${long}`) + .then((resp) => (resp.ok ? resp.json() : undefined)), + ); + + Promise.all(promises).then((values) => { + postMessage(values.filter((v) => v)); + }); +}; diff --git a/scripts/scripts.js b/scripts/scripts.js index 7b528c19..88e0666f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -133,6 +133,7 @@ function buildPropertyDetailsMetadata(main) { section.append(buildBlock('property-details-metadata', { elems: [] })); main.prepend(section); } +} export function getYoutubeVideoId(url) { if (url.includes('youtube.com/watch?v=')) { From 966dcf237d20334d571a804e06743478d4138d85 Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Mon, 20 May 2024 13:11:11 -0600 Subject: [PATCH 06/10] lint end line --- scripts/apis/creg/creg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/apis/creg/creg.js b/scripts/apis/creg/creg.js index 802b7056..a7b940e9 100644 --- a/scripts/apis/creg/creg.js +++ b/scripts/apis/creg/creg.js @@ -85,4 +85,4 @@ export async function getEconomicDetails(lat, long) { long, }); }); -} \ No newline at end of file +} From 0c26a81ca67086e710067a65bf2b9d8b15ec34fd Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Mon, 20 May 2024 13:14:54 -0600 Subject: [PATCH 07/10] add comment to blank css files --- .../property-details-economic-data.css | 1 + .../property-details-housing-trends.css | 1 + blocks/property-details-occupancy/property-details-occupancy.css | 1 + 3 files changed, 3 insertions(+) diff --git a/blocks/property-details-economic-data/property-details-economic-data.css b/blocks/property-details-economic-data/property-details-economic-data.css index e69de29b..91a4abfc 100644 --- a/blocks/property-details-economic-data/property-details-economic-data.css +++ b/blocks/property-details-economic-data/property-details-economic-data.css @@ -0,0 +1 @@ +/* Empty file for handling PSI checks on Block Library pages. */ diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.css b/blocks/property-details-housing-trends/property-details-housing-trends.css index e69de29b..91a4abfc 100644 --- a/blocks/property-details-housing-trends/property-details-housing-trends.css +++ b/blocks/property-details-housing-trends/property-details-housing-trends.css @@ -0,0 +1 @@ +/* Empty file for handling PSI checks on Block Library pages. */ diff --git a/blocks/property-details-occupancy/property-details-occupancy.css b/blocks/property-details-occupancy/property-details-occupancy.css index e69de29b..91a4abfc 100644 --- a/blocks/property-details-occupancy/property-details-occupancy.css +++ b/blocks/property-details-occupancy/property-details-occupancy.css @@ -0,0 +1 @@ +/* Empty file for handling PSI checks on Block Library pages. */ From 3ced32a62b85c6f481ceea1266edd573de290402 Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Wed, 22 May 2024 11:16:21 -0400 Subject: [PATCH 08/10] Handle no-video link. (#233) --- blocks/hero/hero.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index d2db95ec..7da31eb1 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -45,17 +45,15 @@ function rotateImage(images) { export default async function decorate(block) { // check if it has a video - const video = block.querySelector('a[href*=".mp4"]'); - const videoWrapper = video && video.closest('div'); - videoWrapper.classList.add('video-wrapper'); - const videoLink = videoWrapper?.firstElementChild; - // transform link into a video tag + const videoLink = block.querySelector('a[href*=".mp4"]'); + let videoWrapper; if (videoLink) { - const parent = videoLink.parentElement; + videoWrapper = document.createElement('div'); + videoWrapper.classList.add('video-wrapper'); const videoHref = videoLink.href; videoLink.remove(); setTimeout(() => { - decorateVideo(parent, videoHref); + decorateVideo(videoWrapper, videoHref); }, 3000); } From 4c6b868bc854c785fb41c05cb2942ff7345c167e Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Wed, 22 May 2024 17:23:34 -0600 Subject: [PATCH 09/10] refactor economic data blocks into one block --- blocks/economic-data/economic-data.css | 176 ++++++++ blocks/economic-data/economic-data.js | 174 ++++++++ .../property-details-economic-data.css | 1 - .../property-details-economic-data.js | 59 --- .../property-details-housing-trends.css | 1 - .../property-details-housing-trends.js | 55 --- .../property-details-metadata.css | 3 - .../property-details-metadata.js | 59 --- .../property-details-occupancy.css | 1 - .../property-details-occupancy.js | 61 --- icons/info_circle_dark.svg | 1 + scripts/accordion.js | 52 --- scripts/scripts.js | 9 - styles/templates/accordion/accordion.css | 116 ----- .../property-details-table.css | 87 ---- .../property-details/property-details.css | 396 ------------------ 16 files changed, 351 insertions(+), 900 deletions(-) create mode 100644 blocks/economic-data/economic-data.css create mode 100755 blocks/economic-data/economic-data.js delete mode 100644 blocks/property-details-economic-data/property-details-economic-data.css delete mode 100644 blocks/property-details-economic-data/property-details-economic-data.js delete mode 100644 blocks/property-details-housing-trends/property-details-housing-trends.css delete mode 100644 blocks/property-details-housing-trends/property-details-housing-trends.js delete mode 100644 blocks/property-details-metadata/property-details-metadata.css delete mode 100644 blocks/property-details-metadata/property-details-metadata.js delete mode 100644 blocks/property-details-occupancy/property-details-occupancy.css delete mode 100644 blocks/property-details-occupancy/property-details-occupancy.js delete mode 100644 scripts/accordion.js delete mode 100644 styles/templates/accordion/accordion.css delete mode 100644 styles/templates/property-details/property-details-table.css delete mode 100644 styles/templates/property-details/property-details.css diff --git a/blocks/economic-data/economic-data.css b/blocks/economic-data/economic-data.css new file mode 100644 index 00000000..80c7dc83 --- /dev/null +++ b/blocks/economic-data/economic-data.css @@ -0,0 +1,176 @@ +.economic-data.block { + margin: 0; + padding: 20px; + box-sizing: border-box; +} + +.economic-data .accordion-header { + border-top: 1px solid var(--grey); + cursor: pointer; + padding: 16px 30px 16px 0; + position: relative; + display: inline-block; + font-family: var(--font-family-georgia); + font-weight: var(--font-weight-semibold); + line-height: 26px; + margin: 0 5px 0 0; + font-size: 22px; + width: 100%; +} + +.economic-data .accordion .accordion-header::after { + border-color: var(--body-color) transparent transparent transparent; + border-style: solid; + border-width: 6px 5px 0 5px; + content: ''; + margin-top: -5px; + position: absolute; + right: 8px; + top: 50%; + transition: transform .3s linear; + transform: rotate(0); +} + +.economic-data .accordion .accordion-header:not(.active)::after { + transform: rotate(90deg); + transition: transform .3s linear; +} + +.economic-data .accordion-content { + display: none; + padding-bottom: 60px; +} + +.economic-data .accordion-header.active + .accordion-content { + display: block; +} + +.economic-data .container { + display: flex; + flex-direction: column; +} + +.economic-data .row { + display: flex; + flex-wrap: wrap; + border-bottom: 1px solid #ccc; + padding: 10px 0; +} + +.economic-data.block .accordion-content .row:last-child { + border-bottom: none; +} + +.economic-data .cell { + padding: 10px 10px 10px 0; + box-sizing: border-box; +} + +.economic-data .cell-header { + font-weight: bold; + text-transform: uppercase; + font-size: var(--body-font-size-xs); + line-height: var(--line-height-xs); + letter-spacing: var(--letter-spacing-xs); +} + +.economic-data .cell-1 { + width: 100%; + text-transform: uppercase; + font-size: 14px; +} + +.economic-data .cell-1.cell-header { + padding: 0; +} + +.economic-data .cell-2, .economic-data .cell-3, .economic-data .cell-4 { + width: 33.33%; +} + +.economic-data .progress-bar { + width: calc(100% - 60px); + background-color: #f3f3f3; + height: 5px; + margin-left: 50px; + margin-top: -12px; + position: relative; +} + +.economic-data .progress-owner, .progress-renter { + height: 100%; + position: absolute; + top: 0; +} + +.economic-data .progress-owner { + background-color: var(--primary-color); + left: 0; +} + +.economic-data .progress-renter { + background-color: var(--light-grey); + right: 0; +} + +.economic-data .tooltip { + position: relative; + display: inline-block; + height: 19px; + width: 19px; + margin-left: 5px; +} + +.economic-data .tooltip .icon-info_circle_dark { + display: none; +} + +.economic-data .tooltip .tooltiptext { + visibility: hidden; + width: 290px; + background-color: var(--black); + color: var(--white); + text-align: left; + padding: 14px 18px; + position: absolute; + z-index: 1; + top: 100%; + left: 0; + margin: 12px 0 0 -10px; + font-family: var(--font-family-proxima); + font-size: var(--body-font-size-s); + letter-spacing: var(--letter-spacing-s); + line-height: var(--line-height-s); +} + +.economic-data .tooltip:hover .icon-info_circle { + display: none; +} + +.economic-data .tooltip:hover .icon-info_circle_dark { + display: block; +} + +.economic-data .tooltip:hover .tooltiptext { + visibility: visible; +} + +.economic-data .tooltip .tooltiptext::before { + content: ''; + position: absolute; + bottom: 100%; + left: 8px; + border-width: 10px; + border-style: solid; + border-color: transparent transparent var(--black) transparent; +} + +@media (min-width: 900px) { + .economic-data .cell-1 { + width: 25%; + } + + .economic-data .cell-2, .economic-data .cell-3, .economic-data .cell-4 { + width: 25%; + } +} diff --git a/blocks/economic-data/economic-data.js b/blocks/economic-data/economic-data.js new file mode 100755 index 00000000..83ed46b2 --- /dev/null +++ b/blocks/economic-data/economic-data.js @@ -0,0 +1,174 @@ +import { getDetails, getEconomicDetails } from '../../scripts/apis/creg/creg.js'; +import { div, span } from '../../scripts/dom-helpers.js'; +import { decorateIcons } from '../../scripts/aem.js'; + +const keys = [ + 'ListPriceUS', + 'StreetName', + 'City', + 'StateOrProvince', + 'PostalCode', + 'Latitude', + 'Longitude', + 'LotSizeAcres', + 'LotSizeSquareFeet', + 'LivingAreaUnits', + 'Media', + 'SmallMedia', + 'PropId', + 'OpenHouses', + 'CourtesyOf', +]; + +function pick(obj, ...args) { + return args.reduce((res, key) => ({ ...res, [key]: obj[key] }), { }); +} + +function toggleAccordion(event) { + const content = event.target; + content.classList.toggle('active'); +} + +/** + * Retrieves the property ID from the current URL path. + * @returns {string|null} The property ID if found in the URL path, or null if not found. + */ +function getPropIdFromPath() { + const url = window.location.pathname; + const match = url.match(/pid-(\d+)/); + if (match && match[1]) { + return match[1]; + } + return null; +} + +async function getPropertyByPropId(propId) { + const resp = await getDetails(propId); + return resp[0]; +} + +async function getSocioEconomicData(latitude, longitude) { + const resp = await getEconomicDetails(latitude, longitude); + return resp[0]; +} + +function getHeaderLabels(title) { + switch (title.toLowerCase()) { + case 'occupancy': + return 'Occupancy'; + case 'housing trends': + return 'Housing Trends'; + case 'economic data': + return 'Economic Data'; + default: + return 'Untitled'; + } +} + +function getColumnHeader(title, index) { + switch (title.toLowerCase()) { + case 'occupancy': + return ['Owned', 'Rented', 'Vacant'][index - 1]; + case 'housing trends': + return ['Home Appreciation', 'Median Age'][index - 1]; + case 'economic data': + return ['Median House. Income', 'Unemployment', 'Cost of Living Index'][index - 1]; + default: + return ''; + } +} + +function getDataValue(item, title, index) { + switch (title.toLowerCase()) { + case 'occupancy': + if (index === 1) { + return `${item.ownerOccupiedPercent}%`; + } + if (index === 2) { + return `${item.renterOccupiedPercent}%`; + } + return `${item.vacancyPercent}%`; + case 'housing trends': + if (index === 1) { + return `${item.homeValueAppreciationPercent}%`; + } + return `${item.medianHomeAge}`; + case 'economic data': + if (index === 1) { + return `${item.medianIncome}`; + } + return `${item.unemploymentPercent}%`; + default: + return ''; + } +} + +function generateDataTable(block, title, socioEconData) { + // Create the accordion structure + const accordion = div({ class: 'accordion' }, + div({ class: 'accordion-header', onclick: (e) => toggleAccordion(e) }, getHeaderLabels(title), div({ class: 'tooltip' }, + span({ class: 'icon icon-info_circle' }), + span({ class: 'icon icon-info_circle_dark' }), + span({ class: 'tooltiptext' }, `${socioEconData.citation}`), + ), + ), + div({ class: 'accordion-content' }, + div({ id: `${title.toLowerCase().replace(' ', '-')}-data-container`, class: 'container', role: 'grid' }), + ), + ); + block.appendChild(accordion); + + const container = document.getElementById(`${title.toLowerCase().replace(' ', '-')}-data-container`); + + // Create header row + const headerRow = div({ class: 'row', role: 'row' }, + div({ class: 'cell cell-1 cell-header', role: 'columnheader' }), + div({ class: 'cell cell-2 cell-header', role: 'columnheader' }, getColumnHeader(title, 1)), + div({ class: 'cell cell-3 cell-header', role: 'columnheader' }, getColumnHeader(title, 2)), + div({ class: 'cell cell-4 cell-header', role: 'columnheader' }, getColumnHeader(title, 3) ? getColumnHeader(title, 3) : ''), + ); + container.appendChild(headerRow); + + // Create data rows + socioEconData.data.forEach((item) => { + const dataRow = div({ class: 'row', role: 'row' }, + div({ class: 'cell cell-1', role: 'cell' }, + div({ role: 'presentation' }, `${item.level.charAt(0).toUpperCase() + item.level.slice(1)}: ${item.label}`), + ), + div({ class: 'cell cell-2', role: 'cell' }, + getDataValue(item, title, 1), + title.toLowerCase() === 'occupancy' + ? div({ class: 'progress-bar' }, + span({ class: 'progress-owner', style: `width: ${item.ownerOccupiedPercent}%` }), + span({ class: 'progress-renter', style: `width: ${100 - item.ownerOccupiedPercent}%` }), + ) : '', + ), + div({ class: 'cell cell-3', role: 'cell' }, getDataValue(item, title, 2)), + div({ class: 'cell cell-4', role: 'cell' }, title.toLowerCase() === 'housing trends' ? '' : getDataValue(item, title, 3)), + ); + + container.appendChild(dataRow); + }); +} + +export default async function decorate(block) { + let property = {}; + let propId = getPropIdFromPath(); // assumes the listing page pathname ends with the propId + // TODO: remove this test propId + if (!propId) propId = '370882966'; + + const propertyData = await getPropertyByPropId(propId); + if (propertyData) { + property = pick(propertyData, ...keys); + if (property.Latitude && property.Longitude) { + const socioEconData = await getSocioEconomicData(property.Latitude, property.Longitude); + if (socioEconData) { + generateDataTable(block, 'Occupancy', socioEconData); + generateDataTable(block, 'Housing Trends', socioEconData); + generateDataTable(block, 'Economic Data', socioEconData); + } + } + } + decorateIcons(block); + window.property = property; +} diff --git a/blocks/property-details-economic-data/property-details-economic-data.css b/blocks/property-details-economic-data/property-details-economic-data.css deleted file mode 100644 index 91a4abfc..00000000 --- a/blocks/property-details-economic-data/property-details-economic-data.css +++ /dev/null @@ -1 +0,0 @@ -/* Empty file for handling PSI checks on Block Library pages. */ diff --git a/blocks/property-details-economic-data/property-details-economic-data.js b/blocks/property-details-economic-data/property-details-economic-data.js deleted file mode 100644 index 7ae0dbef..00000000 --- a/blocks/property-details-economic-data/property-details-economic-data.js +++ /dev/null @@ -1,59 +0,0 @@ -import { createAccordionItem } from '../../scripts/accordion.js'; -import { decorateIcons, loadCSS } from '../../scripts/aem.js'; - -function createTableRow(levelData) { - const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; - const rowHTML = ` - - -
${label}
- - -
${levelData.medianIncome}
- - - ${levelData.unemploymentPercent} - % - - ${levelData.costOfLivingIndex} - - - `; - return rowHTML; -} - -export default async function decorate(block) { - if (window.socioEconomicData && window.socioEconomicData.data) { - const socioEconData = window.socioEconomicData.data; - const citation = 'Data provided by U.S. Census Bureau'; - let econTableHTML = ` -
-
-
- - - - - - - - - `; - socioEconData.forEach((elem) => { - econTableHTML += createTableRow(elem); - }); - econTableHTML += ` - -
Median House. IncomeUnemploymentCost of Living Index
-
-
-
- `; - const econAccordionItem = createAccordionItem('economic-data', 'Economic Data', econTableHTML, citation); - block.append(econAccordionItem); - decorateIcons(block); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details.css`); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details-table.css`); - } -} diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.css b/blocks/property-details-housing-trends/property-details-housing-trends.css deleted file mode 100644 index 91a4abfc..00000000 --- a/blocks/property-details-housing-trends/property-details-housing-trends.css +++ /dev/null @@ -1 +0,0 @@ -/* Empty file for handling PSI checks on Block Library pages. */ diff --git a/blocks/property-details-housing-trends/property-details-housing-trends.js b/blocks/property-details-housing-trends/property-details-housing-trends.js deleted file mode 100644 index 9804b334..00000000 --- a/blocks/property-details-housing-trends/property-details-housing-trends.js +++ /dev/null @@ -1,55 +0,0 @@ -import { createAccordionItem } from '../../scripts/accordion.js'; -import { decorateIcons, loadCSS } from '../../scripts/aem.js'; - -function createTableRow(levelData) { - const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; - const rowHTML = ` - - -
${label}
- - - ${levelData.homeValueAppreciationPercent} - % - ${levelData.medianHomeAge}y - - - `; - return rowHTML; -} - -export default async function decorate(block) { - if (window.socioEconomicData && window.socioEconomicData.data) { - const socioEconData = window.socioEconomicData.data; - const citation = 'Market data provided by U.S. Census Bureau'; - let housingTableHTML = ` -
-
-
- - - - - - - - - `; - socioEconData.forEach((elem) => { - housingTableHTML += createTableRow(elem); - }); - housingTableHTML += ` - -
Home AppreciationMedian Age
-
-
-
- `; - const housingAccordionItem = createAccordionItem('housing-trends', 'Housing Trends', housingTableHTML, citation); - block.append(housingAccordionItem); - decorateIcons(block); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details.css`); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details-table.css`); - } -} diff --git a/blocks/property-details-metadata/property-details-metadata.css b/blocks/property-details-metadata/property-details-metadata.css deleted file mode 100644 index 5bd672e5..00000000 --- a/blocks/property-details-metadata/property-details-metadata.css +++ /dev/null @@ -1,3 +0,0 @@ -.property-details-metadata.block { - display: none; -} diff --git a/blocks/property-details-metadata/property-details-metadata.js b/blocks/property-details-metadata/property-details-metadata.js deleted file mode 100644 index 3adc7bbe..00000000 --- a/blocks/property-details-metadata/property-details-metadata.js +++ /dev/null @@ -1,59 +0,0 @@ -import { getDetails, getEconomicDetails } from '../../scripts/apis/creg/creg.js'; - -const keys = [ - 'ListPriceUS', - 'StreetName', - 'City', - 'StateOrProvince', - 'PostalCode', - 'Latitude', - 'Longitude', - 'LotSizeAcres', - 'LotSizeSquareFeet', - 'LivingAreaUnits', - 'Media', - 'SmallMedia', - 'PropId', - 'OpenHouses', - 'CourtesyOf', -]; - -function pick(obj, ...args) { - return args.reduce((res, key) => ({ ...res, [key]: obj[key] }), { }); -} - -function getPropIdFromPath() { - const url = window.location.pathname; - const idx = url.indexOf('pid-') + 'pid-'.length; - return url.substring(idx); -} - -async function getPropertyByPropId(propId) { - const resp = await getDetails(propId); - return resp[0]; -} - -async function getSocioEconomicData(latitude, longitude) { - const resp = await getEconomicDetails(latitude, longitude); - return resp[0]; -} - -export default async function decorate(block) { - let property = {}; - let socioEconomicData = {}; - const propId = '370882966'; - getPropIdFromPath(); - const propertyData = await getPropertyByPropId(propId); - if (propertyData) { - property = pick(propertyData, ...keys); - if (property.Latitude && property.Longitude) { - const socioEconData = await getSocioEconomicData(property.Latitude, property.Longitude); - if (socioEconData) { - socioEconomicData = socioEconData; - } - } - } - window.property = property; - window.socioEconomicData = socioEconomicData; - block.remove(); -} diff --git a/blocks/property-details-occupancy/property-details-occupancy.css b/blocks/property-details-occupancy/property-details-occupancy.css deleted file mode 100644 index 91a4abfc..00000000 --- a/blocks/property-details-occupancy/property-details-occupancy.css +++ /dev/null @@ -1 +0,0 @@ -/* Empty file for handling PSI checks on Block Library pages. */ diff --git a/blocks/property-details-occupancy/property-details-occupancy.js b/blocks/property-details-occupancy/property-details-occupancy.js deleted file mode 100644 index cac0711d..00000000 --- a/blocks/property-details-occupancy/property-details-occupancy.js +++ /dev/null @@ -1,61 +0,0 @@ -import { createAccordionItem } from '../../scripts/accordion.js'; -import { decorateIcons, loadCSS } from '../../scripts/aem.js'; - -function createTableRow(levelData) { - const label = levelData.level === 'zipcode' ? `Zip Code: ${levelData.label}` : levelData.label; - const rowHTML = ` - - -
${label}
- - - ${levelData.ownerOccupiedPercent} - % -
- - - ${levelData.renterOccupiedPercent} - % - - ${levelData.vacancyPercent} - % - - `; - return rowHTML; -} -export default async function decorate(block) { - if (window.socioEconomicData && window.socioEconomicData.data) { - const socioEconData = window.socioEconomicData.data; - const citation = 'Market data provided by U.S. Census Bureau'; - let occupancyHTML = ` -
-
-
- - - - - - - - - `; - socioEconData.forEach((elem) => { - occupancyHTML += createTableRow(elem); - }); - occupancyHTML += ` - -
OwnedRentedVacant
-
-
-
- `; - const occupancyAccordionItem = createAccordionItem('occupancy', 'Occupancy', occupancyHTML, citation); - block.append(occupancyAccordionItem); - decorateIcons(block); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/accordion/accordion.css`); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details.css`); - loadCSS(`${window.hlx.codeBasePath}/styles/templates/property-details/property-details-table.css`); - } -} diff --git a/icons/info_circle_dark.svg b/icons/info_circle_dark.svg index 91c154dc..eefe9959 100644 --- a/icons/info_circle_dark.svg +++ b/icons/info_circle_dark.svg @@ -4,6 +4,7 @@ aria-hidden="true" tabindex="-1" viewBox="0 0 18 18"> + diff --git a/scripts/accordion.js b/scripts/accordion.js deleted file mode 100644 index a5dd559d..00000000 --- a/scripts/accordion.js +++ /dev/null @@ -1,52 +0,0 @@ -function openAccordion() { - const parent = this.closest('.accordion-item'); - parent.classList.toggle('collapse'); -} - -function createAccordionHeader(heading, tooltipText) { - const accordionTitle = document.createElement('div'); - accordionTitle.className = 'accordion-title'; - let headerHTML = ` -
-
-
-
-

${heading}

- `; - if (tooltipText) { - headerHTML += ` -
- - - ${tooltipText} -
- `; - } - headerHTML += ` -
-
-
-
- `; - accordionTitle.innerHTML = headerHTML; - return accordionTitle; -} - -function createAccordionItem(className, headerTitle, innerHTML, citation = '') { - const accordionItem = document.createElement('div'); - accordionItem.className = `accordion-item ${className}`; - const accordionTitle = createAccordionHeader(headerTitle, citation); - const accordionBody = document.createElement('div'); - accordionBody.className = 'accordion-body'; - accordionBody.innerHTML = innerHTML; - accordionItem.append(accordionTitle); - accordionItem.append(accordionBody); - const accordionHeader = accordionItem.querySelector('.accordion-header'); - accordionHeader.addEventListener('click', openAccordion); - return accordionItem; -} - -export { - createAccordionItem, - createAccordionHeader, -}; diff --git a/scripts/scripts.js b/scripts/scripts.js index 88e0666f..06b553ce 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -127,14 +127,6 @@ function buildLiveByMetadata(main) { } } -function buildPropertyDetailsMetadata(main) { - if (getMetadata('template') === 'property-details-template') { - const section = document.createElement('div'); - section.append(buildBlock('property-details-metadata', { elems: [] })); - main.prepend(section); - } -} - export function getYoutubeVideoId(url) { if (url.includes('youtube.com/watch?v=')) { return new URL(url).searchParams.get('v'); @@ -243,7 +235,6 @@ function buildLuxuryTheme() { function buildAutoBlocks(main) { try { buildHeroBlock(main); - buildPropertyDetailsMetadata(main); buildSearchBar(main); buildLiveByMetadata(main); buildFloatingImages(main); diff --git a/styles/templates/accordion/accordion.css b/styles/templates/accordion/accordion.css deleted file mode 100644 index 64de4235..00000000 --- a/styles/templates/accordion/accordion.css +++ /dev/null @@ -1,116 +0,0 @@ -.accordion-item .accordion-body { - max-height: 999em; - overflow: hidden; - transition: max-height .6s; -} - -.accordion-item.collapse .accordion-body { - max-height: 0; -} - -.accordion-header { - border-top: 1px solid var(--grey); - cursor: pointer; - padding: 16px 30px 16px 0; - position: relative; - display: block; -} - -.accordion-header-title { - display: inline-block; - font-family: var(--font-family-georgia); - font-weight: var(--font-weight-semibold); - line-height: 26px; - margin: 0 5px 0 0; - font-size: 22px; -} - -.accordion-item .accordion-header::after { - border-color: var(--body-color) transparent transparent transparent; - border-style: solid; - border-width: 6px 5px 0 5px; - content: ''; - display: block; - height: 0; - margin-top: -5px; - position: absolute; - right: 2px; - top: 50%; - transition: transform .3s linear; - transform: rotate(0); - width: 0; -} - -.accordion-item.collapse .accordion-header::after { - transform: rotate(90deg); - transition: transform .3s linear; -} - -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip svg { - height: 19px; - width: 19px; -} - -.tooltip .icon-info_circle_dark { - display: none; -} - -.tooltip .tooltiptext { - visibility: hidden; - width: 290px; - background-color: var(--black); - color: var(--white); - text-align: left; - padding: 14px 18px; - position: absolute; - z-index: 1; - top: 100%; - left: 0; - margin: 12px 0 0 -10px; - font-family: var(--font-family-proxima); - font-size: var(--body-font-size-s); - letter-spacing: .44px; - line-height: 22px; -} - -.tooltip:hover .icon-info_circle { - display: none; -} - -.tooltip:hover .icon-info_circle_dark { - display: block; -} - -.tooltip:hover .tooltiptext { - visibility: visible; -} - -.tooltip .tooltiptext::before { - content: ''; - position: absolute; - bottom: 100%; - left: 8px; - border-width: 10px; - border-style: solid; - border-color: transparent transparent var(--black) transparent; -} - -@media (min-width: 992px) { - .accordion-header { - padding: 27px 30px 30px 0; - } - - .accordion-header-title { - font-size: var(--body-font-size-xl); - letter-spacing: -0.43px; - } - - .accordion-item .accordion-header::after { - border-width: 9px 7px 0 7px; - } -} diff --git a/styles/templates/property-details/property-details-table.css b/styles/templates/property-details/property-details-table.css deleted file mode 100644 index 84069a41..00000000 --- a/styles/templates/property-details/property-details-table.css +++ /dev/null @@ -1,87 +0,0 @@ -.cmp-socio-economic-data--table { - width: 100%; - position: relative; -} - -.cmp-socio-economic-data--table thead { - vertical-align: top; -} - -.cmp-socio-economic-data--table thead th { - padding: 40px 0 20px; - font-family: var(--font-family-proxima); - font-weight: var(--normal-page-width); - font-size: var(--body-font-size-m); - line-height: 23px; - letter-spacing: initial; - color: var(--body-color); -} - -.cmp-socio-economic-data--table tbody { - display: table-row-group; - vertical-align: middle; - border-color: inherit; -} - -.cmp-socio-economic-data--table tbody tr:first-of-type { - background: var(--light-grey); -} - -.cmp-socio-economic-data--table tbody tr { - border-top: 1px solid var(--light-grey); - padding: 0 20px; - position: relative; -} - -.cmp-socio-economic-data--table td { - width: 25%; - padding: 40px 0; -} - -.cmp-socio-economic-data--table h6 { - margin: 0; - padding-left: 20px; - font-size: var(--body-font-size-s); - line-height: 35px; - font-family: var(--font-family-proxima); - text-transform: uppercase; -} - -.cmp-socio-economic-data__stat { - position: relative; - font-size: var(--body-font-size-xxxl); - font-family: var(--font-family-proxima); - font-weight: var(--font-weight-light); -} - -.cmp-socio-economic-data__stat .percentage { - content: "%"; - font-size: var( --body-font-size-l); - letter-spacing: 0; - vertical-align: super; - margin-left: 0; - margin-top: -7px; - position: absolute; -} - -.cmp-socio-economic-data__stat .progress-bar { - width: calc(100% - 100px); - position: relative; - margin-left: 80px; -} - -.cmp-socio-economic-data__stat .progress-owner { - height: 2px; - background: var(--primary-color); - position: absolute; - left: 0; - margin-top: -15px; -} - -.cmp-socio-economic-data__stat .progress-renter { - height: 2px; - background: var(--light-grey); - position: absolute; - right: 0; - margin-top: -15px; -} diff --git a/styles/templates/property-details/property-details.css b/styles/templates/property-details/property-details.css deleted file mode 100644 index ae04c76c..00000000 --- a/styles/templates/property-details/property-details.css +++ /dev/null @@ -1,396 +0,0 @@ -.property-container { - max-width: var(--normal-page-width); - margin: 0 auto; - width: 100%; - padding: 0 var(--section-padding); -} - -.accordion-item .property-container { - max-width: var(--normal-page-width); - padding-left: 0; - padding-right: 0; -} - -.property-row { - display: flex; - flex-wrap: wrap; - margin: 0 -15px; -} - -.col { - position: relative; - width: 100%; - min-height: 1px; - padding-right: var(--section-padding); - padding-left: var(--section-padding); -} - -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: none; -} - -.col-3 { - flex: 0 0 25%; - max-width: 25%; -} - -.col-4 { - flex: 0 0 33.333%; - max-width: 33.333%; -} - -.col-5 { - flex: 0 0 41.667%; - max-width: 41.667%; -} - -.col-6 { - flex: 0 0 50%; - max-width: 50%; -} - -.col-7 { - flex: 0 0 58.333%; - max-width: 58.333%; -} - -.col-9 { - flex: 0 0 75%; - max-width: 75%; -} - -.col-10 { - flex: 0 0 83.333%; - max-width: 83.333%; -} - -.col-12 { - flex: 0 0 100%; - max-width: 100%; -} - -.d-none { - display: none !important; -} - -.d-block { - display: block !important; -} - -.d-flex { - display: flex !important; -} - -.justify-content-end { - justify-content: flex-end !important; -} - -.m-auto { - margin: auto !important; -} - -.mr-3, .mx-3 { - margin-right: 1rem !important; -} - -.mt-2, .my-2 { - margin-top: 0.5rem !important; -} - -.mr-2, .mx-2 { - margin-right: 0.5rem !important; -} - -.mt-3, .my-3 { - margin-top: 1rem !important; -} - -.mb-3, .my-3 { - margin-bottom: 1rem !important; -} - -.w-100 { - width: 100% !important; -} - -.p-0 { - padding: 0 !important; -} - -.pl-1, .px-1 { - padding-left: 0.25rem !important; -} - -.pb-1, .py-1 { - padding-bottom: 0.25rem !important; -} - -.pr-1, .px-1 { - padding-right: 0.25rem !important; -} - -.pt-1, .py-1 { - padding-top: 0.25rem !important; -} - -.pl-2, .px-2 { - padding-left: 0.5rem !important; -} -.pr-2, .px-2 { - padding-right: 0.5rem !important; -} - -.pb-3, .py-3 { - padding-bottom: 1rem !important; -} - -.pt-3, .py-3 { - padding-top: 1rem !important; -} - -.pb-4, .py-4 { - padding-bottom: 1.5rem !important; -} - -.pb-content { - padding-bottom: 57px; -} - -.order-0 { - order: 0; -} - -.order-1 { - order: 1; -} - -.order-2 { - order: 2; -} - -.order-3 { - order: 3; -} - -.align-items-center { - align-items: center !important; -} - -@media (min-width: 576px) { - .property-container { - max-width: 540px; - } - - .m-sm-0 { - margin: 0 !important; - } -} - -@media (min-width: 600px) { - .property-container { - max-width: 720px; - } - - .col-md-2 { - flex: 0 0 16.667%; - max-width: 16.667%; - } - - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - - .col-md-4 { - flex: 0 0 33.333%; - max-width: 33.333%; - } - - .col-md-5 { - flex: 0 0 41.667%; - max-width: 41.667%; - } - - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - - .col-md-8 { - flex: 0 0 66.667%; - max-width: 66.667%; - } - - .col-md-10 { - flex: 0 0 83.333%; - max-width: 83.333%; - } - - .offset-md-1 { - margin-left: 8.333%; - } - - .mt-md-0, .my-md-0 { - margin-top: 0 !important; - } - - .mb-md-0, .my-md-0 { - margin-bottom: 0 !important; - } - - .pb-content { - padding-bottom: 80px; - } -} - -@media (min-width: 992px) { - .property-container { - max-width: 960px; - } - - .col-lg-1 { - flex: 0 0 8.333%; - max-width: 8.333%; - } - - .col-lg-2 { - flex: 0 0 16.667%; - max-width: 16.667%; - } - - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - - .col-lg-4 { - flex: 0 0 33.333%; - max-width: 33.333%; - } - - .col-lg-5 { - flex: 0 0 41.667%; - max-width: 41.667%; - } - - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - - .col-lg-7 { - flex: 0 0 58.333%; - max-width: 58.333%; - } - - .col-lg-8 { - flex: 0 0 66.667%; - max-width: 66.667%; - } - - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - - .offset-lg-0 { - margin-left: 0; - } - - .offset-lg-1 { - margin-left: 8.333%; - } - - .d-lg-block { - display: block !important; - } - - .d-lg-flex { - display: flex !important; - } - - .d-lg-none { - display: none !important; - } - - .order-lg-1 { - order: 1; - } - - .order-lg-2 { - order: 2; - } - - .order-lg-3 { - order: 3; - } - - .order-lg-4 { - order: 4; - } - - .pt-lg-0, .py-lg-0 { - padding-top: 0 !important; - } - - .pl-lg-0, .px-lg-0 { - padding-left: 0 !important; - } - - .pb-lg-1, .py-lg-1 { - padding-bottom: 0.25rem !important; - } - - .pt-lg-1, .py-lg-1 { - padding-top: 0.25rem !important; - } - - .mb-lg-2, .my-lg-2 { - margin-bottom: 0.5rem !important; - } - - .mt-lg-3, .my-lg-3 { - margin-top: 1rem !important; - } -} - -@media (min-width: 1200px) { - .property-container { - max-width: 1400px; - } - - .col-xl-1 { - flex: 0 0 8.333%; - max-width: 8.333%; - } - - .col-xl-2 { - flex: 0 0 16.667%; - max-width: 16.667%; - } - - .col-xl-4 { - flex: 0 0 33.333%; - max-width: 33.333%; - } - - .col-xl-5 { - flex: 0 0 41.667%; - max-width: 41.667%; - } - - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - - .offset-xl-6 { - margin-left: 50%; - } - - .pb-content { - padding-bottom: 100px; - } -} From 4b3576183a3ab611347abd9498db4b3f740a774e Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Wed, 22 May 2024 17:46:39 -0600 Subject: [PATCH 10/10] renamed icons to match lint rules --- blocks/economic-data/economic-data.css | 8 ++++---- blocks/economic-data/economic-data.js | 4 ++-- blocks/info-mouseover/info-mouseover.js | 2 +- blocks/profile/profile.js | 2 +- icons/{info_circle_dark.svg => info-circle-dark.svg} | 0 icons/{info_circle.svg => info-circle.svg} | 0 6 files changed, 8 insertions(+), 8 deletions(-) rename icons/{info_circle_dark.svg => info-circle-dark.svg} (100%) rename icons/{info_circle.svg => info-circle.svg} (100%) diff --git a/blocks/economic-data/economic-data.css b/blocks/economic-data/economic-data.css index 80c7dc83..79ad51ac 100644 --- a/blocks/economic-data/economic-data.css +++ b/blocks/economic-data/economic-data.css @@ -21,7 +21,7 @@ .economic-data .accordion .accordion-header::after { border-color: var(--body-color) transparent transparent transparent; border-style: solid; - border-width: 6px 5px 0 5px; + border-width: 6px 5px 0; content: ''; margin-top: -5px; position: absolute; @@ -121,7 +121,7 @@ margin-left: 5px; } -.economic-data .tooltip .icon-info_circle_dark { +.economic-data .tooltip .icon-info-circle-dark { display: none; } @@ -143,11 +143,11 @@ line-height: var(--line-height-s); } -.economic-data .tooltip:hover .icon-info_circle { +.economic-data .tooltip:hover .icon-info-circle { display: none; } -.economic-data .tooltip:hover .icon-info_circle_dark { +.economic-data .tooltip:hover .icon-info-circle-dark { display: block; } diff --git a/blocks/economic-data/economic-data.js b/blocks/economic-data/economic-data.js index 83ed46b2..7b528b41 100755 --- a/blocks/economic-data/economic-data.js +++ b/blocks/economic-data/economic-data.js @@ -107,8 +107,8 @@ function generateDataTable(block, title, socioEconData) { // Create the accordion structure const accordion = div({ class: 'accordion' }, div({ class: 'accordion-header', onclick: (e) => toggleAccordion(e) }, getHeaderLabels(title), div({ class: 'tooltip' }, - span({ class: 'icon icon-info_circle' }), - span({ class: 'icon icon-info_circle_dark' }), + span({ class: 'icon icon-info-circle' }), + span({ class: 'icon icon-info-circle-dark' }), span({ class: 'tooltiptext' }, `${socioEconData.citation}`), ), ), diff --git a/blocks/info-mouseover/info-mouseover.js b/blocks/info-mouseover/info-mouseover.js index 25e679f5..10c170fa 100644 --- a/blocks/info-mouseover/info-mouseover.js +++ b/blocks/info-mouseover/info-mouseover.js @@ -16,7 +16,7 @@ export default async function decorate(block) { const heading = block.closest('.section').querySelector('h1,h2,h3,h4,h5,h6'); const icon = document.createElement('span'); - icon.classList.add('icon', 'icon-info_circle'); + icon.classList.add('icon', 'icon-info-circle'); positionIcon(heading, icon); block.append(icon); diff --git a/blocks/profile/profile.js b/blocks/profile/profile.js index 087c423f..d2437a7b 100644 --- a/blocks/profile/profile.js +++ b/blocks/profile/profile.js @@ -119,7 +119,7 @@ function showNotification(type, iconHtml, message, message2) { } function showError(err) { - showNotification('error', '', i18n('There was a problem processing your request.'), i18n(err)); + showNotification('error', '', i18n('There was a problem processing your request.'), i18n(err)); } function showSuccess(message) { diff --git a/icons/info_circle_dark.svg b/icons/info-circle-dark.svg similarity index 100% rename from icons/info_circle_dark.svg rename to icons/info-circle-dark.svg diff --git a/icons/info_circle.svg b/icons/info-circle.svg similarity index 100% rename from icons/info_circle.svg rename to icons/info-circle.svg