Add text folding

Author: haglobah

index.html.pm

@@ -80,7 +80,7 @@
           ◊orga{18:45 Doors open & Welcome}
           ◊p[#:class ""]{◊span[#:class "font-medium"]{Really Functional Data Structures} (Marvin)}
           ◊abstract{
-			Last time, David showed us functional data structures in the form of persistent data structures. In this talk, I want to show you data structures that are defined entirely by functions themselves - no classes, structs, bitmaps, etc.! Knowing about such structures not only tickles the brain, but can also lead to a better intuition for solving problems functionally. Furthermore, one of the data structures shown can be used for space-efficient encodings of fractals and fun animations.
+			      Last time, David showed us functional data structures in the form of persistent data structures. In this talk, I want to show you data structures that are defined entirely by functions themselves - no classes, structs, bitmaps, etc.! Knowing about such structures not only tickles the brain, but can also lead to a better intuition for solving problems functionally. Furthermore, one of the data structures shown can be used for space-efficient encodings of fractals and fun animations.
           }
           ◊orga{Short break}
           ◊p[#:class ""]{◊span[#:class "font-medium"]{Decoupled by Default – Funktionale Programmierung in der Softwarearchitektur} (Markus)}

main.js

@@ -25,3 +25,57 @@ document.addEventListener('DOMContentLoaded', function() {
       console.error('One or more required elements are missing from the DOM');
   }
 });
+
+document.addEventListener('DOMContentLoaded', () => {
+  const abstracts = document.querySelectorAll('.abstract-wrapper');
+
+  abstracts.forEach(abstract => {
+    const content = abstract.querySelector('.abstract-content');
+    const button = abstract.querySelector('.toggle-button');
+    const lineClamp = 8; // Number of lines set in line-clamp
+
+    // Function to count the number of lines in the content
+    const countLines = (element) => {
+      const computedStyle = window.getComputedStyle(element);
+      const lineHeight = parseFloat(computedStyle.lineHeight);
+      const height = parseFloat(computedStyle.height);
+      return Math.round(height / lineHeight);
+    };
+
+    // Determine if the content exceeds the line-clamp
+    const isTruncated = () => {
+      const totalLines = countLines(content);
+      return totalLines > lineClamp;
+    };
+
+    // Show or hide the toggle button based on content length
+    if (isTruncated()) {
+      button.classList.remove('hidden');
+    } else {
+      button.classList.add('hidden');
+    }
+  });
+
+  const toggleButtons = document.querySelectorAll('.toggle-button');
+
+  toggleButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const wrapper = button.closest('.abstract-wrapper');
+      const content = wrapper.querySelector('.abstract-content');
+      
+      // Toggle expanded state
+      // wrapper.classList.toggle('max-h-60'); // Tailwind's max-height: 13rem (52 * 0.25rem)
+      // content.classList.toggle('max-h-48'); // Tailwind's max-height: 13rem (52 * 0.25rem)
+      content.classList.toggle('line-clamp-[8]');
+      content.classList.toggle('line-clamp-none');
+
+      // Update button text
+      const isExpanded = !content.classList.contains('line-clamp-[8]');
+      const buttonText = button.querySelector('.button-text')
+      buttonText.textContent = isExpanded ? 'Show Less' : 'Show More';
+      
+      // Update aria-expanded attribute for accessibility
+      // button.setAttribute('aria-expanded', isExpanded);
+    });
+  });
+});

pollen.rkt

@@ -45,7 +45,13 @@
       (span ([class "border-solid border-b border-zinc-300 flex-1"]))))
 
 (define (abstract . body)
-  `(div ([class "md:mx-8 mt-2 mb-4 italic text-base"]) ,@body))
+  `(div ([class "abstract-wrapper flex flex-col overflow-hidden italic text-base md:mx-8 mt-2 mb-4"])
+        (div ([class "abstract-content line-clamp-[8] transition-all duration-300 ease-in-out mb-2"])
+             ,@body)
+        (button ([class ,"toggle-button inline-flex justify-center items-center gap-2 self-center text-[@{jordy}]/80 hover:text-[@{jordy}] transition-all duration-200"])
+              (span ([class "button-text"]) "Show more")
+        )))
+
 
 (define (meetup #:title title #:img [img ""] . body)
   `(div ([class "overflow-hidden my-4 snap-center flex w-[90%] shrink-0 mx-8 sm:mx-16 shadow-lg rounded-lg"])