Skip to content

Commit d9976a5

Browse files
lucasccolucascco
committed
add directive and finish reactive list label
1 parent 274b42b commit d9976a5

File tree

7 files changed

+112
-7
lines changed

7 files changed

+112
-7
lines changed

‎src/app/app.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,3 +173,13 @@
173173
color: #777;
174174
}
175175
}
176+
177+
.fab-reactive-list {
178+
left: 35% !important;
179+
.fab {
180+
border-radius: 10%;
181+
width: 12em;
182+
background-color: map-get($colors, light);
183+
color: map-get($colors, primary);
184+
}
185+
}

‎src/directives/directives.module.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { NgModule } from '@angular/core';
2+
import { IsVisibleDirective } from './is-visible/is-visible';
3+
@NgModule({
4+
declarations: [IsVisibleDirective],
5+
imports: [],
6+
exports: [IsVisibleDirective]
7+
})
8+
export class DirectivesModule {}

‎src/directives/is-visible/is-visible.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Directive, EventEmitter, Output, Input, ElementRef, OnInit } from '@angular/core';
2+
3+
import { Content } from 'ionic-angular';
4+
5+
@Directive({
6+
selector: '[is-visible]'
7+
})
8+
export class IsVisibleDirective implements OnInit {
9+
10+
@Output('visible') emitVisible: EventEmitter<boolean> = new EventEmitter<boolean>();
11+
12+
@Input('content') content: Content;
13+
@Input('threshold') threshold: number = 0;
14+
15+
private rect: any;
16+
private height: number;
17+
18+
constructor(public el: ElementRef) {
19+
}
20+
21+
public isVisable() {
22+
this.rect = this.el.nativeElement.getBoundingClientRect();
23+
const bottom = this.getBottom();
24+
const top = this.getTop();
25+
const above = bottom < 0;
26+
const below = (top - this.height) >= 0;
27+
const isVisible = !above && !below;
28+
this.emitVisible.emit(isVisible);
29+
}
30+
31+
public initProp() {
32+
this.height = this.el.nativeElement.offsetParent.clientHeight;
33+
}
34+
35+
public initListener() {
36+
this.content.ionScroll.subscribe(() => {
37+
this.isVisable();
38+
});
39+
}
40+
41+
private getBottom() {
42+
return this.threshold ? this.rect.bottom - ((this.threshold / 100) * this.rect.bottom) : this.rect.bottom;
43+
}
44+
45+
private getTop() {
46+
return this.threshold ? this.rect.top - ((this.threshold / 100) * this.rect.top) : this.rect.top;
47+
}
48+
49+
ngOnInit() {
50+
this.initProp();
51+
this.initListener();
52+
this.isVisable();
53+
}
54+
55+
}

‎src/pages/list/reactive-list-label/list-data.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export interface IDataList {
44
pictureProduct: string;
55
category: string;
66
price: number;
7+
visible?: boolean;
78
}
89

910
export const LIST_DATA: IDataList[] = [

‎src/pages/list/reactive-list-label/reactive-list-label.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,18 @@
1313
</ion-header>
1414

1515

16-
<ion-content>
17-
<ion-card *ngFor="let book of dataList">
16+
<ion-content #content>
17+
<ion-fab class="fab-reactive-list" top center>
18+
<button ion-fab> {{ currentCategory }} </button>
19+
</ion-fab>
20+
<ion-card is-visible [content]="content" (visible)="itemIsVisible($event, book)" *ngFor="let book of dataList">
1821
<img [src]="book.pictureProduct"/>
1922
<ion-card-content>
2023
<ion-card-title>
2124
{{ book.nameProduct }}
2225
</ion-card-title>
2326
<p> {{ book.author }} </p>
24-
<b> {{ book.category }} </b>
27+
<b> {{ book.category }} - {{ book.price | currency:'USD' }}</b>
2528
</ion-card-content>
26-
2729
</ion-card>
2830
</ion-content>

‎src/pages/list/reactive-list-label/reactive-list-label.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { NgModule } from '@angular/core';
22
import { IonicPageModule } from 'ionic-angular';
33
import { ReactiveListLabelPage } from './reactive-list-label';
4+
import { DirectivesModule } from '../../../directives/directives.module';
45

56
@NgModule({
67
declarations: [
78
ReactiveListLabelPage,
89
],
910
imports: [
1011
IonicPageModule.forChild(ReactiveListLabelPage),
12+
DirectivesModule
1113
],
1214
})
1315
export class ReactiveListLabelPageModule {}

‎src/pages/list/reactive-list-label/reactive-list-label.ts

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Component } from '@angular/core';
1+
import { Component, NgZone } from '@angular/core';
22
import { IonicPage, NavController, NavParams } from 'ionic-angular';
33

4-
import { LIST_DATA } from './list-data';
4+
import { LIST_DATA, IDataList } from './list-data';
55

66
@IonicPage()
77
@Component({
@@ -11,8 +11,35 @@ import { LIST_DATA } from './list-data';
1111
export class ReactiveListLabelPage {
1212

1313
public dataList = LIST_DATA;
14+
public currentCategory: string = '';
1415

15-
constructor(public navCtrl: NavController, public navParams: NavParams) {
16+
constructor(public navCtrl: NavController, public navParams: NavParams, private ngZone: NgZone) {
17+
}
18+
19+
public itemIsVisible($event, book: IDataList) {
20+
console.log(book, $event);
21+
book.visible = $event;
22+
this.setCategory();
23+
}
24+
25+
private setCategory() {
26+
const obj = {};
27+
let qtdVisibleCategory = 0;
28+
let higherCategory = '';
29+
this.dataList.filter(bk => bk.visible)
30+
.forEach(bk => obj[bk.category] = obj[bk.category] ? obj[bk.category] + 1 : 1);
31+
for (const key in obj) {
32+
if (obj[key] > qtdVisibleCategory) {
33+
qtdVisibleCategory = obj[key];
34+
higherCategory = key;
35+
}
36+
}
37+
console.log(obj);
38+
this.ngZone.runOutsideAngular(() => {
39+
this.ngZone.run(() => {
40+
this.currentCategory = higherCategory;
41+
});
42+
});
1643
}
1744

1845
ionViewDidLoad() {

0 commit comments

Comments
 (0)