46063: overflow-text-clamp wrapper attempt

package.json

@@ -106,6 +106,7 @@
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
     "shave": "^2.1.3",
+    "text-overflow-clamp": "^1.0.0",
     "ts-md5": "1.2.2",
     "webfontloader": "1.6.28",
     "zone.js": "0.8.18"

src/app/app.component.scss

@@ -23,6 +23,7 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  width: 100%;
 }
 
 .main-content {

src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html

@@ -8,7 +8,7 @@
     </span>
     (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" [innerHTML]="getFirstValue('dc.publisher')">, </span><span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" [innerHTML]="getFirstValue('dc.date.issued')"></span>)
   </span>
-    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
-        <ds-truncatable [lines]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></ds-truncatable>
+    <div  width="100%" *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        <span [dsClamp]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></span>
     </div>
-</div>
+</div>

src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 
 import { listElementFor } from '../../list-element-decorator';
 import { ItemSearchResult } from './item-search-result.model';
 import { SearchResultListElementComponent } from '../search-result-list-element.component';
 import { Item } from '../../../core/shared/item.model';
+import { ListableObject } from '../../listable-object/listable-object.model';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
@@ -12,6 +13,17 @@ import { Item } from '../../../core/shared/item.model';
 })
 
 @listElementFor(ItemSearchResult)
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
   lines = 3;
+
+  constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) {
+    super(listable);
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.lines = 4;
+      this.changeDetectorRef.detectChanges();
+    }, 0);
+  }
 }

src/app/shared/shared.module.ts

@@ -33,6 +33,8 @@ import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.com
 import { VarDirective } from './utils/var.directive';
 import { TruncatableComponent } from './truncatable/truncatable.component';
 import { ShaveDirective } from './utils/shave.directive';
+import { TextOverflowClampDirective } from './utils/clamp-directive';
+
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -80,7 +82,8 @@ const ENTRY_COMPONENTS = [
 
 const DIRECTIVES = [
   VarDirective,
-  ShaveDirective
+  ShaveDirective,
+  TextOverflowClampDirective
 ];
 
 @NgModule({

src/app/shared/utils/clamp-directive.ts

@@ -0,0 +1,20 @@
+import {
+  Directive,
+  ElementRef,
+  Input,
+  OnChanges
+} from '@angular/core';
+
+import * as clampLib from 'text-overflow-clamp';
+
+@Directive({selector: '[dsClamp]'})
+export class TextOverflowClampDirective implements OnChanges {
+    @Input('dsClamp') lines: number;
+
+    constructor(private el: ElementRef) {
+    }
+
+    ngOnChanges(): void {
+        clampLib(this.el.nativeElement, this.lines);
+    }
+}

src/app/shared/utils/shave.directive.ts

@@ -32,7 +32,6 @@ export class ShaveDirective implements OnDestroy, OnChanges {
   }
 
   ngOnChanges(): void {
-    console.log("onchange");
     if (this.shaveHeight > 0) {
       this.runShave();
     }

yarn.lock

@@ -1942,6 +1942,10 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -2791,6 +2795,13 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@^4.3.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -4432,6 +4443,12 @@ mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -5781,6 +5798,10 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
 progress@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
@@ -7144,6 +7165,12 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+text-overflow-clamp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/text-overflow-clamp/-/text-overflow-clamp-1.0.0.tgz#9327faec1b85bf0b293d8c8df32243cbee5c050e"
+  dependencies:
+    global "^4.3.1"
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"