https://www.impactpool.org/assets/controllers/read_more_controller-81d0b438.js

1import { Controller } from '@hotwired/stimulus';
2
3export default class extends Controller {
4
5  connect () {
6    let emValue = window.innerHeight / parseFloat( getComputedStyle(document.querySelector('body'))['font-size'])
7    let limit = 7 * (1.5 * emValue);
8    let contentBoundingRec = this.element.firstChild.getBoundingClientRect();
9
10    if (contentBoundingRec.height > limit) {
11      let lines = this.element.offsetHeight / emValue;
12      this.element.classList.add('read-more-container')
13      this.element.firstChild.style.webkitLineClamp =  `${Math.ceil(lines)}`;
14
15      let readMoreEl = document.createElement('div')
16      readMoreEl.innerText = "Read more";
17      readMoreEl.classList.add('ip-link');
18      readMoreEl.setAttribute('link-type', 'info');
19      readMoreEl.style.cssText = "margin-top: 10px;";
20      readMoreEl.addEventListener('click', () => {
21        this.element.classList.remove('read-more-container')
22        // readMoreEl.innerText = "Read less";
23        // readMoreEl.addEventListener('click', () => {
24        //   this.element.classList.add('read-more-container');
25        //   readMoreEl.innerText = "Read more";
26        // }, {once: true});
27        readMoreEl.remove();
28      });
29      this.element.appendChild(readMoreEl);
30    }
31  }
32}