From bf57bab672990933e6e22504952093bbc4043175 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Fri, 17 Nov 2023 09:48:16 +0530 Subject: [PATCH 1/3] Updated the sidebar-rte block with sidebar bug fixes --- blocks/forms/forms.js | 26 +++++++-------------- blocks/sidebar-form/sidebar-form.js | 27 ++++++++-------------- blocks/sidebar-rte/sidebar-rte.css | 29 +++++++++++++++++++++++ blocks/sidebar-rte/sidebar-rte.js | 20 ++++++++++++++++ blocks/tabs/tabs.js | 1 - scripts/aem.js | 34 +++++++++++++++++++++++++++ scripts/delayed.js | 5 ++-- styles/Typo.css | 17 ++++++++++++++ styles/template.css | 36 ----------------------------- 9 files changed, 119 insertions(+), 76 deletions(-) create mode 100644 blocks/sidebar-rte/sidebar-rte.css create mode 100644 blocks/sidebar-rte/sidebar-rte.js diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index 18eaf384..78058457 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -1,25 +1,15 @@ -import { readBlockConfig } from '../../scripts/aem.js'; +import { passFormConfig, extractTableData } from '../../scripts/aem.js'; let formConfig = {}; -export default function decorate(block) { - formConfig = readBlockConfig(block); +export default async function decorate(block) { + const table = block.querySelector('table'); + formConfig = await extractTableData(table); const form = document.createElement('div'); form.id = formConfig.target; form.classList.add('content'); - block.textContent = ''; - block.append(form); -} - -export function isForm() { - return !!formConfig.target; -} - -export function buildForm(hbspt) { - hbspt.forms.create({ - region: formConfig.region, - portalId: formConfig.portalid, - formId: formConfig.formid, - target: `#${formConfig.target}`, - }); + if (table) { + table.replaceWith(form); + } + passFormConfig(formConfig); } diff --git a/blocks/sidebar-form/sidebar-form.js b/blocks/sidebar-form/sidebar-form.js index 1058fd1e..78058457 100644 --- a/blocks/sidebar-form/sidebar-form.js +++ b/blocks/sidebar-form/sidebar-form.js @@ -1,24 +1,15 @@ -import { readBlockConfig } from '../../scripts/aem.js'; +import { passFormConfig, extractTableData } from '../../scripts/aem.js'; let formConfig = {}; -export default function decorate(block) { - formConfig = readBlockConfig(block); +export default async function decorate(block) { + const table = block.querySelector('table'); + formConfig = await extractTableData(table); const form = document.createElement('div'); form.id = formConfig.target; - block.textContent = ''; - block.append(form); -} - -export function isForm() { - return !!formConfig.target; -} - -export function buildForm(hbspt) { - hbspt.forms.create({ - region: formConfig.region, - portalId: formConfig.portalid, - formId: formConfig.formid, - target: `#${formConfig.target}`, - }); + form.classList.add('content'); + if (table) { + table.replaceWith(form); + } + passFormConfig(formConfig); } diff --git a/blocks/sidebar-rte/sidebar-rte.css b/blocks/sidebar-rte/sidebar-rte.css new file mode 100644 index 00000000..b7379544 --- /dev/null +++ b/blocks/sidebar-rte/sidebar-rte.css @@ -0,0 +1,29 @@ +.sidebar-rte { + padding: 7%; + margin-top: 25px; + background-color: transparent; + border: none; + box-shadow: 0 2px 15px rgba(0 0 0 / 10%); + border-radius: 4px; + display: block; +} + +.sidebar-rte ul li::before { + content: ''!important; +} + +.sidebar-rte ul li { + padding-left: 0.5em 0 0.5em 0!important; + font-size: 16px!important; + color: #0d233e!important; +} + +.sidebar-rte ul li a { + font-size: 16px!important; + color: #0d233e!important; +} + +.sidebar-rte img { + width: 100%; + max-width: 100%; +} diff --git a/blocks/sidebar-rte/sidebar-rte.js b/blocks/sidebar-rte/sidebar-rte.js new file mode 100644 index 00000000..763ce81e --- /dev/null +++ b/blocks/sidebar-rte/sidebar-rte.js @@ -0,0 +1,20 @@ +export default function decorate(block) { + if (block.classList.contains('hyperlink')) { + const images = block.querySelectorAll('picture'); + images.forEach((image) => { + const { parentElement } = image; + const { nextSibling } = parentElement; + if (nextSibling) { + const nextNextSibling = nextSibling.nextSibling; + if (nextNextSibling) { + const link = nextNextSibling.querySelector('a'); + if (link && link.classList.contains('secondary')) { + link.innerHTML = ''; // Clear the existing content of the link + const imageClone = image.cloneNode(true); // Clone the image + link.appendChild(imageClone); // Insert the cloned image into the link + } + } + } + }); + } +} diff --git a/blocks/tabs/tabs.js b/blocks/tabs/tabs.js index 1261fc8f..d33c06ba 100644 --- a/blocks/tabs/tabs.js +++ b/blocks/tabs/tabs.js @@ -19,7 +19,6 @@ function activeFirstElements(content) { export default function decorate(block) { const tabComponent = document.createElement('div'); tabComponent.className = 'mmg-tabs'; - tabComponent.classList.add('outer'); const ul = document.createElement('div'); ul.className = 'tablist'; const tabContent = document.createElement('div'); diff --git a/scripts/aem.js b/scripts/aem.js index 92c52e89..57647c54 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -21,6 +21,7 @@ * @param {string} data.target subject of the checkpoint event, * for instance the href of a link, or a search term */ +const formConfigData = []; function sampleRUM(checkpoint, data = {}) { sampleRUM.defer = sampleRUM.defer || []; const defer = (fnname) => { @@ -254,6 +255,35 @@ async function loadCSS(href) { }); } +function extractTableData(table) { + const tableData = {}; + table.querySelectorAll('tbody tr').forEach((row) => { + const key = row.cells[0].textContent.toLowerCase(); + const value = row.cells[1].textContent; + tableData[key] = value; + }); + return tableData; +} + +function passFormConfig(config) { + formConfigData.push(config); +} + +function isForm() { + return formConfigData.length; +} + +function buildForm(hbspt) { + formConfigData.forEach((formData) => { + hbspt.forms.create({ + region: formData.region, + portalId: formData.portalid, + formId: formData.formid, + target: `#${formData.target}`, + }); + }); +} + /** * Loads a non module JS file. * @param {string} src URL to the JS file @@ -718,4 +748,8 @@ export { updateSectionsStatus, waitForLCP, capitalizeWords, + passFormConfig, + isForm, + buildForm, + extractTableData, }; diff --git a/scripts/delayed.js b/scripts/delayed.js index c28753b5..1f84e209 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,6 +1,5 @@ // eslint-disable-next-line import/no-cycle -import { sampleRUM } from './aem.js'; -import { buildForm, isForm } from '../blocks/forms/forms.js'; +import { sampleRUM, buildForm, isForm } from './aem.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); @@ -50,7 +49,7 @@ function loadHubSpot() { hsScriptEl.src = '//js.hsforms.net/forms/v2.js'; document.querySelector('head').append(hsScriptEl); hsScriptEl.addEventListener('load', () => { - buildForm(hbspt); // eslint-disable-line + buildForm(hbspt); // eslint-disable-line }); } diff --git a/styles/Typo.css b/styles/Typo.css index 43fd7ebb..f45f53c4 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -625,6 +625,23 @@ input[type="submit"] { width: auto } +.button.secondary { + background-color: transparent; + padding: 0; + border: none; + color: #ec8f2d; + text-transform: none; + font-style: normal; + transition: all .3s ease-in-out; +} + +.button.secondary:hover { + border: none; + color: #ec8f2d; + text-decoration: underline; + transition: all .3s ease-in-out; +} + .blog-pagination a:hover, .button:hover, .cta_button:hover, diff --git a/styles/template.css b/styles/template.css index d67df59c..8a831d91 100644 --- a/styles/template.css +++ b/styles/template.css @@ -503,42 +503,6 @@ body.full-width #main { width: 100% } -#references { - clear: both; - font-size: 12px; - padding-top: 30px; - width: 100% -} - -#references h6 { - border-top: 1px solid #ccc; - color: inherit; - padding: 20px 0 0 -} - -#references ol { - counter-reset: li; - list-style: none -} - -#references ol li { - line-height: normal; - margin-left: 0; - padding: .4em 0 .4em 1em; - position: relative -} - -#references ol li::before { - color: #000; - content: counter(li); - counter-increment: li; - font-size: 1em; - left: 0; - line-height: 100%; - position: absolute; - top: 10% -} - #sidebar { float: right; font-size: 16px; From 4d20e9f5c81690c101f6a15600573dd54c862e68 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Fri, 17 Nov 2023 11:08:59 +0530 Subject: [PATCH 2/3] Minor bugs fixed --- blocks/sidebar-rte/sidebar-rte.css | 4 ++++ blocks/sidebar-rte/sidebar-rte.js | 5 ++--- styles/Typo.css | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/blocks/sidebar-rte/sidebar-rte.css b/blocks/sidebar-rte/sidebar-rte.css index b7379544..4976808a 100644 --- a/blocks/sidebar-rte/sidebar-rte.css +++ b/blocks/sidebar-rte/sidebar-rte.css @@ -27,3 +27,7 @@ width: 100%; max-width: 100%; } + +.sidebar-rte .button { + width: 100%; +} diff --git a/blocks/sidebar-rte/sidebar-rte.js b/blocks/sidebar-rte/sidebar-rte.js index 763ce81e..f120024f 100644 --- a/blocks/sidebar-rte/sidebar-rte.js +++ b/blocks/sidebar-rte/sidebar-rte.js @@ -9,9 +9,8 @@ export default function decorate(block) { if (nextNextSibling) { const link = nextNextSibling.querySelector('a'); if (link && link.classList.contains('secondary')) { - link.innerHTML = ''; // Clear the existing content of the link - const imageClone = image.cloneNode(true); // Clone the image - link.appendChild(imageClone); // Insert the cloned image into the link + link.innerHTML = ''; + link.appendChild(image); } } } diff --git a/styles/Typo.css b/styles/Typo.css index c2a6d377..f45f53c4 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -247,7 +247,7 @@ body { a { background: transparent; - color: #ec8f2d; + color: var(--primary-color); text-decoration: none; } From a6346b8a63f6f56730aed0506aa5b02431cd750c Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 21 Nov 2023 10:28:48 +0530 Subject: [PATCH 3/3] Updated the code with latest redirect url --- scripts/aem.js | 8 ++++++-- styles/Typo.css | 8 ++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/scripts/aem.js b/scripts/aem.js index 57647c54..8380180e 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -275,12 +275,16 @@ function isForm() { function buildForm(hbspt) { formConfigData.forEach((formData) => { - hbspt.forms.create({ + const config = { region: formData.region, portalId: formData.portalid, formId: formData.formid, target: `#${formData.target}`, - }); + }; + if (formData.redirecturl) { + config.redirectUrl = formData.redirecturl; + } + hbspt.forms.create(config); }); } diff --git a/styles/Typo.css b/styles/Typo.css index ff679400..fd9c931a 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -509,6 +509,7 @@ body.purple #content ul li::before { button, input, optgroup, +.hs-form input[type="submit"], select, textarea { color: inherit; @@ -629,6 +630,7 @@ textarea:focus { button, input[type="button"], input[type="reset"], +.hs-form input[type="submit"], input[type="submit"] { background-color: var(--primary-color); border-radius: 5px; @@ -674,6 +676,7 @@ input[type="submit"] { .hs-button:hover, .readmore:hover, button:hover, +.hs-form input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { @@ -1582,3 +1585,8 @@ form.hs-form .hs-input[type="checkbox"] { .hs-blog-social-share-list .hs-blog-social-share-item::before { content: ''!important; } + +.block.subscribe .hs_submit { + padding-bottom: 0 +} +