diff --git a/demos/barkpark/index.ts b/demos/barkpark/index.ts deleted file mode 100644 index 98fefe14d1..0000000000 --- a/demos/barkpark/index.ts +++ /dev/null @@ -1,135 +0,0 @@ -import {FormBuilder, Validators, ControlGroup} from 'angular2/angular2'; -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: '' -}) -class IonicApp { - constructor() { - this.rootView = SplashPage; - } -} diff --git a/demos/barkpark/pages/app.html b/demos/barkpark/pages/app.html deleted file mode 100644 index 7c6387b86c..0000000000 --- a/demos/barkpark/pages/app.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/demos/barkpark/pages/login.html b/demos/barkpark/pages/login.html deleted file mode 100644 index 6ebbba99b7..0000000000 --- a/demos/barkpark/pages/login.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - Login - - - - - -
- - - - - - - -
- -
-
-
diff --git a/demos/barkpark/pages/post/detail.html b/demos/barkpark/pages/post/detail.html deleted file mode 100644 index 6213adcb47..0000000000 --- a/demos/barkpark/pages/post/detail.html +++ /dev/null @@ -1 +0,0 @@ -

{{title}}

diff --git a/demos/barkpark/pages/signup.html b/demos/barkpark/pages/signup.html deleted file mode 100644 index a6def7e870..0000000000 --- a/demos/barkpark/pages/signup.html +++ /dev/null @@ -1,18 +0,0 @@ - -
- - - - - - - - - - -
- -
-
-
- diff --git a/demos/barkpark/pages/splash.html b/demos/barkpark/pages/splash.html deleted file mode 100644 index cc255666f6..0000000000 --- a/demos/barkpark/pages/splash.html +++ /dev/null @@ -1,4 +0,0 @@ -
-

BARK PARK

- -
diff --git a/demos/barkpark/pages/tabs/home.html b/demos/barkpark/pages/tabs/home.html deleted file mode 100644 index 0c83265683..0000000000 --- a/demos/barkpark/pages/tabs/home.html +++ /dev/null @@ -1,10 +0,0 @@ - - -

Posts

