Support view all

adobecom · Sep 24, 2024 · 74a5eae · 74a5eae
1 parent c3c764e
commit 74a5eae
Show file tree

Hide file tree

Showing 6 changed files with 164 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 (/^(\d+(\.\d+)?(px|fr|em|rem|%))( (\d+(\.\d+)?(px|fr|em|rem|%)))*$/.test(computedStyle.gridTemplateColumns)) {
+        const visibleCnt = computedStyle.gridTemplateColumns.split(' ').length * templateCfg.rows;
+        const promptcards = [...parentNode.querySelectorAll('.prompt-card')];
+        if (promptcards.length <= visibleCnt) {
+          parentNode.querySelector('.view-all')?.remove();
+          resizeObserver.disconnect();
+        }
+        promptcards.forEach(
+          (x, i) => (i < visibleCnt ? x.classList.remove('hidden') : x.classList.add('hidden')),
+        );
+      }
+    });
+    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.disconnect();
+      [...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),
     );

diff --git a/test/blocks/prompt-card/mocks/body-json-more-less.html b/test/blocks/prompt-card/mocks/body-json-more-less.html
@@ -0,0 +1,29 @@
+<main>
+  <div>
+    <div class="prompt-card json">
+      <div>
+        <div>Json</div>
+        <div>https://www.adobe.com/dc-shared/promptcard.json</div>
+      </div>
+      <div>
+        <div>Prefix</div>
+        <div>Analyze</div>
+      </div>       
+      <div>
+        <div>Rows</div>
+        <div>1</div>
+      </div>           
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>Four up, xl-spacing</div>
+      </div>
+      <div>
+        <div>background</div>
+        <div>#f8f8f8</div>
+      </div>
+    </div>    
+  </div>
+</main>
+
diff --git a/test/blocks/prompt-card/mocks/body-json-more.html b/test/blocks/prompt-card/mocks/body-json-more.html
@@ -0,0 +1,25 @@
+<main>
+  <div>
+    <div class="prompt-card json">
+      <div>
+        <div>Json</div>
+        <div>https://www.adobe.com/dc-shared/promptcard.json</div>
+      </div>    
+      <div>
+        <div>Rows</div>
+        <div>1</div>
+      </div>           
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>Four up, xl-spacing</div>
+      </div>
+      <div>
+        <div>background</div>
+        <div>#f8f8f8</div>
+      </div>
+    </div>    
+  </div>
+</main>
+
diff --git a/test/blocks/prompt-card/prompt-card-json-more-less.test.js b/test/blocks/prompt-card/prompt-card-json-more-less.test.js
@@ -0,0 +1,30 @@
+/* eslint-disable compat/compat */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { waitForElement, delay } from '../../helpers/waitfor.js';
+
+describe('prompt-cards view all feature', () => {
+  before(async () => {
+    const promptcards = await readFile({ path: './mocks/promptcards.json' });
+    sinon.stub(window, 'fetch');
+    const res = new window.Response(promptcards, { status: 200 });
+    window.fetch.returns(Promise.resolve(res));
+    document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body-json-more-less.html' });
+    await import('../../../acrobat/scripts/scripts.js');
+    await delay(500);
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  });
+
+  after(() => {
+    sinon.restore();
+  });
+
+  it('has no a view-all button if no more items', () => {
+    const promptcards = document.querySelectorAll('.prompt-card:not(.hidden)');
+    expect([...promptcards].length).to.equal(2);
+    const button = document.querySelector('.view-all .con-button');
+    expect(button).to.not.exist;
+  });
+});
diff --git a/test/blocks/prompt-card/prompt-card-json-more.test.js b/test/blocks/prompt-card/prompt-card-json-more.test.js
@@ -0,0 +1,38 @@
+/* eslint-disable compat/compat */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { waitForElement, delay } from '../../helpers/waitfor.js';
+
+describe('prompt-cards view all feature', () => {
+  before(async () => {
+    const promptcards = await readFile({ path: './mocks/promptcards.json' });
+    sinon.stub(window, 'fetch');
+    const res = new window.Response(promptcards, { status: 200 });
+    window.fetch.returns(Promise.resolve(res));
+    document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body-json-more.html' });
+    await import('../../../acrobat/scripts/scripts.js');
+    await delay(500);
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  });
+
+  after(() => {
+    sinon.restore();
+  });
+
+  it('creates prompt cards on rows 1 with a view-all button', async () => {
+    const promptcards = document.querySelectorAll('.prompt-card:not(.hidden)');
+    expect([...promptcards].length).to.equal(2);
+  });
+
+  it('click the view-all button', () => {
+    const button = document.querySelector('.view-all .con-button');
+    button.click();
+    const promptcards = document.querySelectorAll('.prompt-card:not(.hidden)');
+    expect([...promptcards].length).to.equal(6);
+    const hiddencards = document.querySelectorAll('.hidden');
+    expect([...hiddencards].length).to.equal(0);
+    expect(document.querySelector('.view-all .con-button')).to.not.exist;
+  });
+});