javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demos): move app tests to demos

Browse Source
This commit is contained in:
Tim Lancina
2015-09-09 15:49:06 -05:00
parent 347c8877a4
commit 50a4549e8e
74 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
ionic/components/app/test/animations/index.ts
View File

@ -1,74 +0,0 @@
import {App, Animation} from 'ionic/ionic';
let opacity = 0.2;
let rotateZ = '180deg';
let translateX = '100px';
let scale = 0.6;
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.animation = new Animation();
this.animation
.duration(2000)
.easing('spring', { damping: 6, elasticity: 10 });
var ball = new Animation( document.querySelector('.ball') );
ball
.from('translateX', '0px')
.to('translateX', '250px')
this.animation.add(ball);
var row1 = new Animation( document.querySelectorAll('.square') );
row1
.from('opacity', 0.8)
.to('opacity', 0.2)
this.animation.add(row1);
var row2 = new Animation( document.querySelectorAll('.square2') );
row2
.from('rotate', '0deg')
.from('scale', '1')
.to('rotate', '90deg')
.to('scale', '0.5')
.before.addClass('added-before-play')
.after.addClass('added-after-finish')
this.animation.add(row1, row2);
this.animation.onReady(animation => {
console.log('onReady', animation);
});
this.animation.onPlay(animation => {
console.log('onPlay', animation);
});
this.animation.onFinish(animation => {
console.log('onFinish', animation);
});
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
progress(ev) {
this.animation.progress( parseFloat(ev.srcElement.value) );
}
}

53
ionic/components/app/test/animations/main.html
View File

@ -1,53 +0,0 @@
<html>
<head>
<title>Animation Tests</title>
<style>
.ball-container {
position: absolute;
top: 200px;
left: 20px;
border: 1px solid gray;
width: 300px;
height: 51px;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="ball-container">
<div class="ball"></div>
</div>
<div style="position: absolute; top: 300px; left: 20px;">
<div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
<div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
<div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div>
</div>
<div style="position: absolute; top: 400px; left: 20px;">
<div class="yellow square2" style="position:absolute; width:100px; height:100px; background:yellow; top: 0; left: 0;"></div>
<div class="purple square2" style="position:absolute; width:100px; height:100px; background:purple; top: 0; left: 100px;"></div>
<div class="maroon square2" style="position:absolute; width:100px; height:100px; background:maroon; top: 0; left: 200px;"></div>
</div>
<p>
<input type="range" (input)="progress($event)" value="0" min="0" step="0.001" max="1" style="width:200px">
</p>
<p>
<button (click)="play($event)">Play</button>
<button (click)="pause($event)">Pause</button>
</p>
</body>
</html>

135
ionic/components/app/test/barkpark/index.ts
View File

@ -1,135 +0,0 @@
import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
import {Log} from 'ionic/util'
import {App, IonicView, NavController} from 'ionic/ionic'
@IonicView({
templateUrl: 'pages/login.html'
})
class LoginPage {
constructor( nav: NavController ) {
this.nav = nav
Log.log('LOGIN PAGE', this)
var fb = new FormBuilder()
this.loginForm = fb.group({
email: ['', Validators.required],
password: ['', Validators.required],
});
}
doLogin(event) {
Log.log('Doing login')
event.preventDefault();
console.log(this.loginForm.value);
}
doSignup(event) {
this.nav.push(SignupPage)
}
}
@IonicView({
templateUrl: 'pages/signup.html'
})
export class SignupPage {
constructor( nav: NavController ) { //, fb: FormBuilder ) {
this.nav = nav
Log.log('SIGNUP PAGE')
var fb = new FormBuilder()
this.signupForm = fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
});
}
doLogin(event) {
this.nav.pop()
}
doSignup(event) {
Log.log('Doing signup')
event.preventDefault();
console.log(this.signupForm.value);
this.nav.push(AppPage)
}
}
@IonicView({
templateUrl: 'pages/app.html'
})
export class AppPage {
constructor( nav: NavController ) { //, fb: FormBuilder ) {
this.nav = nav;
this.streamTab = StreamTab
}
}
@IonicView({
templateUrl: 'pages/tabs/home.html'
})
class StreamTab {
constructor(nav: NavController) {
this.nav = nav;
this.posts = [
{'title': 'Just barked my first bark'},
{'title': 'Went poopy' }
];
}
selectPost(post) {
console.log('Select post', post);
this.nav.push(PostDetail, {
post
}, {
transition: '3dflip'
})
}
}
@IonicView({
templateUrl: 'pages/post/detail.html'
})
class PostDetail {
constructor(nav: NavController) {
this.nav = nav;
this.title = 'Hello'
}
selectItem() {
this.nav.push(PostDetailTab)
}
}
@IonicView({
templateUrl: 'pages/splash.html'
})
class SplashPage {
constructor(nav: NavController) {
this.nav = nav;
window.nav = nav;
}
doLogin() {
this.nav.push(LoginPage);
}
}
@App({
template: '<ion-nav [root]="rootView"></ion-nav>'
})
class IonicApp {
constructor() {
this.rootView = SplashPage;
}
}

6
ionic/components/app/test/barkpark/pages/app.html
View File

@ -1,6 +0,0 @@
<ion-tabs>
<ion-tab [initial]="streamTab" tab-title="Stream">
</ion-tab>
</ion-tabs>

22
ionic/components/app/test/barkpark/pages/login.html
View File

@ -1,22 +0,0 @@
<ion-toolbar *header>
<ion-title>
Login
</ion-title>
</ion-toolbar>
<ion-content class="padding">
<form (^submit)="doLogin($event)" [control-group]="loginForm">
<ion-input>
<input control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<input control="password" type="password" placeholder="Your password">
</ion-input>
<button dark block type="submit">Log in</button>
<div>
<button block (click)="doSignup()">Create an account</button>
</div>
</form>
</ion-content>

1
ionic/components/app/test/barkpark/pages/post/detail.html
View File

@ -1 +0,0 @@
<h1>{{title}}</h1>

18
ionic/components/app/test/barkpark/pages/signup.html
View File

@ -1,18 +0,0 @@
<ion-view nav-title="Signup" style="padding: 20px">
<form (^submit)="doSignup($event)" [control-group]="signupForm">
<ion-input>
<input control="name" type="text" placeholder="Your name">
</ion-input>
<ion-input>
<input control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<input control="password" type="password" placeholder="Your password">
</ion-input>
<button dark block type="submit">Create account</button>
<div>
<button block (click)="doLogin()">Log in</button>
</div>
</form>
</ion-view>

4
ionic/components/app/test/barkpark/pages/splash.html
View File

@ -1,4 +0,0 @@
<div>
<h1>BARK PARK</h1>
<button (^click)="doLogin()">Log in</button>
</div>

10
ionic/components/app/test/barkpark/pages/tabs/home.html
View File

