Skip to content

Commit

Permalink
added isMobile check
Browse files Browse the repository at this point in the history
  • Loading branch information
Rohit Sahu committed Nov 6, 2024
1 parent 4c51f63 commit 8a6c32e
Showing 1 changed file with 33 additions and 19 deletions.
52 changes: 33 additions & 19 deletions libs/blocks/merch-card/merch-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,37 +390,51 @@ const getMiniCompareChartFooterRows = (el) => {
const decorateFooterRows = (merchCard, footerRows) => {
if (footerRows) {
const footerRowsSlot = createTag('div', { slot: 'footer-rows' });
const isMobile = window.matchMedia('(max-width: 1199px)').matches;

if (merchCard.classList.contains('checkmark')) {
const firstRow = footerRows[0];
const bgStyle = firstRow.querySelector('div > div:first-child').innerHTML;
const hrElem = createTag('hr', { style: `background: ${bgStyle};` });
footerRowsSlot.appendChild(hrElem);
merchCard.classList.add('has-divider');
const firstRowText = firstRow.querySelector('div > div:last-child').innerHTML;
const chevronDownSVG = `
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<path id="iconPrimary" d="M4.82201 7.96534C4.88158 7.97779 4.93944 7.99903 4.99999 7.99903C5.06054 7.99903 5.1184 7.97779 5.17797 7.96534C5.22826 7.95484 5.28002 7.95484 5.32812 7.93531C5.38623 7.91187 5.43481 7.86719 5.48754 7.83082C5.52978 7.80177 5.57751 7.78443 5.61523 7.74708C5.61645 7.74586 5.61669 7.74415 5.61792 7.74293C5.61915 7.74171 5.62085 7.74147 5.62207 7.74024L9.69726 3.61524C10.0371 3.27149 10.0342 2.71778 9.69042 2.37794C9.34667 2.0381 8.79198 2.04103 8.45312 2.38478L5 5.88014L1.54688 2.38478C1.20801 2.04103 0.653326 2.0381 0.309576 2.37794C0.136726 2.54884 0.0498056 2.77442 0.0498056 3.00001C0.0498056 3.22169 0.133785 3.44435 0.302735 3.61524L4.37794 7.74024C4.37916 7.74146 4.38087 7.7417 4.38209 7.74293C4.38331 7.74416 4.38355 7.74586 4.38478 7.74708C4.4225 7.78443 4.47023 7.80177 4.51247 7.83082C4.5652 7.8672 4.61379 7.91187 4.67189 7.93531C4.71999 7.95484 4.77171 7.95484 4.82201 7.96534Z" fill="#2C2C2C"/>
</g>
</svg>
`;
const chevronUpSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7" fill="none">
<path d="M5.17799 0.53466C5.11842 0.52221 5.06056 0.50097 5.00001 0.50097C4.93946 0.50097 4.8816 0.52221 4.82203 0.53466C4.77174 0.54516 4.71998 0.54516 4.67188 0.56469C4.61377 0.58813 4.56519 0.63281 4.51246 0.66918C4.47022 0.69823 4.42249 0.71557 4.38477 0.75292C4.38355 0.75414 4.38331 0.75585 4.38208 0.75707C4.38085 0.75829 4.37915 0.75853 4.37793 0.75976L0.302744 4.88476C-0.0370961 5.22851 -0.034166 5.78222 0.309584 6.12206C0.653334 6.4619 1.20802 6.45897 1.54688 6.11522L5 2.61986L8.45312 6.11522C8.79199 6.45897 9.34667 6.4619 9.69042 6.12206C9.86327 5.95116 9.95019 5.72558 9.95019 5.49999C9.95019 5.27831 9.86621 5.05565 9.69726 4.88476L5.62206 0.75976C5.62084 0.75854 5.61913 0.7583 5.61791 0.75707C5.61669 0.75584 5.61645 0.75414 5.61522 0.75292C5.5775 0.71557 5.52977 0.69823 5.48753 0.66918C5.4348 0.6328 5.38621 0.58813 5.32811 0.56469C5.28001 0.54516 5.22829 0.54516 5.17799 0.53466Z" fill="#2C2C2C"/>
</svg>
`;
const chevronIcon = createTag('span', { class: 'chevron-icon' }, chevronDownSVG);
const firstRowTextParagraph = createTag('div', { class: 'footer-rows-title' }, firstRowText);
firstRowTextParagraph.appendChild(chevronIcon);

let firstRowTextParagraph;
const checkmarkCopyContainer = createTag('div', { class: 'checkmark-copy-container' });

if (isMobile) {
const chevronDownSVG = `
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<path id="iconPrimary" d="M4.82201 7.96534C4.88158 7.97779 4.93944 7.99903 4.99999 7.99903C5.06054 7.99903 5.1184 7.97779 5.17797 7.96534C5.22826 7.95484 5.28002 7.95484 5.32812 7.93531C5.38623 7.91187 5.43481 7.86719 5.48754 7.83082C5.52978 7.80177 5.57751 7.78443 5.61523 7.74708C5.61645 7.74586 5.61669 7.74415 5.61792 7.74293C5.61915 7.74171 5.62085 7.74147 5.62207 7.74024L9.69726 3.61524C10.0371 3.27149 10.0342 2.71778 9.69042 2.37794C9.34667 2.0381 8.79198 2.04103 8.45312 2.38478L5 5.88014L1.54688 2.38478C1.20801 2.04103 0.653326 2.0381 0.309576 2.37794C0.136726 2.54884 0.0498056 2.77442 0.0498056 3.00001C0.0498056 3.22169 0.133785 3.44435 0.302735 3.61524L4.37794 7.74024C4.37916 7.74146 4.38087 7.7417 4.38209 7.74293C4.38331 7.74416 4.38355 7.74586 4.38478 7.74708C4.4225 7.78443 4.47023 7.80177 4.51247 7.83082C4.5652 7.8672 4.61379 7.91187 4.67189 7.93531C4.71999 7.95484 4.77171 7.95484 4.82201 7.96534Z" fill="#2C2C2C"/>
</g>
</svg>
`;
const chevronUpSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7" fill="none">
<path d="M5.17799 0.53466C5.11842 0.52221 5.06056 0.50097 5.00001 0.50097C4.93946 0.50097 4.8816 0.52221 4.82203 0.53466C4.77174 0.54516 4.71998 0.54516 4.67188 0.56469C4.61377 0.58813 4.56519 0.63281 4.51246 0.66918C4.47022 0.69823 4.42249 0.71557 4.38477 0.75292C4.38355 0.75414 4.38331 0.75585 4.38208 0.75707C4.38085 0.75829 4.37915 0.75853 4.37793 0.75976L0.302744 4.88476C-0.0370961 5.22851 -0.034166 5.78222 0.309584 6.12206C0.653334 6.4619 1.20802 6.45897 1.54688 6.11522L5 2.61986L8.45312 6.11522C8.79199 6.45897 9.34667 6.4619 9.69042 6.12206C9.86327 5.95116 9.95019 5.72558 9.95019 5.49999C9.95019 5.27831 9.86621 5.05565 9.69726 4.88476L5.62206 0.75976C5.62084 0.75854 5.61913 0.7583 5.61791 0.75707C5.61669 0.75584 5.61645 0.75414 5.61522 0.75292C5.5775 0.71557 5.52977 0.69823 5.48753 0.66918C5.4348 0.6328 5.38621 0.58813 5.32811 0.56469C5.28001 0.54516 5.22829 0.54516 5.17799 0.53466Z" fill="#2C2C2C"/>
</svg>
`;
const chevronIcon = createTag('span', { class: 'chevron-icon' }, chevronDownSVG);
firstRowTextParagraph = createTag('div', { class: 'footer-rows-title' }, firstRowText);
firstRowTextParagraph.appendChild(chevronIcon);

firstRowTextParagraph.addEventListener('click', () => {
const isOpen = checkmarkCopyContainer.classList.toggle('open');
chevronIcon.innerHTML = isOpen ? chevronUpSVG : chevronDownSVG;
});
} else {
firstRowTextParagraph = createTag('div', { class: 'footer-rows-title' }, firstRowText);
checkmarkCopyContainer.classList.add('open'); // Ensure the list is visible on non-mobile devices
}

footerRowsSlot.appendChild(firstRowTextParagraph);
footerRowsSlot.appendChild(checkmarkCopyContainer);
firstRowTextParagraph.addEventListener('click', () => {
const isOpen = checkmarkCopyContainer.classList.toggle('open');
chevronIcon.innerHTML = isOpen ? chevronUpSVG : chevronDownSVG;
});

footerRows.splice(0, 1);
}

footerRows.forEach((row) => {
const rowIcon = row.firstElementChild.querySelector('picture');
const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
Expand Down

0 comments on commit 8a6c32e

Please sign in to comment.