@ministryofjustice/hmpps-digital-prison-reporting-frontend 7.0.2 → 7.1.0

package/all.bundle.js

@@ -182,47 +182,35 @@ class BookmarkButton extends DprClientClass {
     }
 }
 
-class ShowMore extends DprClientClass {
+class dprTruncate extends DprClientClass {
     static getModuleName() {
-        return 'show-more';
+        return 'dpr-truncate';
     }
     initialise() {
         this.initShowMore();
     }
     initShowMore() {
-        const element = this.getElement();
-        const textContainer = element.querySelector('.dpr-show-more-content');
-        const button = element.querySelector('.dpr-show-hide-button');
-        const textContent = element.getAttribute('data-content') ?? '';
-        const length = Number(element.getAttribute('data-length')) || 200;
-        const shortString = textContent.replaceAll(/<[^>]+>/g, '').substring(0, length);
-        if (textContent.length > length) {
-            if (textContainer) {
-                textContainer.innerHTML = `${shortString}... `;
-            }
-        }
-        else {
-            if (textContainer) {
-                textContainer.innerHTML = `${textContent}`;
-            }
-            if (button) {
-                button.style.display = 'none';
-            }
+        const container = this.getElement();
+        const content = container.querySelector('.js-content');
+        const button = container.querySelector('.js-show-more');
+        if (!content || !button) {
+            return;
         }
-        button?.addEventListener('click', event => {
-            event.preventDefault();
-            if (button.innerHTML === 'show more') {
-                if (textContainer) {
-                    textContainer.innerHTML = `${textContent}  `;
-                }
-                button.innerHTML = 'show less';
+        const fullHtml = content.dataset['fullHtml'] ?? '';
+        const truncatedHtml = content.dataset['truncatedHtml'] ?? '';
+        button.addEventListener('click', () => {
+            const expanded = container.dataset['expanded'] === 'true';
+            if (expanded) {
+                content.innerHTML = truncatedHtml;
+                button.textContent = 'Show more';
+                button.setAttribute('aria-expanded', String(!expanded));
             }
-            else if (button.innerHTML === 'show less') {
-                if (textContainer) {
-                    textContainer.innerHTML = `${shortString}... `;
-                }
-                button.innerHTML = 'show more';
+            else {
+                content.innerHTML = fullHtml;
+                button.textContent = 'Show less';
+                button.setAttribute('aria-expanded', String(!expanded));
             }
+            container.dataset['expanded'] = String(!expanded);
         });
     }
 }
@@ -19324,7 +19312,7 @@ function initAll() {
         BookmarkButton,
         DateInput,
         DateRangeInput,
-        ShowMore,
+        dprTruncate,
         BarChartVisualisation,
         DoughnutChartVisualisation,
         LineChartVisualisation,