47063: truncation option with shave library

src/app/app.module.ts

@@ -38,7 +38,7 @@ export function getBase() {
 }
 
 export function getMetaReducers(config: GlobalConfig): Array<MetaReducer<AppState>> {
-  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers, storeFreeze];
+  const metaReducers: Array<MetaReducer<AppState>> = config.production ? appMetaReducers : [...appMetaReducers];
   return config.debug ? [...metaReducers, ...debugMetaReducers] : metaReducers;
 }
 

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

@@ -10,5 +10,6 @@
     </span>
     (<span *ngIf="object.findMetadata('dc.publisher')" class="item-list-publisher">{{object.findMetadata("dc.publisher")}}, </span><span *ngIf="object.findMetadata('dc.date.issued')" class="item-list-date">{{object.findMetadata("dc.date.issued")}}</span>)
   </span>
-  <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</div>
+  <div *ngIf="object.findMetadata('dc.description.abstract')" class="item-list-abstract">
+      <ds-truncatable [lines]="lines" [innerHTML]="object.findMetadata('dc.description.abstract')"></ds-truncatable></div>
 </div>

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

@@ -11,4 +11,6 @@ import { listElementFor } from '../list-element-decorator';
 })
 
 @listElementFor(Item)
-export class ItemListElementComponent extends ObjectListElementComponent<Item> {}
+export class ItemListElementComponent extends ObjectListElementComponent<Item> {
+  private lines = 3;
+}

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

@@ -4,7 +4,6 @@ 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 { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-item-search-result-list-element',
@@ -14,5 +13,5 @@ import { Observable } from 'rxjs/Observable';
 
 @listElementFor(ItemSearchResult)
 export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
-  lines = Observable.of(3);
+  lines = 3;
 }

src/app/shared/truncatable/truncatable.component.html

@@ -1,2 +1 @@
-<span dsShave [shave]="{character: '...'}" [shaveHeight]="styles.toString()" [innerHTML]="innerHTML"></span>
-{{print(styles)}}
+<span dsShave [shave]="{character: '...'}" [shaveHeight]="height" [innerHTML]="innerHTML"></span>

src/app/shared/truncatable/truncatable.component.ts

@@ -1,10 +1,7 @@
-
 import {
-  AfterViewChecked,
-  AfterViewInit, Component, ElementRef, Inject, Input,
+  ChangeDetectorRef, Component, ElementRef, Inject, Input,
   OnInit
 } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 import { NativeWindowRef, NativeWindowService } from '../window.service';
 
 @Component({
@@ -13,20 +10,19 @@ import { NativeWindowRef, NativeWindowService } from '../window.service';
 })
 export class TruncatableComponent implements OnInit {
 
-  @Input() lines: Observable<number>;
+  @Input() lines: number;
   @Input() innerHTML;
-  @Input() height: Observable<number>;
+  height;
   styles: any;
-  public constructor(private elementRef:ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) { }
+
+  public constructor(private elementRef: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef, private changeDetectorRef: ChangeDetectorRef) {
+  }
 
   ngOnInit(): void {
-    const lineHeight = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement).lineHeight.replace('px', '');
     this.styles = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement);
-    this.height = this.lines.map((lines) => (lines * lineHeight)).startWith(0);
-    this.print(this.styles);
-  }
-
-  print(styles) {
-    console.log(styles);
+    setTimeout(() => {
+      this.height = this.styles.lineHeight.replace('px', '') * this.lines;
+      this.changeDetectorRef.detectChanges();
+    }, 0);
   }
 }

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

@@ -1,4 +1,7 @@
-import { Directive, ElementRef, Inject, Input, OnDestroy } from '@angular/core';
+import {
+  Directive, ElementRef, Inject, Input, OnChanges, OnDestroy,
+  OnInit
+} from '@angular/core';
 import { default as shave } from 'shave';
 import { NativeWindowRef, NativeWindowService } from '../window.service';
 import { Observable } from 'rxjs/Observable';
@@ -6,12 +9,33 @@ import { Observable } from 'rxjs/Observable';
 @Directive({
   selector: '[dsShave]'
 })
-export class ShaveDirective implements OnDestroy {
+export class ShaveDirective implements OnDestroy, OnChanges {
+
   @Input() shave: IShaveOptions = {};
-  @Input() shaveHeight: 100;
+
+  @Input()
+  set shaveHeight(value) {
+    if (value > 0) {
+      console.log(value);
+      this._shaveHeight = value;
+    }
+  };
+
+  get shaveHeight() {
+    return this._shaveHeight;
+  }
+
+  private _shaveHeight = 72;
   private sub;
 
   constructor(private ele: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) {
+  }
+
+  ngOnChanges(): void {
+    console.log("onchange");
+    if (this.shaveHeight > 0) {
+      this.runShave();
+    }
     this.subscribeForResizeEvent();
   }