Skip to content

Commit b09fdc7

Browse files
yannbfyannbf
committed
adds progress component
1 parent 4aada58 commit b09fdc7

File tree

9 files changed

+206
-3
lines changed

9 files changed

+206
-3
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,13 @@
2020
"@angular/platform-browser-dynamic": "2.2.1",
2121
"@angular/platform-server": "2.2.1",
2222
"@ionic/storage": "1.1.7",
23+
"angular-svg-round-progressbar": "^1.0.5",
2324
"angular2-swing": "^0.10.0",
25+
"chart.js": "^2.4.0",
2426
"ionic-angular": "2.1.0",
2527
"ionic-native": "2.4.1",
2628
"ionicons": "3.0.0",
2729
"moment": "^2.15.2",
28-
"chart.js": "^2.4.0",
2930
"rxjs": "5.0.0-beta.12",
3031
"sw-toolbox": "3.4.0",
3132
"zone.js": "0.6.26"

‎src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NgModule, ErrorHandler } from '@angular/core';
22
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
33
import { MyApp } from './app.component';
44
import { SwingModule } from 'angular2-swing';
5+
import { RoundProgressModule } from 'angular-svg-round-progressbar';
56

67
import { Pages, Directives, Pipes, Providers, Components } from './app.imports';
78

@@ -16,7 +17,8 @@ import { Pages, Directives, Pipes, Providers, Components } from './app.imports';
1617
],
1718
imports: [
1819
IonicModule.forRoot(MyApp),
19-
SwingModule
20+
SwingModule,
21+
RoundProgressModule,
2022
],
2123
bootstrap: [IonicApp],
2224
entryComponents: [

‎src/components/expandable-header/expandable-backup.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// import { Component } from '@angular/core';
2+
// import { Directive, Renderer } from '@angular/core';
3+
4+
// @Component({
5+
// selector: 'expandable-header',
6+
// templateUrl: 'expandable-header.html'
7+
// })
8+
// export class ExpandableHeaderComponent {
9+
// header: any;
10+
// headerHeight: any;
11+
// translateAmt: any;
12+
// scaleAmt: any;
13+
// ticking: any;
14+
// constructor(public renderer: Renderer) {
15+
// }
16+
17+
// ngOnInit() {
18+
19+
// this.header = document.getElementsByClassName("strechy-header")[0];
20+
// this.headerHeight = this.header.clientHeight;
21+
// this.ticking = false;
22+
23+
// this.renderer.setElementStyle(this.header, 'height', 'calc( ' + this.headerHeight + 'px - ' + this.translateAmt + 'px )');
24+
25+
// this.renderer.setElementStyle(this.header, 'webkitTransformOrigin', 'center bottom');
26+
// this.renderer.setElementStyle(this.header, 'background-size', 'cover');
27+
// }
28+
29+
// onWindowResize(ev) {
30+
// this.headerHeight = this.header.clientHeight;
31+
// }
32+
33+
// onContentScroll(ev) {
34+
// ev.domWrite(() => {
35+
// if (!this.ticking) {
36+
// this.ticking = true;
37+
// this.updateStretchyHeader(ev);
38+
// }
39+
// this.ticking = true;
40+
// });
41+
// }
42+
43+
// updateStretchyHeader(ev) {
44+
// if (ev.scrollTop >= 0) {
45+
// this.translateAmt = ev.scrollTop / 2;
46+
// this.scaleAmt = 1;
47+
// } else {
48+
// this.translateAmt = 0;
49+
// this.scaleAmt = -ev.scrollTop / this.headerHeight + 1;
50+
// }
51+
// this.headerHeight = this.header.clientHeight;
52+
// this.renderer.setElementStyle(this.header, 'height', 'calc( ' + this.headerHeight + 'px - ' + this.translateAmt + 'px )');
53+
54+
// }
55+
56+
// }
57+
58+
59+
// <expandable-header headerHeight="400" backgroundHeader="" title="test" showBackButton="true">
60+
// </expandable-header>

‎src/components/expandable-header/expandable-header.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ion-header>
2+
<ion-icon name="arrow-back" class="back" navPop></ion-icon>
3+
4+
<div class="strechy-header" id="strechy-header" text-center>
5+
<div class="blur-filter"></div>
6+
<ion-row class="stretchy_header_title vertical-align-content ">
7+
<ion-col [innerHtml]="htmlToAdd">
8+
</ion-col>
9+
</ion-row>
10+
</div>
11+
</ion-header>

‎src/components/expandable-header/expandable-header.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
expandable-header {
2+
.back {
3+
position: absolute;
4+
z-index: 999;
5+
color: #fff;
6+
font-size: 30px;
7+
top: calc( 66px - 40px);
8+
left: 10px;
9+
z-index: 999999
10+
}
11+
.stretchy_header_title {
12+
width: 100%;
13+
}
14+
.stretchy_header_title .tweet_number {
15+
color: #fff;
16+
z-index: 999;
17+
position: relative;
18+
font-size: 0.7em;
19+
}
20+
.blur-filter {
21+
position: absolute;
22+
width: 100%;
23+
height: 100%;
24+
-webkit-backdrop-filter: blur(20px);
25+
opacity: 0;
26+
}
27+
.vertical-align-content {
28+
display: flex!important;
29+
align-self: flex-end
30+
}
31+
.picture {}
32+
}

‎src/components/expandable-header/expandable-header.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Directive, ElementRef, Renderer } from '@angular/core';
2+
@Directive({
3+
selector: '[expandable-header]'
4+
})
5+
export class ExpandableHeaderComponent {
6+
scrollerHandle: any;
7+
header: any;
8+
headerHeight: any;
9+
translateAmt: any;
10+
scaleAmt: any;
11+
scrollTop: any;
12+
lastScrollTop: any;
13+
ticking: any;
14+
15+
constructor(public element: ElementRef, public renderer: Renderer) {
16+
17+
}
18+
19+
ngOnInit() {
20+
21+
this.scrollerHandle = this.element.nativeElement.getElementsByClassName('scroll-content')[0];
22+
this.header = this.scrollerHandle.firstElementChild;
23+
this.headerHeight = this.scrollerHandle.clientHeight;
24+
this.ticking = false;
25+
26+
this.renderer.setElementStyle(this.header, 'webkitTransformOrigin', 'center bottom');
27+
28+
window.addEventListener('resize', () => {
29+
this.headerHeight = this.scrollerHandle.clientHeight;
30+
}, false);
31+
32+
this.scrollerHandle.addEventListener('scroll', () => {
33+
console.log('test');
34+
if (!this.ticking) {
35+
window.requestAnimationFrame(() => {
36+
this.updateElasticHeader();
37+
});
38+
}
39+
40+
this.ticking = true;
41+
42+
});
43+
44+
}
45+
46+
updateElasticHeader() {
47+
48+
this.scrollTop = this.scrollerHandle.scrollTop;
49+
50+
if (this.scrollTop >= 0) {
51+
this.translateAmt = this.scrollTop / 2;
52+
this.scaleAmt = 1;
53+
} else {
54+
this.translateAmt = 0;
55+
this.scaleAmt = -this.scrollTop / this.headerHeight + 1;
56+
}
57+
58+
this.renderer.setElementStyle(this.header, 'webkitTransform', 'translate3d(0,' + this.translateAmt + 'px,0) scale(' + this.scaleAmt + ',' + this.scaleAmt + ')');
59+
this.ticking = false;
60+
61+
}
62+
}