@ -1,10 +0,0 @@
<ion-view nav-title="Stream">
<ion-content class="padding">
<h2>Posts</h2>
<ion-list>
<ion-item *for="#post of posts" (^click)="selectPost(post)">
{{post.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>

30
ionic/components/app/test/hn/hn.ts
View File

@ -1,30 +0,0 @@
var APIUrl = 'https://hacker-news.firebaseio.com/v0/';
export class HackerNewsClient {
constructor() {
//this.fb = new Firebase(APIUrl);
}
getTopStories(cb) {
console.log('GETTING TOP STORIES');
this.fb.child('topstories').on('value', (snapshot) => {
let items = snapshot.val();
console.log('Fetched', items.length, 'items');
for(var itemID of items) {
this.fb.child("item").child(itemID).on('value', (data) => {
cb(data.val());
//console.log(data.val());
});
}
});
}
}
export var HackerNews = new HackerNewsClient();

94
ionic/components/app/test/hn/index.ts
View File

@ -1,94 +0,0 @@
import {Component} from 'angular2/angular2';
import {App, NavController, IonicView} from 'ionic/ionic';
import {HackerNews} from './hn';
import {HNSinglePost} from './pages/single';
@Component({
selector: 'story'
})
@IonicView({
template: '<div class="hn-story"><ng-content></ng-content></div>'
})
export class Story {
constructor() {
}
}
@IonicView({
templateUrl: './pages/top.html'
})
class HNTopStories {
constructor(
nav: NavController
) {
this.nav = nav;
this.stories = [
/*
{
by: "FatalLogic",
descendants: 77,
id: 9444675,
//kids: Array[26]
score: 464,
text: "",
time: 1430116925,
title: "Under Pressure",
type: "story",
url: "http://minusbat.livejournal.com/180556.html"
}*/
];
var APIUrl = 'https://hacker-news.firebaseio.com/v0';
console.log('FIREBASE', window.Firebase);
this.fb = new window.Firebase(APIUrl);
this.fb.child('topstories').limitToFirst(20).once('value', (snapshot) => {
let items = snapshot.val();
console.log('Fetched', items.length, 'items');
for(var itemID of items) {
this.fb.child("item").child(itemID).on('value', (data) => {
console.log('GOT ITEM', data.val());
this.stories.push(data.val());
});
}
});
//doStuffEnd
}
openStory(story) {
console.log('Opening story', story);
this.nav.push(HNSinglePost, story);
}
/*
HackerNews.getTopStories((val) => {
new Promise((resolve, reject) => {
console.log('PROMISES!', val);
this.stories.push(val);
resolve();
});
});
*/
}
@App({
template: '<ion-nav [root]="rootView"></ion-nav>'
})
class IonicApp {
constructor() {
this.rootView = HNTopStories;
}
}

11
ionic/components/app/test/hn/main.html
View File

@ -1,11 +0,0 @@
<ion-nav [initial]="splashPage">
</ion-nav>
<style>
.navbar-container {
background-color: #ff6600 !important;
}
.md .nav ion-title {
color: #fff !important;
}
</style>

6
ionic/components/app/test/hn/pages/single.html
View File

@ -1,6 +0,0 @@
<ion-navbar *navbar><ion-title>{{post.title}}</ion-title></ion-navbar>
<ion-content>
<iframe style="width: 100%; height: 100%" src="{{post.url}}">
</iframe>
</ion-content>

18
ionic/components/app/test/hn/pages/single.ts
View File

@ -1,18 +0,0 @@
import {IonicView, NavController, NavParams} from 'ionic/ionic';
import {HackerNews} from '../hn'
@IonicView({
templateUrl: 'pages/single.html'
})
export class HNSinglePost {
constructor(
nav: NavController,
params: NavParams
) {
this.nav = nav;
this.post = params;
console.log('SINGLE', params);
}
}

9
ionic/components/app/test/hn/pages/top.html
View File

@ -1,9 +0,0 @@
<ion-navbar *navbar><ion-title>Top</ion-title></ion-navbar>
<ion-content class="padding">
<ion-list inset>
<ion-item *ng-for="#story of stories" (^click)="openStory(story)">{{story.title}}</ion-item>
</ion-list>
</ion-content>

104
ionic/components/app/test/material/index.ts
View File

@ -1,104 +0,0 @@
import {Component, Directive} from 'angular2/angular2';
import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
@IonicView({
template: '<ion-navbar *navbar primary>' +
'<ion-title>Heading</ion-title>' +
'<button aside-toggle="menu">' +
'<icon menu></icon>' +
'</button>' +
'<ion-nav-items secondary>' +
'<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
'<button (^click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
'</ion-nav-items>' +
'</ion-navbar>' +
'<ion-content>' +
`
<button md-ripple>Cleeek</button>
<ion-list>
<ion-item>
<h3>All Genres</h3>
<h4>Jan 17 2015</h4>
</ion-item>
<ion-item>
Alternative
</ion-item>
<ion-item>
Blues
</ion-item>
</ion-list>
<div class="padding">
<ion-card>
<ion-card-header>
New Post
</ion-card-header>
<div class="card-content">
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
</div>
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p4.png">
<ion-item>
Posted 5 days ago
</ion-item>
</ion-card>
</div>
` +
'</ion-content>'
})
export class FirstPage {
constructor(app: IonicApp, actionMenu: ActionMenu) {
this.app = app;
this.actionMenu = actionMenu;
}
showMoreMenu() {
this.actionMenu.open({
buttons: [
{ icon: 'ion-android-share-alt', text: 'Share' },
{ icon: 'ion-arrow-move', text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
console.log('Canceled');
},
destructiveButtonClicked: () => {
console.log('Destructive clicked');
},
buttonClicked: function(index) {
console.log('Button clicked', index);
if(index == 1) { return false; }
return true;
}
}).then(actionMenuRef => {
this.actionMenuRef = actionMenuRef;
});
}
}
@App({
template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
<ion-aside id="menu" side="left" [content]="content">
<ion-toolbar primary><ion-title>Menu</ion-title></ion-toolbar>
<ion-list>
<ion-item>Your Profile</ion-item>
<ion-item>Playlists</ion-item>
<ion-item>Artists</ion-item>
</ion-list>
</ion-aside>
<ion-nav #content></ion-nav>`,
routes: [
{
path: '/first',
component: FirstPage,
root: true
}
]
})
class MyApp {
constructor() {
}
}

69
ionic/components/app/test/music/index.ts
View File

@ -1,69 +0,0 @@
import {Directive, ElementRef} from 'angular2/angular2';
import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
import {App, NavController, IonicView} from 'ionic/ionic';
@IonicView({
templateUrl: 'pages/app.html'
})
class AppPage {
constructor(nav: NavController) {
this.nav = nav;
}
doLogin() {
}
}
@Directive({
selector: '[parallax]',
properties: [
'parallax'
]
})
export class ParallaxEffect {
constructor(
elementRef: ElementRef
) {
this.ele = elementRef.nativeElement;
setTimeout(() => {
Object.observe(this, (changes) => {
changes.forEach((change) => {
if(change.name == 'parallax') {
this.parallaxItems();
}
});
});
});
}
parallaxItems() {
let list = this.ele;
console.log('Moving items', this.parallax);
var x = Math.max(0, (1 - this.parallax) * 20);
var y = 0;//Math.max(0, (1 - this.parallax) * 10);
var scale = Math.min(1, (0.9 + 0.1 * this.parallax));
list.style['opacity'] = Math.min(this.parallax, 1);
list.style['transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
}
}
/**
* Main app entry point
*/
@App({
directives: [ParallaxEffect],
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.rootView = AppPage
this.menuOpenAmount = 0;
}
onMenuOpening(amt) {
this.menuOpenAmount = amt;
}
}

83
ionic/components/app/test/music/main.html
View File

@ -1,83 +0,0 @@
<ion-view>
<ion-aside id="menu" side="left" [content]="content" (opening)="onMenuOpening($event, amt)">
<ion-list inset [parallax]="menuOpenAmount">
<ion-item>
Search
</ion-item>
<ion-item>
Browse
</ion-item>
<ion-item>
Activity
</ion-item>
<ion-item>
Radio
</ion-item>
<ion-item>
Your Music
</ion-item>
<ion-item>
Settings
</ion-item>
</ion-list>
</ion-aside>
<ion-nav #content [root]="rootView"></ion-nav>
<style>
ion-view {
background-color: black !important;
}
.toolbar-container {
background-color: #202020 !important;
}
#menu {
background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg');
background-size: cover;
}
.mode-ios .list .item {
background: transparent;
min-height: 55px;
}
.mode-ios .list .item ion-item-content {
background: transparent;
color: rgba(255,255,255,0.8);
padding: 10px;
}
.mode-ios .toolbar-ios ion-title {
color: white;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
}
#menu ion-item .item-label {
font-size: 22px;
}
ion-content {
background: transparent !important;
}
.mode-ios #menu ion-item-content:after {
background: none;
}
.mode-ios .item:first-of-type:before {
background: none !important;
}
.mode-ios .item:last-of-type:after {
background: none !important;
}
.mode-ios .toolbar-container-ios:after {
background: none;
}
ion-nav {
background: black;
}
.nav-item {
background: white;
}
</style>
</ion-view>

BIN
ionic/components/app/test/music/menu.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 73 KiB

BIN
ionic/components/app/test/music/menu.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

22
ionic/components/app/test/music/pages/app.html
View File

@ -1,22 +0,0 @@
<ion-toolbar *header>
<ion-title>YOUR MUSIC</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item>
Playlight
</ion-item>
<ion-item>
Songs
</ion-item>
<ion-item>
Albums
</ion-item>
<ion-item>
Artists
</ion-item>
</ion-list>
</ion-content>

31
ionic/components/app/test/native/pages/battery.ts
View File

@ -1,31 +0,0 @@
import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Battery</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Battery</h2>
<button primary outline (click)="doBatteryStatus()">Get Status</button>
<div *ng-if="battery">
Battery charging: <b>{{battery.charging}}</b><br>
Battery level: <b>{{battery.level * 100}}</b>%<br>
Battery charging time: <b>{{battery.chargingTime}}</b>s<br>
Battery discharging time: <b>{{battery.dischargingTime}}</b>s<br>
</div>
</ion-content>
`
})
export class BatteryPage {
doBatteryStatus() {
Battery.getStatus().then((battery) => {
this.battery = battery;
});
}
}

32
ionic/components/app/test/native/pages/camera.ts
View File

@ -1,32 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {Camera} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Camera</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Camera</h2>
<button primary outline (click)="getPicture()">Get Picture</button>
</ion-content>
`
})
export class CameraPage {
constructor() {
}
getPicture() {
Camera.getPicture({
}).then(data => {
console.log('Data', data);
}, err => {
alert('Unable to take picture')
})
}
}

22
ionic/components/app/test/native/pages/contacts.ts
View File

@ -1,22 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {Contacts} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Contacts</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Contacts</h2>
<div>
</div>
</ion-content>
`
})
export class ContactsPage {
}

52
ionic/components/app/test/native/pages/geolocation.ts
View File

@ -1,52 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {Geolocation} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Geolocation</h2>
<button primary outline (click)="doGetLocation()">Get Location</button>
<div>
<b *ng-if="gettingLocation">Fetching location...</b>
<b *ng-if="location">{{location.coords.latitude}}, {{location.coords.longitude}}</b>
</div>
<button primary outline (click)="doTrackLocation()">Track Location</button>
<div>
<b *ng-if="gettingTrackLocation">Fetching location...</b>
<b *ng-if="trackLocation">{{trackLocation.coords.latitude}}, {{trackLocation.coords.longitude}}</b>
</div>
</ion-content>
`
})
export class GeolocationPage {
doGetLocation() {
console.log('Getting location');
this.gettingLocation = true;
Geolocation.getCurrentPosition().then((pos) => {
this.gettingLocation = false;
console.log('Got location', pos);
this.location = pos;
}, (err) => {
this.gettingLocation = false;
console.error('Unable to get location', err);
});
}
doTrackLocation() {
this.gettingTrackLocation = true;
Geolocation.watchPosition().source.subscribe((pos) => {
this.gettingTrackLocation = false;
console.log('Got location', pos);
this.trackLocation = pos;
}, (err) => {
this.gettingTrackLocation = false;
console.error('Unable to get location', pos);
});
}
}

