Skip to content

Commit ff7eedf

Browse files
author
Matheus Araujo
committed
fix(ellipsis): add support for dynamic content
Before it was clipping the text OnInit, in order to support dynamic content, now it uses AfterViewInit Also add examples for different ways of using it.
1 parent 61d652f commit ff7eedf

4 files changed

Lines changed: 78 additions & 10 deletions

File tree

‎src/app/app.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1+
<h1>Examples</h1>
2+
3+
<h2>Static Content</h2>
14
<p snEllipsis>Ullamco esse laborum dolor eiusmod laboris aliquip aute aute aute. Ullamco velit ad laboris consequat. Deserunt ad reprehenderit cupidatat do labore esse. Occaecat nostrud mollit commodo ut ex elit fugiat et reprehenderit quis. Fugiat aliquip excepteur quis sunt sint consectetur duis elit quis ex fugiat quis eiusmod. Ad pariatur ipsum nulla sunt est non ut id et nisi culpa voluptate mollit ad. Tempor cupidatat esse ad in cillum incididunt quis. Nulla cillum qui aute labore quis ad cillum ullamco adipisicing qui est nulla amet. Nisi consectetur sint nostrud est duis dolore enim aliqua esse laboris Lorem.</p>
5+
6+
<h2>Content Binding</h2>
7+
<p snEllipsis>{{ textContent }}</p>
8+
9+
<h2>inneHTML Binding</h2>
10+
<p snEllipsis [innerHTML]="htmlContent"></p>

‎src/app/app.component.ts‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,35 @@ import { Component } from '@angular/core';
55
templateUrl: './app.component.html',
66
styleUrls: ['./app.component.scss']
77
})
8-
export class AppComponent { }
8+
export class AppComponent {
9+
textContent = `
10+
Ullamco esse laborum dolor eiusmod laboris aliquip \
11+
aute aute aute. Ullamco velit ad laboris consequat. \
12+
Deserunt ad reprehenderit cupidatat do labore esse. \
13+
Occaecat nostrud mollit commodo ut ex elit fugiat et \
14+
reprehenderit quis. Fugiat aliquip excepteur quis \
15+
sunt sint consectetur duis elit quis ex fugiat quis \
16+
eiusmod. Ad pariatur ipsum nulla sunt est non ut id \
17+
et nisi culpa voluptate mollit ad. Tempor cupidatat \
18+
esse ad in cillum incididunt quis. Nulla cillum qui \
19+
aute labore quis ad cillum ullamco adipisicing qui \
20+
est nulla amet. Nisi consectetur sint nostrud est \
21+
duis dolore enim aliqua esse laboris Lorem.
22+
`;
23+
24+
htmlContent = `
25+
Ullamco esse laborum dolor eiusmod laboris aliquip \
26+
aute aute aute. Ullamco velit ad laboris consequat. \
27+
<br> <br> \
28+
Deserunt ad reprehenderit cupidatat do labore esse. \
29+
Occaecat nostrud mollit commodo ut ex elit fugiat et \
30+
reprehenderit quis. Fugiat aliquip excepteur quis \
31+
sunt sint consectetur duis elit quis ex fugiat quis \
32+
eiusmod. Ad pariatur ipsum nulla sunt est non ut id \
33+
et nisi culpa voluptate mollit ad. Tempor cupidatat \
34+
esse ad in cillum incididunt quis. Nulla cillum qui \
35+
aute labore quis ad cillum ullamco adipisicing qui \
36+
est nulla amet. Nisi consectetur sint nostrud est \
37+
duis dolore enim aliqua esse laboris Lorem.
38+
`;
39+
}

‎src/app/ellipsis/ellipsis.directive.spec.ts‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ import { Component } from '@angular/core';
33
import { EllipsisDirective } from './ellipsis.directive';
44

