From 7934a7d2bfc34a4bb0d96187f3ced8e0d51db90d Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Mon, 12 Jun 2023 13:31:50 +0530 Subject: [PATCH 01/14] 329 - Accordian till button added --- .../multicolor-accordion.css | 79 +++++++++++++++++++ .../multicolor-accordion.js | 50 ++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 blocks/multicolor-accordion/multicolor-accordion.css create mode 100644 blocks/multicolor-accordion/multicolor-accordion.js diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css new file mode 100644 index 00000000..eb7ccb8f --- /dev/null +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -0,0 +1,79 @@ +.accordion-item { + padding: 0 16px; + margin-bottom: 20px; +} + +.accordion-trigger { + display: flex; + align-items: center; + cursor: pointer; + line-height: 40px; + font-size: 34px; + height: 80px; + color: var(--c-white); + font-weight: 700; +} + +.multicolor-accordion>div:nth-child(odd) { + background: var(--c-dark-plum); +} + +.multicolor-accordion>div:nth-child(even) { + background: var(--c-dark-blue); + } + + .accordion-trigger .details-button { + background: var(--c-light-teal); + color: var(--c-dark-plum); + border-radius: 16px; + font-weight: 600; + text-transform: uppercase; + padding: 8px 0; + cursor: pointer; + width: 9%; + font-size: 15px; + border: 1px solid var(--c-light-teal); + transition: 0.5s; + } + + .accordion-trigger .details-button:hover { + border: 1px solid var(--c-light-teal); + background: none; + color: var(--c-light-teal); + } + +.accordion-trigger > p { + display: inline-flex; + width: calc(100% - 40px); +} + +.accordion-content { + transition: max-height .3333s; + max-height: 0; + overflow: hidden; + color: var(--c-white); +} + +[aria-expanded] .accordion-content { + max-height: 1000px; +} + +.accordion-trigger .icon { + padding: 12px; + border-radius: 50%; + border: 1px solid; + width: 12px; + height: 12px; +} + +.accordion-trigger .icon svg { + display: block; + height: 100%; + width: 100%; + transform: rotate(90deg); + transition: transform .3333s cubic-bezier(0.66,-0.1,0.74,0.73) +} + +[aria-expanded] .accordion-trigger .icon svg { + transform: rotate(270deg); +} diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js new file mode 100644 index 00000000..80dbf0c5 --- /dev/null +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -0,0 +1,50 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; + +export default async function decorate(block) { + const accordionItems = block.querySelectorAll(':scope > div > div'); + accordionItems.forEach((accordionItem) => { + const nodes = accordionItem.children; + + const titleText = nodes[0]; + const rest = Array.prototype.slice.call(nodes, 1); + + const titleDiv = document.createElement('div'); + const detailsBtn = document.createElement('button'); + detailsBtn.innerText = 'Details'; + detailsBtn.className = 'details-button'; + titleDiv.append(titleText, detailsBtn); + + titleDiv.classList.add('accordion-trigger'); + + const content = document.createElement('div'); + content.classList.add('accordion-content'); + rest.forEach((elem) => { + content.appendChild(elem); + }); + + const newItem = document.createElement('div'); + newItem.appendChild(titleDiv); + newItem.appendChild(content); + + newItem.classList.add('accordion-item'); + decorateIcons(newItem); + + accordionItem.replaceWith(newItem); + }); + + const triggers = block.querySelectorAll('.accordion-trigger'); + triggers.forEach((trigger) => { + trigger.addEventListener('click', () => { + const openAttribute = 'aria-expanded'; + const wasOpen = trigger.parentElement.hasAttribute(openAttribute); + + triggers.forEach((_trigger) => { + _trigger.parentElement.removeAttribute('aria-expanded'); + }); + + if (!wasOpen) { + trigger.parentElement.setAttribute('aria-expanded', ''); + } + }); + }); +} From 332eb63229eb4822750a4577bb59ecc40f765816 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Tue, 13 Jun 2023 19:37:36 +0530 Subject: [PATCH 02/14] 329 - Multicolor accordian implementation --- .../multicolor-accordion.css | 39 ++++++++----------- .../multicolor-accordion.js | 9 +++-- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index eb7ccb8f..ed4c41d0 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -22,7 +22,7 @@ background: var(--c-dark-blue); } - .accordion-trigger .details-button { +.accordion-trigger .details-button { background: var(--c-light-teal); color: var(--c-dark-plum); border-radius: 16px; @@ -36,12 +36,25 @@ transition: 0.5s; } - .accordion-trigger .details-button:hover { +.accordion-trigger .details-button:hover { border: 1px solid var(--c-light-teal); background: none; color: var(--c-light-teal); } + .accordion-trigger .close-button { + border: 1px solid var(--c-light-teal); + background: none; + color: var(--c-light-teal); + border-radius: 16px; + font-weight: 600; + text-transform: uppercase; + padding: 8px 0; + cursor: pointer; + width: 9%; + font-size: 15px; + } + .accordion-trigger > p { display: inline-flex; width: calc(100% - 40px); @@ -56,24 +69,4 @@ [aria-expanded] .accordion-content { max-height: 1000px; -} - -.accordion-trigger .icon { - padding: 12px; - border-radius: 50%; - border: 1px solid; - width: 12px; - height: 12px; -} - -.accordion-trigger .icon svg { - display: block; - height: 100%; - width: 100%; - transform: rotate(90deg); - transition: transform .3333s cubic-bezier(0.66,-0.1,0.74,0.73) -} - -[aria-expanded] .accordion-trigger .icon svg { - transform: rotate(270deg); -} +} \ No newline at end of file diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 80dbf0c5..fe800b25 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -1,5 +1,3 @@ -import { decorateIcons } from '../../scripts/lib-franklin.js'; - export default async function decorate(block) { const accordionItems = block.querySelectorAll(':scope > div > div'); accordionItems.forEach((accordionItem) => { @@ -27,7 +25,6 @@ export default async function decorate(block) { newItem.appendChild(content); newItem.classList.add('accordion-item'); - decorateIcons(newItem); accordionItem.replaceWith(newItem); }); @@ -39,10 +36,16 @@ export default async function decorate(block) { const wasOpen = trigger.parentElement.hasAttribute(openAttribute); triggers.forEach((_trigger) => { + const getDetailsBtn = _trigger.children[1]; + getDetailsBtn.className = 'details-button'; + getDetailsBtn.innerText = 'Details'; _trigger.parentElement.removeAttribute('aria-expanded'); }); if (!wasOpen) { + const closeBtn = trigger.children[1]; + closeBtn.className = 'close-button'; + closeBtn.innerText = 'close'; trigger.parentElement.setAttribute('aria-expanded', ''); } }); From d86babacca61c645f28b7f531bf43eca0491ac6d Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Fri, 16 Jun 2023 14:41:54 +0530 Subject: [PATCH 03/14] 329 - Resolving comments --- .../multicolor-accordion.css | 18 +++---- .../multicolor-accordion.js | 48 +++++++++++-------- 2 files changed, 35 insertions(+), 31 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index ed4c41d0..ae0f2ab8 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -22,9 +22,7 @@ background: var(--c-dark-blue); } -.accordion-trigger .details-button { - background: var(--c-light-teal); - color: var(--c-dark-plum); + .accordion-trigger .btn { border-radius: 16px; font-weight: 600; text-transform: uppercase; @@ -34,6 +32,12 @@ font-size: 15px; border: 1px solid var(--c-light-teal); transition: 0.5s; + margin-left: auto; + } + +.accordion-trigger .details-button { + background: var(--c-light-teal); + color: var(--c-dark-plum); } .accordion-trigger .details-button:hover { @@ -43,16 +47,8 @@ } .accordion-trigger .close-button { - border: 1px solid var(--c-light-teal); background: none; color: var(--c-light-teal); - border-radius: 16px; - font-weight: 600; - text-transform: uppercase; - padding: 8px 0; - cursor: pointer; - width: 9%; - font-size: 15px; } .accordion-trigger > p { diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index fe800b25..a5adc588 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -1,17 +1,31 @@ +function setLabel(label, btnText, btn) { + btn.className = 'btn details-button'; + if (label === 'Button Label') { + btn.innerText = btnText; + } else { + btn.innerText = 'Details'; + } +} + export default async function decorate(block) { - const accordionItems = block.querySelectorAll(':scope > div > div'); + const accordionItems = block.querySelectorAll(':scope > div'); accordionItems.forEach((accordionItem) => { const nodes = accordionItem.children; + const buttonLabelRow = [...block.lastElementChild.children]; + const btnLabel = buttonLabelRow[0].textContent; + const btnLabelText = buttonLabelRow[1].textContent; + buttonLabelRow[0].className = 'config-hidden'; + const titleText = nodes[0]; - const rest = Array.prototype.slice.call(nodes, 1); + const rest = [].slice.call(nodes, 1); const titleDiv = document.createElement('div'); const detailsBtn = document.createElement('button'); - detailsBtn.innerText = 'Details'; - detailsBtn.className = 'details-button'; - titleDiv.append(titleText, detailsBtn); + setLabel(btnLabel, btnLabelText, detailsBtn); + + titleDiv.append(titleText, detailsBtn); titleDiv.classList.add('accordion-trigger'); const content = document.createElement('div'); @@ -27,27 +41,21 @@ export default async function decorate(block) { newItem.classList.add('accordion-item'); accordionItem.replaceWith(newItem); - }); - const triggers = block.querySelectorAll('.accordion-trigger'); - triggers.forEach((trigger) => { - trigger.addEventListener('click', () => { + titleDiv.addEventListener('click', () => { const openAttribute = 'aria-expanded'; - const wasOpen = trigger.parentElement.hasAttribute(openAttribute); - - triggers.forEach((_trigger) => { - const getDetailsBtn = _trigger.children[1]; - getDetailsBtn.className = 'details-button'; - getDetailsBtn.innerText = 'Details'; - _trigger.parentElement.removeAttribute('aria-expanded'); - }); + const wasOpen = titleDiv.parentElement.hasAttribute(openAttribute); + titleDiv.parentElement.toggleAttribute(openAttribute); if (!wasOpen) { - const closeBtn = trigger.children[1]; - closeBtn.className = 'close-button'; + const closeBtn = titleDiv.children[1]; + closeBtn.className = 'btn close-button'; closeBtn.innerText = 'close'; - trigger.parentElement.setAttribute('aria-expanded', ''); + } else { + setLabel(btnLabel, btnLabelText, detailsBtn); } }); }); + const configHidden = block.querySelector('.config-hidden'); + configHidden.parentElement.remove(); } From bf10d46bde9971c3e1889b02ace6d1544fc5bacc Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Fri, 23 Jun 2023 19:23:35 +0530 Subject: [PATCH 04/14] 329 - Requested changes for accordian --- .../multicolor-accordion.css | 37 ++++--- .../multicolor-accordion.js | 96 ++++++++++--------- 2 files changed, 75 insertions(+), 58 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index ae0f2ab8..fc8e6edd 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -1,17 +1,18 @@ .accordion-item { padding: 0 16px; - margin-bottom: 20px; + margin: 0 0 20px; } .accordion-trigger { display: flex; align-items: center; cursor: pointer; - line-height: 40px; - font-size: 34px; height: 80px; + font-size: 34px; + width: 100%; color: var(--c-white); font-weight: 700; + border: none; } .multicolor-accordion>div:nth-child(odd) { @@ -20,36 +21,36 @@ .multicolor-accordion>div:nth-child(even) { background: var(--c-dark-blue); - } +} - .accordion-trigger .btn { +.accordion-trigger .btn { border-radius: 16px; font-weight: 600; text-transform: uppercase; - padding: 8px 0; + padding: 8px; cursor: pointer; - width: 9%; + width: 8%; font-size: 15px; border: 1px solid var(--c-light-teal); transition: 0.5s; margin-left: auto; - } +} .accordion-trigger .details-button { background: var(--c-light-teal); color: var(--c-dark-plum); - } +} .accordion-trigger .details-button:hover { border: 1px solid var(--c-light-teal); background: none; color: var(--c-light-teal); - } +} - .accordion-trigger .close-button { +.accordion-trigger .close-button { background: none; color: var(--c-light-teal); - } +} .accordion-trigger > p { display: inline-flex; @@ -57,12 +58,18 @@ } .accordion-content { - transition: max-height .3333s; + transition: max-height 0.3333s; max-height: 0; overflow: hidden; color: var(--c-white); } -[aria-expanded] .accordion-content { - max-height: 1000px; +@media (max-width: 600px) { + .accordion-trigger { + font-size: 25px; + } + + .accordion-trigger .btn { + display: none; + } } \ No newline at end of file diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index a5adc588..bfdec3cc 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -1,61 +1,71 @@ -function setLabel(label, btnText, btn) { - btn.className = 'btn details-button'; +function setLabel(label, btn, btnText) { + const checkClass = btn.classList.contains('close-button'); if (label === 'Button Label') { btn.innerText = btnText; } else { btn.innerText = 'Details'; + if (checkClass) { + btn.innerText = 'Close'; + } } } export default async function decorate(block) { - const accordionItems = block.querySelectorAll(':scope > div'); - accordionItems.forEach((accordionItem) => { - const nodes = accordionItem.children; - - const buttonLabelRow = [...block.lastElementChild.children]; - const btnLabel = buttonLabelRow[0].textContent; - const btnLabelText = buttonLabelRow[1].textContent; - buttonLabelRow[0].className = 'config-hidden'; - - const titleText = nodes[0]; - const rest = [].slice.call(nodes, 1); - - const titleDiv = document.createElement('div'); - const detailsBtn = document.createElement('button'); - - setLabel(btnLabel, btnLabelText, detailsBtn); - - titleDiv.append(titleText, detailsBtn); - titleDiv.classList.add('accordion-trigger'); - - const content = document.createElement('div'); - content.classList.add('accordion-content'); - rest.forEach((elem) => { - content.appendChild(elem); - }); + const accordionItems = Array.from(block.children); + const buttonLabelRow = Array.from(block.lastElementChild.children); + const btnLabel = buttonLabelRow[0].textContent; + const btnLabelText = buttonLabelRow[1].textContent; + const btnLabelTextArr = btnLabelText.split(','); + buttonLabelRow[0].classList.add('config-hidden'); + let accordionItemOpen = null; + accordionItems.forEach((accordionItem, index) => { + const openAttribute = 'aria-expanded'; + const hiddenAttribute = 'aria-hidden'; + const nodes = Array.from(accordionItem.children); + const buttonWrapper = document.createElement('button'); + buttonWrapper.append(nodes[0]); + const span = document.createElement('span'); + span.append(btnLabelTextArr[0]); + span.className = 'btn details-button'; + setLabel(btnLabel, span, btnLabelTextArr[0]); + buttonWrapper.append(nodes[0], span); + buttonWrapper.classList.add('accordion-trigger'); + buttonWrapper.setAttribute(openAttribute, false, 'aria-controls', `panel${index + 1}`); + nodes[1].className = 'accordion-content'; const newItem = document.createElement('div'); - newItem.appendChild(titleDiv); - newItem.appendChild(content); - + newItem.append(buttonWrapper, nodes[1]); newItem.classList.add('accordion-item'); - + newItem.setAttribute(hiddenAttribute, true); + newItem.id = `panel${index + 1}`; accordionItem.replaceWith(newItem); - titleDiv.addEventListener('click', () => { - const openAttribute = 'aria-expanded'; - const wasOpen = titleDiv.parentElement.hasAttribute(openAttribute); - titleDiv.parentElement.toggleAttribute(openAttribute); - - if (!wasOpen) { - const closeBtn = titleDiv.children[1]; - closeBtn.className = 'btn close-button'; - closeBtn.innerText = 'close'; - } else { - setLabel(btnLabel, btnLabelText, detailsBtn); + buttonWrapper.addEventListener('click', () => { + if (accordionItemOpen) { + const panelClosed = accordionItemOpen.nextElementSibling; + panelClosed.style.maxHeight = null; + accordionItemOpen.setAttribute(openAttribute, false); + accordionItemOpen.parentElement.setAttribute(hiddenAttribute, true); + const btn = accordionItemOpen.querySelector('.btn'); + btn.className = 'btn details-button'; + setLabel(btnLabel, btn, btnLabelTextArr[0]); + } + if (accordionItemOpen === buttonWrapper) { + accordionItemOpen = null; + return; } + accordionItemOpen = buttonWrapper; + buttonWrapper.setAttribute(openAttribute, true); + buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); + const panel = buttonWrapper.nextElementSibling; + panel.style.maxHeight = `${panel.scrollHeight}px`; + const closeBtn = accordionItemOpen.children[1]; + closeBtn.className = 'btn close-button'; + setLabel(btnLabel, closeBtn, btnLabelTextArr[1]); }); }); const configHidden = block.querySelector('.config-hidden'); - configHidden.parentElement.remove(); + if (configHidden) { + configHidden.parentElement.remove(); + } } From 651465a668f096105b7325004bd8fc872cc55a01 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Tue, 27 Jun 2023 16:39:22 +0530 Subject: [PATCH 05/14] 329- Divide decorate function into multiple functions --- .../multicolor-accordion.js | 80 +++++++++++-------- 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index bfdec3cc..7c9cf515 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -3,25 +3,45 @@ function setLabel(label, btn, btnText) { if (label === 'Button Label') { btn.innerText = btnText; } else { - btn.innerText = 'Details'; + btn.innerText = `${window.placeholders?.default?.Details || 'Details'}`; if (checkClass) { - btn.innerText = 'Close'; + btn.innerText = `${window.placeholders?.default?.Close || 'Close'}`; } } } -export default async function decorate(block) { - const accordionItems = Array.from(block.children); - const buttonLabelRow = Array.from(block.lastElementChild.children); - const btnLabel = buttonLabelRow[0].textContent; - const btnLabelText = buttonLabelRow[1].textContent; - const btnLabelTextArr = btnLabelText.split(','); - buttonLabelRow[0].classList.add('config-hidden'); +let accordionItemOpen = null; +const openAttribute = 'aria-expanded'; +const hiddenAttribute = 'aria-hidden'; + +function toggleAccordian(buttonWrapper, btnLabel, btnLabelTextArr) { + buttonWrapper.addEventListener('click', () => { + if (accordionItemOpen) { + const panelClosed = accordionItemOpen.nextElementSibling; + panelClosed.style.maxHeight = null; + accordionItemOpen.setAttribute(openAttribute, false); + accordionItemOpen.parentElement.setAttribute(hiddenAttribute, true); + const btn = accordionItemOpen.querySelector('.btn'); + btn.className = 'btn details-button'; + setLabel(btnLabel, btn, btnLabelTextArr[0]); + } + if (accordionItemOpen === buttonWrapper) { + accordionItemOpen = null; + return; + } + accordionItemOpen = buttonWrapper; + buttonWrapper.setAttribute(openAttribute, true); + buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); + const panel = buttonWrapper.nextElementSibling; + panel.style.maxHeight = `${panel.scrollHeight}px`; + const closeBtn = accordionItemOpen.children[1]; + closeBtn.className = 'btn close-button'; + setLabel(btnLabel, closeBtn, btnLabelTextArr[1]); + }); +} - let accordionItemOpen = null; +function getAccordianItems(accordionItems, btnLabel, btnLabelTextArr) { accordionItems.forEach((accordionItem, index) => { - const openAttribute = 'aria-expanded'; - const hiddenAttribute = 'aria-hidden'; const nodes = Array.from(accordionItem.children); const buttonWrapper = document.createElement('button'); buttonWrapper.append(nodes[0]); @@ -40,30 +60,20 @@ export default async function decorate(block) { newItem.id = `panel${index + 1}`; accordionItem.replaceWith(newItem); - buttonWrapper.addEventListener('click', () => { - if (accordionItemOpen) { - const panelClosed = accordionItemOpen.nextElementSibling; - panelClosed.style.maxHeight = null; - accordionItemOpen.setAttribute(openAttribute, false); - accordionItemOpen.parentElement.setAttribute(hiddenAttribute, true); - const btn = accordionItemOpen.querySelector('.btn'); - btn.className = 'btn details-button'; - setLabel(btnLabel, btn, btnLabelTextArr[0]); - } - if (accordionItemOpen === buttonWrapper) { - accordionItemOpen = null; - return; - } - accordionItemOpen = buttonWrapper; - buttonWrapper.setAttribute(openAttribute, true); - buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); - const panel = buttonWrapper.nextElementSibling; - panel.style.maxHeight = `${panel.scrollHeight}px`; - const closeBtn = accordionItemOpen.children[1]; - closeBtn.className = 'btn close-button'; - setLabel(btnLabel, closeBtn, btnLabelTextArr[1]); - }); + toggleAccordian(buttonWrapper, btnLabel, btnLabelTextArr); }); +} + +export default async function decorate(block) { + const accordionItems = Array.from(block.children); + const buttonLabelRow = Array.from(block.lastElementChild.children); + const btnLabel = buttonLabelRow[0].textContent; + const btnLabelText = buttonLabelRow[1].textContent; + const btnLabelTextArr = btnLabelText.split(','); + buttonLabelRow[0].classList.add('config-hidden'); + + getAccordianItems(accordionItems, btnLabel, btnLabelTextArr); + const configHidden = block.querySelector('.config-hidden'); if (configHidden) { configHidden.parentElement.remove(); From 6d1051a3e066f6ccef50cce066285d551fa7974a Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Wed, 28 Jun 2023 14:26:44 +0530 Subject: [PATCH 06/14] 329 - Removing button row --- .../multicolor-accordion.js | 59 +++++++------------ 1 file changed, 20 insertions(+), 39 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 7c9cf515..4ec60821 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -1,20 +1,21 @@ -function setLabel(label, btn, btnText) { - const checkClass = btn.classList.contains('close-button'); - if (label === 'Button Label') { - btn.innerText = btnText; - } else { - btn.innerText = `${window.placeholders?.default?.Details || 'Details'}`; - if (checkClass) { - btn.innerText = `${window.placeholders?.default?.Close || 'Close'}`; - } - } -} - let accordionItemOpen = null; const openAttribute = 'aria-expanded'; const hiddenAttribute = 'aria-hidden'; +const btnOpen = `${window.placeholders?.default?.Details || 'Details'}`; +const closenewBtn = `${window.placeholders?.default?.Close || 'Close'}`; -function toggleAccordian(buttonWrapper, btnLabel, btnLabelTextArr) { +function getOpenAccordian(buttonWrapper) { + accordionItemOpen = buttonWrapper; + buttonWrapper.setAttribute(openAttribute, true); + buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); + const panel = buttonWrapper.nextElementSibling; + panel.style.maxHeight = `${panel.scrollHeight}px`; + const closeBtn = accordionItemOpen.children[1]; + closeBtn.className = 'btn close-button'; + closeBtn.innerText = closenewBtn; +} + +function toggleAccordian(buttonWrapper) { buttonWrapper.addEventListener('click', () => { if (accordionItemOpen) { const panelClosed = accordionItemOpen.nextElementSibling; @@ -23,32 +24,23 @@ function toggleAccordian(buttonWrapper, btnLabel, btnLabelTextArr) { accordionItemOpen.parentElement.setAttribute(hiddenAttribute, true); const btn = accordionItemOpen.querySelector('.btn'); btn.className = 'btn details-button'; - setLabel(btnLabel, btn, btnLabelTextArr[0]); + btn.innerText = btnOpen; } if (accordionItemOpen === buttonWrapper) { accordionItemOpen = null; return; } - accordionItemOpen = buttonWrapper; - buttonWrapper.setAttribute(openAttribute, true); - buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); - const panel = buttonWrapper.nextElementSibling; - panel.style.maxHeight = `${panel.scrollHeight}px`; - const closeBtn = accordionItemOpen.children[1]; - closeBtn.className = 'btn close-button'; - setLabel(btnLabel, closeBtn, btnLabelTextArr[1]); + getOpenAccordian(buttonWrapper); }); } -function getAccordianItems(accordionItems, btnLabel, btnLabelTextArr) { +function getAccordianItems(accordionItems) { accordionItems.forEach((accordionItem, index) => { const nodes = Array.from(accordionItem.children); const buttonWrapper = document.createElement('button'); - buttonWrapper.append(nodes[0]); const span = document.createElement('span'); - span.append(btnLabelTextArr[0]); span.className = 'btn details-button'; - setLabel(btnLabel, span, btnLabelTextArr[0]); + span.innerText = btnOpen; buttonWrapper.append(nodes[0], span); buttonWrapper.classList.add('accordion-trigger'); buttonWrapper.setAttribute(openAttribute, false, 'aria-controls', `panel${index + 1}`); @@ -60,22 +52,11 @@ function getAccordianItems(accordionItems, btnLabel, btnLabelTextArr) { newItem.id = `panel${index + 1}`; accordionItem.replaceWith(newItem); - toggleAccordian(buttonWrapper, btnLabel, btnLabelTextArr); + toggleAccordian(buttonWrapper); }); } export default async function decorate(block) { const accordionItems = Array.from(block.children); - const buttonLabelRow = Array.from(block.lastElementChild.children); - const btnLabel = buttonLabelRow[0].textContent; - const btnLabelText = buttonLabelRow[1].textContent; - const btnLabelTextArr = btnLabelText.split(','); - buttonLabelRow[0].classList.add('config-hidden'); - - getAccordianItems(accordionItems, btnLabel, btnLabelTextArr); - - const configHidden = block.querySelector('.config-hidden'); - if (configHidden) { - configHidden.parentElement.remove(); - } + getAccordianItems(accordionItems); } From 38bd56ec2670f55b7f27d201b7b03bf98b4c60e1 Mon Sep 17 00:00:00 2001 From: sonaldhekale <127213040+sonaldhekale@users.noreply.github.com> Date: Thu, 29 Jun 2023 12:48:37 +0530 Subject: [PATCH 07/14] Update multicolor-accordion.js --- blocks/multicolor-accordion/multicolor-accordion.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 4ec60821..eab5fb0c 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -2,7 +2,7 @@ let accordionItemOpen = null; const openAttribute = 'aria-expanded'; const hiddenAttribute = 'aria-hidden'; const btnOpen = `${window.placeholders?.default?.Details || 'Details'}`; -const closenewBtn = `${window.placeholders?.default?.Close || 'Close'}`; +const btnClose = `${window.placeholders?.default?.Close || 'Close'}`; function getOpenAccordian(buttonWrapper) { accordionItemOpen = buttonWrapper; @@ -10,9 +10,9 @@ function getOpenAccordian(buttonWrapper) { buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); const panel = buttonWrapper.nextElementSibling; panel.style.maxHeight = `${panel.scrollHeight}px`; - const closeBtn = accordionItemOpen.children[1]; - closeBtn.className = 'btn close-button'; - closeBtn.innerText = closenewBtn; + const openAccordianBtn = accordionItemOpen.children[1]; + openAccordianBtn.className = 'btn close-button'; + openAccordianBtn.innerText = btnClose; } function toggleAccordian(buttonWrapper) { From d235d74fc41d83a56fb49ed44291c0f0fe018398 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Fri, 30 Jun 2023 17:03:23 +0530 Subject: [PATCH 08/14] 329 - changes to remove bugs --- .../multicolor-accordion.js | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 4ec60821..44648956 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -1,58 +1,58 @@ let accordionItemOpen = null; const openAttribute = 'aria-expanded'; const hiddenAttribute = 'aria-hidden'; -const btnOpen = `${window.placeholders?.default?.Details || 'Details'}`; -const closenewBtn = `${window.placeholders?.default?.Close || 'Close'}`; +const btnTextOpen = `${window.placeholders?.default?.Details || 'Details'}`; +const btnTextClose = `${window.placeholders?.default?.Close || 'Close'}`; -function getOpenAccordian(buttonWrapper) { +function getOpenAccordian(buttonWrapper, content) { accordionItemOpen = buttonWrapper; buttonWrapper.setAttribute(openAttribute, true); - buttonWrapper.parentElement.setAttribute(hiddenAttribute, false); + content.setAttribute(hiddenAttribute, false); const panel = buttonWrapper.nextElementSibling; panel.style.maxHeight = `${panel.scrollHeight}px`; - const closeBtn = accordionItemOpen.children[1]; - closeBtn.className = 'btn close-button'; - closeBtn.innerText = closenewBtn; + const openAccordianBtn = accordionItemOpen.children[1]; + openAccordianBtn.className = 'btn close-button'; + openAccordianBtn.innerText = btnTextClose; } -function toggleAccordian(buttonWrapper) { +function toggleAccordian(buttonWrapper, content) { buttonWrapper.addEventListener('click', () => { if (accordionItemOpen) { const panelClosed = accordionItemOpen.nextElementSibling; panelClosed.style.maxHeight = null; accordionItemOpen.setAttribute(openAttribute, false); - accordionItemOpen.parentElement.setAttribute(hiddenAttribute, true); + content.setAttribute(hiddenAttribute, true); const btn = accordionItemOpen.querySelector('.btn'); btn.className = 'btn details-button'; - btn.innerText = btnOpen; + btn.innerText = btnTextOpen; } if (accordionItemOpen === buttonWrapper) { accordionItemOpen = null; return; } - getOpenAccordian(buttonWrapper); + getOpenAccordian(buttonWrapper, content); }); } function getAccordianItems(accordionItems) { accordionItems.forEach((accordionItem, index) => { - const nodes = Array.from(accordionItem.children); + const [title, content] = accordionItem.children; const buttonWrapper = document.createElement('button'); const span = document.createElement('span'); span.className = 'btn details-button'; - span.innerText = btnOpen; - buttonWrapper.append(nodes[0], span); + span.innerText = btnTextOpen; + buttonWrapper.append(title, span); buttonWrapper.classList.add('accordion-trigger'); - buttonWrapper.setAttribute(openAttribute, false, 'aria-controls', `panel${index + 1}`); - nodes[1].className = 'accordion-content'; + buttonWrapper.setAttribute(openAttribute, false); + buttonWrapper.setAttribute('aria-controls', `panel${index + 1}`); + content.className = 'accordion-content'; + content.setAttribute(hiddenAttribute, true); const newItem = document.createElement('div'); - newItem.append(buttonWrapper, nodes[1]); + newItem.append(buttonWrapper, content); newItem.classList.add('accordion-item'); - newItem.setAttribute(hiddenAttribute, true); - newItem.id = `panel${index + 1}`; + content.id = `panel${index + 1}`; accordionItem.replaceWith(newItem); - - toggleAccordian(buttonWrapper); + buttonWrapper.addEventListener('click', toggleAccordian(buttonWrapper, content)); }); } From 1ffbe3547a1c16aa732b4610fce0e4581d9fcabb Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Mon, 3 Jul 2023 19:26:16 +0530 Subject: [PATCH 09/14] 329 - bugs fix with ul li --- .../multicolor-accordion.css | 5 +- .../multicolor-accordion.js | 73 +++++++++---------- 2 files changed, 38 insertions(+), 40 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index fc8e6edd..25d5ab8c 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -1,6 +1,7 @@ .accordion-item { padding: 0 16px; margin: 0 0 20px; + list-style: none; } .accordion-trigger { @@ -15,11 +16,11 @@ border: none; } -.multicolor-accordion>div:nth-child(odd) { +.multicolor-accordion> ul:nth-child(odd) { background: var(--c-dark-plum); } -.multicolor-accordion>div:nth-child(even) { +.multicolor-accordion > ul:nth-child(even) { background: var(--c-dark-blue); } diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 380ffcf6..1e0adaa3 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -16,48 +16,45 @@ function getOpenAccordian(buttonWrapper, content) { } function toggleAccordian(buttonWrapper, content) { - buttonWrapper.addEventListener('click', () => { - if (accordionItemOpen) { - const panelClosed = accordionItemOpen.nextElementSibling; - panelClosed.style.maxHeight = null; - accordionItemOpen.setAttribute(openAttribute, false); - content.setAttribute(hiddenAttribute, true); - const btn = accordionItemOpen.querySelector('.btn'); - btn.className = 'btn details-button'; - btn.innerText = btnTextOpen; - } - if (accordionItemOpen === buttonWrapper) { - accordionItemOpen = null; - return; - } - getOpenAccordian(buttonWrapper, content); - }); + if (accordionItemOpen) { + const panelClosed = accordionItemOpen.nextElementSibling; + panelClosed.style.maxHeight = null; + accordionItemOpen.setAttribute(openAttribute, false); + content.setAttribute(hiddenAttribute, true); + const btn = accordionItemOpen.querySelector('.btn'); + btn.className = 'btn details-button'; + btn.innerText = btnTextOpen; + } + if (accordionItemOpen === buttonWrapper) { + accordionItemOpen = null; + return; + } + getOpenAccordian(buttonWrapper, content); } -function getAccordianItems(accordionItems) { - accordionItems.forEach((accordionItem, index) => { - const [title, content] = accordionItem.children; - const buttonWrapper = document.createElement('button'); - const span = document.createElement('span'); - span.className = 'btn details-button'; - span.innerText = btnTextOpen; - buttonWrapper.append(title, span); - buttonWrapper.classList.add('accordion-trigger'); - buttonWrapper.setAttribute(openAttribute, false); - buttonWrapper.setAttribute('aria-controls', `panel${index + 1}`); - content.className = 'accordion-content'; - content.setAttribute(hiddenAttribute, true); - const newItem = document.createElement('div'); - newItem.append(buttonWrapper, content); - newItem.classList.add('accordion-item'); - content.id = `panel${index + 1}`; - accordionItem.replaceWith(newItem); +function getAccordianItems(accordionItem, index) { + const ul = document.createElement('ul'); + const [title, content] = accordionItem.children; + const buttonWrapper = document.createElement('button'); + const span = document.createElement('span'); + span.className = 'btn details-button'; + span.innerText = btnTextOpen; + buttonWrapper.append(title, span); + buttonWrapper.classList.add('accordion-trigger'); + buttonWrapper.setAttribute(openAttribute, false); + buttonWrapper.setAttribute('aria-controls', `panel${index + 1}`); + content.className = 'accordion-content'; + content.setAttribute(hiddenAttribute, true); + const newItem = document.createElement('li'); + newItem.append(buttonWrapper, content); + newItem.classList.add('accordion-item'); + content.id = `panel${index + 1}`; + ul.append(newItem); + accordionItem.replaceWith(ul); - buttonWrapper.addEventListener('click', toggleAccordian(buttonWrapper, content)); - }); + buttonWrapper.addEventListener('click', () => toggleAccordian(buttonWrapper, content)); } export default async function decorate(block) { - const accordionItems = Array.from(block.children); - getAccordianItems(accordionItems); + [...block.children].forEach(getAccordianItems); } From 5ffa428b0139998c000589511bb15be6043fb643 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Mon, 17 Jul 2023 18:55:33 +0530 Subject: [PATCH 10/14] 329 - ul>li nesting --- blocks/multicolor-accordion/multicolor-accordion.css | 4 ++-- blocks/multicolor-accordion/multicolor-accordion.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index 25d5ab8c..c922f116 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -16,11 +16,11 @@ border: none; } -.multicolor-accordion> ul:nth-child(odd) { +.multicolor-accordion> ul>li:nth-child(odd) { background: var(--c-dark-plum); } -.multicolor-accordion > ul:nth-child(even) { +.multicolor-accordion > ul>li:nth-child(even) { background: var(--c-dark-blue); } diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 1e0adaa3..6889fac3 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -32,8 +32,7 @@ function toggleAccordian(buttonWrapper, content) { getOpenAccordian(buttonWrapper, content); } -function getAccordianItems(accordionItem, index) { - const ul = document.createElement('ul'); +function getAccordianItems(ul, accordionItem, index) { const [title, content] = accordionItem.children; const buttonWrapper = document.createElement('button'); const span = document.createElement('span'); @@ -56,5 +55,6 @@ function getAccordianItems(accordionItem, index) { } export default async function decorate(block) { - [...block.children].forEach(getAccordianItems); + const ul = document.createElement('ul'); + [...block.children].forEach(getAccordianItems.bind(null, ul)); } From 2f7c8a6c7c014bbaf8a780b0c1a5d2c24208feca Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Fri, 28 Jul 2023 18:26:43 +0530 Subject: [PATCH 11/14] 329 - till createbtn function --- .../multicolor-accordion/multicolor-accordion.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 6889fac3..f50240ec 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -32,8 +32,7 @@ function toggleAccordian(buttonWrapper, content) { getOpenAccordian(buttonWrapper, content); } -function getAccordianItems(ul, accordionItem, index) { - const [title, content] = accordionItem.children; +function createButton(title, index, newItem, content) { const buttonWrapper = document.createElement('button'); const span = document.createElement('span'); span.className = 'btn details-button'; @@ -42,19 +41,25 @@ function getAccordianItems(ul, accordionItem, index) { buttonWrapper.classList.add('accordion-trigger'); buttonWrapper.setAttribute(openAttribute, false); buttonWrapper.setAttribute('aria-controls', `panel${index + 1}`); + newItem.append(buttonWrapper, content); + + buttonWrapper.addEventListener('click', () => toggleAccordian(buttonWrapper, content)); +} + +function getAccordianItems(ul, accordionItem, index) { + const [title, content] = accordionItem.children; content.className = 'accordion-content'; content.setAttribute(hiddenAttribute, true); const newItem = document.createElement('li'); - newItem.append(buttonWrapper, content); + createButton(title, index, newItem, content); newItem.classList.add('accordion-item'); content.id = `panel${index + 1}`; ul.append(newItem); accordionItem.replaceWith(ul); - - buttonWrapper.addEventListener('click', () => toggleAccordian(buttonWrapper, content)); } export default async function decorate(block) { const ul = document.createElement('ul'); [...block.children].forEach(getAccordianItems.bind(null, ul)); + // block.innerHTML = ul.outerHTML; } From 35e395b2adb01ab6c752c78ab3f5178e88bfe774 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Tue, 1 Aug 2023 14:39:23 +0530 Subject: [PATCH 12/14] 329 - button creation function --- blocks/multicolor-accordion/multicolor-accordion.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index f50240ec..e5a219b4 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -61,5 +61,4 @@ function getAccordianItems(ul, accordionItem, index) { export default async function decorate(block) { const ul = document.createElement('ul'); [...block.children].forEach(getAccordianItems.bind(null, ul)); - // block.innerHTML = ul.outerHTML; } From bcc33f50eabcd9fb8ee204f12c88183477b7df9f Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Thu, 3 Aug 2023 17:39:33 +0530 Subject: [PATCH 13/14] 329 - accordian implementation with new approach --- .../multicolor-accordion.css | 52 ++++----- .../multicolor-accordion.js | 106 ++++++++++-------- 2 files changed, 85 insertions(+), 73 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index c922f116..6001fdce 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -1,26 +1,32 @@ +.multicolor-accordion-wrap { + list-style: none; +} + .accordion-item { - padding: 0 16px; margin: 0 0 20px; - list-style: none; } .accordion-trigger { display: flex; align-items: center; + justify-content: space-between; cursor: pointer; - height: 80px; - font-size: 34px; width: 100%; + border: none; + padding: 23px 16px; +} + +.accordion-trigger div { + font-size: 34px; color: var(--c-white); font-weight: 700; - border: none; } -.multicolor-accordion> ul>li:nth-child(odd) { +.multicolor-accordion-wrap > li:nth-child(odd) { background: var(--c-dark-plum); } -.multicolor-accordion > ul>li:nth-child(even) { +.multicolor-accordion-wrap > li:nth-child(even) { background: var(--c-dark-blue); } @@ -28,13 +34,12 @@ border-radius: 16px; font-weight: 600; text-transform: uppercase; - padding: 8px; + padding: 8px 24px; + min-width: 56px; cursor: pointer; - width: 8%; font-size: 15px; border: 1px solid var(--c-light-teal); - transition: 0.5s; - margin-left: auto; + transition: background-color 0.5s, color 0.5s; } .accordion-trigger .details-button { @@ -42,35 +47,26 @@ color: var(--c-dark-plum); } -.accordion-trigger .details-button:hover { - border: 1px solid var(--c-light-teal); - background: none; - color: var(--c-light-teal); -} - -.accordion-trigger .close-button { - background: none; +.accordion-trigger .details-button:hover, +.accordion-trigger .details-button-open { + background: transparent; color: var(--c-light-teal); } -.accordion-trigger > p { - display: inline-flex; - width: calc(100% - 40px); -} - .accordion-content { - transition: max-height 0.3333s; - max-height: 0; + transition: height 0.3s; + height: 0; overflow: hidden; color: var(--c-white); + padding: 0 16px; } @media (max-width: 600px) { .accordion-trigger { font-size: 25px; } - + .accordion-trigger .btn { display: none; } -} \ No newline at end of file +} diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index e5a219b4..10f4586c 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -1,64 +1,80 @@ -let accordionItemOpen = null; -const openAttribute = 'aria-expanded'; -const hiddenAttribute = 'aria-hidden'; const btnTextOpen = `${window.placeholders?.default?.Details || 'Details'}`; const btnTextClose = `${window.placeholders?.default?.Close || 'Close'}`; -function getOpenAccordian(buttonWrapper, content) { - accordionItemOpen = buttonWrapper; - buttonWrapper.setAttribute(openAttribute, true); - content.setAttribute(hiddenAttribute, false); - const panel = buttonWrapper.nextElementSibling; - panel.style.maxHeight = `${panel.scrollHeight}px`; - const openAccordianBtn = accordionItemOpen.children[1]; - openAccordianBtn.className = 'btn close-button'; - openAccordianBtn.innerText = btnTextClose; +function closePrevItem(item) { + const button = item.previousElementSibling; + button.setAttribute('aria-expanded', false); + const [, span] = button.children; + span.innerText = btnTextOpen; + span.classList.remove('details-button-open'); + + item.setAttribute('aria-hidden', true); + item.style.height = null; +} + +function openCurrentItem(item, button) { + item.setAttribute('aria-hidden', false); + item.style.height = `${item.scrollHeight}px`; + + button.setAttribute('aria-expanded', true); + const [, span] = button.children; + span.innerText = btnTextClose; + span.classList.add('details-button-open'); } -function toggleAccordian(buttonWrapper, content) { - if (accordionItemOpen) { - const panelClosed = accordionItemOpen.nextElementSibling; - panelClosed.style.maxHeight = null; - accordionItemOpen.setAttribute(openAttribute, false); - content.setAttribute(hiddenAttribute, true); - const btn = accordionItemOpen.querySelector('.btn'); - btn.className = 'btn details-button'; - btn.innerText = btnTextOpen; +function toggleAccordian(event) { + const button = event.currentTarget; + + const openedItem = button.closest('ul').querySelector('.accordion-content[aria-hidden="false"]'); + + if (openedItem) { + closePrevItem(openedItem); } - if (accordionItemOpen === buttonWrapper) { - accordionItemOpen = null; - return; + + const itemToOpen = button.nextElementSibling; + + if (openedItem !== itemToOpen) { + openCurrentItem(itemToOpen, button); } - getOpenAccordian(buttonWrapper, content); } -function createButton(title, index, newItem, content) { - const buttonWrapper = document.createElement('button'); +function createDetailsButton(title, index) { const span = document.createElement('span'); - span.className = 'btn details-button'; + span.classList.add('btn', 'details-button'); span.innerText = btnTextOpen; - buttonWrapper.append(title, span); - buttonWrapper.classList.add('accordion-trigger'); - buttonWrapper.setAttribute(openAttribute, false); - buttonWrapper.setAttribute('aria-controls', `panel${index + 1}`); - newItem.append(buttonWrapper, content); - buttonWrapper.addEventListener('click', () => toggleAccordian(buttonWrapper, content)); + const button = document.createElement('button'); + button.classList.add('accordion-trigger'); + button.setAttribute('aria-expanded', false); + button.setAttribute('aria-controls', `panel-${index}`); + button.append(title, span); + button.addEventListener('click', toggleAccordian); + + return button; } -function getAccordianItems(ul, accordionItem, index) { - const [title, content] = accordionItem.children; - content.className = 'accordion-content'; - content.setAttribute(hiddenAttribute, true); - const newItem = document.createElement('li'); - createButton(title, index, newItem, content); - newItem.classList.add('accordion-item'); - content.id = `panel${index + 1}`; - ul.append(newItem); - accordionItem.replaceWith(ul); +function createAccordianItems({ children }, index) { + const [title, content] = children; + + const button = createDetailsButton(title, index); + + content.classList.add('accordion-content'); + content.setAttribute('aria-hidden', true); + content.id = `panel-${index}`; + + const li = document.createElement('li'); + li.classList.add('accordion-item'); + li.append(button, content); + + return li; } export default async function decorate(block) { const ul = document.createElement('ul'); - [...block.children].forEach(getAccordianItems.bind(null, ul)); + ul.classList.add('multicolor-accordion-wrap'); + + const items = [...block.children].map(createAccordianItems); + ul.append(...items); + + block.replaceWith(ul); } From 4fdab0ce7727226e4ef113a2506376e291340e48 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Wed, 9 Aug 2023 18:13:55 +0530 Subject: [PATCH 14/14] 329- ammendment for mobile view --- blocks/multicolor-accordion/multicolor-accordion.css | 10 ++++++++-- blocks/multicolor-accordion/multicolor-accordion.js | 3 +++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/blocks/multicolor-accordion/multicolor-accordion.css b/blocks/multicolor-accordion/multicolor-accordion.css index 6001fdce..d7eeb684 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.css +++ b/blocks/multicolor-accordion/multicolor-accordion.css @@ -1,5 +1,7 @@ .multicolor-accordion-wrap { list-style: none; + padding: 0; + margin: 0; } .accordion-item { @@ -62,11 +64,15 @@ } @media (max-width: 600px) { - .accordion-trigger { - font-size: 25px; + .accordion-trigger div { + font-size: 20px; } .accordion-trigger .btn { display: none; } + + .accordion-trigger { + padding: 23px 7px; + } } diff --git a/blocks/multicolor-accordion/multicolor-accordion.js b/blocks/multicolor-accordion/multicolor-accordion.js index 10f4586c..17a6c0c5 100644 --- a/blocks/multicolor-accordion/multicolor-accordion.js +++ b/blocks/multicolor-accordion/multicolor-accordion.js @@ -61,6 +61,9 @@ function createAccordianItems({ children }, index) { content.classList.add('accordion-content'); content.setAttribute('aria-hidden', true); content.id = `panel-${index}`; + content.querySelectorAll('a').forEach((link) => { + link.target = '_blank'; + }); const li = document.createElement('li'); li.classList.add('accordion-item');