Skip to content

Commit 0dece72

Browse files
Lee Nathanbrandyscarney
Lee Nathan
authored and
brandyscarney
committed
feat(chips): finished Component
1 parent 421f637 commit 0dece72

File tree

6 files changed

+97
-36
lines changed

6 files changed

+97
-36
lines changed

‎src/components/chip/chip.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $chip-margin: 2px 0 !default;
1212

1313
$chip-label-color: rgba(0, 0, 0, .87) !default;
1414
$chip-icon-color: rgba(0, 0, 0, .87) !default;
15-
$chip-remove-color: rgba(137, 137, 137, .54) !default;
15+
$chip-remove-icon-color: rgba(137, 137, 137, .54) !default;
1616

1717
ion-chip {
1818
display: inline-flex;
@@ -87,6 +87,6 @@ ion-chip {
8787

8888
font-size: 1.4em;
8989

90-
color: $chip-remove-color;
90+
color: $chip-remove-icon-color;
9191
}
9292
}

‎src/components/chip/chip.ts‎

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, ElementRef, Renderer, Attribute } from '@angular/core';
1+
import { Component, ElementRef, Renderer, Attribute } from '@angular/core';
22

33
import { Config } from '../../config/config';
44

@@ -10,10 +10,13 @@ import { Config } from '../../config/config';
1010
* @see {@link /docs/v2/components/#chips Chips Component Docs}
1111
**/
1212

13-
@Directive({
14-
selector: 'ion-chip'
13+
@Component({
14+
selector: 'ion-chip',
15+
template: '<span class="hide"><ng-content></ng-content></span><ion-label></ion-label><button clear dark (click)="deleteChip()" *ngIf="deletable"><ion-icon name="close-circle"></ion-icon></button>'
1516
})
17+
1618
export class Chip {
19+
private deletable: boolean = false;
1720

1821
constructor(
1922
config: Config,
@@ -25,31 +28,84 @@ export class Chip {
2528
this._readAttrs(element);
2629
}
2730

31+
/**
32+
* @private
33+
*/
34+
ngOnInit() {
35+
this._fixContent(this._elementRef.nativeElement);
36+
}
37+
2838
/**
2939
* @private
3040
*/
3141
private _readAttrs(element: HTMLElement) {
42+
3243
let elementAttrs = element.attributes;
3344
let attrName: string;
3445

35-
console.info("mushroom");
36-
3746
for (let i = 0, l = elementAttrs.length; i < l; i++) {
3847
if (elementAttrs[i].value !== '') continue;
3948

4049
attrName = elementAttrs[i].name;
4150

42-
// Ignore attributes item-left, item-right
43-
if (attrName.indexOf('item') === -1) {
44-
this._setClass(attrName);
51+
if (attrName === 'deletable') {
52+
this._setDeletable();
4553
}
4654
}
4755
}
4856

4957
/**
5058
* @private
5159
*/
52-
private _setClass(color: string) {
53-
this._renderer.setElementClass(this._elementRef.nativeElement, 'chip-' + color, true);
60+
private deleteChip() {
61+
this._elementRef.nativeElement.remove();
62+
}
63+
64+
/**
65+
* @private
66+
*/
67+
private _setDeletable() {
68+
this.deletable = true;
69+
}
70+
71+
72+
/**
73+
* @private
74+
*/
75+
private _fixContent(element: HTMLElement) {
76+
// Take the first text node and add it to the label.
77+
// Take the first icon or avatar and add it to the chip.
78+
// Discard everything else.
79+
80+
let childNodes: NodeList = element.childNodes;
81+
let innerNode: Node = childNodes[0];
82+
let labelNode: Node = childNodes[1];
83+
let addedNodes: NodeList = innerNode.childNodes;
84+
element.removeChild(innerNode);
85+
86+
let missing = {image: true, text: true};
87+
let childNode: Node;
88+
let imageNode: Node;
89+
let text: string;
90+
for (let i = 0, l = addedNodes.length; i < l; i++) {
91+
childNode = addedNodes[i];
92+
if (childNode.nodeType === 3 && missing.text) {
93+
text = childNode.textContent.trim();
94+
if (text !== '') {
95+
labelNode.textContent = text;
96+
missing.text = false;
97+
}
98+
}
99+
if (childNode.nodeType === 1 && missing.image) {
100+
name = childNode.nodeName;
101+
if (childNode.nodeName === 'ION-ICON' || childNode.nodeName === 'ION-AVATAR') {
102+
missing.image = false;
103+
imageNode = childNode;
104+
}
105+
}
106+
}
107+
if (imageNode) {
108+
element.insertBefore(imageNode, element.firstChild);
109+
}
54110
}
55111
}

‎src/components/chip/test/basic/main.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111

1212
<p>
1313
<ion-chip>
14-
<ion-label>Default</ion-label>
14+
Default
1515
</ion-chip>
1616
</p>
1717
<p>
1818
<ion-chip>
19-
<ion-label>Another Longer Text</ion-label>
19+
Another With Longer Text
2020
</ion-chip>
2121
</p>
2222

‎src/components/chip/test/delete/main.html‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,38 @@
1010
<ion-content padding style="text-align:center">
1111

1212
<p>
13-
<ion-chip>
14-
<ion-label>Default</ion-label>
15-
<button ion-button icon-only clear dark (click)="deleteClicked()">
16-
<ion-icon name="close-circle"></ion-icon>
17-
</button>
13+
<ion-chip deletable>
14+
Default
1815
</ion-chip>
1916
</p>
2017

2118
<p>
22-
<ion-chip>
19+
<ion-chip deletable>
2320
<ion-icon name="pin" primary></ion-icon>
24-
<ion-label>Primary</ion-label>
25-
<button ion-button icon-only clear dark (click)="deleteClicked()">
26-
<ion-icon name="close-circle"></ion-icon>
27-
</button>
21+
With Icon
2822
</ion-chip>
2923
</p>
3024

3125
<p>
32-
<ion-chip>
26+
<ion-chip deletable>
3327
<ion-avatar>
3428
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
3529
</ion-avatar>
36-
<ion-label>Default</ion-label>
37-
<button ion-button icon-only clear dark (click)="deleteClicked()">
38-
<ion-icon name="close-circle"></ion-icon>
39-
</button>
30+
With Avatar
31+
</ion-chip>
32+
</p>
33+
34+
<p>
35+
<ion-chip deletable>
36+
<b>This Should Not Be Seen</b>
37+
38+
With Junk Elements
39+
<ion-icon name="pin" primary></ion-icon>
40+
<ion-avatar>
41+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
42+
</ion-avatar>
43+
<hr>
44+
This Should Not Be Seen Either
4045
</ion-chip>
4146
</p>
4247

‎src/components/chip/test/icon/main.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,37 @@
1212
<p>
1313
<ion-chip>
1414
<ion-icon name="pin"></ion-icon>
15-
<ion-label>Default</ion-label>
15+
Default
1616
</ion-chip>
1717
</p>
1818
<p>
1919
<ion-chip>
2020
<ion-icon name="pin" primary></ion-icon>
21-
<ion-label>Primary</ion-label>
21+
Primary
2222
</ion-chip>
2323
</p>
2424
<p>
2525
<ion-chip>
2626
<ion-icon name="pin" secondary></ion-icon>
27-
<ion-label>Secondary</ion-label>
27+
Secondary
2828
</ion-chip>
2929
</p>
3030
<p>
3131
<ion-chip>
3232
<ion-icon name="pin" danger></ion-icon>
33-
<ion-label>Danger</ion-label>
33+
Danger
3434
</ion-chip>
3535
</p>
3636
<p>
3737
<ion-chip>
3838
<ion-icon name="pin" light></ion-icon>
39-
<ion-label>Light</ion-label>
39+
Light
4040
</ion-chip>
4141
</p>
4242
<p>
4343
<ion-chip>
4444
<ion-icon name="pin" dark></ion-icon>
45-
<ion-label>Dark</ion-label>
45+
Dark
4646
</ion-chip>
4747
</p>
4848

‎src/components/chip/test/image/main.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<ion-avatar>
1515
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
1616
</ion-avatar>
17-
<ion-label>Default</ion-label>
17+
Default
1818
</ion-chip>
1919
</p>
2020

0 commit comments

Comments
 (0)