docs(demos): remove unused demos

closes #5216
This commit is contained in:
Brandy Carney
2016-01-27 13:04:53 -05:00
parent 59c62a0e5c
commit e50eb897aa
25 changed files with 0 additions and 993 deletions

View File

@@ -1,47 +0,0 @@
import {App, Animation} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.animation = new Animation();
this.animation
.duration(2000)
var ionitronSpin = new Animation(document.querySelector('#ionitron'));
ionitronSpin
.from('transform', 'rotate(0deg)')
.to('transform', 'rotate(360deg)')
this.animation.add(ionitronSpin);
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) );
}
}

View File

@@ -1,32 +0,0 @@
<html>
<head>
<title>Animations</title>
<style>
#ionitron {
width: 100px;
height: 100px;
position: absolute;
top: 45%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
<div style="position:absolute; bottom: 0; display:inline;">
<button primary (click)="pause($event)">
Pause
<ion-icon name="pause"></ion-icon>
</button>
<button secondary (click)="play($event)">
Play
<ion-icon name="play"></ion-icon>
</button>
</div>
</body>
</html>

View File

@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../css/ionic.css" rel="stylesheet">
</head>
<body>
<ion-app>
<ion-loading-icon></ion-loading-icon>
</ion-app>
<script src="../../js/ionic.bundle.js"></script>
<script>System.import("index");</script>
</body>
</html>

View File

@@ -1,11 +0,0 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
constructor() {
}
}

View File

@@ -1,62 +0,0 @@
<ion-toolbar>
<ion-title>Cards</ion-title>
</ion-toolbar>
<ion-content class="outer-content" style="background:#eee">
<ion-card>
<ion-card-header>
Card Header
</ion-card-header>
<ion-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.
</ion-card-content>
</ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" item-left></ion-icon>
ion-iteam in a card, icon left, button right
<button outline item-right>View</button>
</ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
</ion-card-content>
</ion-card>
<ion-card>
<a ion-item href="#">
<ion-icon name="wifi" item-left></ion-icon>
Card Link Item 1
</a>
<a ion-item href="#">
<ion-icon name="wine" item-left></ion-icon>
Card Link Item 2
</a>
<button ion-item>
<ion-icon name="warning" item-left></ion-icon>
Card Button Item 1
</button>
<button ion-item>
<ion-icon name="walk" item-left></ion-icon>
Card Button Item 2
</button>
</ion-card>
</ion-content>

View File

@@ -1,27 +0,0 @@
import {Component} from 'angular2/core';
import {Control, ControlGroup} from 'angular2/common';
import {IonicApp, App} from 'ionic/ionic';
import {Translate, TranslatePipe} from 'ionic/ionic';
@App({
templateUrl: 'main.html',
pipes: [TranslatePipe]
})
class MyApp {
constructor(app: IonicApp, trans: Translate) {
this.app = app;
this.trans = trans;
this.trans.translations('de', {
'Location': 'lage'
});
console.log(this.trans.translate('Location'));
console.log(this.trans.translate('Location', 'de'));
//this.trans.setLanguage('de');
console.log(this.trans.translate('Location'));
}
}

View File

@@ -1,5 +0,0 @@
<ion-view>
<ion-content>
Hello! What is your {{ 'Location' | translate }}
</ion-content>
</ion-view>

View File

@@ -1,13 +0,0 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
constructor() {
this.homeIcon = 'home';
this.isActive = false;
}
}

View File

@@ -1,74 +0,0 @@
<ion-toolbar>
<ion-title>Icons</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-list-header>
Favorite Icons
</ion-list-header>
<ion-toggle>
<ion-icon name="wifi" item-left></ion-icon>
Wifi
</ion-toggle>
<ion-item>
<ion-icon name="heart" item-left></ion-icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="home" item-left></ion-icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-toggle checked="true">
<ion-icon name="color-wand" item-left></ion-icon>
Magic
</ion-toggle>
<ion-item>
<ion-icon name="star" item-left></ion-icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="pizza" item-left></ion-icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="beer" item-left></ion-icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="wine" item-left></ion-icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

