From b6c429ba2dee65cec885483c572b3e5fb47a2eb0 Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Thu, 30 Nov 2023 09:20:19 -0600 Subject: [PATCH 1/4] Fix mobile icons and opening issue. (#174) --- blocks/header/header.css | 15 +++++++++++++-- blocks/header/header.js | 6 ++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index c2264db7..398a5dd1 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -97,7 +97,7 @@ body.light-nav { font-family: var(--font-family-proxima); font-weight: var(--font-weight-normal); font-size: var(--body-font-size-s); - letter-spacing:var(--letter-spacing-reg); + letter-spacing: var(--letter-spacing-reg); line-height: var(--body-font-size-s); text-decoration: none; cursor: pointer; @@ -197,6 +197,7 @@ body.light-nav { } .header.block nav .nav-hamburger .nav-hamburger-icon { + position: relative; height: 24px; width: 24px; } @@ -208,9 +209,19 @@ body.light-nav { .header.block nav .nav-hamburger .close { display: none; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; } .header.block nav .nav-hamburger .open { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; filter: var(--hamburger-filter); } @@ -239,7 +250,7 @@ body.light-nav { height: var(--nav-height); background: transparent; } - + body.light-nav .header.block nav[aria-expanded="true"] { --logo-filter: invert(1); } diff --git a/blocks/header/header.js b/blocks/header/header.js index a59f69bc..d369cc32 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -2,7 +2,7 @@ import { BREAKPOINTS } from '../../scripts/scripts.js'; import { getMetadata, decorateIcons, decorateSections } from '../../scripts/aem.js'; // media query match that indicates mobile/tablet width -const isDesktop = BREAKPOINTS.medium; +const isDesktop = BREAKPOINTS.large; function closeOnEscape(e) { if (e.code === 'Escape') { @@ -230,7 +230,9 @@ export default async function decorate(block) { nav.setAttribute('aria-expanded', 'false'); // prevent mobile nav behavior on window resize toggleMenu(nav, navSections, isDesktop.matches); - isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); + isDesktop.addEventListener('change', () => { + toggleMenu(nav, navSections, isDesktop.matches); + }); decorateIcons(nav); const navWrapper = document.createElement('div'); From 684dbcdb344baf8825c38781cafb86833ab1696f Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Thu, 30 Nov 2023 09:21:30 -0600 Subject: [PATCH 2/4] Fix footer icons and a few other issues. (#175) --- blocks/footer/footer.css | 4 ++-- icons/bhhs_seal_blk.svg | 5 ++++- icons/heartempty.svg | 4 ++-- icons/saved-properties.svg | 9 +++++++++ scripts/scripts.js | 2 +- styles/bhhs_seal_favicon.ico | Bin 0 -> 413 bytes 6 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 icons/saved-properties.svg create mode 100644 styles/bhhs_seal_favicon.ico diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index c8ea6721..44381b8a 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -87,7 +87,7 @@ footer { margin-right: 10px; } -.icon-facebook svg, .icon-linkedin svg, .icon-instagram svg, .icon-youtube svg { +.icon-facebook img, .icon-linkedin img, .icon-instagram img, .icon-youtube img { height: 20px; width: 20px; margin-right: 5px; @@ -95,7 +95,7 @@ footer { } -.footer-container-flex > div:nth-child(1) svg { +.footer-container-flex > div:nth-child(1) img { position: relative; height: 68px; width: 68px; diff --git a/icons/bhhs_seal_blk.svg b/icons/bhhs_seal_blk.svg index 0e33facc..d1bdb900 100644 --- a/icons/bhhs_seal_blk.svg +++ b/icons/bhhs_seal_blk.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/icons/heartempty.svg b/icons/heartempty.svg index 08620870..5c92e930 100644 --- a/icons/heartempty.svg +++ b/icons/heartempty.svg @@ -1,9 +1,9 @@ - diff --git a/icons/saved-properties.svg b/icons/saved-properties.svg new file mode 100644 index 00000000..d2eed1c9 --- /dev/null +++ b/icons/saved-properties.svg @@ -0,0 +1,9 @@ + diff --git a/scripts/scripts.js b/scripts/scripts.js index ea0427af..659f4e50 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -279,7 +279,7 @@ async function loadLazy(doc) { loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); loadFonts(); - addFavIcon(`${window.hlx.codeBasePath}/styles/favicon.svg`); + addFavIcon(`${window.hlx.codeBasePath}/styles/bhhs_seal_favicon.ico`); sampleRUM('lazy'); sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); sampleRUM.observe(main.querySelectorAll('picture > img')); diff --git a/styles/bhhs_seal_favicon.ico b/styles/bhhs_seal_favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..563f4189fb3786bba595bb3617e38ec1659d114f GIT binary patch literal 413 zcmV;O0b>4%P)2IChoeX8*#<}`gMX>Vq%H2J&==v&=K2@KtZ^}vJ|tm|0z z?4z0%@IlnKF6RrtRZMmXIiKW_jXU$n)N4>ZBR$rh)gTYFhXs>7Gs+va&~*)M)x=4( zSI0IWW7o9kImnf^18Ozc1w=-3^%2L8Ih8+E%{D9fty`Nh$bi}rbn9(jywUE(2>^@9 zn!EMSq)8|)Y*>{AY>GKn(dcvmo8; Date: Thu, 30 Nov 2023 09:23:38 -0600 Subject: [PATCH 3/4] Do not load GM until user needs it. (#176) --- blocks/avm-report/avm-report-delayed.js | 23 --------------- blocks/avm-report/avm-report.css | 3 ++ blocks/avm-report/avm-report.js | 39 ++++++++++++------------- scripts/google-maps/index.js | 21 +++++++++++++ 4 files changed, 42 insertions(+), 44 deletions(-) delete mode 100644 blocks/avm-report/avm-report-delayed.js create mode 100644 scripts/google-maps/index.js diff --git a/blocks/avm-report/avm-report-delayed.js b/blocks/avm-report/avm-report-delayed.js deleted file mode 100644 index 19a7d9a1..00000000 --- a/blocks/avm-report/avm-report-delayed.js +++ /dev/null @@ -1,23 +0,0 @@ -import { fetchPlaceholders } from '../../scripts/aem.js'; - -async function initGooglePlacesAPI() { - const placeholders = await fetchPlaceholders(); - const CALLBACK_FN = 'initAvmPlaces'; - const { mapsApiKey } = placeholders; - const script = document.createElement('script'); - script.type = 'text/javascript'; - script.async = true; - script.defer = true; - script.innerHTML = ` - window.${CALLBACK_FN} = function(){ - const input = document.querySelector('form input[name="avmaddress"]'); - const autocomplete = new google.maps.places.Autocomplete(input, {fields:['formatted_address'], types: ['address']}); - } - const script = document.createElement('script'); - script.src = "https://maps.googleapis.com/maps/api/js?key=${mapsApiKey}&libraries=places&callback=${CALLBACK_FN}"; - document.head.append(script); - `; - document.head.append(script); -} - -initGooglePlacesAPI(); diff --git a/blocks/avm-report/avm-report.css b/blocks/avm-report/avm-report.css index 4f463616..08ad8820 100644 --- a/blocks/avm-report/avm-report.css +++ b/blocks/avm-report/avm-report.css @@ -43,6 +43,9 @@ width: 67px; } +.avm-report.block form button[type="submit"] { + transition: all .3s ease-in; +} @media screen and (min-width: 600px) { .avm-report.block { diff --git a/blocks/avm-report/avm-report.js b/blocks/avm-report/avm-report.js index dc2a0e77..c6a7f5fc 100644 --- a/blocks/avm-report/avm-report.js +++ b/blocks/avm-report/avm-report.js @@ -1,23 +1,8 @@ -import { - showModal, -} from '../../scripts/util.js'; - -let alreadyDeferred = false; -function initGooglePlacesAPI() { - if (alreadyDeferred) { - return; - } - alreadyDeferred = true; - const script = document.createElement('script'); - script.type = 'text/partytown'; - script.innerHTML = ` - const script = document.createElement('script'); - script.type = 'module'; - script.src = '${window.hlx.codeBasePath}/blocks/avm-report/avm-report-delayed.js'; - document.head.append(script); - `; - document.head.append(script); -} +import { showModal } from '../../scripts/util.js'; + +import loadMaps from '../../scripts/google-maps/index.js'; + +let autocompleteAttached = false; export default async function decorate(block) { const form = document.createElement('form'); @@ -32,6 +17,19 @@ export default async function decorate(block) { const addressField = form.querySelector('input[name="avmaddress"]'); + addressField.addEventListener('focus', async () => { + if (!autocompleteAttached) { + loadMaps(); + await window.google.maps.importLibrary('places'); + // eslint-disable-next-line no-unused-vars + const autocomplete = new window.google.maps.places.Autocomplete(addressField, { + fields: ['formatted_address'], + types: ['address'], + }); + autocompleteAttached = true; + } + }); + form.addEventListener('submit', (e) => { e.preventDefault(); const address = addressField.value; @@ -49,5 +47,4 @@ export default async function decorate(block) { window.location = redirect; }); block.append(form); - initGooglePlacesAPI(); } diff --git a/scripts/google-maps/index.js b/scripts/google-maps/index.js new file mode 100644 index 00000000..2838be5d --- /dev/null +++ b/scripts/google-maps/index.js @@ -0,0 +1,21 @@ +import { getMetadata } from '../aem.js'; + +let loaded = false; + +/* eslint-disable */ +const scriptFunc = (key) => { + (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ + key, + v: "weekly", + // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). + // Add other bootstrap parameters as needed, using camel case. + }); +}; +/* eslint-enable */ + +export default function loadMaps() { + if (!loaded) { + loaded = true; + scriptFunc(getMetadata('google-maps-api-key')); + } +} From 2e68f221876afe4bc164fe93469bd7afdcd0180f Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Thu, 30 Nov 2023 09:48:34 -0600 Subject: [PATCH 4/4] Improve the performance of the hero search form. (#177) * Improve the performance of the hero search form. * Fix lint. --- blocks/hero/search/home.css | 7 ++++++- blocks/hero/search/home.js | 16 ++++++++-------- .../shared/search-countries/search-countries.js | 2 +- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/blocks/hero/search/home.css b/blocks/hero/search/home.css index 59117177..7dbedee2 100644 --- a/blocks/hero/search/home.css +++ b/blocks/hero/search/home.css @@ -18,6 +18,11 @@ display: none; } +.hero.block .content .homes .search-bar .search-country-select-parent { + position: relative; + width: 80px; +} + .hero.block .content .homes .search-bar .suggester-input { flex: 1; } @@ -45,7 +50,7 @@ justify-content: center; } -.hero.block .content .homes .search-bar .filter span.icon svg { +.hero.block .content .homes .search-bar .filter span.icon img { height: 22px; width: 22px; color: var(--black); diff --git a/blocks/hero/search/home.js b/blocks/hero/search/home.js index c73af908..069079cc 100644 --- a/blocks/hero/search/home.js +++ b/blocks/hero/search/home.js @@ -1,11 +1,10 @@ -import { decorateIcons } from '../../../scripts/aem.js'; import { build as buildCountrySelect, } from '../../shared/search-countries/search-countries.js'; function observeForm() { const script = document.createElement('script'); - script.type = 'text/partytown'; + script.type = 'module'; script.innerHTML = ` const script = document.createElement('script'); script.type = 'module'; @@ -76,6 +75,7 @@ async function buildForm() {