Skip to content
This repository was archived by the owner on Sep 4, 2020. It is now read-only.

Commit f6de077

Browse files
author
clouless
committed
OnDestory for tooltip trigger
1 parent 8f25ada commit f6de077

9 files changed

+149
-55
lines changed

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"COMMENT": "THIS FILE WILL BE PARSED DURING BUILD. IT IS NOT THE ACTUAL PACKAGE FILE PUSHE TO NPMJS!",
33
"name": "@cloukit/tooltip",
44
"moduleId": "tooltip",
5-
"version": "1.3.0",
5+
"version": "1.3.1",
66
"description": "A simple tooltip component",
77
"license": "MIT",
88
"author": "codelcou.io",
@@ -22,7 +22,8 @@
2222
"@cloukit/theme": ">=1.6.1"
2323
},
2424
"devDependencies": {
25-
"@cloukit/library-build-chain": "1.7.1"
25+
"@cloukit/library-build-chain": "1.13.0",
26+
"@cloukit/story": "1.2.0"
2627
},
2728
"peerDependencies": {
2829
"@angular/common": ">=4.0.0",

‎src/components/tooltip.directive.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
* https://github.com/cloukit/legal
55
*/
66
import {
7-
Directive, Input, HostListener, ViewContainerRef, ComponentFactoryResolver,
7+
Directive, Input, HostListener, ViewContainerRef, ComponentFactoryResolver, OnDestroy,
88
} from '@angular/core';
99
import { DropoutService, DropoutComponentCreationRequest, DropoutComponentRefId, DropoutPlacement } from '@cloukit/dropout';
1010
import { CloukitTooltipComponent } from './children/tooltip.component';
1111

1212
@Directive({
1313
selector: '[cloukitTooltip]',
1414
})
15-
export class CloukitTooltipDirective {
15+
export class CloukitTooltipDirective implements OnDestroy {
1616

1717
@Input('cloukitTooltip')
1818
cloukitDropout: string;
@@ -79,4 +79,8 @@ export class CloukitTooltipDirective {
7979
deactivate() {
8080
this._doDeactivate();
8181
}
82+
83+
ngOnDestroy() {
84+
this._doDeactivate();
85+
}
8286
}

‎src/demo/demo.component.html‎

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,14 @@
11
<cloukit-dropout-outlet></cloukit-dropout-outlet>
2-
<div style="padding:60px;">
2+
<div style="padding:10px;">
3+
4+
<cloukit-story title="Tooltip Directions" story="story-00-tooltip-directions">
5+
<story-00-tooltip-directions></story-00-tooltip-directions>
6+
</cloukit-story>
37

4-
<span class="label">tooltip to the left:</span>
5-
<span
6-
class="tooltipTrigger"
7-
cloukitTooltip="delicious german sausage"
8-
cloukitTooltipPlacement="left"
9-
>Bratwurst</span>
10-
<br><br>
11-
<span class="label">tooltip to the right:</span>
12-
<span
13-
class="tooltipTrigger"
14-
cloukitTooltip="delicious german sausage"
15-
cloukitTooltipPlacement="right"
16-
>Bratwurst</span>
17-
<br><br>
18-
<span class="label">tooltip to the top:</span>
19-
<span
20-
class="tooltipTrigger"
21-
cloukitTooltip="delicious german sausage"
22-
cloukitTooltipPlacement="top"
23-
>Bratwurst</span>
24-
<br><br>
25-
<span class="label">tooltip to the bottom:</span>
26-
<span
27-
class="tooltipTrigger"
28-
cloukitTooltip="delicious german sausage"
29-
cloukitTooltipPlacement="bottom"
30-
>Bratwurst</span>
31-
<br><br>
32-
<span class="label">tooltip on a button:</span>
33-
<button
34-
class="tooltipTrigger"
35-
cloukitTooltip="delicious german sausage"
36-
cloukitTooltipPlacement="bottom"
37-
>Bratwurst</button>
388
<br><br>
39-
<span class="label">tooltip on a buton with click action:</span>
40-
<a
41-
href="#"
42-
class="tooltipTrigger"
43-
cloukitTooltip="delicious german sausage"
44-
cloukitTooltipPlacement="bottom"
45-
(click)="counter=counter+1"
46-
>Bratwurst {{counter}}</a>
9+
10+
<cloukit-story title="Tooltip Trigger Element Destroyed" story="story-01-trigger-element-destroyed">
11+
<story-01-trigger-element-destroyed></story-01-trigger-element-destroyed>
12+
</cloukit-story>
13+
4714
</div>

‎src/demo/demo.component.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'demo',
55
templateUrl: './demo.component.html',
6-
styles: [
7-
'.tooltipTrigger { color:#710ECC; cursor: help; }',
8-
'.label { display:inline-block; width:250px; }',
9-
],
6+
styles: [],
107
})
118
export class DemoComponent {
12-
counter = 0;
9+
public static sharedStyles = [
10+
'.tooltipTrigger { color:#710ECC; cursor: help; }',
11+
'.label { display:inline-block; width:250px; }',
12+
'.superButton, .superButtonSecondary { border:2px solid #710ECC; outline:0; background-color:#710ECC; color:#fff; border-radius:0px; padding:4px 8px 4px 8px; color:#fff; cursor:pointer; font-size:1rem; }',
13+
'.superButton:hover, .superButtonSecondary:hover { border:2px solid #710ECC; background-color:#fff; color:#710ECC; }',
14+
'.superButtonSecondary { border-color: rgb(164, 227, 254); background-color:rgb(164, 227, 254); }',
15+
'.superButtonSecondary:hover { border-color:rgb(164, 227, 254); background-color:#fff; color:rgb(164, 227, 254); }',
16+
'.superButton:disabled, .superButtonSecondary:disabled { border-color:#777; background-color:#777; color:#fff; cursor:not-allowed; }',
17+
]
1318
}

‎src/demo/demo.module.ts‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,37 @@ import { CloukitDropoutModule } from '@cloukit/dropout';
44
import { CloukitThemeModule } from '@cloukit/theme';
55
import { CloukitTooltipModule } from '../index';
66
import { DemoComponent } from './demo.component';
7+
import demoStoriesSource from '../assets/demoStoriesSource.json';
8+
import { CloukitStoryModule, CloukitStoryService } from '@cloukit/story';
9+
import { Story00Component } from 'demo/stories/story-00-tooltip-directions';
10+
import { Story01Component } from './stories/story-01-trigger-element-destroyed';
11+
712

813
@NgModule({
9-
declarations: [ DemoComponent ],
14+
declarations: [
15+
DemoComponent,
16+
Story00Component,
17+
Story01Component,
18+
],
1019
exports: [ DemoComponent ],
1120
imports: [
1221
CommonModule,
1322
CloukitThemeModule,
1423
CloukitTooltipModule,
1524
CloukitDropoutModule,
25+
CloukitStoryModule,
1626
],
1727
providers: [ ],
18-
bootstrap: [ ]
28+
bootstrap: [ ],
1929
})
20-
export class DemoModule {}
30+
export class DemoModule {
31+
constructor(private cloukitStoryService: CloukitStoryService) {
32+
//
33+
// REGISTER STORY SOURCES
34+
//
35+
const keys = Object.keys(demoStoriesSource);
36+
for (let i=0; i<keys.length; i++) {
37+
this.cloukitStoryService.addSource(keys[i], demoStoriesSource[keys[i]]);
38+
}
39+
}
40+
}

‎src/demo/stories/story-00-tooltip-directions.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<span class="label">tooltip to the left:</span>
2+
<span
3+
class="tooltipTrigger"
4+
cloukitTooltip="delicious german sausage"
5+
cloukitTooltipPlacement="left"
6+
>Bratwurst</span>
7+
<br><br>
8+
<span class="label">tooltip to the right:</span>
9+
<span
10+
class="tooltipTrigger"
11+
cloukitTooltip="delicious german sausage"
12+
cloukitTooltipPlacement="right"
13+
>Bratwurst</span>
14+
<br><br>
15+
<span class="label">tooltip to the top:</span>
16+
<span
17+
class="tooltipTrigger"
18+
cloukitTooltip="delicious german sausage"
19+
cloukitTooltipPlacement="top"
20+
>Bratwurst</span>
21+
<br><br>
22+
<span class="label">tooltip to the bottom:</span>
23+
<span
24+
class="tooltipTrigger"
25+
cloukitTooltip="delicious german sausage"
26+
cloukitTooltipPlacement="bottom"
27+
>Bratwurst</span>
28+
<br><br>
29+
<span class="label">tooltip on a button:</span>
30+
<button
31+
class="tooltipTrigger"
32+
cloukitTooltip="delicious german sausage"
33+
cloukitTooltipPlacement="bottom"
34+
>Bratwurst</button>
35+
<br><br>
36+
<span class="label">tooltip on a buton with click action:</span>
37+
<a
38+
href="#"
39+
class="tooltipTrigger"
40+
cloukitTooltip="delicious german sausage"
41+
cloukitTooltipPlacement="bottom"
42+
(click)="counter=counter+1"
43+
>Bratwurst {{counter}}</a>

‎src/demo/stories/story-00-tooltip-directions.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
import { DemoComponent } from '../demo.component';
3+
4+
@Component({
5+
selector: 'story-00-tooltip-directions',
6+
templateUrl: './story-00-tooltip-directions.html',
7+
styles: [].concat(DemoComponent.sharedStyles),
8+
})
9+
export class Story00Component {
10+
counter = 0;
11+
}

‎src/demo/stories/story-01-trigger-element-destroyed.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<p>Click remove last item in 2sec, hover the last item and wait. The Tooltip should disappear once the item is removed.</p>
2+
<div style="padding:10px 0 10px 0;">
3+
<button
4+
class="superButton"
5+
type="button"
6+
[disabled]="items.length === 0"
7+
(click)="removeLastItem()"
8+
>remove last item in 2sec</button>
9+
<button
10+
class="superButtonSecondary"
11+
type="button"
12+
(click)="resetItems()"
13+
>reset items</button>
14+
</div>
15+
<div *ngFor="let item of items" class="item">
16+
<span class="tooltipTrigger" cloukitTooltip="foobar" cloukitTooltipPlacement="right">{{item}}</span>
17+
</div>
18+

‎src/demo/stories/story-01-trigger-element-destroyed.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component } from '@angular/core';
2+
import { DemoComponent } from '../demo.component';
3+
4+
@Component({
5+
selector: 'story-01-trigger-element-destroyed',
6+
templateUrl: './story-01-trigger-element-destroyed.html',
7+
styles: [
8+
'.item { padding:10px 20px 10px 20px; border:1px solid rgb(164, 227, 254); }',
9+
].concat(DemoComponent.sharedStyles),
10+
})
11+
export class Story01Component {
12+
allItems = [ 'chocolate', 'chips', 'Reese\'s Pieces', 'M&M\'s' ];
13+
items = [].concat(this.allItems);
14+
15+
removeLastItem() {
16+
const self = this;
17+
setTimeout(() => {
18+
self.items.pop();
19+
}, 2000);
20+
}
21+
22+
resetItems() {
23+
this.items = [].concat(this.allItems);
24+
}
25+
}

0 commit comments

Comments
 (0)