55
// tslint:disable-next-line:max-line-length
6-
const template = `<p snEllipsis>Ullamco esse laborum dolor eiusmod laboris aliquip aute aute aute. Ullamco velit ad laboris consequat. Deserunt ad reprehenderit cupidatat do labore esse. Occaecat nostrud mollit commodo ut ex elit fugiat et reprehenderit quis. Fugiat aliquip excepteur quis sunt sint consectetur duis elit quis ex fugiat quis eiusmod. Ad pariatur ipsum nulla sunt est non ut id et nisi culpa voluptate mollit ad. Tempor cupidatat esse ad in cillum incididunt quis. Nulla cillum qui aute labore quis ad cillum ullamco adipisicing qui est nulla amet. Nisi consectetur sint nostrud est duis dolore enim aliqua esse laboris Lorem.</p>`;
6+
const baseContent = `Ullamco esse laborum dolor eiusmod laboris aliquip aute aute aute. Ullamco velit ad laboris consequat. Deserunt ad reprehenderit cupidatat do labore esse. Occaecat nostrud mollit commodo ut ex elit fugiat et reprehenderit quis. Fugiat aliquip excepteur quis sunt sint consectetur duis elit quis ex fugiat quis eiusmod. Ad pariatur ipsum nulla sunt est non ut id et nisi culpa voluptate mollit ad. Tempor cupidatat esse ad in cillum incididunt quis. Nulla cillum qui aute labore quis ad cillum ullamco adipisicing qui est nulla amet. Nisi consectetur sint nostrud est duis dolore enim aliqua esse laboris Lorem.`;
7+
const trimmedContent = `Ullamco esse laborum dolor eiusmod laboris aliquip aute aute aute. Ullamco velit ad laboris consequat. Deserunt ad reprehenderit cupidatat do labore esse. Occaecat nostrud mollit commodo ut ex elit fugiat et reprehenderit quis. Fugiat aliquip excepteur quis sunt sint consectetur duis elit…`;
8+
9+
const template = `
10+
<p class="static" snEllipsis>${baseContent}</p> \
11+
<p class="dynamic" snEllipsis>{{ dynamicContent }}</p> \
12+
<p class="html" snEllipsis [innerHTML]="htmlContent"></p>
13+
`;
714

815
@Component({
916
selector: 'sn-test-component',
@@ -13,10 +20,14 @@ const template = `<p snEllipsis>Ullamco esse laborum dolor eiusmod laboris aliqu
1320
p { height: 200px; overflow: hidden; padding: 1rem; width: 200px; }
1421
`]
1522
})
16-
class TestComponent { }
23+
class TestComponent {
24+
public dynamicContent: string;
25+
public htmlContent: string;
26+
}
1727

18-
describe('AppComponent', () => {
28+
describe('EllipsisDirective', () => {
1929
let fixture: ComponentFixture<TestComponent>;
30+
let component: TestComponent;
2031
let compiled: HTMLElement;
2132

2233
beforeEach(async(() => {
@@ -30,13 +41,30 @@ describe('AppComponent', () => {
3041

3142
beforeEach(() => {
3243
fixture = TestBed.createComponent(TestComponent);
44+
component = fixture.componentInstance;
45+
46+
component.dynamicContent = baseContent;
47+
component.htmlContent = baseContent.split('.').join('. <br><br>');
48+
3349
compiled = fixture.debugElement.nativeElement;
3450
});
3551

36-
it('should render directive and clip text', async(() => {
52+
it('should clip static text', async(() => {
53+
fixture.detectChanges();
54+
expect(compiled.querySelector('.static').textContent)
55+
.toEqual(trimmedContent);
56+
}));
57+
58+
it('should clip dynamic text', async(() => {
59+
fixture.detectChanges();
60+
expect(compiled.querySelector('.dynamic').textContent)
61+
.toEqual(trimmedContent);
62+
}));
63+
64+
it('should clip HTML text', async(() => {
3765
fixture.detectChanges();
38-
expect(compiled.querySelector('p').textContent)
66+
expect(compiled.querySelector('.html').textContent)
3967
// tslint:disable-next-line:max-line-length
40-
.toEqual(`Ullamco esse laborum dolor eiusmod laboris aliquip aute aute aute. Ullamco velit ad laboris consequat. Deserunt ad reprehenderit cupidatat do labore esse. Occaecat nostrud mollit commodo ut ex elit fugiat et reprehenderit quis. Fugiat aliquip excepteur quis sunt sint consectetur duis elit…`);
68+
.toEqual(`Ullamco esse laborum dolor eiusmod laboris aliquip aute aute aute. Ullamco velit ad laboris consequat. Deserunt ad reprehenderit cupidatat do labore esse. Occaecat nostrud mollit…`);
4169
}));
4270
});

‎src/app/ellipsis/ellipsis.directive.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, ElementRef, OnInit } from '@angular/core';
1+
import { AfterViewInit, Directive, ElementRef } from '@angular/core';
22

33
/**
44
* Removes excess text from element until it fits in elements
@@ -18,7 +18,7 @@ import { Directive, ElementRef, OnInit } from '@angular/core';
1818
@Directive({
1919
selector: '[snEllipsis]'
2020
})
21-
export class EllipsisDirective implements OnInit {
21+
export class EllipsisDirective implements AfterViewInit {
2222
/**
2323
* Ellipsis charater
2424
*
@@ -50,7 +50,7 @@ export class EllipsisDirective implements OnInit {
5050
*
5151
* @memberof EllipsisDirective
5252
*/
53-
public ngOnInit(): void {
53+
public ngAfterViewInit(): void {
5454
this.clipText();
5555
}
5656
/**

0 commit comments

Comments
 (0)