Support view all

adobecom · Sep 23, 2024 · edbe095 · edbe095
1 parent c3c764e
commit edbe095
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/acrobat/blocks/prompt-card/prompt-card.css b/acrobat/blocks/prompt-card/prompt-card.css
@@ -2,6 +2,16 @@
   display: none
 }
 
+.prompt-card.hidden {
+  display: none;
+}
+
+.view-all {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center; 
+}
+
 .prompt-toast {
   font-family: "Adobe Clean", adobe-clean, "Trebuchet MS", sans-serif;
   align-items: flex-start;

diff --git a/acrobat/blocks/prompt-card/prompt-card.js b/acrobat/blocks/prompt-card/prompt-card.js
@@ -1,3 +1,4 @@
+/* eslint-disable compat/compat */
 import { setLibs } from '../../scripts/utils.js';
 
 const miloLibs = setLibs('/libs');
@@ -70,12 +71,41 @@ async function createBlock(element, cfg) {
 
 async function createBlocks(element, blockArray, templateCfg) {
   const { parentNode } = element;
-  for (const cfg of blockArray) {
+  for (const [i, cfg] of blockArray.entries()) {
     const blockEl = createTag('div', { class: 'prompt-card' });
+    if (templateCfg.rows && i > 0) blockEl.classList.add('hidden');
     await createBlock(blockEl, { ...templateCfg, ...cfg });
     parentNode.insertBefore(blockEl, element.previousSibling);
   }
   element.remove();
+
+  if (templateCfg.rows && parentNode.classList.contains('section')) {
+    const resizeObserver = new ResizeObserver(() => {
+      const computedStyle = window.getComputedStyle(parentNode);
+      if (computedStyle.gridTemplateColumns !== 'none') {
+        const promptcards = [...parentNode.querySelectorAll('.prompt-card')];
+        const visibleCnt = computedStyle.gridTemplateColumns.split(' ').length * templateCfg.rows;
+        promptcards.forEach(
+          (x, i) => (i < visibleCnt ? x.classList.remove('hidden') : x.classList.add('hidden')),
+        );
+        if (promptcards.length <= visibleCnt) {
+          parentNode.querySelector('.view-all')?.remove();
+          resizeObserver.unobserve(parentNode);
+        }
+      }
+    });
+    resizeObserver.observe(parentNode);
+
+    const viewMore = createTag('div', { class: 'view-all' });
+    const moreBtn = createTag('div', { class: 'con-button outline' }, getPlaceHolder('View all'));
+    moreBtn.addEventListener('click', (e) => {
+      resizeObserver.unobserve(parentNode);
+      [...parentNode.querySelectorAll('.prompt-card')].forEach((x) => x.classList.remove('hidden'));
+      e.target.parentNode.remove();
+    });
+    viewMore.appendChild(moreBtn);
+    parentNode.appendChild(viewMore);
+  }
 }
 
 async function processGroup(element, cfg, startIndex) {
@@ -95,7 +125,7 @@ async function processGroup(element, cfg, startIndex) {
       return;
     }
     const json = await resp.json();
-    const keys = Object.keys(cfg).filter((k) => !['json'].includes(k));
+    const keys = Object.keys(cfg).filter((k) => !['json', 'rows'].includes(k));
     blockArray = json.data.filter(
       (x) => keys.reduce((a, k) => a && cfg[k] === x[k], true),
     );