Skip to content

Commit 015825e

Browse files
yannbfyannbf
committed
Merge branch 'lucascco-master'
* lucascco-master: refactor(reactive-list): simple renaming and styling add directive and finish reactive list label finish create list add photos and begin list init data list add new page to list
2 parents 812c9f0 + 0f9f161 commit 015825e

21 files changed

+266
-6225
lines changed

‎package-lock.json

Lines changed: 0 additions & 6225 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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/assets/img/reactive-list-labels/all_light_we_cannot_see.jpeg

7.25 KB
Loading

‎src/assets/img/reactive-list-labels/beneath _scarlet.jpg

136 KB
Loading

‎src/assets/img/reactive-list-labels/born_a_crime.jpg

83.3 KB
Loading

‎src/assets/img/reactive-list-labels/giant_of_the_senate.jpg

117 KB
Loading

‎src/assets/img/reactive-list-labels/origin.jpg

154 KB
Loading

‎src/assets/img/reactive-list-labels/pandemic.jpg

42.9 KB
Loading

‎src/assets/img/reactive-list-labels/rules_civility.jpg

548 KB
Loading

‎src/assets/img/reactive-list-labels/the_glass_castle.jpg

363 KB
Loading

‎src/assets/img/reactive-list-labels/the_life_we_bury.jpg

279 KB
Loading

‎src/assets/img/reactive-list-labels/the_orphan_tale.jpg

172 KB
Loading

‎src/assets/img/reactive-list-labels/the_rooster_bar.jpg

66.7 KB
Loading