23
ionic/components/app/test/native/pages/vibration.ts
View File

@ -1,23 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {Vibration} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>
</ion-navbar>
<ion-content class="padding">
<h2>Vibration</h2>
<button primary outline (click)="doVibrate()">Vibrate</button>
</ion-content>
`
})
export class VibrationPage {
doVibrate() {
Vibration.vibrate(1000);
}
}

66
ionic/components/app/test/net/index.ts
View File

@ -1,66 +0,0 @@
import {Component} from 'angular2/angular2';
import {Control, ControlGroup} from 'angular2/forms';
import {App, Http} from 'ionic/ionic';
let testUrl = 'https://ionic-api-tester.herokuapp.com/json';
let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404';
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.form = new ControlGroup({
requestData: new Control('')
})
}
doGet() {
Http.get('http://swapi.co/api/people/1').then((resp) => {
this.resp = resp;
}, (err) => {
this.err = err;
})
}
doGet404() {
Http.get(testUrl404).then((resp) => {
this.resp = resp;
}, (err) => {
this.err = err;
})
}
doPost() {
let data = this.form.controls.requestData.value;
Http.post(testUrl, data).then((resp) => {
this.resp = resp;
}, (err) => {
this.err = err;
})
}
doPut() {
let data = this.form.controls.requestData.value;
Http.put(testUrl, data).then((resp) => {
this.resp = resp;
}, (err) => {
this.err = err;
})
}
doDelete() {
let data = this.form.controls.requestData.value;
Http.delete(testUrl, data).then((resp) => {
this.resp = resp;
}, (err) => {
this.err = err;
})
}
doPatch() {
let data = this.form.controls.requestData.value;
Http.patch(testUrl, data).then((resp) => {
this.resp = resp;
}, (err) => {
this.err = err;
})
}
}

21
ionic/components/app/test/net/main.html
View File

@ -1,21 +0,0 @@
<ion-view>
<div id="profile" #profile>
<div id="face">
</div>
</div>
<ion-content [parallax]="profile"><!-- [counter]="counter">-->
<button (click)="doGet()">GET</button>
<button (click)="doGet404()">GET (404)</button>
<button (click)="doPost()">POST</button>
<button (click)="doPut()">PUT</button>
<button (click)="doDelete()">DELETE</button>
<button (click)="doPatch()">PATCH</button>
<div [ng-form-model]="form">
<textarea ng-control="requestData" placeholder="JSON to send (optional)" style="border: 1px solid #ccc; width: 100%; height: 140px"></textarea>
</div>
<div style="margin: 15px">
{{resp}}
</div>
</ion-content>
</ion-view>

57
ionic/components/app/test/profile/index.ts
View File

@ -1,57 +0,0 @@
import {ElementRef} from 'angular2/angular2'
import {Component, Directive} from 'angular2/angular2';
import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/forms';
import {App, Modal, Animation, Content} from 'ionic/ionic';
import {NavController, NavParams, IonicView} from 'ionic/ionic';
import {dom} from 'ionic/util';
@Directive({
selector: '[parallax]',
properties: [
'parallax',
'counter'
]
})
export class ParallaxEffect {
constructor(
content: Content,
elementRef: ElementRef
) {
this.ele = elementRef.nativeElement;
this.scroller = this.ele.querySelector('scroll-content');
this.scroller.addEventListener('scroll', (e) => {
//this.counter.innerHTML = e.target.scrollTop;
dom.raf(() => {
this.parallax.style[dom.CSS.transform] = 'translateY(' + -Math.min(300, (e.target.scrollTop / 4)) + 'px) scale(1)';
if(e.target.scrollTop < 0) {
this.parallax.style[dom.CSS.transform] = 'translateY(0) scale(' + (1 + Math.abs(e.target.scrollTop / 500)) + ')';
}
})
});
setTimeout(() => {
console.log('Watching', this.target, this.counter);
})
}
}
@App({
templateUrl: 'main.html',
directives: [ParallaxEffect]
})
class IonicApp {
constructor() {
this.items = [];
for(let i = 0; i < 100; i++) {
this.items.push({
title: 'Item ' + i
})
}
}
}

53
ionic/components/app/test/profile/main.html
View File

@ -1,53 +0,0 @@
<ion-view>
<div id="profile" #profile>
<div id="face">
</div>
</div>
<ion-content [parallax]="profile"><!-- [counter]="counter">-->
<ion-list inset>
<ion-item *ng-for="#item of items">
{{item.title}}
</ion-item>
</ion-list>
</ion-content>
<!--<div id="counter" #counter></div>-->
</ion-view>
<style>
#counter {
position: fixed;
bottom: 15px;
right: 15px;
background: black;
color: #fff;
font-size: 11px;
padding: 5px;
border-radius: 5px;
}
#profile {
position: absolute;
top: 0;
height: 300px;
width: 100%;
background: url('http://ionic-io-assets.s3.amazonaws.com/demos/bus.jpg') no-repeat transparent;
background-size: cover;
}
#face {
background: url('http://ionic-io-assets.s3.amazonaws.com/demos/face.jpg') no-repeat transparent;
background-size: cover;
background-position: 50%;
width: 96px;
height: 96px;
border-radius: 96px;
border: 2px solid #fff;
box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
margin: 100px auto 0 auto;
}
ion-content {
background: transparent !important;
}
scroll-content {
padding-top: 300px;
}
</style>

BIN
ionic/components/app/test/sink/card.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 519 KiB

105
ionic/components/app/test/sink/index.ts
View File

@ -1,105 +0,0 @@
import {App, IonicApp} from 'ionic/ionic';
import {ButtonPage} from './pages/button'
import {NavPage} from './pages/nav'
import {PullToRefreshPage} from './pages/pull-to-refresh'
import {ListPage} from './pages/list'
import {ListGroupPage} from './pages/list-group'
import {CardPage} from './pages/card'
import {FormPage} from './pages/form'
import {SegmentPage} from './pages/segment'
import {SearchBarPage} from './pages/search-bar'
import {TableSearchPage} from './pages/table-search'
import {IconsPage} from './pages/ionicons'
import {TabsPage} from './pages/tabs'
import {AsidePage} from './pages/aside'
import {AnimationPage} from './pages/animation'
import {SlidePage} from './pages/slides'
import {ActionMenuPage} from './pages/action-menu'
import {ModalPage} from './pages/modal'
@App({
templateUrl: 'main.html',
routes: [
{
path: '/nav',
component: NavPage,
root: true
}, {
path: '/buttons',
component: ButtonPage
}, {
path: '/lists',
component: ListPage
}, {
path: '/list-groups',
component: ListGroupPage
}, {
path: '/modal',
component: ModalPage
}, {
path: '/ptr',
component: PullToRefreshPage
}, {
path: '/cards',
component: CardPage
}, {
path: '/forms',
component: FormPage
}, {
path: '/segments',
component: SegmentPage
}, {
path: '/table-search',
component: TableSearchPage
}, {
path: '/icons',
component: IconsPage
}, {
path: '/aside',
component: AsidePage
}, {
path: '/animation',
component: AnimationPage
}, {
path: '/slides',
component: SlidePage
}, {
path: '/action-menu',
component: ActionMenuPage
}
]
})
class MyApp {
constructor(app: IonicApp) {
this.app = app;
this.components = [
{ title: 'Navigation', component: NavPage },
{ title: 'Tabs', component: TabsPage },
{ title: 'Buttons', component: ButtonPage },
{ title: 'Lists', component: ListPage },
{ title: 'List Groups', component: ListGroupPage },
{ title: 'Modal', component: ModalPage },
{ title: 'Pull to Refresh', component: PullToRefreshPage },
{ title: 'Cards', component: CardPage },
{ title: 'Forms', component: FormPage },
{ title: 'Segments', component: SegmentPage },
{ title: 'Search Bar', component: SearchBarPage },
{ title: 'Table Search', component: TableSearchPage },
{ title: 'Icons', component: IconsPage },
{ title: 'Aside', component: AsidePage },
{ title: 'Animation', component: AnimationPage },
{ title: 'Slides', component: SlidePage},
{ title: 'Action Menu', component: ActionMenuPage },
];
}
openPage(aside, component) {
aside.close();
let nav = this.app.getComponent('myNav');
nav.setItems([component.component]);
}
}

60
ionic/components/app/test/sink/pages/action-menu.ts
View File

@ -1,60 +0,0 @@
import {IonicApp, IonicView, NavController, ActionMenu} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Menu</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Action Menu</h2>
<p>
The Action Menu, similar to Action Sheet's on iOS, is a slide-up prompt
that displays several options for the user to choose from before an action is performed.
</p>
<p>
Action Menu's are great for prompting for dangerous actions (like deleting a photo album),
or showing a "context menu" with multiple actions the user can perform on something.
</p>
<button (click)="openMenu()">Open Menu</button>
</ion-content>
`
})
export class ActionMenuPage extends SinkPage {
constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {
super(app);
this.nav = nav;
this.actionMenu = actionMenu;
}
openMenu() {
console.log('Opening ActionMenu')
this.actionMenu.open({
buttons: [
{ text: 'Share This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
console.log('Canceled');
},
destructiveButtonClicked: () => {
console.log('Destructive clicked');
},
buttonClicked: function(index) {
console.log('Button clicked', index);
if(index == 1) { return false; }
return true;
}
}).then(actionMenuRef => {
this.actionMenuRef = actionMenuRef;
})
}
}

133
ionic/components/app/test/sink/pages/animation.ts
View File

@ -1,133 +0,0 @@
import {IonicView, Animation, IonicApp} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
let opacity = 0.2;
let rotateZ = '180deg';
let translateX = '100px';
let scale = 0.6;
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Animation</ion-title></ion-navbar>
<style>
.ball-container {
position: absolute;
top: 300px;
left: 20px;
border: 1px solid gray;
width: 300px;
height: 51px;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
</style>
<ion-content class="padding">
<h2>Animation</h2>
<p>
Ionic comes with a powerful Animation library based on the emerging Web Animation API. Trigger
animations based on user actions, step (or "scrub") through during a drag gesture, or add
realistic physics effects to your app. The Animation API is a major improvement over CSS animations.
</p>
<p>
<button (click)="play($event)">Play</button>
<button (click)="pause($event)">Pause</button>
</p>
<div class="ball-container">
<div class="ball"></div>
</div>
<div style="position: absolute; top: 400px; left: 20px;">
<div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
<div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
<div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div>
</div>
<div style="position: absolute; top: 500px; left: 20px;">
<div class="yellow square2" style="position:absolute; width:100px; height:100px; background:yellow; top: 0; left: 0;"></div>
<div class="purple square2" style="position:absolute; width:100px; height:100px; background:purple; top: 0; left: 100px;"></div>
<div class="maroon square2" style="position:absolute; width:100px; height:100px; background:maroon; top: 0; left: 200px;"></div>
</div>
<p>
<input type="range" (input)="progress($event)" value="0" min="0" step="0.001" max="1" style="width:200px; margin-left: 100px">
</p>
</ion-content>
`
})
export class AnimationPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
this.animation = new Animation();
this.animation
.duration(2000)
.easing('spring', { damping: 6, elasticity: 10 });
var ball = new Animation( document.querySelector('.ball') );
ball
.from('translateX', '0px')
.to('translateX', '250px')
this.animation.add(ball);
var row1 = new Animation( document.querySelectorAll('.square') );
row1
.from('opacity', 0.8)
.to('opacity', 0.2)
this.animation.add(row1);
var row2 = new Animation( document.querySelectorAll('.square2') );
row2
.from('rotate', '0deg')
.from('scale', '1')
.to('rotate', '90deg')
.to('scale', '0.5')
.before.addClass('added-before-play')
.after.addClass('added-after-finish')
this.animation.add(row1, row2);
this.animation.onReady(animation => {
console.log('onReady', animation);
});
this.animation.onPlay(animation => {
console.log('onPlay', animation);
});
this.animation.onFinish(animation => {
console.log('onFinish', animation);
});
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
progress(ev) {
this.animation.progress( parseFloat(ev.srcElement.value) );
}
}

36
ionic/components/app/test/sink/pages/aside.ts
View File

@ -1,36 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Aside</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Aside</h2>
<p>
Asides, also known as side menus or "hamburger" menus (mmmmm), are menus that slide
or swipe in to show menus or information.
</p>
<p>
Try it! Just swipe from the left edge of the screen to the right to expose
the app menu, or tap the button to toggle the menu:
</p>
<p>
<div class="height: 50px; background-color: E05780; width: 5px; margin-left: -15px"></div>
</p>
<p>
<button (click)="toggleMenu()">Toggle</button>
</p>
</ion-content>
`
})
export class AsidePage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
openMenu() {
}
}