- - - {{post.title}} - - -
-
diff --git a/demos/hn/hn.ts b/demos/hn/hn.ts deleted file mode 100644 index bd92cf19c6..0000000000 --- a/demos/hn/hn.ts +++ /dev/null @@ -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(); diff --git a/demos/hn/index.ts b/demos/hn/index.ts deleted file mode 100644 index 48c5431ae5..0000000000 --- a/demos/hn/index.ts +++ /dev/null @@ -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: '
' -}) -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: '' -}) -class IonicApp { - constructor() { - this.rootView = HNTopStories; - } -} diff --git a/demos/hn/main.html b/demos/hn/main.html deleted file mode 100644 index e3b49b7846..0000000000 --- a/demos/hn/main.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - diff --git a/demos/hn/pages/single.html b/demos/hn/pages/single.html deleted file mode 100644 index 2ccf94c4db..0000000000 --- a/demos/hn/pages/single.html +++ /dev/null @@ -1,6 +0,0 @@ -{{post.title}} - - - - diff --git a/demos/hn/pages/single.ts b/demos/hn/pages/single.ts deleted file mode 100644 index 56f3a4fc9c..0000000000 --- a/demos/hn/pages/single.ts +++ /dev/null @@ -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); - } -} diff --git a/demos/hn/pages/top.html b/demos/hn/pages/top.html deleted file mode 100644 index 3bf3a42208..0000000000 --- a/demos/hn/pages/top.html +++ /dev/null @@ -1,9 +0,0 @@ -Top - - - - - {{story.title}} - - - diff --git a/demos/music/index.ts b/demos/music/index.ts deleted file mode 100644 index 8adf5598e4..0000000000 --- a/demos/music/index.ts +++ /dev/null @@ -1,68 +0,0 @@ -import {Directive, ElementRef, FormBuilder, Validators, ControlGroup} from 'angular2/angular2'; - -import {App, NavController, IonicView} from 'ionic/ionic'; - - -@IonicView({ - templateUrl: 'pages/app.html' -}) -class AppPage { - constructor(nav: NavController) { - this.nav = nav; - } - doLogin() { - } -} - -@Directive({ - selector: '[parallax]', - inputs: [ - '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; - } -} diff --git a/demos/music/main.html b/demos/music/main.html deleted file mode 100644 index 9c7b8fb682..0000000000 --- a/demos/music/main.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - Search - - - Browse - - - Activity - - - Radio - - - Your Music - - - Settings - - - - - - - - - diff --git a/demos/music/menu.jpg b/demos/music/menu.jpg deleted file mode 100644 index 74f17215fe..0000000000 Binary files a/demos/music/menu.jpg and /dev/null differ diff --git a/demos/music/menu.png b/demos/music/menu.png deleted file mode 100644 index f381dc2763..0000000000 Binary files a/demos/music/menu.png and /dev/null differ diff --git a/demos/music/pages/app.html b/demos/music/pages/app.html deleted file mode 100644 index 40360702b0..0000000000 --- a/demos/music/pages/app.html +++ /dev/null @@ -1,22 +0,0 @@ - - - YOUR MUSIC - - - - - - - Playlight - - - Songs - - - Albums - - - Artists - - - diff --git a/demos/profile/index.ts b/demos/profile/index.ts deleted file mode 100644 index df84ae083c..0000000000 --- a/demos/profile/index.ts +++ /dev/null @@ -1,56 +0,0 @@ -import {ElementRef, Component, Directive} from 'angular2/angular2'; -import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/angular2'; - -import {App, Modal, Animation, Content} from 'ionic/ionic'; -import {NavController, NavParams, IonicView} from 'ionic/ionic'; -import {dom} from 'ionic/util'; - - -@Directive({ - selector: '[parallax]', - inputs: [ - '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 - }) - } - } -} diff --git a/demos/profile/main.html b/demos/profile/main.html deleted file mode 100644 index d72ffcf178..0000000000 --- a/demos/profile/main.html +++ /dev/null @@ -1,53 +0,0 @@ - -
-
-
-
- - - - {{item.title}} - - - - -
- - - diff --git a/demos/sink/card.jpg b/demos/sink/card.jpg deleted file mode 100644 index 9594fcda7b..0000000000 Binary files a/demos/sink/card.jpg and /dev/null differ diff --git a/demos/sink/index.ts b/demos/sink/index.ts deleted file mode 100644 index 58a20a92f0..0000000000 --- a/demos/sink/index.ts +++ /dev/null @@ -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/searchbar' -import {TableSearchPage} from './pages/table-search' -import {IconsPage} from './pages/ionicons' -import {TabsPage} from './pages/tabs' -import {MenuPage} from './pages/menu' -import {AnimationPage} from './pages/animation' -import {SlidePage} from './pages/slides' -import {ActionSheetPage} from './pages/action-sheet' -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: '/menu', - component: MenuPage - }, { - path: '/animation', - component: AnimationPage - }, { - path: '/slides', - component: SlidePage - }, { - path: '/action-sheet', - component: ActionSheetPage - } - ] -}) -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: 'Menu', component: MenuPage }, - { title: 'Animation', component: AnimationPage }, - { title: 'Slides', component: SlidePage}, - { title: 'Action Sheet', component: ActionSheetPage }, - ]; - } - - openPage(menu, component) { - menu.close(); - - let nav = this.app.getComponent('myNav'); - nav.setViews([component.component]); - } -} diff --git a/demos/sink/main.html b/demos/sink/main.html deleted file mode 100644 index 0f1faf849a..0000000000 --- a/demos/sink/main.html +++ /dev/null @@ -1,22 +0,0 @@ - - Ionic 2.0 - - - - {{c.title}} - - - - - - - - diff --git a/demos/sink/pages/action-sheet.ts b/demos/sink/pages/action-sheet.ts deleted file mode 100644 index 8470a53fef..0000000000 --- a/demos/sink/pages/action-sheet.ts +++ /dev/null @@ -1,60 +0,0 @@ -import {IonicApp, IonicView, NavController, ActionSheet} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Action Sheet - - -

Action Sheet

-

- The Action Sheet, 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. -

-

- Action Sheet'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. -

- -
- ` -}) -export class ActionSheetPage extends SinkPage { - constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet) { - super(app); - - this.nav = nav; - this.actionSheet = actionSheet; - } - - openMenu() { - console.log('Opening ActionSheet') - - this.actionSheet.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(actionSheetRef => { - this.actionSheetRef = actionSheetRef; - }) - } - -} diff --git a/demos/sink/pages/animation.ts b/demos/sink/pages/animation.ts deleted file mode 100644 index b8e040b975..0000000000 --- a/demos/sink/pages/animation.ts +++ /dev/null @@ -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: ` - Animation - - - - -

