Skip to content

Commit 8316223

Browse files
bragayannbragayann
committed
migrating to ionic2 final
1 parent ca6eeef commit 8316223

File tree

12 files changed

+171
-47
lines changed

12 files changed

+171
-47
lines changed

‎package.json

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,29 @@
1313
"run:before": "build"
1414
},
1515
"dependencies": {
16-
"@angular/common": "2.0.0",
17-
"@angular/compiler": "2.0.0",
18-
"@angular/compiler-cli": "0.6.2",
19-
"@angular/core": "2.0.0",
20-
"@angular/forms": "2.0.0",
21-
"@angular/http": "2.0.0",
22-
"@angular/platform-browser": "2.0.0",
23-
"@angular/platform-browser-dynamic": "2.0.0",
24-
"@angular/platform-server": "2.0.0",
25-
"@ionic/storage": "1.1.6",
16+
"@angular/common": "2.2.1",
17+
"@angular/compiler": "2.2.1",
18+
"@angular/compiler-cli": "2.2.1",
19+
"@angular/core": "2.2.1",
20+
"@angular/forms": "2.2.1",
21+
"@angular/http": "2.2.1",
22+
"@angular/platform-browser": "2.2.1",
23+
"@angular/platform-browser-dynamic": "2.2.1",
24+
"@angular/platform-server": "2.2.1",
25+
"@ionic/storage": "1.1.7",
26+
"ionic-angular": "2.0.1",
27+
"ionic-native": "2.4.1",
2628
"angular2-swing": "^0.10.0",
2729
"chart.js": "^2.4.0",
28-
"ionic-angular": "2.0.0-rc.1",
29-
"ionic-native": "2.2.3",
3030
"ionicons": "3.0.0",
3131
"moment": "^2.15.2",
3232
"rxjs": "5.0.0-beta.12",
33-
"zone.js": "0.6.21"
33+
"sw-toolbox": "3.4.0",
34+
"zone.js": "0.6.26"
3435
},
3536
"devDependencies": {
36-
"@ionic/app-scripts": "^0.0.36",
37-
"typescript": "^2.0.3"
37+
"@ionic/app-scripts": "1.1.0",
38+
"typescript": "2.0.9"
3839
},
3940
"description": "Ionic2Components: An Ionic project",
4041
"cordovaPlugins": [
@@ -46,4 +47,4 @@
4647
"ionic-plugin-keyboard"
4748
],
4849
"cordovaPlatforms": []
49-
}
50+
}

‎src/app/app.imports.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ import { AlertService } from '../providers/util/alert.service';
9393

9494
// Directives
9595
import { Timer } from '../components/countdown-timer/timer';
96+
import { SlidingDrawer } from '../components/sliding-drawer/sliding-drawer';
9697
import { TypingEffect } from '../components/typing-effect/typing-effect';
9798

9899
// Pipes
@@ -200,6 +201,7 @@ export const Providers = [
200201
]
201202

202203
export const Directives = [
204+
SlidingDrawer,
203205
Timer,
204206
TypingEffect,
205207
]

‎src/app/main.prod.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/app/main.dev.ts renamed to ‎src/app/main.ts

File renamed without changes.

‎src/components/sliding-drawer/sliding-drawer.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ion-content>
2+
<ng-content></ng-content>
3+
</ion-content>

‎src/components/sliding-drawer/sliding-drawer.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
sliding-drawer {
2+
width: 100%;
3+
height: 100%;
4+
position: absolute;
5+
z-index: 10 !important;
6+
box-shadow: 0px -4px 22px -8px rgba(0,0,0,0.75);
7+
}

‎src/components/sliding-drawer/sliding-drawer.ts

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Component, Input, ElementRef, Renderer } from '@angular/core';
2+
import { Platform, DomController } from 'ionic-angular';
3+
4+
@Component({
5+
selector: 'sliding-drawer',
6+
templateUrl: 'sliding-drawer.html'
7+
})
8+
export class SlidingDrawer {
9+
10+
@Input('options') options: any;
11+
12+
handleHeight: number = 50;
13+
bounceBack: boolean = true;
14+
thresholdTop: number = 200;
15+
thresholdBottom: number = 200;
16+
17+
constructor(public element: ElementRef, public renderer: Renderer, public domCtrl: DomController, public platform: Platform) {
18+
19+
}
20+
21+
ngAfterViewInit() {
22+
23+
if (this.options.handleHeight) {
24+
this.handleHeight = this.options.handleHeight;
25+
}
26+
27+
if (this.options.bounceBack) {
28+
this.bounceBack = this.options.bounceBack;
29+
}
30+
31+
if (this.options.thresholdFromBottom) {
32+
this.thresholdBottom = this.options.thresholdFromBottom;
33+
}
34+
35+
if (this.options.thresholdFromTop) {
36+
this.thresholdTop = this.options.thresholdFromTop;
37+
}
38+
39+
this.renderer.setElementStyle(this.element.nativeElement, 'top', this.platform.height() - this.handleHeight + 'px');
40+
this.renderer.setElementStyle(this.element.nativeElement, 'padding-top', this.handleHeight + 'px');
41+
42+
let hammer = new window['Hammer'](this.element.nativeElement);
43+
hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_VERTICAL });
44+
45+
hammer.on('pan', (ev) => {
46+
this.handlePan(ev);
47+
});
48+
49+
}
50+
51+
handlePan(ev) {
52+
53+
let newTop = ev.center.y;
54+
55+
let bounceToBottom = false;
56+
let bounceToTop = false;
57+
58+
if (this.bounceBack && ev.isFinal) {
59+
let topDiff = newTop - this.thresholdTop;
60+
let bottomDiff = (this.platform.height() - this.thresholdBottom) - newTop;
61+
62+
topDiff >= bottomDiff ? bounceToBottom = true : bounceToTop = true;
63+
64+
}
65+
66+
if ((newTop < this.thresholdTop && ev.additionalEvent === "panup") || bounceToTop) {
67+
this.domCtrl.write(() => {
68+
this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'top 0.5s');
69+
this.renderer.setElementStyle(this.element.nativeElement, 'top', '0px');
70+
});
71+
72+
} else if (((this.platform.height() - newTop) < this.thresholdBottom && ev.additionalEvent === "pandown") || bounceToBottom) {
73+
this.domCtrl.write(() => {
74+
this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'top 0.5s');
75+
this.renderer.setElementStyle(this.element.nativeElement, 'top', this.platform.height() - this.handleHeight + 'px');
76+
});
77+
78+
} else {
79+
80+
this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'none');
81+
if (newTop > 0 && newTop < (this.platform.height() - this.handleHeight)) {
82+
if (ev.additionalEvent === "panup" || ev.additionalEvent === "pandown") {
83+
84+
this.domCtrl.write(() => {
85+
this.renderer.setElementStyle(this.element.nativeElement, 'top', newTop + 'px');
86+
});
87+
88+
}
89+
}
90+
}
91+
}
92+
}