View File

@@ -1,104 +0,0 @@
import {Component, Directive} from 'angular2/core';
import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
@IonicView({
template: '<ion-navbar *navbar primary>' +
'<ion-title>Heading</ion-title>' +
'<button menuToggle="menu">' +
'<ion-icon name="menu"></ion-icon>' +
'</button>' +
'<ion-buttons end>' +
'<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-buttons>' +
'</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 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, actionSheet: ActionSheet) {
this.app = app;
this.actionSheet = actionSheet;
}
showMoreMenu() {
this.actionSheet.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(actionSheetRef => {
this.actionSheetRef = actionSheetRef;
});
}
}
@App({
template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
<ion-menu 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-menu>
<ion-nav #content></ion-nav>`,
routes: [
{
path: '/first',
component: FirstPage,
root: true
}
]
})
class MyApp {
constructor() {
}
}

View File

@@ -1,79 +0,0 @@
import {Component} from 'angular2/core';
import {Control, ControlGroup} from 'angular2/common';
import {IonicApp, App} from 'ionic/ionic';
import {Camera, Geolocation, Vibration, Battery, Device, Events} from 'ionic/ionic';
import {CameraPage} from 'pages/camera';
import {BatteryPage} from 'pages/battery';
import {ContactsPage} from 'pages/contacts';
import {DevicePage} from 'pages/device';
import {DeviceMotionPage} from 'pages/device-motion';
import {DeviceOrientationPage} from 'pages/device-orientation';
import {DialogsPage} from 'pages/dialogs';
import {GeolocationPage} from 'pages/geolocation';
import {StatusBarPage} from 'pages/statusbar';
import {VibrationPage} from 'pages/vibration';
@App({
templateUrl: 'main.html'
})
class MyApp {
constructor(app: IonicApp, events: Events) {
this.app = app;
console.log('Events', events);
let handler = (user) => {
console.log('User created', user);
return {
what: 'what'
}
}
let handler2 = (user) => {
console.log('2User created', user);
return {
things: 'yes'
}
}
events.subscribe('user:created', handler);
events.subscribe('user:created', handler2);
setInterval(() => {
var results = events.publish('user:created', {
name: 'Max Lynch',
id: 1
})
console.log('Got results', results);
}, 2000);
setTimeout(() => {
events.unsubscribe('user:created');
console.log(events.channels);
}, 6000);
this.firstPage = CameraPage;
this.plugins = [
{title: 'Camera', page: CameraPage},
{title: 'Device', page: DevicePage},
{title: 'Device Motion', page: DeviceMotionPage},
{title: 'Device Orientation', page: DeviceOrientationPage},
{title: 'Dialogs', page: DialogsPage},
{title: 'Geolocation', page: GeolocationPage},
{title: 'Contacts', page: ContactsPage},
{title: 'Battery', page: BatteryPage},
{title: 'StatusBar', page: StatusBarPage},
{title: 'Vibration', page: VibrationPage},
]
}
openPage(menu, page) {
menu.close();
let nav = this.app.getComponent('myNav');
nav.setRoot(page.page);
}
}

View File

@@ -1,12 +0,0 @@
<ion-menu #menu [content]="content">
<ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ngFor="#p of plugins" (click)="openPage(menu, p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content swipe-back-enabled="false" [root]="firstPage" id="myNav"></ion-nav>

View File

@@ -1,31 +0,0 @@
import {IonicView, Battery} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Battery</ion-title>
</ion-navbar>
<ion-content padding>
<h2>Battery</h2>
<button primary outline (click)="doBatteryStatus()">Get Status</button>
<div *ngIf="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;
});
}
}

View File

@@ -1,32 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {Camera} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Camera</ion-title>
</ion-navbar>
<ion-content 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')
})
}
}

