diff --git a/demo/components.html b/demo/components.html index 9aad0624..f905886c 100644 --- a/demo/components.html +++ b/demo/components.html @@ -5,7 +5,7 @@ @@ -530,49 +530,94 @@

Read more / Read less

Long text

-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. -
-

Short text

-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. -
-
+
+ +
+
+

Read more / Read less inline variant

+
+ If you want to have the inline variant you can use the variant like the example shown here +
+
+
+

Inline read more / read less

+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. + +
+ + +
@@ -632,8 +677,37 @@

Batcave

function checkReadMore() { document.querySelectorAll('.read-more-component').forEach(container => { const content = container.querySelector('.content'); - const label = container.querySelector('label'); - label.classList.toggle('invisible', content.scrollHeight <= content.clientHeight); + const readMoreBtn = container.querySelector('[data-read-more]'); + const readLessBtn = container.querySelector('[data-read-less]'); + const needsReadMore = content.scrollHeight > content.clientHeight; + + if (!readMoreBtn.textContent.trim()) { + readMoreBtn.prepend(readMoreBtn.dataset.textMore + ' '); + } + if (!readLessBtn.textContent.trim()) { + readLessBtn.prepend(readLessBtn.dataset.textLess + ' '); + } + + if (!content.dataset.originalClasses) { + const lineClampMatch = content.className.match(/line-clamp-\d+/); + content.dataset.originalClasses = lineClampMatch ? lineClampMatch[0] : 'line-clamp-5'; + } + + readMoreBtn.classList.toggle('invisible', !needsReadMore); + readLessBtn.classList.add('invisible'); + + readMoreBtn.addEventListener("click", () => { + content.className = content.className.replace(/line-clamp-\d+/g, ''); + readMoreBtn.style.display = "none"; + readLessBtn.classList.remove('invisible') + readLessBtn.style.display = "inline-flex"; + }); + + readLessBtn.addEventListener("click", () => { + content.classList.add(content.dataset.originalClasses); + readMoreBtn.style.display = "inline-flex"; + readLessBtn.style.display = "none"; + }); }); } diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php index a29f78a5..9aeea435 100644 --- a/resources/views/components-preview.blade.php +++ b/resources/views/components-preview.blade.php @@ -370,6 +370,33 @@
+
+
+

Read more / Read less inline variant

+
+ If you want to have the inline variant you can use the variant like the example shown here +
+
+
+

Inline read more / read less

+ + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. + + + + + +
+
+

Prose component

Wayne Enterprises

diff --git a/resources/views/components/readmore/readmore.blade.php b/resources/views/components/readmore/readmore.blade.php index ff85b02d..a42674f9 100644 --- a/resources/views/components/readmore/readmore.blade.php +++ b/resources/views/components/readmore/readmore.blade.php @@ -1,14 +1,16 @@ {{-- -Read more/less component using the Tailwind CSS `peer` utility. Only used JS for checking if content overflows line-clamp container. +Read more/less component, JS used for checking if content overflows line-clamp container and to show or +hide the more/less buttons. ## Notes - **Clamping** The default of line-clamp-5 is used. -- **Buttons** You can't use