mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-08 10:34:15 +00:00
46063: overflow-text-clamp wrapper attempt
This commit is contained in:
@@ -106,6 +106,7 @@
|
|||||||
"reflect-metadata": "0.1.10",
|
"reflect-metadata": "0.1.10",
|
||||||
"rxjs": "5.4.3",
|
"rxjs": "5.4.3",
|
||||||
"shave": "^2.1.3",
|
"shave": "^2.1.3",
|
||||||
|
"text-overflow-clamp": "^1.0.0",
|
||||||
"ts-md5": "1.2.2",
|
"ts-md5": "1.2.2",
|
||||||
"webfontloader": "1.6.28",
|
"webfontloader": "1.6.28",
|
||||||
"zone.js": "0.8.18"
|
"zone.js": "0.8.18"
|
||||||
|
@@ -23,6 +23,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
|
@@ -8,7 +8,7 @@
|
|||||||
</span>
|
</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 *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>
|
</span>
|
||||||
<div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
|
<div width="100%" *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
|
||||||
<ds-truncatable [lines]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></ds-truncatable>
|
<span [dsClamp]="lines" [innerHTML]="getFirstValue('dc.description.abstract')" ></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@@ -1,9 +1,10 @@
|
|||||||
import { Component } from '@angular/core';
|
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
|
||||||
|
|
||||||
import { listElementFor } from '../../list-element-decorator';
|
import { listElementFor } from '../../list-element-decorator';
|
||||||
import { ItemSearchResult } from './item-search-result.model';
|
import { ItemSearchResult } from './item-search-result.model';
|
||||||
import { SearchResultListElementComponent } from '../search-result-list-element.component';
|
import { SearchResultListElementComponent } from '../search-result-list-element.component';
|
||||||
import { Item } from '../../../core/shared/item.model';
|
import { Item } from '../../../core/shared/item.model';
|
||||||
|
import { ListableObject } from '../../listable-object/listable-object.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ds-item-search-result-list-element',
|
selector: 'ds-item-search-result-list-element',
|
||||||
@@ -12,6 +13,17 @@ import { Item } from '../../../core/shared/item.model';
|
|||||||
})
|
})
|
||||||
|
|
||||||
@listElementFor(ItemSearchResult)
|
@listElementFor(ItemSearchResult)
|
||||||
export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
|
export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
|
||||||
lines = 3;
|
lines = 3;
|
||||||
|
|
||||||
|
constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) {
|
||||||
|
super(listable);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.lines = 4;
|
||||||
|
this.changeDetectorRef.detectChanges();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@@ -33,6 +33,8 @@ import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.com
|
|||||||
import { VarDirective } from './utils/var.directive';
|
import { VarDirective } from './utils/var.directive';
|
||||||
import { TruncatableComponent } from './truncatable/truncatable.component';
|
import { TruncatableComponent } from './truncatable/truncatable.component';
|
||||||
import { ShaveDirective } from './utils/shave.directive';
|
import { ShaveDirective } from './utils/shave.directive';
|
||||||
|
import { TextOverflowClampDirective } from './utils/clamp-directive';
|
||||||
|
|
||||||
|
|
||||||
const MODULES = [
|
const MODULES = [
|
||||||
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
|
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
|
||||||
@@ -80,7 +82,8 @@ const ENTRY_COMPONENTS = [
|
|||||||
|
|
||||||
const DIRECTIVES = [
|
const DIRECTIVES = [
|
||||||
VarDirective,
|
VarDirective,
|
||||||
ShaveDirective
|
ShaveDirective,
|
||||||
|
TextOverflowClampDirective
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
20
src/app/shared/utils/clamp-directive.ts
Normal file
20
src/app/shared/utils/clamp-directive.ts
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
@@ -32,7 +32,6 @@ export class ShaveDirective implements OnDestroy, OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(): void {
|
ngOnChanges(): void {
|
||||||
console.log("onchange");
|
|
||||||
if (this.shaveHeight > 0) {
|
if (this.shaveHeight > 0) {
|
||||||
this.runShave();
|
this.runShave();
|
||||||
}
|
}
|
||||||
|
27
yarn.lock
27
yarn.lock
@@ -1942,6 +1942,10 @@ dom-serializer@0:
|
|||||||
domelementtype "~1.1.1"
|
domelementtype "~1.1.1"
|
||||||
entities "~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:
|
domain-browser@^1.1.1:
|
||||||
version "1.1.7"
|
version "1.1.7"
|
||||||
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
|
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"
|
once "^1.3.0"
|
||||||
path-is-absolute "^1.0.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:
|
globals@^9.18.0:
|
||||||
version "9.18.0"
|
version "9.18.0"
|
||||||
resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
|
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"
|
version "1.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
|
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:
|
minimalistic-assert@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
|
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"
|
version "0.11.10"
|
||||||
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
|
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:
|
progress@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
|
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
|
||||||
@@ -7144,6 +7165,12 @@ term-size@^1.2.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
execa "^0.7.0"
|
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:
|
throttleit@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
|
resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
|
||||||
|
Reference in New Issue
Block a user