View File

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

View File

@@ -1,24 +0,0 @@
import {IonicView, DeviceMotion} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Device Motion</ion-title>
</ion-navbar>
<ion-content padding>
<div *ngIf="accel">{{accel.x}} {{accel.y}} {{accel.z}}</div>
</ion-content>
`
})
export class DeviceMotionPage {
constructor() {
DeviceMotion.watchAcceleration().source.subscribe((accel) => {
this.accel = accel.acceleration;
});
}
}

View File

@@ -1,30 +0,0 @@
import {IonicView, DeviceOrientation} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Device Orientation</ion-title>
</ion-navbar>
<ion-content padding>
<div style="text-align: center">
<img src="http://ionic-io-assets.s3.amazonaws.com/ionitron-avatar.png" [ng-style]="imageStyle">
</div>
</ion-content>
`
})
export class DeviceOrientationPage {
constructor() {
this.imageStyle = {
'max-width': '100%'
}
DeviceOrientation.watchHeading().source.subscribe((heading) => {
this.imageStyle['-webkit-transform'] = 'rotate(' + heading.magneticHeading + 'deg)';
});
}
}

View File

@@ -1,27 +0,0 @@
import {IonicView, Device} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Device</ion-title>
</ion-navbar>
<ion-content padding>
<h2>Device</h2>
<button primary outline (click)="doDevice()">Get Device</button>
<div *ngIf="device">
Device name: {{device.name}}
</div>
</ion-content>
`
})
export class DevicePage {
doDevice() {
this.device = Device.getDevice();
console.log('Got device', this.device);
}
}

View File

@@ -1,34 +0,0 @@
import {IonicView, Dialogs} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Dialogs</ion-title>
</ion-navbar>
<ion-content padding>
<h2>Dialogs</h2>
<button primary outline (click)="doAlert()">Do Alert</button>
<button primary outline (click)="doConfirm()">Do Confirm</button>
<button primary outline (click)="doPrompt()">Do Prompt</button>
</ion-content>
`
})
export class DialogsPage {
doAlert() {
Dialogs.alert('Hello');
}
doConfirm() {
Dialogs.confirm('Do you want to click that?').then((resp) => {
console.log(resp);
});
}
doPrompt() {
Dialogs.prompt('What is your fav ice cream?').then((resp) => {
console.log(resp);
});
}
}

View File

@@ -1,52 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {Geolocation} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Geolocation</ion-title>
</ion-navbar>
<ion-content padding>
<h2>Geolocation</h2>
<button primary outline (click)="doGetLocation()">Get Location</button>
<div>
<b *ngIf="gettingLocation">Fetching location...</b>
<b *ngIf="location">{{location.coords.latitude}}, {{location.coords.longitude}}</b>
</div>
<button primary outline (click)="doTrackLocation()">Track Location</button>
<div>
<b *ngIf="gettingTrackLocation">Fetching location...</b>
<b *ngIf="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);
});
}
}

View File