Animation

-

- 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. -

-

- - -

-
-
-
- -
- -
-
-
- -
- -
- -
-
-
- -
- -

- -

- -
- ` -}) -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) ); - } -} diff --git a/demos/sink/pages/aside.ts b/demos/sink/pages/aside.ts deleted file mode 100644 index f1b26a5b90..0000000000 --- a/demos/sink/pages/aside.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Menu - - -

Menu

-

- Menus slide or swipe in to show more information. -

-

- 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: -

-

-

-

-

- -

-
- ` -}) -export class MenuPage extends SinkPage { - constructor(app: IonicApp) { - super(app); - } - openMenu() { - - } -} diff --git a/demos/sink/pages/button.ts b/demos/sink/pages/button.ts deleted file mode 100644 index 2ba452de75..0000000000 --- a/demos/sink/pages/button.ts +++ /dev/null @@ -1,73 +0,0 @@ -import {IonicApp, IonicView, NavController} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Buttons - - - -

Buttons

-

- The faithful button. Not only our favorite place to click, but a true friend. -

-

- Buttons come in lots of different colors: -

-

-

- - - - - -
-

-

- various shapes: -

-

-

- - - -
-

-

- and with different embellishments: -

-

-

- - - -
-

-

-
- CLICKED -
-

-
- ` -}) -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); - } - -} - diff --git a/demos/sink/pages/card.ts b/demos/sink/pages/card.ts deleted file mode 100644 index 6a09f6ce03..0000000000 --- a/demos/sink/pages/card.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Cards - - -

Cards

-

- 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. -

-

- Cards are great for displaying contextual information in a small space, - like a Tweet, todays weather report, or a photo. -

- - - - - Card Header - - -
- -
- -
- -
- ` -}) -export class CardPage extends SinkPage { - constructor(app: IonicApp) { - super(app); - } -} diff --git a/demos/sink/pages/form.ts b/demos/sink/pages/form.ts deleted file mode 100644 index 36c8335e7a..0000000000 --- a/demos/sink/pages/form.ts +++ /dev/null @@ -1,50 +0,0 @@ -import {FormBuilder, Validators, ControlGroup} from 'angular2/angular2'; - -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Form - - -

Forms

-

- Forms help you gather important information from the user, like - login information or content to send to your server. -

-

- Ionic comes with a variety of useful from controls, like - text inputs, text areas, toggle switches, and sliders. -

-
- - - - - - - -
-
- ` -}) -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(); - } -} diff --git a/demos/sink/pages/ionicons.ts b/demos/sink/pages/ionicons.ts deleted file mode 100644 index c24f3c218e..0000000000 --- a/demos/sink/pages/ionicons.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Icons - - -

Icons

-

- Ionic comes with a totally free (in price and license), icon pack (known as "Ionicons") with over 700 - icons for your app. -

-

- Ionicons is an icon font, and can be used with simple CSS icon classes (recommended), or - with unicode characters. -

-
- -
-
- ` -}) -export class IconsPage extends SinkPage { - constructor(app: IonicApp) { - super(app); - } -} diff --git a/demos/sink/pages/list-group.ts b/demos/sink/pages/list-group.ts deleted file mode 100644 index 2b5c1e5dab..0000000000 --- a/demos/sink/pages/list-group.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - List Groups - - - - - {{group.title}} - - {{item.title}} - - - - - - ` -}) -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 - }); - } - - } -} diff --git a/demos/sink/pages/list.ts b/demos/sink/pages/list.ts deleted file mode 100644 index 43c03074c8..0000000000 --- a/demos/sink/pages/list.ts +++ /dev/null @@ -1,44 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Lists - - -

Lists

-

- Lists display data as rows in a table. -

-

- Lists are great for displaying sets of things like contacts, - songs, and documents. -

- - - - - List Header - - - - - - - Item - - - Item - - - -
- ` -}) -export class ListPage extends SinkPage { - constructor(app: IonicApp) { - super(app) - } -} diff --git a/demos/sink/pages/modal.ts b/demos/sink/pages/modal.ts deleted file mode 100644 index 0ce7a0b054..0000000000 --- a/demos/sink/pages/modal.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {IonicApp, IonicView, Modal} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Modal - - -

