diff --git a/package.json b/package.json index 2f74dd6cb8..84060e61a2 100644 --- a/package.json +++ b/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" diff --git a/src/app/+search-page/search-results/search-results.component.html b/src/app/+search-page/search-results/search-results.component.html index 70e315671b..e4fceb75d0 100644 --- a/src/app/+search-page/search-results/search-results.component.html +++ b/src/app/+search-page/search-results/search-results.component.html @@ -1,4 +1,4 @@ -
+

{{ 'search.results.head' | translate }}

(, ) -
+
+ +
diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts index ef968db0b8..0d4ccff129 100644 --- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts +++ b/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 {} +export class ItemSearchResultListElementComponent extends SearchResultListElementComponent { + lines = Observable.of(3); +} diff --git a/src/app/shared/search-form/search-form.component.ts b/src/app/shared/search-form/search-form.component.ts index 76b33a8fd6..fb3c6ba5a2 100644 --- a/src/app/shared/search-form/search-form.component.ts +++ b/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. diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 245d45ea4e..9710a4f2d1 100644 --- a/src/app/shared/shared.module.ts +++ b/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({ diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html new file mode 100644 index 0000000000..1a778d1ea6 --- /dev/null +++ b/src/app/shared/truncatable/truncatable.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts new file mode 100644 index 0000000000..cec9c287ac --- /dev/null +++ b/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; + @Input() innerHTML; + @Input() height: Observable; + 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)); + } +} diff --git a/src/app/shared/utils/shave.directive.ts b/src/app/shared/utils/shave.directive.ts new file mode 100644 index 0000000000..7a8403aef0 --- /dev/null +++ b/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(); + } + } + +} diff --git a/src/app/typings.d.ts b/src/app/typings.d.ts index f3b4a1a548..c256b0f09d 100644 --- a/src/app/typings.d.ts +++ b/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; + +} diff --git a/yarn.lock b/yarn.lock index 91b2a787e2..6088cf16f8 100644 --- a/yarn.lock +++ b/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"