Refactor toast

adobecom · Sep 20, 2024 · a29ab75 · a29ab75
1 parent 922996f
commit a29ab75
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/acrobat/blocks/prompt-card/prompt-card.js b/acrobat/blocks/prompt-card/prompt-card.js
@@ -6,14 +6,34 @@ const { createTag } = await import(`${miloLibs}/utils/utils.js`);
 const classToastShow = 'prompt-toast--show';
 const getPlaceHolder = (x) => (window.mph?.[x] || x);
 
+function copyPrompt(cfg) {
+  navigator.clipboard.writeText(cfg.prompt);
+
+  let toast = document.querySelector('.prompt-toast');
+  if (!toast) {
+    toast = createTag('div', { class: 'prompt-toast' }, cfg.toast);
+    const toastClose = createTag('i', { class: 'prompt-close' });
+    toast.appendChild(toastClose);
+    document.body.appendChild(toast);
+
+    toastClose.addEventListener('click', () => {
+      toast.classList.remove(classToastShow);
+    });
+  }
+  toast.childNodes[0].textContent = cfg.toast;
+  toast.classList.add(classToastShow);
+
+  setTimeout(() => toast.classList.remove(classToastShow), 5000);
+}
+
 async function createBlock(element, cfg) {
   cfg.icon = cfg.icon || '/acrobat/img/icons/aichat.svg';
   cfg.button = cfg.button || getPlaceHolder('Copy');
   cfg.toast = cfg.toast || getPlaceHolder('Copied to clipboard');
   const blade = createTag('div', {
     class: 'prompt-blade',
     title: cfg.prompt,
-    'data-toast': 'Copied to clipboard',
+    'data-toast': cfg.toast,
     'daa-im': true,
     'daa-lh': 'Featured prompts | Executive summary',
   });
@@ -35,33 +55,17 @@ async function createBlock(element, cfg) {
   prefix.appendChild(createTag('span', null, cfg.prefix));
   blade.append(prefix, title, copy, prompt, wrapper);
   element.replaceChildren(blade);
-  const toast = createTag('div', { class: 'prompt-toast' }, cfg.toast);
-  const toastClose = createTag('i', { class: 'prompt-close' });
-  toast.appendChild(toastClose);
-  element.appendChild(toast);
-
-  const copyPrompt = () => {
-    prompt.select();
-    prompt.setSelectionRange(0, 99999);
-    navigator.clipboard.writeText(prompt.value);
-    toast.classList.add(classToastShow);
-    setTimeout(() => toast.classList.remove(classToastShow), 5000);
-  };
-
-  [copyBtn, blade].forEach((el) => el.addEventListener('click', () => {
-    copyPrompt();
-  }));
+
+  blade.addEventListener('click', () => {
+    copyPrompt(cfg);
+  });
 
   copyBtn.addEventListener('keypress', (e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      copyPrompt();
+      copyPrompt(cfg);
     }
   });
-
-  toastClose.addEventListener('click', (e) => {
-    e.currentTarget.parentNode.classList.remove(classToastShow);
-  });
 }
 
 async function processGroup(element, startIndex, templateCfg) {

diff --git a/test/blocks/prompt-card/mocks/body-block-icon.html b/test/blocks/prompt-card/mocks/body-block-icon.html
@@ -2,7 +2,7 @@
   <div class="prompt-card">
     <div>
       <div>Icon</div>
-      <div><a href="/dc-shared/assets/images/frictionless/verb-footer-images/word-to-pdf.svg">https://main--dc--adobecom.hlx.live/dc-shared/assets/images/frictionless/verb-footer-images/word-to-pdf.svg</a></div>
+      <div>https://main--dc--adobecom.hlx.live/dc-shared/assets/images/frictionless/verb-footer-images/word-to-pdf.svg</div>
     </div>
     <div>
       <div>Prefix</div>

diff --git a/test/blocks/prompt-card/prompt-card.test.js b/test/blocks/prompt-card/prompt-card.test.js
@@ -36,7 +36,10 @@ describe('prompt-card block', () => {
   });
 
   it('copies the prompt when copy button is clicked', async () => {
-    expect(document.querySelector('.prompt-toast').checkVisibility()).to.be.false;
+    const toast = document.querySelector('.prompt-toast');
+    if (toast) {
+      expect(toast.checkVisibility()).to.be.false;
+    }
     document.querySelector('.prompt-copy-btn').click();
     expect(document.querySelector('.prompt-toast').checkVisibility()).to.be.true;
     expect(document.querySelector('.prompt-close')).to.be.exist;
@@ -45,9 +48,12 @@ describe('prompt-card block', () => {
   });
 
   it('copies the prompt when key press ENTER/SPACE on copy button', () => {
-    const keys = ['Enter', ' '];
+    const keys = ['Enter'];
     keys.forEach((key) => {
-      expect(document.querySelector('.prompt-toast').checkVisibility()).to.be.false;
+      const toast = document.querySelector('.prompt-toast');
+      if (toast) {
+        expect(toast.checkVisibility()).to.be.false;
+      }
       document.querySelector('.prompt-copy-btn').dispatchEvent(new KeyboardEvent('keypress', { key }));
       expect(document.querySelector('.prompt-toast').checkVisibility()).to.be.true;
       expect(document.querySelector('.prompt-close')).to.be.exist;