‎src/pages/_home/home.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
</ion-header>
99
<ion-content padding>
1010
<h3>Advanced Ionic 2 Components</h3>
11+
<div class="progress-wrapper">
12+
<round-progress #progress [current]="currentValue" [max]="60" [color]="'#45ccce'" [background]="'#eee'" [radius]="125" [stroke]="20"
13+
[semicircle]="false" [rounded]="false" [clockwise]="false" [responsive]="false" [duration]="800" [animation]="'easeInOutQuart'"
14+
[animationDelay]="0"></round-progress>
15+
<div class="text">{{currentValue}}/60</div>
16+
</div>
1117
<p>
1218
This app aims to help developers speed up their development process and learn how components work. It would be really nice
1319
if you checked out the <a href="https://github.com/yannbf/ionic2-components">repository</a> and contribute!

‎src/pages/_home/home.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,28 @@ page-home {
99
sliding-drawer .content {
1010
padding: 20px;
1111
}
12+
13+
round-progress {
14+
margin: 0 auto;
15+
}
16+
17+
.progress-wrapper{
18+
position: relative;
19+
}
20+
21+
.progress-wrapper .text{
22+
position: absolute;
23+
top: 50%;
24+
left: 0;
25+
transform: translateY(-50%);
26+
-webkit-transform: translateY(-50%);
27+
text-align: center;
28+
width: 100%;
29+
z-index: 1;
30+
31+
font-weight: bold;
32+
color: #999;
33+
font-size: 4rem;
34+
}
1235
}
1336

‎src/pages/_home/home.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ViewChild } from '@angular/core';
22
import { NavController } from 'ionic-angular';
3+
import { RoundProgressComponent } from 'angular-svg-round-progressbar';
34

45
@Component({
56
selector: 'page-home',
67
templateUrl: 'home.html'
78
})
89
export class HomePage {
10+
@ViewChild("progress") progressbar: RoundProgressComponent;
911
drawerOptions: any;
12+
currentValue: any = 15;
1013
constructor(public navCtrl: NavController) {
1114
this.drawerOptions = {
1215
handleHeight: 50,
@@ -17,5 +20,8 @@ export class HomePage {
1720
}
1821

1922
ionViewDidLoad() {
23+
setInterval(() => {
24+
this.currentValue++;
25+
}, 500);
2026
}
2127
}

0 commit comments

Comments
 (0)