73
ionic/components/app/test/sink/pages/button.ts
View File

@ -1,73 +0,0 @@
import {IonicApp, IonicView, NavController} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Buttons</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Buttons</h2>
<p>
The faithful button. Not only our favorite place to click, but a true friend.
</p>
<p>
Buttons come in lots of different colors:
</p>
<p>
<div (^click)="onButtonClick($event)">
<button>Primary</button>
<button secondary>Secondary</button>
<button danger>Danger</button>
<button light>Light</button>
<button dark>Dark</button>
</div>
</p>
<p>
various shapes:
</p>
<p>
<div (^click)="onButtonClick($event)">
<button small>small</button>
<button dark>Medium</button>
<button secondary large>LARGE</button>
</div>
</p>
<p>
and with different embellishments:
</p>
<p>
<div (^click)="onButtonClick($event)">
<button outline>Outline</button>
<button dark clear>Clear</button>
<button danger block>Block</button>
</div>
</p>
</p>
<div *ng-if="clicked">
<b>CLICKED</b>
</div>
</p>
</ion-content>
`
})
export class ButtonPage extends SinkPage {
constructor(app: IonicApp, nav: NavController) {
super(app);
this.nav = nav;
}
onButtonClick(event) {
console.log('On button click', event);
clearTimeout(this.clickTimeout);
this.clicked = true;
this.clickTimeout = setTimeout(() => {
this.clicked = false;
}, 500);
}
}

42
ionic/components/app/test/sink/pages/card.ts
View File

@ -1,42 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Cards</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Cards</h2>
<p>
Cards are an emerging UI concept where a bit of content is displayed
like it would be on an index card or a piece of paper.
</p>
<p>
Cards are great for displaying contextual information in a small space,
like a Tweet, todays weather report, or a photo.
</p>
<ion-card>
<ion-card-header>
Card Header
</ion-card-header>
<div class="item">
<div class="item-media">
<img src="http://i.imgur.com/7BEPcGo.jpg">
</div>
</div>
</ion-card>
</ion-content>
`
})
export class CardPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
}

50
ionic/components/app/test/sink/pages/form.ts
View File

@ -1,50 +0,0 @@
import {FormBuilder, Validators, ControlGroup} from 'angular2/angular2';
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Form</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Forms</h2>
<p>
Forms help you gather important information from the user, like
login information or content to send to your server.
</p>
<p>
Ionic comes with a variety of useful from controls, like
text inputs, text areas, toggle switches, and sliders.
</p>
<form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-input>
<input ng-control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<input control="password" type="password" placeholder="Your password">
</ion-input>
<button block type="submit">Submit</button>
</form>
</ion-content>
`
})
export class FormPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
var fb = new FormBuilder()
this.form = fb.group({
email: ['', Validators.required],
password: ['', Validators.required],
});
}
doSubmit(event) {
console.log('Submitted:', this.form.value);
event.preventDefault();
}
}

30
ionic/components/app/test/sink/pages/ionicons.ts
View File

@ -1,30 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Icons</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Icons</h2>
<p>
Ionic comes with a totally free (in price and license), icon pack (known as "Ionicons") with over 700
icons for your app.
</p>
<p>
Ionicons is an icon font, and can be used with simple CSS icon classes (recommended), or
with unicode characters.
</p>
<div>
<img src="http://ionic-io-assets.s3.amazonaws.com/v2/ionicons.png" style="max-width: 100%">
</div>
</ion-content>
`
})
export class IconsPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
}

45
ionic/components/app/test/sink/pages/list-group.ts
View File

@ -1,45 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>List Groups</ion-title></ion-navbar>
<ion-content>
<ion-list inset>
<ion-item-group *ng-for="#group of groups">
<ion-item-group-title>{{group.title}}</ion-item-group-title>
<ion-item *ng-for="#item of group.items">
{{item.title}}
</ion-item>
</ion-item-group>
</ion-list>
</ion-content>
`
})
export class ListGroupPage extends SinkPage {
constructor(app: IonicApp) {
super(app)
this.groups = [];
var letters = "abcdefghijklmnopqrstuvwxyz".split('');
for(let i = 0; i < letters.length; i++) {
let group = [];
for(let j = 0; j < 10; j++) {
group.push({
title: letters[i] + j
});
}
this.groups.push({
title: letters[i].toUpperCase(),
items: group
});
}
}
}

44
ionic/components/app/test/sink/pages/list.ts
View File

@ -1,44 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Lists</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Lists</h2>
<p>
Lists display data as rows in a table.
</p>
<p>
Lists are great for displaying sets of things like contacts,
songs, and documents.
</p>
<ion-list inset>
<ion-header>
List Header
</ion-header>
<ion-item>
<input control="email" type="email" placeholder="Your email">
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
</ion-list>
</ion-content>
`
})
export class ListPage extends SinkPage {
constructor(app: IonicApp) {
super(app)
}
}

41
ionic/components/app/test/sink/pages/modal.ts
View File

