Merge branch 'main' into 225-quotes

hlxsites · May 31, 2024 · 5ce9ca4 · 5ce9ca4
2 parents 8c0e8f6 + 4e83b7e
commit 5ce9ca4
Showing 1 changed file with 39 additions and 12 deletions.
diff --git a/blocks/agent-about/agent-about.js b/blocks/agent-about/agent-about.js
@@ -1,17 +1,19 @@
-import { a, div } from '../../scripts/dom-helpers.js';
+import {
+  a, div, ul, li,
+} from '../../scripts/dom-helpers.js';
 
-const viewMoreOnClick = (anchor, block) => {
+const viewMoreOnClick = (name, anchor, block) => {
   anchor.addEventListener('click', () => {
     if (anchor.classList.contains('view-more')) {
       anchor.classList.remove('view-more');
       anchor.classList.add('view-less');
-      block.querySelector('.about-text').classList.remove('hide');
-      block.querySelector('.about-text-truncate').classList.add('hide');
+      block.querySelector(`.${name}`).classList.remove('hide');
+      block.querySelector(`.${name}-truncate`).classList.add('hide');
     } else {
       anchor.classList.remove('view-less');
       anchor.classList.add('view-more');
-      block.querySelector('.about-text').classList.add('hide');
-      block.querySelector('.about-text-truncate').classList.remove('hide');
+      block.querySelector(`.${name}`).classList.add('hide');
+      block.querySelector(`.${name}-truncate`).classList.remove('hide');
     }
   });
 };
@@ -22,12 +24,37 @@ export default function decorate(block) {
     children.forEach((child, index) => {
       child.classList.add(`cols-${index + 1}`);
       if (index === 0) {
-        child.children[1].classList.add('about-text', 'hide');
-        child.append(div({ class: 'about-text-truncate' },
-          `${child.children[1].textContent.substring(0, 245)}...`));
-        const anchor = a({ class: 'view-more' });
-        child.append(anchor);
-        viewMoreOnClick(anchor, block);
+        const name = 'about-text';
+        const threshold = 245;
+        child.children[1].classList.add(name);
+        if (child.children[1].textContent > threshold) {
+          child.children[1].classList.add('hide');
+          child.append(div({ class: `${name}-truncate` },
+            `${child.children[1].textContent.substring(0, threshold)}...`));
+          const anchor = a({ class: 'view-more' });
+          child.append(anchor);
+          viewMoreOnClick(name, anchor, block);
+        }
+      } else {
+        const threshold = 3;
+        const name = child.children[0].textContent.toLowerCase().replace(/\s/g, '-');
+        const liItems = child.children[1].querySelectorAll('li');
+        child.children[1].classList.add(name);
+
+        if (liItems.length > threshold) {
+          child.children[1].classList.add('hide');
+          const tempUl = ul({ });
+          Array.from(child.children[1].querySelectorAll('li'))
+            .slice(0, threshold).forEach((liItem) => {
+              const tempLi = li({}, liItem.textContent);
+              tempUl.append(tempLi);
+            });
+
+          child.append(div({ class: `${name}-truncate` }, tempUl));
+          const anchor = a({ class: 'view-more' });
+          child.append(anchor);
+          viewMoreOnClick(name, anchor, block);
+        }
       }
     });
   }