@@ -1,55 +0,0 @@
import {IonicView} from 'ionic/ionic';
import {StatusBar} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>StatusBar</ion-title>
</ion-navbar>
<ion-content padding>
<h2>StatusBar</h2>
<div>
<button primary outline (click)="hide()">Hide</button>
<button primary outline (click)="show()">Show</button>
<button primary outline (click)="toggleOverlays()">Toggle Overlays</button>
<button primary outline (click)="setStyle()">Cycle Style</button>
</div>
<div>
<div>
<input [(ngModel)]="colorHex">
</div>
<button primary outline (click)="setColor()">Set Color</button>
</div>
</ion-content>
`
})
export class StatusBarPage {
constructor() {
this.styles = [
StatusBar.DEFAULT,
StatusBar.LIGHT_CONTENT,
StatusBar.BLACK_TRANSLUCENT,
StatusBar.BLACK_OPAQUE
];
this.currentStyle = 0;
this.colorHex = '#fff';
}
hide() { StatusBar.hide(); }
show() { StatusBar.show(); }
toggleOverlays() {
this.doesOverlay = !!!this.doesOverlay;
StatusBar.setOverlays(this.doesOverlay);
}
setStyle() {
StatusBar.setStyle(this.styles[++this.currentStyle]);
}
setColor() {
console.log('Setting color', this.colorHex);
StatusBar.setHexColor(this.colorHex);
}
}

View File

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

View File

@@ -1,121 +0,0 @@
import {App, NavController} from 'ionic/ionic';
import {IonicView, Config, IonicApp} from 'ionic/ionic';
import {NavParams, NavController} from 'ionic/ionic';
@IonicView({
template: '' +
'<ion-navbar *navbar primary>' +
'<ion-title>{{title}}</ion-title>' +
'</ion-navbar>' +
'<ion-content padding>' +
'<h1>{{title}}</h1>' +
'<p><button id="from1To2" secondary (click)="push()">(Push) Go to Second Page</button></p>' +
'<p><button secondary [nav-push]="pushPage" [nav-params]="pushData">(Nav-Push) Go to Second Page</button></p>' +
'<p><button danger (click)="setPages()">(setPages) Go to Third Page</button></p>' +
'</ion-content>'
})
class FirstPage {
constructor(
nav: NavController,
app: IonicApp,
config: Config
) {
this.nav = nav;
this.title = 'First Page';
this.pushPage = SecondPage;
this.pushData = {
id: 420
}
}
setPages() {
let items = [
ThirdPage
];
this.nav.setPages(items);
}
push() {
this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] } );
}
}
@IonicView({
template: `
<ion-navbar secondary *navbar>
<ion-title>{{title}}</ion-title>
</ion-navbar>
<ion-content padding>
<h1>Second page</h1>
<p><button (click)="pop()">(Pop) Go back to First Page</button></p>
<p><button id="from2To1" nav-pop>(NavPop) Go back to First Page</button></p>
<p><button danger id="from2To3" (click)="push()">(Push) Go to Third Page</button></p>
<p><button danger (click)="setPages()">(setPages) Go to Third Page</button></p>
</ion-content>
`
})
class SecondPage {
constructor(
nav: NavController,
params: NavParams
) {
this.nav = nav;
this.params = params;
console.log('Second page params:', params);
}
setPages() {
let items = [
FirstPage,
ThirdPage
];
this.nav.setPages(items);
}
pop() {
this.nav.pop();
}
push() {
this.nav.push(ThirdPage);
}
}
@IonicView({
template: `
<ion-navbar danger *navbar>
<ion-title>Third Page Header</ion-title>
</ion-navbar>
<ion-content padding>
<p>
<button secondary id="from3To2" (click)="pop()">(Pop) Go back to Second Page</button>
</p>
</ion-content>
`
})
class ThirdPage {
constructor(
nav: NavController
) {
this.nav = nav
}
pop() {
this.nav.pop()
}
}
@App({
template: '<ion-nav [root]="root"></ion-nav>'
})
class DemoApp {
constructor() {
this.root = FirstPage;
}
}

View File

@@ -1,2 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
<ion-overlay></ion-overlay>

View File

@@ -1,53 +0,0 @@
import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic';
import {Popup} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor(popup: Popup) {
this.popup = popup;
this.confirmOpen = false;
this.confirmResult = '';
}
doAlert() {
this.popup.alert({
title: "New Friend!",
template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
cssClass: 'my-alert'
});
}
doPrompt() {
this.popup.prompt({
title: "New Album",
template: "Enter a name for this new album you're so keen on adding",
inputPlaceholder: "Title",
okText: "Save"
});
}
doConfirm() {
this.confirmOpen = true;
this.popup.confirm({
title: "Use this lightsaber?",
subTitle: "You can't exchange lightsabers",
template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
cancelText: "Disagree",
okText: "Agree"
});
}
}