@ -1,41 +0,0 @@
import {IonicApp, IonicView, Modal} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Modal</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Modal</h2>
<p>
Modals are entire views that slide in off screen.
</p>
<p>
Modals make it easy to open a new "context" for the user, without taking them
out of the current context. For example, clicking the "compose" button
on a mail app might slide up a Compose modal.
</p>
<button (click)="openModal()">Open Modal</button>
</ion-content>
`
})
export class ModalPage extends SinkPage {
constructor(app: IonicApp, modal: Modal) {
super(app);
this.modal = modal;
}
openModal() {
console.log('Opening modal');
this.modal.open(MyModal);
}
}
@IonicView({
template: '<ion-content padding><button (click)="close()" primary>Close Modal</button></ion-content>',
})
export class MyModal {}

44
ionic/components/app/test/sink/pages/nav.ts
View File

@ -1,44 +0,0 @@
import {IonicView, NavController} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar><ion-title>Navigation</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Navigation</h2>
<p>
Navigation makes your app feel like, well, an app!
</p>
<p>
With the navigation features in Ionic, we can navigate to new pages,
go back in history (including swipe-to-go-back), and control the stack
of pages the user can navigate between.
</p>
<button (click)="push()">Push</button>
</ion-content>
`
})
export class NavPage {
constructor(nav: NavController) {
this.nav = nav;
}
push() {
this.nav.push(NavSecondPage);
}
}
@IonicView({
template: `
<ion-navbar *navbar><ion-title>Second Page</ion-title></ion-navbar>
<ion-content class="padding">
<button (click)="nav.pop()">Pop</button>
</ion-content>
`
})
export class NavSecondPage {
constructor(nav: NavController) {
this.nav = nav;
}
}

50
ionic/components/app/test/sink/pages/pull-to-refresh.ts
View File

@ -1,50 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Pull to Refresh</ion-title></ion-navbar>
<ion-content>
<ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
</ion-refresher>
<ion-list inset>
<ion-item *ng-for="#item of items">
{{item.title}}
</ion-item>
</ion-list>
</ion-content>
`
})
export class PullToRefreshPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
this.items = [];
for(let i = 90; i < 100; i++) {
this.items.push({
title: i
});
}
this.i = 90;
}
doRefresh(refresher) {
console.log('DOREFRESH', refresher)
this.items.unshift({
title: (--this.i)
});
setTimeout(() => {
refresher.complete();
}, 1500)
}
doStarting() {
console.log('DOSTARTING');
}
doPulling(amt) {
console.log('DOPULLING', amt);
}
}

45
ionic/components/app/test/sink/pages/search-bar.ts
View File

@ -1,45 +0,0 @@
import {Component} from 'angular2/angular2';
import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({
selector: 'ion-view',
appInjector: [FormBuilder]
})
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Search Bar</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Search Bar</h2>
<p>
The Search Bar is a multi-function search component.
</p>
<p>
The bar can sit standalone as part of a form or header search,
or it can also handle and display a list of search results.
</p>
<form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-search-bar placeholder="Search" ng-control="searchQuery"></ion-search-bar>
<div>
Query: <b>{{form.controls.searchQuery.value}}</b>
</div>
</form>
</ion-content>
`
})
export class SearchBarPage extends SinkPage {
constructor(app: IonicApp, formBuilder: FormBuilder) {
super(app);
//var fb = new FormBuilder();
this.form = formBuilder.group({
searchQuery: ['', Validators.required]
});
}
}

70
ionic/components/app/test/sink/pages/segment.ts
View File

@ -1,70 +0,0 @@
import {FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar><ion-title>Segment</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Segment</h2>
<p>
A segment is a radio-style filter bar to let the user toggle between
multiple, exclusive options.
</p>
<p>
Segments are useful for quick filtering, like switching the
the map display between street, hybrid, and satellite.
</p>
<form (^submit)="doSubmit($event)">
<div ng-control-group="form">
<ion-segment [ng-form-control]="mapStyle">
<ion-segment-button value="standard" button>
Standard
</ion-segment-button>
<ion-segment-button value="hybrid" button>
Hybrid
</ion-segment-button>
<ion-segment-button value="sat" button>
Satellite
</ion-segment-button>
</ion-segment>
</div>
<button type="submit">Submit</button>
</form>
Map mode: <b>{{form.controls.mapStyle.value}}</b>
<div [switch]="form.controls.mapStyle.value">
<div *switch-when="'standard'">
<h2>Standard</h2>
</div>
<div *switch-when="'hybrid'">
<h2>Hybrid</h2>
</div>
<div *switch-when="'sat'">
<h2>Satellite!!</h2>
</div>
</div>
</ion-content>
`
})
export class SegmentPage {
constructor() {
/*
var fb = new FormBuilder();
this.form = fb.group({
mapStyle: ['hybrid', Validators.required]
});
*/
this.mapStyle = new Control("hybrid", Validators.required);
this.form = new ControlGroup({
"mapStyle": this.mapStyle
});
}
}

58
ionic/components/app/test/sink/pages/slides.ts
View File

@ -1,58 +0,0 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Slides</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Slides</h2>
<p>
Slides have a set of pages that can be swiped between.
</p>
<p>
Slides are perfect for making image slideshows,
swipe tutorials, or document viewers.
</p>
<ion-slides style="height: 300px">
<ion-slide style="background-color: #387ef5">
<h2 style="color: #fff">Page 1</h2>
</ion-slide>
<ion-slide style="background-color: rgb(245, 255, 96)">
<h2 style="color: #222;"">Page 2</h2>
</ion-slide>
<ion-slide style="background-color: pink">
<h2>Page 3</h2>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Page 4</h2>
</ion-slide>
<ion-slide style="background-color: rgb(1, 157, 157)">
<h2>Page 5</h2>
</ion-slide>
<ion-pager>
</ion-pager>
</ion-slides>
</ion-content>
<style>
.slide {
display: flex !important;
align-items: center;
justify-content: center;
}
.slide h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
}
</style>
`
})
export class SlidePage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
}

65
ionic/components/app/test/sink/pages/table-search.ts
View File

@ -1,65 +0,0 @@
import {Component} from 'angular2/angular2';
import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
import {IonicView} from 'ionic/ionic';
function randomTitle() {
var items = ['Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Durian', 'Banana', 'Meat pie'];
return items[Math.floor(Math.random() * items.length)];
}
@Component({
selector: 'ion-view',
appInjector: [FormBuilder]
})
@IonicView({
template: `
<ion-navbar *navbar><ion-title>Table Search</ion-title></ion-navbar>
<ion-content>
<form (^submit)="doSearch($event)" [control-group]="form">
<ion-search-bar control="searchQuery"></ion-search-bar>
<ion-list #list>
<ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value-->
{{item.title}}
</ion-item>
</ion-list>
</form>
</ion-content>
`
})
export class TableSearchPage {
constructor(formBuilder: FormBuilder) {
console.log('IonicApp Start')
this.form = formBuilder.group({
searchQuery: ['', Validators.required]
});
this.query = 'HELLO';
this.items = [];
for(let i = 0; i < 100; i++) {
this.items.push({
title: randomTitle()
})
}
}
getItems() {
var q = this.form.controls.searchQuery.value;
if(q.trim() == '') {
return this.items;
}
return this.items.filter((v) => {
if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
return true;
}
return false;
})
}
}

84
ionic/components/app/test/sink/pages/tabs.ts
View File

