From 39a5d7c9b8dae8f6c922c1ff79102d521e64b6ce Mon Sep 17 00:00:00 2001 From: Brandon Marshall Date: Thu, 13 Feb 2025 17:08:21 -0800 Subject: [PATCH] PR Changes --- libs/blocks/marketo/marketo-multi.js | 54 ++++++++++++----------- libs/blocks/marketo/marketo.css | 4 +- test/blocks/marketo/marketo-multi.test.js | 9 ++-- 3 files changed, 33 insertions(+), 34 deletions(-) diff --git a/libs/blocks/marketo/marketo-multi.js b/libs/blocks/marketo/marketo-multi.js index a756d2258d..19221332b0 100644 --- a/libs/blocks/marketo/marketo-multi.js +++ b/libs/blocks/marketo/marketo-multi.js @@ -1,4 +1,5 @@ import { createTag } from '../../utils/utils.js'; +import { debounce } from '../../utils/action.js'; const VALIDATION_STEP = { name: '2', @@ -16,24 +17,21 @@ function updateStepDetails(formEl, step, totalSteps) { formEl.classList.remove('show-warnings'); formEl.dataset.step = step; formEl.querySelector('.step-details .step').textContent = `Step ${step} of ${totalSteps}`; + formEl.querySelector('#mktoButton_new').textContent = step === totalSteps ? 'Submit' : 'Next'; } function showPreviousStep(formEl, totalSteps) { const currentStep = parseInt(formEl.dataset.step, 10); const previousStep = currentStep - 1; - const submitButton = formEl.querySelector('#mktoButton_new'); const backBtn = formEl.querySelector('.back-btn'); updateStepDetails(formEl, previousStep, totalSteps); - submitButton.textContent = 'Next'; - if (previousStep === 1) backBtn?.remove(); } const showNextStep = (formEl, currentStep, totalSteps) => { if (currentStep === totalSteps) return; const nextStep = currentStep + 1; - const submitButton = formEl.querySelector('#mktoButton_new'); const stepDetails = formEl.querySelector('.step-details'); if (!stepDetails.querySelector('.back-btn')) { @@ -43,10 +41,6 @@ const showNextStep = (formEl, currentStep, totalSteps) => { } updateStepDetails(formEl, nextStep, totalSteps); - - if (nextStep === totalSteps) { - setTimeout(() => { submitButton.textContent = 'Submit'; }, 200); - } }; export const formValidate = (formEl) => { @@ -62,26 +56,35 @@ export const formValidate = (formEl) => { return currentStep === totalSteps; }; -export const onRender = (form, totalSteps) => { - const formEl = form.getFormElem().get(0); - if (!formEl) return; +function setValidationSteps(formEl, totalSteps) { + formEl.querySelectorAll('.mktoFormRowTop').forEach((row) => { + const rowAttr = row.getAttribute('data-mktofield') || row.getAttribute('data-mkto_vis_src'); + const step = VALIDATION_STEP[rowAttr] ? Math.min(VALIDATION_STEP[rowAttr], totalSteps) : 1; + row.setAttribute('data-validate', step); + }); +} +function onRender(formEl, totalSteps) { + const currentStep = parseInt(formEl.dataset.step, 10); const submitButton = formEl.querySelector('#mktoButton_new'); - if (submitButton && formEl.dataset.step === '1') submitButton.textContent = 'Next'; + if (submitButton) submitButton.textContent = currentStep === totalSteps ? 'Submit' : 'Next'; + formEl.querySelector('.step-details .step').textContent = `Step ${currentStep} of ${totalSteps}`; - if (!formEl.querySelector('.step-details')) { - const stepEl = createTag('p', { class: 'step' }, `Step 1 of ${totalSteps}`); - const stepDetails = createTag('div', { class: 'step-details' }, stepEl); - formEl.append(stepDetails); - } + setValidationSteps(formEl, totalSteps); +} + +const readyForm = (form, totalSteps) => { + const formEl = form.getFormElem().get(0); + form.onValidate(() => formValidate(formEl)); + + const stepEl = createTag('p', { class: 'step' }, `Step 1 of ${totalSteps}`); + const stepDetails = createTag('div', { class: 'step-details' }, stepEl); + formEl.append(stepDetails); - setTimeout(() => { - formEl.querySelectorAll('.mktoFormRowTop').forEach((row) => { - const rowAttr = row.getAttribute('data-mktofield') || row.getAttribute('data-mkto_vis_src'); - const step = VALIDATION_STEP[rowAttr] ? Math.min(VALIDATION_STEP[rowAttr], totalSteps) : 1; - row.setAttribute('data-validate', step); - }); - }, 100); + const debouncedOnRender = debounce(() => onRender(formEl, totalSteps), 10); + const observer = new MutationObserver(debouncedOnRender); + observer.observe(formEl, { childList: true, subtree: true }); + debouncedOnRender(); }; export default (el) => { @@ -91,6 +94,5 @@ export default (el) => { formEl.dataset.step = 1; const { MktoForms2 } = window; - MktoForms2.whenRendered((form) => { onRender(form, totalSteps); }); - MktoForms2.whenReady((form) => { form.onValidate(() => formValidate(formEl)); }); + MktoForms2.whenReady((form) => { readyForm(form, totalSteps); }); }; diff --git a/libs/blocks/marketo/marketo.css b/libs/blocks/marketo/marketo.css index 306f70909f..53a47136db 100644 --- a/libs/blocks/marketo/marketo.css +++ b/libs/blocks/marketo/marketo.css @@ -128,9 +128,9 @@ } .marketo.multi-step .step-details button { - background: none!important; + background: none; border: none; - padding: 0!important; + padding: 0; text-decoration: underline; cursor: pointer; color: var(--link-color-dark); diff --git a/test/blocks/marketo/marketo-multi.test.js b/test/blocks/marketo/marketo-multi.test.js index 51599b5b6b..68a9ff9683 100644 --- a/test/blocks/marketo/marketo-multi.test.js +++ b/test/blocks/marketo/marketo-multi.test.js @@ -11,14 +11,11 @@ describe('marketo multi-step', () => { beforeEach(() => { document.body.innerHTML = innerHTML; clock = sinon.useFakeTimers(); - window.MktoForms2 = { - whenRendered: stub().callsFake((callback) => callback({ getFormElem: () => ({ get: () => document.querySelector('form') }) })), - whenReady: stub().callsFake((callback) => callback({ onValidate: () => {} })), - }; + window.MktoForms2 = { whenReady: stub().callsFake((callback) => callback({ onValidate: () => {}, getFormElem: () => ({ get: () => document.querySelector('form') }) })) }; const el = document.querySelector('.marketo'); init(el); - clock.tick(200); + clock.tick(300); }); afterEach(() => { @@ -32,7 +29,6 @@ describe('marketo multi-step', () => { expect(stepDetails).to.exist; expect(stepDetails.textContent).to.equal('Step 1 of 2'); - expect(window.MktoForms2.whenRendered.calledOnce).to.be.true; expect(window.MktoForms2.whenReady.calledOnce).to.be.true; const step1 = el.querySelector('.mktoFormRowTop[data-validate="1"]'); @@ -77,5 +73,6 @@ describe('marketo multi-step', () => { expect(formEl.dataset.step).to.equal('1'); expect(formEl.querySelector('.back-btn')).to.be.null; + expect(formEl.querySelector('.step-details .step').textContent).to.equal('Step 1 of 2'); }); });