Modal

-

- Modals are entire views that slide in off screen. -

-

- 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. -

- -
- ` -}) -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: '', -}) -export class MyModal {} diff --git a/demos/sink/pages/nav.ts b/demos/sink/pages/nav.ts deleted file mode 100644 index 50026a4b51..0000000000 --- a/demos/sink/pages/nav.ts +++ /dev/null @@ -1,44 +0,0 @@ -import {IonicView, NavController} from 'ionic/ionic'; - - -@IonicView({ - template: ` - Navigation - - -

Navigation

-

- Navigation makes your app feel like, well, an app! -

-

- 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. -

- -
- ` -}) -export class NavPage { - constructor(nav: NavController) { - this.nav = nav; - } - push() { - this.nav.push(NavSecondPage); - } -} - - -@IonicView({ - template: ` - Second Page - - - - ` -}) -export class NavSecondPage { - constructor(nav: NavController) { - this.nav = nav; - } -} diff --git a/demos/sink/pages/pull-to-refresh.ts b/demos/sink/pages/pull-to-refresh.ts deleted file mode 100644 index afe76d43fb..0000000000 --- a/demos/sink/pages/pull-to-refresh.ts +++ /dev/null @@ -1,50 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Pull to Refresh - - - - - - - {{item.title}} - - - - ` -}) -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); - } -} diff --git a/demos/sink/pages/search-bar.ts b/demos/sink/pages/search-bar.ts deleted file mode 100644 index f53c5e253d..0000000000 --- a/demos/sink/pages/search-bar.ts +++ /dev/null @@ -1,44 +0,0 @@ -import {Component, FormBuilder, Validators, ControlGroup} from 'angular2/angular2'; - -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@Component({ - selector: 'ion-view', - appInjector: [FormBuilder] -}) -@IonicView({ - template: ` - Search Bar - - -

Search Bar

-

- The Search Bar is a multi-function search component. -

-

- 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. -

- -
- -
- Query: {{form.controls.searchQuery.value}} -
-
-
- ` -}) -export class SearchBarPage extends SinkPage { - constructor(app: IonicApp, formBuilder: FormBuilder) { - super(app); - - //var fb = new FormBuilder(); - this.form = formBuilder.group({ - searchQuery: ['', Validators.required] - }); - } -} diff --git a/demos/sink/pages/segment.ts b/demos/sink/pages/segment.ts deleted file mode 100644 index a68d33d16c..0000000000 --- a/demos/sink/pages/segment.ts +++ /dev/null @@ -1,70 +0,0 @@ -import {FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; - - -@IonicView({ - template: ` - Segment - - -

Segment

-

- A segment is a radio-style filter bar to let the user toggle between - multiple, exclusive options. -

-

- Segments are useful for quick filtering, like switching the - the map display between street, hybrid, and satellite. -

- -
- -
- - - Standard - - - Hybrid - - - Satellite - - -
- -
- - Map mode: {{form.controls.mapStyle.value}} - -
-
-

Standard

-
-
-

Hybrid

-
-
-

Satellite!!

-
-
-
- ` -}) -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 - }); - - } -} diff --git a/demos/sink/pages/slides.ts b/demos/sink/pages/slides.ts deleted file mode 100644 index f832e59693..0000000000 --- a/demos/sink/pages/slides.ts +++ /dev/null @@ -1,58 +0,0 @@ -import {IonicApp, IonicView} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: ` - Slides - - -

Slides

-

- Slides have a set of pages that can be swiped between. -

-

- Slides are perfect for making image slideshows, - swipe tutorials, or document viewers. -

- - -

Page 1

-
- -

Page 2

-
- -

Page 3

-
- -

Page 4

-
- -

Page 5

-
- - -
-
- - ` -}) -export class SlidePage extends SinkPage { - constructor(app: IonicApp) { - super(app); - } -} diff --git a/demos/sink/pages/table-search.ts b/demos/sink/pages/table-search.ts deleted file mode 100644 index 45edf96110..0000000000 --- a/demos/sink/pages/table-search.ts +++ /dev/null @@ -1,64 +0,0 @@ -import {Component, FormBuilder, Validators, ControlGroup} from 'angular2/angular2'; - -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: ` - Table Search - - -
- - - - - - - {{item.title}} - - -
-
- ` -}) -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; - }) - } -} diff --git a/demos/sink/pages/tabs.ts b/demos/sink/pages/tabs.ts deleted file mode 100644 index f36a27fd88..0000000000 --- a/demos/sink/pages/tabs.ts +++ /dev/null @@ -1,84 +0,0 @@ -import {FormBuilder, Validators, ControlGroup} from 'angular2/angular2'; - -import {IonicApp, IonicView, NavController} from 'ionic/ionic'; - -import {SinkPage} from '../sink-page'; - - -@IonicView({ - template: '' + - '' + - 'Featured' + - '' + - '' + - '' -}) -class FeaturedTabPage { - constructor(nav: NavController) { - this.nav = nav; - } -} - -@IonicView({ - template: '' + - '' + - 'Top' + - '' + - '' + - '' -}) -class TopTabPage { - constructor(nav: NavController) { - this.nav = nav; - } -} - -@IonicView({ - template: '' + - '' + - 'Search' + - '' + - '' + - '' -}) -class SearchTabPage { - constructor(nav: NavController) { - this.nav = nav; - } -} - -@IonicView({ - template: '' + - '' + - 'Updates' + - '' + - '' + - '' -}) -class UpdatesTabPage { - constructor(nav: NavController) { - this.nav = nav; - } -} - -@IonicView({ - template: ` - Tabs - - - - - - - - ` -}) -export class TabsPage extends SinkPage { - constructor(app: IonicApp) { - super(app); - this.featuredTab = FeaturedTabPage; - this.topTab = TopTabPage; - this.searchTab = SearchTabPage; - this.updatesTab = UpdatesTabPage; - } -} diff --git a/demos/sink/sink-page.ts b/demos/sink/sink-page.ts deleted file mode 100644 index 64f28484d1..0000000000 --- a/demos/sink/sink-page.ts +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Simple wrapper page for the side menu toggle. - */ -export class SinkPage { - constructor(app: IonicApp) { - this.app = app; - } - toggleMenu() { - let menu = this.app.getComponent('mainMenu'); - menu.toggle(); - } -} diff --git a/demos/snapcat/detail.html b/demos/snapcat/detail.html deleted file mode 100644 index 8256c54e19..0000000000 --- a/demos/snapcat/detail.html +++ /dev/null @@ -1,15 +0,0 @@ -Post - - - - - -
- {{post.text}} -
- - - -
- -
diff --git a/demos/snapcat/feed.html b/demos/snapcat/feed.html deleted file mode 100644 index 27633f60ed..0000000000 --- a/demos/snapcat/feed.html +++ /dev/null @@ -1,11 +0,0 @@ -Feed - - - -
-
- {{post.text}} -
- -
-
diff --git a/demos/snapcat/index.ts b/demos/snapcat/index.ts deleted file mode 100644 index 7c641a1b93..0000000000 --- a/demos/snapcat/index.ts +++ /dev/null @@ -1,127 +0,0 @@ -import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/angular2'; - -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: '' -}) -export class SettingsModal {} - - -@IonicView({ - template: '

20

You\'re pretty awesome

' -}) -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); diff --git a/demos/snapcat/main.html b/demos/snapcat/main.html deleted file mode 100644 index ca6e1c4d05..0000000000 --- a/demos/snapcat/main.html +++ /dev/null @@ -1,127 +0,0 @@ - - - - - - - secret - - - - - Activity - - - Chat - - - -

Swipe Right

-
- -
- -
- - - - - - - -
- - - - diff --git a/demos/snapcat/p.jpg b/demos/snapcat/p.jpg deleted file mode 100644 index f06fca950b..0000000000 Binary files a/demos/snapcat/p.jpg and /dev/null differ diff --git a/demos/weather/current-weather.html b/demos/weather/current-weather.html deleted file mode 100644 index 4d1c443bce..0000000000 --- a/demos/weather/current-weather.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
{{current.currently.summary}}
-
- {{highTemp}}° - {{lowTemp}}° -
-

{{currentTemp}}°

-
diff --git a/demos/weather/flickr.ts b/demos/weather/flickr.ts deleted file mode 100755 index 1e0fba9b6f..0000000000 --- a/demos/weather/flickr.ts +++ /dev/null @@ -1,36 +0,0 @@ -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) { - // TODO: update to angular2 HTTP service - 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); - }) - }) - } -} diff --git a/demos/weather/geo.ts b/demos/weather/geo.ts deleted file mode 100755 index c56b15e3e8..0000000000 --- a/demos/weather/geo.ts +++ /dev/null @@ -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); - }) - }); - } -} diff --git a/demos/weather/index.ts b/demos/weather/index.ts deleted file mode 100755 index 781d6e728c..0000000000 --- a/demos/weather/index.ts +++ /dev/null @@ -1,281 +0,0 @@ -import {Component, Directive, NgIf, NgFor, NgClass, ElementRef} from 'angular2/angular2'; -import {FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES} from 'angular2/angular2'; - -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: ` - Settings - -
- - - Units - - - -
-
-
`, - 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', - inputs: [ - 'icon' - ], - template: '', - 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', - inputs: [ - 'localtz' - ], - template: '{{currentTime}}', -}) -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', - inputs: [ - 'current' - ], - 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', - inputs: [ - 'image' - ], - template: '
' -}) -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; - } - - 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); - }); - } -} diff --git a/demos/weather/main.html b/demos/weather/main.html deleted file mode 100644 index d4a20e51ae..0000000000 --- a/demos/weather/main.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - {{currentLocationString}}
- - -
- - -
-

Forecast

- -
-
-
- -
{{hour.temperature}}°
-
-
-
-
-
-
-
-
- {{day.temperatureMax}}° - {{day.temperatureMin}}° -
-
-
-
-
- Powered by forecast.io -
-
-
- -
-
-
- - diff --git a/demos/weather/style.css b/demos/weather/style.css deleted file mode 100644 index edfa81374f..0000000000 --- a/demos/weather/style.css +++ /dev/null @@ -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; -} diff --git a/demos/weather/weather.ts b/demos/weather/weather.ts deleted file mode 100755 index 6be800598f..0000000000 --- a/demos/weather/weather.ts +++ /dev/null @@ -1,13 +0,0 @@ -let WUNDERGROUND_API_KEY = '1cc2d3de40fa5af0'; - -let FORECASTIO_KEY = '4cd3c5673825a361eb5ce108103ee84a'; - -export class Weather { - static getAtLocation(lat, lng) { - // TODO: update to angular2 HTTP service - let url = 'https://api.forecast.io/forecast/' + FORECASTIO_KEY + '/'; - return Http.get(url + lat + ',' + lng + '?callback=JSON_CALLBACK', { - method: 'jsonp' - }); - } -} diff --git a/demos/yerk/index.ts b/demos/yerk/index.ts deleted file mode 100644 index 79b570df50..0000000000 --- a/demos/yerk/index.ts +++ /dev/null @@ -1,57 +0,0 @@ -import {App, IonicView, NavController} from 'ionic/ionic'; - - -@App({ - templateUrl: 'main.html' -}) -class IonicApp { - constructor() { - this.root = TabsPage; - } -} - - -@IonicView({ - template: '' + - '' + - 'Home' + - '' + - '' + - 'home' + - '' -}) -class HomeTabPage { - constructor(nav: NavController) { - this.nav = nav; - } - push() { - } -} - -@IonicView({ - template: '' + - '' + - 'Peek' + - '' + - '' + - 'peek' + - '' -}) -class PeekTabPage { - constructor(nav: NavController) { - this.nav = nav; - } - push() { - } -} - - -@IonicView({ - templateUrl: 'tabs.html' -}) -class TabsPage { - constructor() { - this.homeTab = HomeTabPage; - this.peekTab = PeekTabPage; - } -} diff --git a/demos/yerk/main.html b/demos/yerk/main.html deleted file mode 100644 index 45c067fff4..0000000000 --- a/demos/yerk/main.html +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/demos/yerk/tabs.html b/demos/yerk/tabs.html deleted file mode 100644 index b9e3d06492..0000000000 --- a/demos/yerk/tabs.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 0043c99310..8e875c55cd 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -73,15 +73,16 @@ export class Content extends Ion { } onScrollEnd(callback) { - let timerId; + let timerId, deregister; function debounce() { timerId = setTimeout(() => { - + deregister(); + callback(); }, 250); } - this.addScrollEventListener(debounce); + deregister = this.addScrollEventListener(debounce); } /** diff --git a/ionic/components/item/item-sliding-gesture.ts b/ionic/components/item/item-sliding-gesture.ts index 1f3687824a..83b16407c8 100644 --- a/ionic/components/item/item-sliding-gesture.ts +++ b/ionic/components/item/item-sliding-gesture.ts @@ -9,7 +9,7 @@ export class ItemSlidingGesture extends DragGesture { constructor(list: List, listEle) { super(listEle, { direction: 'x', - threshold: 40 + threshold: DRAG_THRESHOLD }); this.data = {}; @@ -24,7 +24,7 @@ export class ItemSlidingGesture extends DragGesture { if (!isFromOptionButtons(ev.target)) { let didClose = this.closeOpened(); if (didClose) { - ev.preventDefault(); + preventDefault(ev); } } }); @@ -46,7 +46,7 @@ export class ItemSlidingGesture extends DragGesture { if (this.preventDrag) { this.closeOpened(ev); - return ev.preventDefault(); + return preventDefault(ev); } itemContainerEle.classList.add('active-slide'); @@ -60,6 +60,11 @@ export class ItemSlidingGesture extends DragGesture { } onDrag(ev) { + if (Math.abs(ev.deltaY) > 30) { + this.preventDrag = true; + return this.closeOpened(ev); + } + let itemContainerEle = getItemConatiner(ev.target); if (!itemContainerEle || !isActive(itemContainerEle) || this.preventDrag) return; @@ -142,7 +147,7 @@ export class ItemSlidingGesture extends DragGesture { clearTimeout(this.get(itemContainerEle).timerId); - if (openAmount > 0) { + if (openAmount) { this.openItems++; } else { @@ -157,7 +162,11 @@ export class ItemSlidingGesture extends DragGesture { } slidingEle.style[CSS.transition] = (isFinal ? '' : 'none'); - slidingEle.style[CSS.transform] = (openAmount === 0 ? '' : 'translate3d(' + -openAmount + 'px,0,0)'); + slidingEle.style[CSS.transform] = (openAmount ? 'translate3d(' + -openAmount + 'px,0,0)' : ''); + + if (isFinal) { + this.enableScroll(!openAmount); + } } getOpenAmount(itemContainerEle) { @@ -175,12 +184,23 @@ export class ItemSlidingGesture extends DragGesture { this.data[itemContainerEle.$ionSlide][key] = value; } + enableScroll(shouldEnable) { + let scrollContentEle = closest(this.listEle, 'scroll-content'); + if (scrollContentEle) { + scrollContentEle[shouldEnable ? 'removeEventListener' : 'addEventListener']('touchstart', preventDefault); + } + } + unlisten() { super.unlisten(); this.listEle = null; } } +function preventDefault(ev) { + ev.preventDefault(); +} + function getItemConatiner(ele) { return closest(ele, 'ion-item-sliding', true); } @@ -199,3 +219,6 @@ function getOptionsWidth(itemContainerEle) { function isActive(itemContainerEle) { return itemContainerEle.classList.contains('active-slide'); } + + +const DRAG_THRESHOLD = 20; diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts index 96d33e8aca..04bc50df9a 100644 --- a/ionic/components/item/test/sliding/index.ts +++ b/ionic/components/item/test/sliding/index.ts @@ -16,7 +16,11 @@ class E2EApp { } getItems() { - return [0,1]; + let items = []; + for (let x = 0; x < 20; x++) { + items.push(x); + } + return items; } didClick(ev, item) { @@ -32,4 +36,8 @@ class E2EApp { console.log('Delete', ev, item); item.close(); } + + reload() { + window.location.reload(); + } } diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index 7a7d3d21eb..0b2884cbbe 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -1,4 +1,9 @@ -Sliding Items + + Sliding Items + + + + diff --git a/ionic/gestures/drag-gesture.ts b/ionic/gestures/drag-gesture.ts index 170265d64f..e62502fe03 100644 --- a/ionic/gestures/drag-gesture.ts +++ b/ionic/gestures/drag-gesture.ts @@ -29,6 +29,8 @@ export class DragGesture extends Gesture { this.onDragEnd(ev); this.dragging = false; }); + + this.hammertime.get('pan').set(this._options); } onDrag() {}