@ -1,84 +0,0 @@
import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
import {IonicApp, IonicView, NavController} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Featured</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'</ion-content>'
})
class FeaturedTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Top</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'</ion-content>'
})
class TopTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Search</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'</ion-content>'
})
class SearchTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Updates</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'</ion-content>'
})
class UpdatesTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Tabs</ion-title></ion-navbar>
<ion-tabs id="tabs">
<ion-tab tab-title="Featured" tab-icon="star" [root]="featuredTab"></ion-tab>
<ion-tab tab-title="Top Charts" tab-icon="stats" [root]="topTab"></ion-tab>
<ion-tab tab-title="Search" tab-icon="search" [root]="searchTab"></ion-tab>
<ion-tab tab-title="Updates" tab-icon="cloud-download" [root]="updatesTab"></ion-tab>
</ion-tabs>
`
})
export class TabsPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
this.featuredTab = FeaturedTabPage;
this.topTab = TopTabPage;
this.searchTab = SearchTabPage;
this.updatesTab = UpdatesTabPage;
}
}

12
ionic/components/app/test/sink/sink-page.ts
View File

@ -1,12 +0,0 @@
/**
* Simple wrapper page for the side menu toggle.
*/
export class SinkPage {
constructor(app: IonicApp) {
this.app = app;
}
toggleMenu() {
let aside = this.app.getComponent('mainMenu');
aside.toggle();
}
}

15
ionic/components/app/test/snapcat/detail.html
View File

@ -1,15 +0,0 @@
<ion-navbar *navbar id="p2toolbar"><ion-title>Post</ion-title></ion-navbar>
<ion-content>
<ion-card>
<div class="card-content">
{{post.text}}
</div>
<img src="{{post.image}}">
</ion-card>
</ion-content>

11
ionic/components/app/test/snapcat/feed.html
View File

@ -1,11 +0,0 @@
<ion-navbar *navbar id="p2toolbar"><ion-title>Feed</ion-title></ion-navbar>
<ion-content>
<div class="card" *ng-for="#post of posts" (^click)="postClicked($event, post)">
<div class="card-content">
{{post.text}}
</div>
<img src="{{post.image}}">
</div>
</ion-content>

127
ionic/components/app/test/snapcat/index.ts
View File

@ -1,127 +0,0 @@
import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/forms';
import {App, IonicView, Animation, Modal, NavController, NavParams} from 'ionic/ionic';
@IonicView({
templateUrl: 'detail.html'
})
export class DetailPage {
constructor(params: NavParams) {
this.post = params.post;
}
}
@IonicView({
templateUrl: 'feed.html'
})
export class FeedPage {
constructor(nav: NavController) {
this.nav = nav;
this.filterForm = new ControlGroup({
filterControl: new Control("")
});
this.posts = [
{
text: 'I tried to keep both arts alive, but the camera won. I found that while the camera does not express the soul, perhaps a photograph can!',
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p.jpg',
day: 5
},
{
text: 'It is good to realize that if love and peace can prevail on earth, and if we can teach our children to honor nature\'s gifts, the joys and beauties of the outdoors will be here forever.',
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p1.png',
day: 6
},
{
text: 'I see humanity now as one vast plant, needing for its highest fulfillment only love, the natural blessings of the great outdoors, and intelligent crossing and selection.',
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p2.png',
day: 7
},
{
text: 'You must not lose faith in humanity. Humanity is an ocean; if a few drops of the ocean are dirty, the ocean does not become dirty.',
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p3.png',
day: 7
},
{
text: 'Keep close to Nature\'s heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.',
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p4.png',
day: 8
}
];
}
postClicked(event, post) {
console.log('Post clicked');
this.nav.push(DetailPage, {
post: post
});
event.preventDefault();
}
}
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor(modal: Modal) {
this.modal = modal;
this.rootView = FeedPage;
}
openHeart() {
console.log('openHeart');
this.modal.open(HeartModal, {
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out'
});
}
openGear() {
console.log('openGear');
this.modal.open(SettingsModal, {
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out'
});
}
}
@IonicView({
template: '<ion-view id="settings-modal"><ion-content padding><button (click)="close()">Close</button></ion-content></ion-view>'
})
export class SettingsModal {}
@IonicView({
template: '<ion-view id="heart-modal"><button icon (^click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-view>'
})
export class HeartModal {}
class FadeIn extends Animation {
constructor(element) {
super(element);
this
.easing('ease')
.duration(250)
.fadeIn();
}
}
Animation.register('my-fade-in', FadeIn);
class FadeOut extends Animation {
constructor(element) {
super(element);
this
.easing('ease')
.duration(250)
.fadeOut();
}
}
Animation.register('my-fade-out', FadeOut);

127
ionic/components/app/test/snapcat/main.html
View File

@ -1,127 +0,0 @@
<ion-slides bounce="false">
<ion-slide>
<ion-view>
<ion-toolbar id="p1toolbar"><button (^click)="openHeart()" class="toolbar-primary-item"><i class="icon ion-ios-heart"></i></button><ion-title>secret</ion-title><button (^click)="openGear()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
<ion-content>
<ion-list>
<ion-item>
Activity
</ion-item>
<ion-item>
Chat
</ion-item>
</ion-list>
<h2 style="text-align: center; color: #555; font-size: 16px;">Swipe Right <i class="icon ion-ios-arrow-right"></i></h2>
</ion-content>
</ion-view>
</ion-slide>
<ion-slide>
<ion-nav [root]="rootView"></ion-nav>
</ion-view>
</ion-slide>
</ion-slides>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
ion-app {
font-family: 'lato' !important;
}
ion-view {
background-color: #F5F5F5;
}
.mode-ios ion-toolbar {
padding-top: 20px;
}
ion-content {
background-color: #F5F5F5 !important;
}
.card {
box-shadow: none !important;
}
.card .card-content {
font-family: 'lato';
font-size: 16px;
line-height: 25px;
}
.card .item {
border: none !important;
}
.card .card-content {
padding: 25px !important;
}
.item {
font-family: 'lato';
font-size: 16px;
}
ion-item-content {
min-height: 70px !important;
}
ion-toolbar {
text-align: center;
align-items: center;
}
ion-toolbar:after {
background: none !important;
}
ion-toolbar {
letter-spacing: 1px;
}
.mode-ios ion-toolbar button i {
color: #fff !important;
font-size: 24px !important;
}
.mode-ios .item:first-of-type:before,
.mode-ios .item:last-of-type:after,
.mode-ios ion-item-content:after {
background-color: #F5F5F5 !important;
}
#p1toolbar {
background-color: #FFB400;
}
#p1toolbar ion-title {
color: white;
font-family: 'lato';
}
#p2toolbar {
background-color: #F93822;
}
#p2toolbar ion-title {
color: white;
font-family: 'lato';
}
#heart-modal {
background-color: #FFB400 !important;
justify-content: center;
align-items: center;
color: #fff;
}
#heart-modal h2 {
font-size: 36px !important;
}
#heart-modal p {
font-size: 18px;
}
#heart-modal icon {
position: absolute;
top: 13px;
left: 0px;
}
#heart-modal icon i {
font-size: 18px;
color: #fff;
}
</style>

BIN
ionic/components/app/test/snapcat/p.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 KiB

47
ionic/components/app/test/storage/index.ts
View File

@ -1,47 +0,0 @@
import {Component} from 'angular2/angular2';
import {Control, ControlGroup} from 'angular2/forms';
import {App, Http, Storage, LocalStorage, SqlStorage} from 'ionic/ionic';
let testUrl = 'https://ionic-api-tester.herokuapp.com/json';
let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404';
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.local = new Storage(LocalStorage);
this.sql = new Storage(SqlStorage);
}
getLocal() {
this.local.get('name').then(value => {
alert('Your name is: ' + value);
});
}
setLocal() {
let name = prompt('Your name?');
this.local.set('name', name);
}
removeLocal() {
this.local.remove('name');
}
getSql() {
this.sql.get('name').then(value => {
alert('Your name is: ' + value);
}, (errResult) => {
console.error('Unable to get item from SQL db:', errResult);
});
}
setSql() {
let name = prompt('Your name?');
this.sql.set('name', name);
}
removeSql() {
this.sql.remove('name');
}
}

13
ionic/components/app/test/storage/main.html
View File

@ -1,13 +0,0 @@
<ion-view>
<ion-content padding>
<h2>Local Storage</h2>
<button primary (click)="getLocal()">Get</button>
<button primary (click)="setLocal()">Set</button>
<button primary (click)="removeLocal()">Remove</button>
<h2>SQL Storage</h2>
<button primary (click)="getSql()">Get</button>
<button primary (click)="setSql()">Set</button>
<button primary (click)="removeSql()">Remove</button>
</ion-content>
</ion-view>

102
ionic/components/app/test/tap/index.ts
View File

@ -1,102 +0,0 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {
tapTest(eleType) {
console.debug('test click', eleType);
}
}
function onEvent(ev) {
var c = pointerCoord(ev);
var l = '(' + c.x + ',' + c.y + ')';
if (ev.isIonicTap) {
l += ' isIonicTap';
}
console.debug(ev.type, l);
}
function pointerCoord(ev) {
// get coordinates for either a mouse click
// or a touch depending on the given event
let c = { x: 0, y: 0 };
if (ev) {
const touches = ev.touches && ev.touches.length ? ev.touches : [ev];
const e = (ev.changedTouches && ev.changedTouches[0]) || touches[0];
if (e) {
c.x = e.clientX || e.pageX || 0;
c.y = e.clientY || e.pageY || 0;
}
}
return c;
}
document.addEventListener('touchstart', onEvent);
document.addEventListener('touchcancel', onEvent);
document.addEventListener('touchend', onEvent);
document.addEventListener('mousedown', onEvent);
document.addEventListener('mouseup', onEvent);
document.addEventListener('click', onEvent);
var msgs = [];
var index = 0;
var timeId;
var winConsoleError = console.error;
console.error = function() {
winConsoleError.apply(this, arguments);
var args = ['ERROR!'];
for (var i = 0, j = arguments.length; i < j; i++){
args.push(arguments[i]);
}
console.debug.apply(this, args);
};
console.debug = function() {
index++;
var msg = [];
msg.push(index);
for (var i = 0, j = arguments.length; i < j; i++){
msg.push(arguments[i]);
}
msg.push(getTime());
msg = msg.join(', ');
if(arguments[0] === 'ERROR!') msg = '<span style="color:red;font-weight:bold">' + msg + '</span>';
if(arguments[0] === 'touchstart') msg = '<span style="color:blue">' + msg + '</span>';
if(arguments[0] === 'touchend') msg = '<span style="color:darkblue">' + msg + '</span>';
if(arguments[0] === 'mousedown') msg = '<span style="color:red">' + msg + '</span>';
if(arguments[0] === 'mouseup') msg = '<span style="color:maroon">' + msg + '</span>';
if(arguments[0] === 'click') msg = '<span style="color:purple">' + msg + '</span>';
if(arguments[0] === 'test click') msg = '<span style="color:orange">' + msg + '</span>';
msgs.unshift( msg );
if(msgs.length > 25) {
msgs.splice(25);
}
// do this so we try not to interfere with the device performance
clearTimeout(timeId);
timeId = setTimeout(function(){
document.getElementById('logs').innerHTML = msgs.join('<br>');
}, 100);
}
function getTime() {
var d = new Date();
return d.getSeconds() + '.' + d.getMilliseconds();
}

41
ionic/components/app/test/tap/main.html
View File

@ -1,41 +0,0 @@
<ion-row>
<ion-col>
<button (^click)="tapTest('button')" block>
<div><div><p>Button</p></div></div>
</button>
</ion-col>
<ion-col>
<a button (^click)="tapTest('link')" block>
Link
</a>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div button (^click)="tapTest('div')" block>
Div w/ (click)
</div>
</ion-col>
<ion-col>
<div button block>
Div w/out (click)
</div>
</ion-col>
</ion-row>
<div id="logs"></div>
<style>
.activated {
background-color: yellow !important;
}
</style>

8
ionic/components/app/test/weather/current-weather.html
View File

@ -1,8 +0,0 @@
<div id="current-weather" *ng-if="current">
<h5><weather-icon [icon]="current.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</h5>
<h5>
<span id="temp-hi"><i class="icon ion-arrow-up-c"></i> <span>{{highTemp}}</span>&deg;</span>
<span id="temp-lo"><i class="icon ion-arrow-down-c"></i> <span>{{lowTemp}}</span>&deg;</span>
</h5>
<h1 class="current-temp"><span>{{currentTemp}}</span>&deg;</h1>
</div>

37
ionic/components/app/test/weather/flickr.ts
View File

@ -1,37 +0,0 @@
import {Http} from 'ionic/net/http';
let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
let baseUrl = 'https://api.flickr.com/services/rest/';
export class Flickr {
constructor() {
/*
var flickrSearch = $resource(baseUrl, {
method: 'flickr.groups.pools.getPhotos',
group_id: '1463451@N25',
safe_search: 1,
jsoncallback: 'JSON_CALLBACK',
api_key: FLICKR_API_KEY,
format: 'json'
}, {
get: {
method: 'JSONP'
}
});
*/
}
static search(tags, lat, lng) {
return new Promise((resolve, reject) => {
Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags + '&lat=' + lat + '&lng=' + lng, {
method: 'jsonp'
}).then((val) => {
resolve(val);
}, (err) => {
reject(httpResponse);
})
})
}
}

56
ionic/components/app/test/weather/geo.ts
View File

@ -1,56 +0,0 @@
export class Geo {
static reverseGeocode(lat, lng) {
return new Promise((resolve, reject) => {
let geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng': new google.maps.LatLng(lat, lng)
}, (results, status) => {
if (status == google.maps.GeocoderStatus.OK) {
console.log('Reverse', results);
if(results.length > 1) {
var r = results[1];
var a, types;
var parts = [];
var foundLocality = false;
var foundState = false;
for(var i = 0; i < r.address_components.length; i++) {
a = r.address_components[i];
types = a.types;
for(var j = 0; j < types.length; j++) {
if(!foundLocality && types[j] == 'locality') {
foundLocality = true;
parts.push(a.long_name);
} else if(!foundState && types[j] == 'administrative_area_level_1') {
foundState = true;
parts.push(a.short_name);
}
}
}
console.log('Reverse', parts);
resolve(parts.join(', '));
}
} else {
console.log('reverse fail', results, status);
reject(results);
}
});
});
}
static getLocation() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition((position) => {
resolve(position);
}, (error) => {
reject(error);
})
});
}
}

301
ionic/components/app/test/weather/index.ts
View File

@ -1,301 +0,0 @@
import {Component, Directive, View} from 'angular2/angular2';
import {NgIf, NgFor, NgClass, ElementRef} from 'angular2/angular2';
import {FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES} from 'angular2/forms';
import {App, IonicView, Animation, Content, Scroll, Modal, NavController, NavParams} from 'ionic/ionic';
import {Geo} from './geo';
import {Weather} from './weather';
import {Flickr} from './flickr';
@IonicView({
template: `<ion-view id="settings-modal">
<ion-toolbar><ion-title>Settings</ion-title></ion-toolbar>
<ion-content padding>
<form (^submit)="doSubmit($event)" [ng-form-model]="settingsForm">
<ion-list>
<ion-input ion-item>
<ion-label>Units</ion-label>
<!--
<ion-segment ng-control="units">
<ion-segment-button value="standard" button>
&deg;F
</ion-segment-button>
<ion-segment-button value="standard" button>
&deg;C
</ion-segment-button>
</ion-segment>
-->
</ion-input>
</ion-list>
</form>
</ion-content>
</ion-view>`,
directives: [FORM_DIRECTIVES]
})
export class SettingsModal {
constructor(fb: FormBuilder) {
this.settingsForm = fb.group({
mapStyle: ['hybrid', Validators.required]
});
}
}
let WEATHER_ICONS = {
'partlycloudy': 'ion-ios-partlysunny-outline',
'mostlycloudy': 'ion-ios-partlysunny-outline',
'cloudy': 'ion-ios-cloudy-outline',
'rain': 'ion-ios-rainy-outline',
'tstorms': 'ion-ios-thunderstorm-outline',
'sunny': 'ion-ios-sunny-outline',
'clear-day': 'ion-ios-sunny-outline',
'nt_clear': 'ion-ios-moon-outline',
'clear-night': 'ion-ios-moon-outline'
};
@Component({
selector: 'weather-icon',
properties: [
'icon'
]
})
@View({
template: '<i class="icon" [ng-class]="weatherIcon"></i>',
directives: [NgClass]
})
export class WeatherIcon {
constructor() {
}
onAllChangesDone(data) {
var icon = this.icon;
if(icon in WEATHER_ICONS) {
this.weatherIcon = WEATHER_ICONS[icon];
} else {
this.weatherIcon = WEATHER_ICONS['cloudy'];
}
}
}
@Component({
selector: 'current-time',
properties: [
'localtz'
]
})
@View({
template: '<span class="current-time">{{currentTime}}</span>',
})
export class CurrentTime {
constructor() {
}
onInit() {
if(this.localtz) {
this.currentTime = new Date();
//this.currentTime = //$filter('date')(+(new Date), 'h:mm') + $scope.localtz;
}
}
}
@Component({
selector: 'current-weather',
properties: [
'current'
]
})
@View({
templateUrl: 'current-weather.html',
directives: [NgIf]
})
export class CurrentWeather {
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
/*
$rootScope.$on('settings.changed', function(settings) {
var units = Settings.get('tempUnits');
if($scope.forecast) {
var forecast = $scope.forecast;
var current = $scope.current;
if(units == 'f') {
$scope.highTemp = forecast.forecastday[0].high.fahrenheit;
$scope.lowTemp = forecast.forecastday[0].low.fahrenheit;
$scope.currentTemp = Math.floor(current.temp_f);
} else {
$scope.highTemp = forecast.forecastday[0].high.celsius;
$scope.lowTemp = forecast.forecastday[0].low.celsius;
$scope.currentTemp = Math.floor(current.temp_c);
}
}
});
*/
// Delay so we are in the DOM and can calculate sizes
}
onInit() {
var windowHeight = window.innerHeight;
var thisHeight = this.elementRef.nativeElement.offsetHeight;
var headerHeight = document.querySelector('#header').offsetHeight;
this.elementRef.nativeElement.style.paddingTop = (windowHeight - 250) + 'px';
/*
document.querySelector('.content')).css('-webkit-overflow-scrolling', 'auto');
$timeout(function() {
angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'touch');
}, 50);
*/
}
onAllChangesDone() {
var units = 'f';//Settings.get('tempUnits');
let current = this.current;
console.log('ALL CHANGES DONE', current);
if(current && current.currently) {
if(units == 'f') {
this.currentTemp = Math.floor(current.currently.temperature);
} else {
this.currentTemp = Math.floor(current.currently.temperature);
}
if(units == 'f') {
this.highTemp = Math.floor(current.daily.data[0].temperatureMax);
this.lowTemp = Math.floor(current.daily.data[0].temperatureMin);
} else {
this.highTemp = Math.floor(current.daily.data[0].temperatureMax);
this.lowTemp = Math.floor(current.daily.data[0].temperatureMin);
}
}
}
}
@Component({
selector: 'background-cycler',
properties: [
'image'
]
})
@View({
template: '<div class="bg-image"></div>'
})
export class BackgroundCycler {
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
this.el = elementRef.nativeElement;
}
onInit() {
this.imageEl = this.el.children[0];
}
onAllChangesDone() {
var item = this.image;
if(item) {
var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
this.imageEl.style.backgroundImage = 'url(' + url + ')';
}
}
}
@App({
templateUrl: 'main.html',
directives: [CurrentWeather, WeatherIcon, BackgroundCycler]
})
class WeatherApp {
constructor(modal: Modal) {
this.modal = modal;
this.currentLocationString = 'Madison, WI';
this.activeBgImageIndex = 0;
/*
$ionicPlatform.ready(function() {
// Hide the status bar
if(window.StatusBar) {
StatusBar.hide();
}
});
*/
}
onInit() {
this.refreshData();
}
showSettings() {
this.modal.open(SettingsModal).then((settingsModal) => {
this.settingsModal = settingsModal;
});
}
getBackgroundImage(lat, lng, locString) {
Flickr.search(locString, lat, lng).then((resp) => {
let photos = resp.photos;
if(photos.photo.length) {
this.bgImages = photos.photo;
this.cycleBgImages();
}
}, (error) => {
console.error('Unable to get Flickr images', error);
});
}
getCurrent(lat, lng, locString) {
Weather.getAtLocation(lat, lng).then((resp) => {
this.current = resp;
// TODO: This should be in a custom pipe
let c, d, h;
for(let i = 0; i < this.current.hourly.data.length; i++) {
c = this.current.hourly.data[i];
let t = c.temperature;
d = new Date(c.time * 1000);
c.temperature = Math.floor(t);
h = d.getHours() % 12;
h = (h == 0 ? 12 : h);
c.time_date = h + ' ' + (d.getHours() < 12 ? 'AM' : 'PM');
}
for(let i = 0; i < this.current.daily.data.length; i++) {
c = this.current.daily.data[i];
let max = c.temperatureMax;
let min = c.temperatureMin;
c.temperatureMax = Math.floor(max);
c.temperatureMin = Math.floor(min);
c.time_date = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][new Date(c.time*1000).getDay()];
}
console.log('GOT CURRENT', this.current);
}, (error) => {
alert('Unable to get current conditions');
console.error(error);
});
}
cycleBgImages() {
setTimeout(() => {
if(this.bgImages) {
this.activeBgImage = this.bgImages[this.activeBgImageIndex++ % this.bgImages.length];
}
});
}
refreshData() {
Geo.getLocation().then((position) => {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
Geo.reverseGeocode(lat, lng).then((locString) => {
this.currentLocationString = locString;
this.getBackgroundImage(lat, lng, locString);
});
this.getCurrent(lat, lng);
}, (error) => {
alert('Unable to get current location: ' + error);
});
}
}

68
ionic/components/app/test/weather/main.html
View File

@ -1,68 +0,0 @@
<link rel="stylesheet" href="style.css">
<ion-view>
<background-cycler class="bg-fade" [image]="activeBgImage"></background-cycler>
<ion-toolbar id="header" class="no-border"><ion-title><span class="city"><i id="city-nav-icon" class="icon ion-navigate"></i> {{currentLocationString}}</span><br><current-time localtz="current.local_tz_short"></current-time></ion-title><button (^click)="showSettings()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
<ion-content>
<div id="main-content">
<current-weather [current]="current"></current-weather>
<div id="forecast" class="weather-box">
<h4 class="title">Forecast</h4>
<ion-scroll scroll-x="true" id="forecast-scroll">
<div id="hourly-forecast" *ng-if="current">
<div class="hourly-hour" *ng-for="#hour of current.hourly.data">
<div class="time" [inner-html]="hour.time_date"></div><!-- * 1000 | date:'h a'"></div>-->
<weather-icon [icon]="hour.icon"></weather-icon>
<div class="temp">{{hour.temperature}}&deg;</div>
</div>
</div>
</ion-scroll>
<div *ng-if="current">
<div class="row" *ng-for="#day of current.daily.data">
<div class="col"><span [inner-html]="day.time_date"></span></div>
<div class="col"><weather-icon [icon]="day.icon"></weather-icon></div>
<div class="col">
<span class="temp-high">{{day.temperatureMax}}&deg;</span>
<span class="temp-low">{{day.temperatureMin}}&deg;</span>
</div>
</div>
</div>
<div class="clearfix">
<div class="credit">
Powered by <a href="http://forecast.io" target="_blank">forecast.io</a>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
<style>
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 5px;
width: 100%; }
.row + .row {
margin-top: -5px;
padding-top: 0; }
.col {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
padding: 5px;
width: 100%; }
</style>

251
ionic/components/app/test/weather/style.css
View File

@ -1,251 +0,0 @@
body {
text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
background-color: black;
}
#wrapper {
background-color: black;
}
#scroller {
}
background-cycler {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
.bg-image {
width: 120%;
height: 120%;
background-size: cover;
}
.bg-fade > .ng-enter {
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
}
.bg-fade > .ng-enter-active {
opacity: 1;
}
.bg-fade > .ng-leave {
opacity: 1;
-webkit-transition: opacity 2s ease-in-out;
}
.bg-fade > .ng-leave-active {
opacity: 0;
}
.wunderground-logo {
width: 100px;
height: 14px;
background: url('../img/wunderground.png') no-repeat transparent;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.wunderground-logo {
background: url('../img/wunderground@2x.png') no-repeat transparent;
background-size: 100px 14px;
}
}
h1,h2,h3,h4,h5 {
color: #fff;
font-weight: 300;
}
#main-content {
color: #fff;
padding: 10px;
}
.ion-ios-sunny-outline {
color: yellow;
}
.ionic-refresher-content {
color: rgb(255,255,255) !important;
text-shadow: none;
}
/**
* Header
*/
#header {
background-color: transparent !important;
height: 44px;
}
#header > * {
margin-top: 0;
}
#header .title {
font-size: 12px;
line-height: 20px;
margin-top: 4px;
}
#header .title .city {
font-size: 16px;
}
#city-nav-icon {
font-size: 11px;
margin-right: 2px;
}
.scroll-refresher {
overflow: visible;
}
.ionic-refresher-content {
background-color: rgba(0,0,0,0.4);
height: 400px;
bottom: 0;
}
.ionic-refresher-content i {
margin-top: 360px;
}
/**
* Current weather
*/
current-weather {
display: block;
height: 180px;
box-sizing: content-box;
}
current-weather > * {
color: #fff;
}
current-weather .current-temp {
font-size: 100px;
font-weight: 100;
margin: 0;
padding: 0;
line-height: 80px;
}
#current-icon {
font-size: 42px;
vertical-align: middle;
margin-right: 5px;
}
#temp-hi, #temp-lo { display: inline-block; }
#temp-lo {
margin-left: 10px;
}
/**
* Forecast and details
*/
.weather-box {
background-color: rgba(0,0,0,0.2);
padding: 9px;
margin: 10px 0px;
color: rgba(255,255,255,0.9);
}
.weather-box .title {
color: rgba(255,255,255,0.9);
font-weight: normal;
margin: 0;
padding-bottom: 5px;
border-bottom: 1px solid #fff;
}
.weather-box .row {
border-bottom: 1px dotted rgba(255,255,255,0.3);
margin: 0;
padding: 0;
}
.weather-box .col {
text-align: center;
}
.weather-box .col:first-child {
text-align: left;
}
.weather-box .col:last-child {
text-align: right;
}
.weather-box span {
vertical-align: middle;
}
.weather-box .icon {
font-size: 42px;
line-height: 24px;
vertical-align: middle;
}
.temp-high {
display: inline-block;
width: 30px;
text-align: right;
}
.temp-low {
display: inline-block;
width: 30px;
text-align: right;
color: #4a87ee;
}
.no-header {
top: 0 !important;
}
#forecast-scroll {
margin: 10px 0px;
height: 85px;
}
#hourly-forecast {
width: 2210px;
height: 70px;
}
.hourly-hour {
display: inline-block;
margin-right: 10px;
text-align: center;
}
#forecast .credit {
float: right;
margin-top: 4px;
margin-right: 4px;
}
#forecast .credit a {
color: #fff;
}
/**
* Settings modal
*/
#settings-modal {
background-color: rgba(0,0,0,0.8) !important;
}
#settings-modal ion-toolbar {
background-color: rgba(0,0,0,0.8);
color: #fff;
}
#settings-modal .item {
background-color: rgba(0,0,0,0.9);
border: none;
color: #fff;
}
#settings-modal ion-label {
color: #fff;
}
ion-view {
background-color: transparent !important;
}
ion-content {
background-color: transparent !important;
}
#header {
background: transparent;
color: #fff;
}

14
ionic/components/app/test/weather/weather.ts
View File

@ -1,14 +0,0 @@
import {Http} from 'ionic/net/http';
let WUNDERGROUND_API_KEY = '1cc2d3de40fa5af0';
let FORECASTIO_KEY = '4cd3c5673825a361eb5ce108103ee84a';
export class Weather {
static getAtLocation(lat, lng) {
let url = 'https://api.forecast.io/forecast/' + FORECASTIO_KEY + '/';
return Http.get(url + lat + ',' + lng + '?callback=JSON_CALLBACK', {
method: 'jsonp'
});
}
}

57
ionic/components/app/test/yerk/index.ts
View File

@ -1,57 +0,0 @@
import {App, IonicView, NavController} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.root = TabsPage;
}
}
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Home</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'home' +
'</ion-content>'
})
class HomeTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
push() {
}
}
@IonicView({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Peek</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'peek' +
'</ion-content>'
})
class PeekTabPage {
constructor(nav: NavController) {
this.nav = nav;
}
push() {
}
}
@IonicView({
templateUrl: 'tabs.html'
})
class TabsPage {
constructor() {
this.homeTab = HomeTabPage;
this.peekTab = PeekTabPage;
}
}

30
ionic/components/app/test/yerk/main.html
View File

@ -1,30 +0,0 @@
<ion-nav [root]="root"></ion-nav>
<style>
.md .nav .navbar-container {
background-color: #2FD9BB !important;
}
.md .nav .navbar-title {
color: #FDFEFE;
}
#tabs .tab-bar:before {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
transform-origin: 50% 0%;
background-color: #00ECC4;
content: '';
}
#tabs .tab-button {
color: #C7C7C7;
}
#tabs .tab-button[aria-selected="true"] {
color: #51E3C2;
}
</style>

7
ionic/components/app/test/yerk/tabs.html
View File

@ -1,7 +0,0 @@
<ion-tabs id="tabs">
<ion-tab tab-title="Home" tab-icon="globe" [root]="homeTab"></ion-tab>
<ion-tab tab-title="Peek" tab-icon="glasses" [root]="peekTab"></ion-tab>
<ion-tab tab-title="Me" tab-icon="person"></ion-tab>
<ion-tab tab-title="More" tab-icon="more"></ion-tab>
</ion-tabs>