diff --git a/libs/blocks/marketo/marketo.css b/libs/blocks/marketo/marketo.css index 5d468a288f..130a6848c7 100644 --- a/libs/blocks/marketo/marketo.css +++ b/libs/blocks/marketo/marketo.css @@ -4,18 +4,25 @@ --marketo-form-border: #6E6E6E; --marketo-form-error: #D7373F; --marketo-form-selected: #0265DC; + --marketo-form-placeholder-height: calc(78px * 3 + 57px); /* 3 rows + submit */ + --marketo-form-min-height: 215px; + --marketo-form-max-height: 10000px; } /* stylelint-disable selector-class-pattern */ .marketo .marketo-form-wrapper { box-sizing: border-box; max-width: 600px; - min-height: 400px; + min-height: var(--marketo-form-min-height); margin: 0 auto; padding: var(--spacing-l) 30px; background-color: var(--marketo-form-background); } +.marketo.loading form { + min-height: var(--marketo-form-placeholder-height); +} + .marketo .marketo-title { font-size: 28px; font-weight: bold; @@ -29,25 +36,37 @@ } .marketo .mktoForm { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + column-gap: 4.6%; + align-items: flex-start; + max-height: var(--marketo-form-placeholder-height); + overflow: hidden; font-size: 16px; font-weight: bold; width: 100%!important; + visibility: hidden; + opacity: 0; } -.marketo form.mktoForm--fade-in { +.marketo.success .marketo-title, +.marketo.success .marketo-description, +.marketo.success form.mktoVisible.mktoForm { + display: none; +} + +.marketo form.mktoForm.mktoForm--fade-in { + transition: opacity 0.5s ease-in, max-height 0.5s ease-in; visibility: hidden; opacity: 0; } -.marketo form.mktoForm--fade-in.mktoVisible { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - column-gap: 4.6%; - align-items: flex-start; +.marketo form.mktoForm.mktoForm--fade-in.mktoVisible { + max-height: var(--marketo-form-max-height); + overflow: visible; visibility: visible; opacity: 1; - transition: opacity 1s ease-in, height 1s ease-in; } .marketo .mktoFormRow.mktoFormRowTop.comments, diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index 1602d0694a..d558cfcdba 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -13,9 +13,16 @@ /* * Marketo Form */ -import { parseEncodedConfig, loadScript, localizeLink, createTag, createIntersectionObserver } from '../../utils/utils.js'; - -const ROOT_MARGIN = 1000; +import { + parseEncodedConfig, + loadScript, + loadLink, + localizeLink, + createTag, + createIntersectionObserver, +} from '../../utils/utils.js'; + +const ROOT_MARGIN = 50; const FORM_ID = 'form id'; const BASE_URL = 'marketo host'; const MUNCHKIN_ID = 'marketo munckin'; @@ -61,6 +68,7 @@ export const decorateURL = (destination, baseURL = window.location) => { return destinationUrl.href; } catch (e) { + /* c8 ignore next 4 */ window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`); } @@ -84,9 +92,11 @@ export const setPreferences = (formData) => { }; export const formSuccess = (formEl, formData) => { + const el = formEl.closest('.marketo'); const parentModal = formEl?.closest('.dialog-modal'); const mktoSubmit = new Event('mktoSubmit'); + el.classList.add('success'); window.dispatchEvent(mktoSubmit); window.mktoSubmitted = true; @@ -115,7 +125,9 @@ export const formSuccess = (formEl, formData) => { const readyForm = (form, formData) => { const formEl = form.getFormElem().get(0); + const el = formEl.closest('.marketo'); const isDesktop = matchMedia('(min-width: 900px)'); + el.classList.remove('loading'); formEl.addEventListener('focus', ({ target }) => { /* c8 ignore next 9 */ @@ -216,6 +228,9 @@ export default function init(el) { fragment.append(formWrapper); el.replaceChildren(fragment); + el.classList.add('loading'); + + loadLink(`https://${baseURL}`, { rel: 'dns-prefetch' }); createIntersectionObserver({ el, diff --git a/test/blocks/marketo/marketo.test.html b/test/blocks/marketo/marketo.test.html index 862ee6f6e1..20556d343a 100644 --- a/test/blocks/marketo/marketo.test.html +++ b/test/blocks/marketo/marketo.test.html @@ -65,7 +65,7 @@

Fill out the form to view the repo import { expect } from '@esm-bundle/chai'; import { stub } from 'sinon'; import { waitForElement } from '../../helpers/waitfor.js'; - import { loadScript, parseEncodedConfig } from '../../../libs/utils/utils.js'; + import { loadScript, loadLink, parseEncodedConfig } from '../../../libs/utils/utils.js'; import init, { setPreferences, formValidate, formSuccess } from '../../../libs/blocks/marketo/marketo.js'; runTests(() => { @@ -86,6 +86,10 @@

Fill out the form to view the repo expect(desc).to.exist; }); + it('preload Marketo', async () => { + expect(loadLink.calledOnce).to.be.true; + }); + it('loads Marketo script', async () => { expect(loadScript.calledOnce).to.be.true; expect(loadScript.calledWith('https://engage.adobe.com/js/forms2/js/forms2.min.js')).to.be.true; diff --git a/test/blocks/marketo/mocks/marketo-utils.js b/test/blocks/marketo/mocks/marketo-utils.js index 0c98787010..9cf1cf9f9a 100644 --- a/test/blocks/marketo/mocks/marketo-utils.js +++ b/test/blocks/marketo/mocks/marketo-utils.js @@ -63,3 +63,7 @@ export function createIntersectionObserver({ el, callback /* , once = true, opti } export const localizeLink = (href) => href; + +export const loadLink = stub().returns(new Promise((resolve) => { + resolve(); +}));