From d2066de666b31d97e761348f9f619bd3670d47a8 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Wed, 13 Dec 2023 09:23:28 +0100
Subject: [PATCH] Add component max-lines with toggle

---
 .../src/lib/max-lines/max-lines.component.css |  0
 .../lib/max-lines/max-lines.component.html    | 15 ++++
 .../src/lib/max-lines/max-lines.component.ts  | 83 +++++++++++++++++++
 .../metadata-info.component.html              | 11 +--
 .../ui/elements/src/lib/ui-elements.module.ts |  4 +-
 5 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.css
 create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.html
 create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.ts

diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.css b/libs/ui/elements/src/lib/max-lines/max-lines.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.html b/libs/ui/elements/src/lib/max-lines/max-lines.component.html
new file mode 100644
index 0000000000..ca94208cde
--- /dev/null
+++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.html
@@ -0,0 +1,15 @@
+<div
+  #container
+  class="max-lines overflow-hidden transition-[max-height] duration-300"
+  [ngClass]="isExpanded ? 'ease-in' : 'ease-out'"
+  [style.maxHeight]="maxHeight"
+>
+  <ng-content></ng-content>
+</div>
+<div
+  *ngIf="showToggleButton"
+  (click)="toggleDisplay()"
+  class="text-primary cursor-pointer pt-2.5"
+>
+  {{ isExpanded ? 'Show Less' : 'Read More' }}
+</div>
diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts
new file mode 100644
index 0000000000..22654cba0f
--- /dev/null
+++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts
@@ -0,0 +1,83 @@
+import {
+  Component,
+  Input,
+  ElementRef,
+  ChangeDetectionStrategy,
+  AfterViewInit,
+  ViewChild,
+  OnDestroy,
+  ChangeDetectorRef,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-max-lines',
+  templateUrl: './max-lines.component.html',
+  styleUrls: ['./max-lines.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MaxLinesComponent implements AfterViewInit, OnDestroy {
+  @Input() maxLines = 6
+
+  isExpanded = false
+  maxHeight = ''
+  showToggleButton = false
+  observer: ResizeObserver
+
+  @ViewChild('container') container!: ElementRef
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.calculateMaxHeight()
+
+    this.observer = new ResizeObserver((mutations) => {
+      mutations.forEach(() => {
+        this.calculateMaxHeight()
+      })
+    })
+
+    this.observer.observe(this.container.nativeElement.children[0])
+  }
+
+  toggleDisplay() {
+    this.isExpanded = !this.isExpanded
+    this.calculateMaxHeight()
+  }
+
+  calculateMaxHeight() {
+    const containerElement = this.container.nativeElement
+    const contentElement = containerElement.children[0]
+    const contentHeight = contentElement.getBoundingClientRect().height
+
+    if (contentHeight) {
+      if (contentHeight > this.maxLines * this.getLineHeight(contentElement)) {
+        this.showToggleButton = true
+
+        this.maxHeight = this.isExpanded
+          ? `${contentHeight}px`
+          : `${this.maxLines * this.getLineHeight(contentElement)}px`
+      } else {
+        this.showToggleButton = false
+        this.maxHeight = `${contentHeight}px`
+      }
+      containerElement.setAttribute(
+        'style',
+        `height: ${this.maxHeight}; max-height: ${this.maxHeight}; overflow: hidden`
+      )
+
+      this.cdr.detectChanges()
+    }
+  }
+
+  getLineHeight(element: HTMLElement): number {
+    const computedStyle = window.getComputedStyle(element)
+    const lineHeight = parseFloat(computedStyle.lineHeight)
+    const fontSize = parseFloat(computedStyle.fontSize || '14')
+    const result = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight // Use a default if line height is not specified
+    return result
+  }
+
+  ngOnDestroy(): void {
+    this.observer.unobserve(this.container.nativeElement.children[0])
+  }
+}
diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
index 49f224d172..0ab056c244 100644
--- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
+++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
@@ -6,11 +6,12 @@
 </p>
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
-    <p
-      class="whitespace-pre-line break-words"
-      [innerHTML]="metadata.abstract"
-      *ngIf="metadata.abstract"
-    ></p>
+    <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
+      <p
+        class="whitespace-pre-line break-words"
+        [innerHTML]="metadata.abstract"
+      ></p>
+    </gn-ui-max-lines>
   </gn-ui-content-ghost>
 </div>
 
diff --git a/libs/ui/elements/src/lib/ui-elements.module.ts b/libs/ui/elements/src/lib/ui-elements.module.ts
index b0faaf4305..de219197c5 100644
--- a/libs/ui/elements/src/lib/ui-elements.module.ts
+++ b/libs/ui/elements/src/lib/ui-elements.module.ts
@@ -26,7 +26,8 @@ import { FormsModule } from '@angular/forms'
 import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
-import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
+import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component';
+import { MaxLinesComponent } from './max-lines/max-lines.component'
 
 @NgModule({
   imports: [
@@ -61,6 +62,7 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
+    MaxLinesComponent,
   ],
   exports: [
     MetadataInfoComponent,