46063: object list truncation start

package.json

@@ -105,6 +105,7 @@
     "pem": "1.12.3",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.4.3",
+    "shave": "^2.1.3",
     "ts-md5": "1.2.2",
     "webfontloader": "1.6.28",
     "zone.js": "0.8.18"

src/app/+search-page/search-results/search-results.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="searchResults?.hasSucceeded" @fadeIn>
+<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading" @fadeIn>
   <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
 <ds-object-list
   [config]="searchConfig.pagination"

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

@@ -8,5 +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" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]"></div>
+    <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
+        <ds-truncatable [lines]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></ds-truncatable>
+    </div>
 </div>

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

@@ -4,12 +4,15 @@ 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',
   styleUrls: ['../search-result-list-element.component.scss', 'item-search-result-list-element.component.scss'],
-  templateUrl: 'item-search-result-list-element.component.html'
+  templateUrl: 'item-search-result-list-element.component.html',
 })
 
 @listElementFor(ItemSearchResult)
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {}
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
+  lines = Observable.of(3);
+}

src/app/shared/search-form/search-form.component.ts

@@ -2,7 +2,6 @@ import { Component, Input } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
 import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
-import { Observable } from 'rxjs/Observable';
 
 /**
  * This component renders a simple item page.

src/app/shared/shared.module.ts

@@ -31,6 +31,8 @@ import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { VarDirective } from './utils/var.directive';
+import { TruncatableComponent } from './truncatable/truncatable.component';
+import { ShaveDirective } from './utils/shave.directive';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -64,7 +66,8 @@ const COMPONENTS = [
   SearchFormComponent,
   ThumbnailComponent,
   WrapperListElementComponent,
-  ViewModeSwitchComponent
+  ViewModeSwitchComponent,
+  TruncatableComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -76,7 +79,8 @@ const ENTRY_COMPONENTS = [
 ];
 
 const DIRECTIVES = [
-  VarDirective
+  VarDirective,
+  ShaveDirective
 ];
 
 @NgModule({

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

@@ -0,0 +1 @@
+<span dsShave [shave]="{character: '...'}" [shaveHeight]="height | async" [innerHTML]="innerHTML"></span>

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

@@ -0,0 +1,26 @@
+
+import {
+  AfterViewChecked,
+  AfterViewInit, Component, ElementRef, Inject, Input,
+  OnInit
+} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { NativeWindowRef, NativeWindowService } from '../window.service';
+
+@Component({
+  selector: 'ds-truncatable',
+  templateUrl: './truncatable.component.html'
+})
+export class TruncatableComponent implements AfterViewChecked {
+
+  @Input() lines: Observable<number>;
+  @Input() innerHTML;
+  @Input() height: Observable<number>;
+  public constructor(private elementRef:ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) { }
+
+  ngAfterViewChecked(): void {
+    const lineHeight = this._window.nativeWindow.getComputedStyle(this.elementRef.nativeElement).lineHeight.replace('px', '');
+    this.height = this.lines.map((lines) => (lines * lineHeight)).startWith(0);
+    this.height.subscribe((h) => console.log('height: ', h));
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Directive, ElementRef, Inject, Input, OnDestroy } from '@angular/core';
+import { default as shave } from 'shave';
+import { NativeWindowRef, NativeWindowService } from '../window.service';
+import { Observable } from 'rxjs/Observable';
+
+@Directive({
+  selector: '[dsShave]'
+})
+export class ShaveDirective implements OnDestroy {
+  @Input() shave: IShaveOptions = {};
+  @Input() shaveHeight: 100;
+  private sub;
+
+  constructor(private ele: ElementRef, @Inject(NativeWindowService) private _window: NativeWindowRef) {
+    this.subscribeForResizeEvent();
+  }
+
+  subscribeForResizeEvent() {
+    const obs = Observable.fromEvent(this._window.nativeWindow, 'resize');
+    this.sub = obs.subscribe((e) => this.runShave());
+  }
+
+  private runShave() {
+    shave(this.ele.nativeElement, this.shaveHeight, this.shave);
+  }
+
+  ngOnDestroy(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+  }
+
+}

src/app/typings.d.ts

@@ -82,3 +82,13 @@ declare module '*.json' {
 }
 
 declare module 'reflect-metadata';
+
+interface IShaveOptions {
+  classname?: string,
+  character?: string
+}
+
+declare module 'shave' {
+  export default function shave(selector: string | Node, maxHeight: number, options?: IShaveOptions): void;
+
+}

yarn.lock

@@ -6647,6 +6647,10 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shave@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/shave/-/shave-2.1.3.tgz#89c7df997d35a95bc31703c9150161bc98d3fa3b"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"