‎src/pages/_home/home.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,12 @@ <h3>Advanced Ionic 2 Components</h3>
1919
<button class="pop-in" ion-button secondary menuToggle>Toggle Menu</button>
2020
</ion-content>
2121

22+
23+
<sliding-drawer [options]="drawerOptions">
24+
<div class="content">
25+
The world is your oyster.
26+
<p>
27+
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
28+
</p>
29+
</div>
30+
</sliding-drawer>

‎src/pages/_home/home.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,12 @@ page-home {
22
p {
33
text-align: justify;
44
}
5+
sliding-drawer {
6+
background-color: #34495e !important;
7+
}
8+
9+
sliding-drawer .content {
10+
padding: 20px;
11+
}
512
}
613

‎src/pages/_home/home.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import { NavController } from 'ionic-angular';
66
templateUrl: 'home.html'
77
})
88
export class HomePage {
9+
drawerOptions: any;
910
constructor(public navCtrl: NavController) {
11+
this.drawerOptions = {
12+
handleHeight: 50,
13+
thresholdFromBottom: 200,
14+
thresholdFromTop: 200,
15+
bounceBack: true
16+
};
1017
}
1118

1219
ionViewDidLoad() {

‎src/pages/slide/slide-photo-gallery/slide-photo-gallery.ts

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Swiper } from 'ionic-angular/components/slides/swiper-widget';
21
import { Component } from '@angular/core';
32
import { NavController } from 'ionic-angular';
43

@@ -8,28 +7,28 @@ import { NavController } from 'ionic-angular';
87
})
98
export class SlidePhotoGalleryPage {
109

11-
ngOnInit() {
12-
let el1 = document.getElementById('gallery-top');
13-
let el2 = document.getElementById('gallery-thumbs');
14-
console.log(el1, el2);
15-
let galleryTop = null;
16-
let galleryThumbs = null;
10+
// ngOnInit() {
11+
// let el1 = document.getElementById('gallery-top');
12+
// let el2 = document.getElementById('gallery-thumbs');
13+
// console.log(el1, el2);
14+
// let galleryTop = null;
15+
// let galleryThumbs = null;
1716

18-
galleryTop = new Swiper(el1, {
19-
nextButton: '.swiper-button-next',
20-
prevButton: '.swiper-button-prev',
21-
spaceBetween: 10,
22-
control: galleryTop
23-
});
24-
galleryThumbs = new Swiper(el2, {
25-
spaceBetween: 10,
26-
centeredSlides: true,
27-
slidesPerView: 'auto',
28-
touchRatio: 0.2,
29-
slideToClickedSlide: true,
30-
control: galleryThumbs
31-
});
32-
}
17+
// galleryTop = new Swiper(el1, {
18+
// nextButton: '.swiper-button-next',
19+
// prevButton: '.swiper-button-prev',
20+
// spaceBetween: 10,
21+
// control: galleryTop
22+
// });
23+
// galleryThumbs = new Swiper(el2, {
24+
// spaceBetween: 10,
25+
// centeredSlides: true,
26+
// slidesPerView: 'auto',
27+
// touchRatio: 0.2,
28+
// slideToClickedSlide: true,
29+
// control: galleryThumbs
30+
// });
31+
// }
3332

3433
slides = [
3534
{

‎tsconfig.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"compilerOptions": {
33
"allowSyntheticDefaultImports": true,
4-
"declaration": true,
4+
"declaration": false,
55
"emitDecoratorMetadata": true,
66
"experimentalDecorators": true,
77
"lib": [
@@ -10,13 +10,17 @@
1010
],
1111
"module": "es2015",
1212
"moduleResolution": "node",
13+
"sourceMap": true,
1314
"target": "es5"
1415
},
16+
"include": [
17+
"src/**/*.ts"
18+
],
1519
"exclude": [
1620
"node_modules"
1721
],
1822
"compileOnSave": false,
1923
"atom": {
2024
"rewriteTsconfig": false
2125
}
22-
}
26+
}

0 commit comments

Comments
 (0)