‎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/list.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export class ListPage {
2525
title: 'Delete Items',
2626
page: 'DeleteItemsPage'
2727
},
28+
{
29+
title: 'Reactive List Label',
30+
page: 'ReactiveListLabelPage'
31+
},
2832
{
2933
title: 'Users Listing',
3034
page: 'UsersPage'

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
export interface IDataList {
2+
productName: string;
3+
author: string;
4+
pictureProduct: string;
5+
category: string;
6+
price: number;
7+
visible?: boolean;
8+
}
9+
10+
export const LIST_DATA: IDataList[] = [
11+
{
12+
productName: `Beneath a Scarlet Sky: A Novel`,
13+
author: 'Mark Sullivan',
14+
pictureProduct: './assets/img/reactive-list-labels/beneath _scarlet.jpg',
15+
category: 'Literature & Fiction',
16+
price: 5.99
17+
},
18+
{
19+
productName: `The Orphan's Tale: A Novel`,
20+
author: 'Pam Jenoff',
21+
pictureProduct: './assets/img/reactive-list-labels/the_orphan_tale.jpg',
22+
category: 'Literature & Fiction',
23+
price: 10.37
24+
},
25+
{
26+
productName: 'All the Light We Cannot See: A Novel',
27+
author: 'Anthony Doerr',
28+
pictureProduct: './assets/img/reactive-list-labels/all_light_we_cannot_see.jpeg',
29+
category: 'Literature & Fiction',
30+
price: 12.99
31+
},
32+
{
33+
productName: 'Rules of Civility: A Novel',
34+
author: 'Rules of Civility: A Novel',
35+
pictureProduct: './assets/img/reactive-list-labels/rules_civility.jpg',
36+
category: 'Literature & Fiction',
37+
price: 11.79
38+
},
39+
{
40+
productName: 'The Glass Castle: A Memoir',
41+
author: 'Jeannette Walls',
42+
pictureProduct: './assets/img/reactive-list-labels/the_glass_castle.jpg',
43+
category: 'Biographies & Memoirs',
44+
price: 5.14
45+
},
46+
{
47+
productName: 'Born a Crime: Stories from a South African Childhood',
48+
author: 'Trevor Noah',
49+
pictureProduct: './assets/img/reactive-list-labels/born_a_crime.jpg',
50+
category: 'Biographies & Memoirs',
51+
price: 6.0
52+
},
53+
{
54+
productName: 'Al Franken, Giant of the Senate',
55+
author: 'Al Franken',
56+
pictureProduct: './assets/img/reactive-list-labels/giant_of_the_senate.jpg',
57+
category: 'Biographies & Memoirs',
58+
price: 6.39
59+
},
60+
{
61+
productName: 'Pandemic (The Extinction Files Book 1)',
62+
author: 'A.G. Riddle',
63+
pictureProduct: './assets/img/reactive-list-labels/pandemic.jpg',
64+
category: 'Biographies & Memoirs',
65+
price: 5.47
66+
},
67+
{
68+
productName: 'Origin: A Novel',
69+
author: 'Dan Brown',
70+
pictureProduct: './assets/img/reactive-list-labels/origin.jpg',
71+
category: 'Suspense',
72+
price: 10.99
73+
},
74+
{
75+
productName: 'The Rooster Bar',
76+
author: 'John Grisham',
77+
pictureProduct: './assets/img/reactive-list-labels/the_rooster_bar.jpg',
78+
category: 'Suspense',
79+
price: 10.99
80+
},
81+
{
82+
productName: 'The Life We Bury',
83+
author: 'Dan Brown',
84+
pictureProduct: './assets/img/reactive-list-labels/the_life_we_bury.jpg',
85+
category: 'Suspense',
86+
price: 10.99
87+
}
88+
];

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!--
2+
Generated template for the ReactiveListLabelPage page.
3+
4+
See http://ionicframework.com/docs/components/#navigation for more info on
5+
Ionic pages and navigation.
6+
-->
7+
<ion-header>
8+
9+
<ion-navbar>
10+
<ion-title>Reactive List Label</ion-title>
11+
</ion-navbar>
12+
13+
</ion-header>
14+
15+
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">
21+
<img [src]="book.pictureProduct" />
22+
<ion-card-content>
23+
<ion-card-title>
24+
{{ book.productName }}
25+
</ion-card-title>
26+
<p> {{ book.author }} </p>
27+
<b> {{ book.category }} - {{ book.price | currency:'USD' }}</b>
28+
</ion-card-content>
29+
</ion-card>
30+
</ion-content>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { ReactiveListLabelPage } from './reactive-list-label';
4+
import { DirectivesModule } from '../../../directives/directives.module';
5+
6+
@NgModule({
7+
declarations: [
8+
ReactiveListLabelPage,
9+
],
10+
imports: [
11+
IonicPageModule.forChild(ReactiveListLabelPage),
12+
DirectivesModule
13+
],
14+
})
15+
export class ReactiveListLabelPageModule {}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-reactive-list-label {
2+
3+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Component, NgZone } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
4+
import { LIST_DATA, IDataList } from './list-data';
5+
6+
@IonicPage()
7+
@Component({
8+
selector: 'page-reactive-list-label',
9+
templateUrl: 'reactive-list-label.html'
10+
})
11+
export class ReactiveListLabelPage {
12+
public dataList = LIST_DATA;
13+
public currentCategory: string = '';
14+
15+
constructor(
16+
public navCtrl: NavController,
17+
public navParams: NavParams,
18+
private ngZone: NgZone
19+
) {}
20+
21+
public itemIsVisible($event, book: IDataList) {
22+
console.log(book, $event);
23+
book.visible = $event;
24+
this.setCategory();
25+
}
26+
27+
private setCategory() {
28+
const obj = {};
29+
let qtdVisibleCategory = 0;
30+
let higherCategory = '';
31+
this.dataList
32+
.filter(bk => bk.visible)
33+
.forEach(
34+
bk => (obj[bk.category] = obj[bk.category] ? obj[bk.category] + 1 : 1)
35+
);
36+
for (const key in obj) {
37+
if (obj[key] > qtdVisibleCategory) {
38+
qtdVisibleCategory = obj[key];
39+
higherCategory = key;
40+
}
41+
}
42+
console.log(obj);
43+
this.ngZone.runOutsideAngular(() => {
44+
this.ngZone.run(() => {
45+
this.currentCategory = higherCategory;
46+
});
47+
});
48+
}
49+
50+
ionViewDidLoad() {
51+
console.log('ionViewDidLoad ReactiveListLabelPage');
52+
}
53+
}

0 commit comments

Comments
 (0)