diff --git a/ionic/components/action-menu/action-menu.ts b/ionic/components/action-menu/action-menu.ts index 202b2c5977..027ea4c2b4 100644 --- a/ionic/components/action-menu/action-menu.ts +++ b/ionic/components/action-menu/action-menu.ts @@ -8,7 +8,6 @@ import {View, Injectable, NgFor, NgIf} from 'angular2/angular2'; -import {IonicApp} from '../app/app'; import {Overlay} from '../overlay/overlay'; import {Animation} from '../../animations/animation'; import * as util from 'ionic/util'; @@ -56,10 +55,6 @@ class ActionMenuDirective { @Injectable() export class ActionMenu extends Overlay { - constructor(app: IonicApp) { - super(app); - } - /** * Create and open a new Action Menu. This is the * public API, and most often you will only use ActionMenu.open() diff --git a/ionic/components/action-menu/extensions/ios.scss b/ionic/components/action-menu/extensions/ios.scss index 35fb347799..0613196601 100644 --- a/ionic/components/action-menu/extensions/ios.scss +++ b/ionic/components/action-menu/extensions/ios.scss @@ -17,7 +17,7 @@ $action-menu-ios-button-font-size: 2rem !default; $action-menu-ios-icon-font-size: 1.4em !default; -.action-menu-ios { +.action-menu[mode="ios"] { text-align: center; .action-menu-container { diff --git a/ionic/components/action-menu/extensions/material.scss b/ionic/components/action-menu/extensions/material.scss index 2fa9b0352e..58393e87de 100644 --- a/ionic/components/action-menu/extensions/material.scss +++ b/ionic/components/action-menu/extensions/material.scss @@ -1,5 +1,5 @@ -.action-menu-md { +.action-menu[mode="md"] { .action-menu-backdrop.active { background-color: rgba(0,0,0,0.2); diff --git a/ionic/components/action-menu/test/basic/index.ts b/ionic/components/action-menu/test/basic/index.ts index 9e57f8b95d..776ca6a9e1 100644 --- a/ionic/components/action-menu/test/basic/index.ts +++ b/ionic/components/action-menu/test/basic/index.ts @@ -1,12 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView, ActionMenu} from 'ionic/ionic'; +import {App, ActionMenu} from 'ionic/ionic'; -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -44,7 +39,3 @@ class IonicApp { } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/alert/extensions/ios.scss b/ionic/components/alert/extensions/ios.scss index 8279f8d47f..a18771bfd8 100644 --- a/ionic/components/alert/extensions/ios.scss +++ b/ionic/components/alert/extensions/ios.scss @@ -11,7 +11,7 @@ $alert-ios-button-color: #007aff !default; $alert-ios-button-font-size: 2rem !default; -.alert-ios { +.alert[mode="ios"] { .alert-container { border-radius: $alert-ios-border-radius; diff --git a/ionic/components/alert/extensions/material.scss b/ionic/components/alert/extensions/material.scss index e6c81cb3c5..d97ddeb93c 100644 --- a/ionic/components/alert/extensions/material.scss +++ b/ionic/components/alert/extensions/material.scss @@ -8,7 +8,7 @@ $alert-material-border-radius: 4px !default; $alert-material-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default; -.alert-md { +.alert[mode="md"] { .alert-container { box-shadow: $alert-material-box-shadow; diff --git a/ionic/components/alert/test/basic/index.ts b/ionic/components/alert/test/basic/index.ts index 5534a52777..94ccd80912 100644 --- a/ionic/components/alert/test/basic/index.ts +++ b/ionic/components/alert/test/basic/index.ts @@ -1,24 +1,17 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App, Alert} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { - constructor() { - console.log('IonicApp Start') + constructor(alert: Alert) { + this.alert = alert; } - showAlert() { - console.log('Show alert'); - Alert.open({ + showAlert() { + this.alert.open({ + }); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 7d921eeab1..4b9a4120b4 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -163,7 +163,9 @@ export function ionicBootstrap(ComponentType, config, router) { return new Promise((resolve, reject) => { try { // get the user config, or create one if wasn't passed in - config = config || new IonicConfig(); + if (typeof config !== IonicConfig) { + config = new IonicConfig(config); + } // create the base IonicApp let app = initApp(window, document, config); @@ -172,9 +174,6 @@ export function ionicBootstrap(ComponentType, config, router) { // user config platform settings should override default platform settings config.setPlatform(Platform); - // make the config global - IonicConfig.global = config; - // config and platform settings have been figured out // apply the correct CSS to the app app.applyBodyCss(document.body.classList, Platform, config); @@ -183,15 +182,17 @@ export function ionicBootstrap(ComponentType, config, router) { Platform.prepareReady(config); // setup router - router = router || new IonicRouter(); + if (typeof router !== IonicRouter) { + router = new IonicRouter(router); + } router.app(app); // TODO: don't wire these together app.router = router; // TODO: probs need a better way to inject global injectables - let actionMenu = new ActionMenu(app); - let modal = new Modal(app); + let actionMenu = new ActionMenu(app, config); + let modal = new Modal(app, config); // add injectables that will be available to all child components let injectableBindings = [ diff --git a/ionic/components/app/test/animations/index.ts b/ionic/components/app/test/animations/index.ts index 51223a8ac4..7f0b023625 100644 --- a/ionic/components/app/test/animations/index.ts +++ b/ionic/components/app/test/animations/index.ts @@ -1,6 +1,4 @@ -import {Component, View} from 'angular2/angular2'; - -import {Animation} from 'ionic/ionic'; +import {App, Animation} from 'ionic/ionic'; let opacity = 0.2; @@ -8,8 +6,7 @@ let rotateZ = '180deg'; let translateX = '100px'; let scale = 0.6; -@Component({ selector: 'ion-app' }) -@View({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -75,7 +72,3 @@ class IonicApp { } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/barkpark/index.ts b/ionic/components/app/test/barkpark/index.ts index bb6c8342d5..fcc2ddacfb 100644 --- a/ionic/components/app/test/barkpark/index.ts +++ b/ionic/components/app/test/barkpark/index.ts @@ -3,7 +3,7 @@ import {Component, View, Directive} from 'angular2/angular2'; import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; import {Log} from 'ionic/util' -import {Routable, IonicView, NavController} from 'ionic/ionic' +import {App, IonicView, NavController} from 'ionic/ionic' @Component({selector: 'ion-view'}) @@ -36,10 +36,6 @@ class LoginPage { } } -new Routable(LoginPage, { - url: '/login', - tag: 'login' -}) @Component({selector: 'ion-view'}) @IonicView({ @@ -137,10 +133,7 @@ class SplashPage { } -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ template: '' }) class IonicApp { @@ -148,8 +141,3 @@ class IonicApp { this.rootView = SplashPage; } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} - diff --git a/ionic/components/app/test/hn/index.ts b/ionic/components/app/test/hn/index.ts index f56e6ade47..7e28b79726 100644 --- a/ionic/components/app/test/hn/index.ts +++ b/ionic/components/app/test/hn/index.ts @@ -1,6 +1,6 @@ import {Component} from 'angular2/angular2'; -import {NavController, IonicView} from 'ionic/ionic'; +import {App, NavController, IonicView} from 'ionic/ionic'; import {HackerNews} from './hn'; import {HNSinglePost} from './pages/single'; @@ -87,10 +87,7 @@ class HNTopStories { } -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ template: '' }) class IonicApp { @@ -98,7 +95,3 @@ class IonicApp { this.rootView = HNTopStories; } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/hn/main.html b/ionic/components/app/test/hn/main.html index 5f69401d4f..502a5b1b38 100644 --- a/ionic/components/app/test/hn/main.html +++ b/ionic/components/app/test/hn/main.html @@ -5,7 +5,7 @@ .navbar-container { background-color: #ff6600 !important; } -.nav-ios ion-title { +.nav[mode="ios"] ion-title { color: #fff !important; } diff --git a/ionic/components/app/test/music/index.ts b/ionic/components/app/test/music/index.ts index f98ef8d7c1..bb4b003864 100644 --- a/ionic/components/app/test/music/index.ts +++ b/ionic/components/app/test/music/index.ts @@ -1,7 +1,7 @@ import {Component, Directive, ElementRef} from 'angular2/angular2'; import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; -import {Routable, NavController, IonicView} from 'ionic/ionic'; +import {App, NavController, IonicView} from 'ionic/ionic'; @Component({selector: 'ion-view'}) @@ -53,8 +53,7 @@ export class ParallaxEffect { /** * Main app entry point */ -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ directives: [ParallaxEffect], templateUrl: 'main.html' }) @@ -69,7 +68,3 @@ class IonicApp { this.menuOpenAmount = amt; } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/music/main.html b/ionic/components/app/test/music/main.html index 0634169020..59f82f8d92 100644 --- a/ionic/components/app/test/music/main.html +++ b/ionic/components/app/test/music/main.html @@ -36,16 +36,16 @@ background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg'); background-size: cover; } - .platform-ios ion-list .item { + .mode-ios ion-list .item { background: transparent; min-height: 55px; } - .platform-ios ion-list .item .item-content { + .mode-ios ion-list .item .item-content { background: transparent; color: rgba(255,255,255,0.8); padding: 10px; } - .platform-ios .toolbar-ios ion-title { + .mode-ios .toolbar-ios ion-title { color: white; font-size: 14px; font-weight: normal; @@ -57,16 +57,16 @@ ion-content { background: transparent !important; } - .platform-ios #menu .item-content:after { + .mode-ios #menu .item-content:after { background: none; } - .platform-ios .item:first-of-type:before { + .mode-ios .item:first-of-type:before { background: none !important; } - .platform-ios .item:last-of-type:after { + .mode-ios .item:last-of-type:after { background: none !important; } - .platform-ios .toolbar-container-ios:after { + .mode-ios .toolbar-container-ios:after { background: none; } diff --git a/ionic/components/app/test/net/index.ts b/ionic/components/app/test/net/index.ts index cc0327b9dd..54bc411d2e 100644 --- a/ionic/components/app/test/net/index.ts +++ b/ionic/components/app/test/net/index.ts @@ -1,15 +1,14 @@ import {Component} from 'angular2/angular2'; import {Control, ControlGroup, formDirectives} from 'angular2/forms'; -import {IonicView, Http} from 'ionic/ionic'; +import {App, Http} from 'ionic/ionic'; let testUrl = 'https://ionic-api-tester.herokuapp.com/json'; let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -65,7 +64,3 @@ class IonicApp { }) } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/profile/index.ts b/ionic/components/app/test/profile/index.ts index 27273e3928..8ba91986f0 100644 --- a/ionic/components/app/test/profile/index.ts +++ b/ionic/components/app/test/profile/index.ts @@ -2,7 +2,7 @@ import {ElementRef} from 'angular2/angular2' import {Component, Directive} from 'angular2/angular2'; import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms'; -import {Modal, Animation, Content} from 'ionic/ionic'; +import {App, Modal, Animation, Content} from 'ionic/ionic'; import {NavController, NavParams, IonicView} from 'ionic/ionic'; import {dom} from 'ionic/util'; @@ -40,8 +40,7 @@ export class ParallaxEffect { } -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html', directives: [ParallaxEffect] }) @@ -56,7 +55,3 @@ class IonicApp { } } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/sink/index.ts b/ionic/components/app/test/sink/index.ts index 1f259069e9..8ea515837a 100644 --- a/ionic/components/app/test/sink/index.ts +++ b/ionic/components/app/test/sink/index.ts @@ -1,6 +1,4 @@ -import {Component, Directive} from 'angular2/angular2'; - -import {IonicApp, IonicView, Register} from 'ionic/ionic'; +import {App, IonicApp} from 'ionic/ionic'; import {ButtonPage} from './pages/button' import {NavPage} from './pages/nav' @@ -21,12 +19,8 @@ import {ActionMenuPage} from './pages/action-menu' import {ModalPage} from './pages/modal' -@Component({ - selector: 'ion-app', -}) -@IonicView({ - templateUrl: 'main.html', - directives: [Register] +@App({ + templateUrl: 'main.html' }) class MyApp { constructor(app: IonicApp) { @@ -62,7 +56,3 @@ class MyApp { nav.setRoot(component.component); } } - -export function main(ionicBootstrap) { - ionicBootstrap(MyApp); -} diff --git a/ionic/components/app/test/snapcat/index.ts b/ionic/components/app/test/snapcat/index.ts index cbb639eeca..79bc570667 100644 --- a/ionic/components/app/test/snapcat/index.ts +++ b/ionic/components/app/test/snapcat/index.ts @@ -1,7 +1,7 @@ import {Component, Directive} from 'angular2/angular2'; import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms'; -import {IonicView, Animation, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic'; +import {App, IonicView, Animation, Modal, NavController, NavParams} from 'ionic/ionic'; @Component({ selector: 'ion-view' }) @@ -64,10 +64,7 @@ export class FeedPage { } } -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -107,10 +104,6 @@ export class SettingsModal {} export class HeartModal {} -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} - class FadeIn extends Animation { constructor(element) { diff --git a/ionic/components/app/test/snapcat/main.html b/ionic/components/app/test/snapcat/main.html index 6e7003a8e0..9d5b082af0 100644 --- a/ionic/components/app/test/snapcat/main.html +++ b/ionic/components/app/test/snapcat/main.html @@ -4,11 +4,7 @@ - - - secret - - + secret @@ -44,7 +40,7 @@ ion-view { background-color: #F5F5F5; } - .platform-ios ion-toolbar { + .mode-ios ion-toolbar { padding-top: 20px; } ion-content { @@ -84,13 +80,13 @@ ion-toolbar { letter-spacing: 1px; } - .platform-ios ion-toolbar button i { + .mode-ios ion-toolbar button i { color: #fff !important; font-size: 24px !important; } - .platform-ios .item:first-of-type:before, - .platform-ios .item:last-of-type:after, - .platform-ios .item-content:after { + .mode-ios .item:first-of-type:before, + .mode-ios .item:last-of-type:after, + .mode-ios .item-content:after { background-color: #F5F5F5 !important; } #p1toolbar { diff --git a/ionic/components/app/test/typography/index.ts b/ionic/components/app/test/typography/index.ts deleted file mode 100644 index 9538b6fadc..0000000000 --- a/ionic/components/app/test/typography/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component, View} from 'angular2/angular2'; - - -@Component({ selector: 'ion-app' }) -@View({ - templateUrl: 'main.html' -}) -class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/typography/main.html b/ionic/components/app/test/typography/main.html deleted file mode 100644 index 6c7e8aef50..0000000000 --- a/ionic/components/app/test/typography/main.html +++ /dev/null @@ -1,25 +0,0 @@ - -
-

H1: gjpqy

-

I'm a paragraph, gjpqy!

-

I'm a paragraph, gjpqy!

- -

H1: gjpqy

-

H2: gjpqy

-

I'm a paragraph, gjpqy!

-

I'm a paragraph, gjpqy!

- -

H3: gjpqy

-

H4: gjpqy

-
H5: gjpqy
-
H6: gjpqy
-

I'm a paragraph, gjpqy!

-

Paragraph with sub and sup.

- -

H1 with small

-

H2 with small

-

Paragraph with small

- -

H1 with a link

-

Paragraph with a boring link.

-
diff --git a/ionic/components/app/test/weather/index.ts b/ionic/components/app/test/weather/index.ts index 03c58de777..cd8ef98df5 100755 --- a/ionic/components/app/test/weather/index.ts +++ b/ionic/components/app/test/weather/index.ts @@ -2,131 +2,13 @@ import {Component, Directive, View} from 'angular2/angular2'; import {NgIf, NgFor, CSSClass, ElementRef} from 'angular2/angular2'; import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms'; -import {IonicView, Animation, Content, Scroll, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic'; +import {App, IonicView, Animation, Content, Scroll, Modal, NavController, NavParams} from 'ionic/ionic'; import {Geo} from './geo'; import {Weather} from './weather'; import {Flickr} from './flickr'; -@Component({ - selector: 'ion-app' -}) -@View({ - templateUrl: 'main.html', - directives: [NgIf, NgFor, Content, Scroll, 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); - }); - } -} - -/* -.controller('SettingsCtrl', function($scope, Settings) { - $scope.settings = Settings.getSettings(); - - // Watch deeply for settings changes, and save them - // if necessary - $scope.$watch('settings', function(v) { - Settings.save(); - }, true); - - $scope.closeSettings = function() { - $scope.modal.hide(); - }; - -}); -*/ @IonicView({ template: ` @@ -161,10 +43,6 @@ export class SettingsModal { } } -export function main(ionicBootstrap) { - ionicBootstrap(WeatherApp); -} - let WEATHER_ICONS = { 'partlycloudy': 'ion-ios-partlysunny-outline', @@ -322,50 +200,102 @@ export class BackgroundCycler { } } } - -/* -.directive('weatherBox', function($timeout) { - return { - restrict: 'E', - replace: true, - transclude: true, - scope: { - title: '@' - }, - template: '

{{title}}

', - link: function($scope, $element, $attr) { - } - } +@App({ + templateUrl: 'main.html', + directives: [CurrentWeather, WeatherIcon, BackgroundCycler] }) +class WeatherApp { + constructor(modal: Modal) { + this.modal = modal; -.directive('scrollEffects', function() { - return { - restrict: 'A', - link: function($scope, $element, $attr) { - var amt, st, header; - var bg = document.querySelector('.bg-image'); - $element.bind('scroll', function(e) { - if(!header) { - header = document.getElementById('header'); - } - st = e.detail.scrollTop; - if(st >= 0) { - header.style.webkitTransform = 'translate3d(0, 0, 0)'; - } else if(st < 0) { - header.style.webkitTransform = 'translate3d(0, ' + -st + 'px, 0)'; - } - amt = Math.min(0.6, st / 1000); + this.currentLocationString = 'Madison, WI'; - ionic.requestAnimationFrame(function() { - header.style.opacty = 1 - amt; - if(bg) { - bg.style.opacity = 1 - amt; - } - }); + 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); + }); } -}) - - -*/ +} diff --git a/ionic/components/app/test/weather/main.html b/ionic/components/app/test/weather/main.html index 6b9d17d32c..1011c12673 100644 --- a/ionic/components/app/test/weather/main.html +++ b/ionic/components/app/test/weather/main.html @@ -2,13 +2,7 @@ - - - {{currentLocationString}}
- - - - + {{currentLocationString}}
diff --git a/ionic/components/app/test/yerk/index.ts b/ionic/components/app/test/yerk/index.ts index 78bc0fb532..43dc316439 100644 --- a/ionic/components/app/test/yerk/index.ts +++ b/ionic/components/app/test/yerk/index.ts @@ -1,10 +1,9 @@ import {Component} from 'angular2/angular2'; -import {IonicView, NavController} from 'ionic/ionic'; +import {App, IonicView, NavController} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -60,7 +59,3 @@ class TabsPage { this.peekTab = PeekTabPage; } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/app/test/yerk/main.html b/ionic/components/app/test/yerk/main.html index 8d8bcfa3cd..90aca743e2 100644 --- a/ionic/components/app/test/yerk/main.html +++ b/ionic/components/app/test/yerk/main.html @@ -1,10 +1,10 @@ diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss index 0f228b9cde..be6af01faf 100644 --- a/ionic/components/form/form.scss +++ b/ionic/components/form/form.scss @@ -196,8 +196,8 @@ input[type="color"] { line-height: $font-size-base + 2; } -.platform-ios, -.platform-android { +.mode-ios, +.mode-android { input[type="datetime-local"], input[type="date"], input[type="month"], diff --git a/ionic/components/form/test/basic/index.ts b/ionic/components/form/test/basic/index.ts index d8cd1e8ac2..2b056ad4e6 100644 --- a/ionic/components/form/test/basic/index.ts +++ b/ionic/components/form/test/basic/index.ts @@ -1,11 +1,9 @@ -import {Component, Directive, View} from 'angular2/angular2'; - import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; -//import {Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic'; + +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@View({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -23,7 +21,3 @@ class IonicApp { alert('Deleting'); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts index 311e514e33..f2537a124e 100644 --- a/ionic/components/ion.ts +++ b/ionic/components/ion.ts @@ -1,4 +1,6 @@ import {IonicConfig} from '../config/config'; +import * as util from 'ionic/util'; + /** * Base class for all Ionic components. Exposes some common functionality @@ -6,26 +8,82 @@ import {IonicConfig} from '../config/config'; * sending/receiving app-level events. */ export class Ion { - constructor(elementRef: ElementRef) { + constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { this.elementRef = elementRef; + this.ionicConfig = ionicConfig; + this.clsMode = this.ionicConfig.setting('mode'); + } + + onInit() { + let cls = this.constructor; + + if (cls.defaultProperties && this.ionicConfig) { + for (let prop in cls.defaultProperties) { + // Priority: + // --------- + // 1) Value set from within constructor + // 2) Value set from the host element's attribute + // 3) Value set by the users global config + // 4) Value set by the default mode/platform config + // 5) Value set from the component's default + + if (this[prop]) { + // this property has already been set on the instance + // could be from the user setting the element's attribute + // or from the user setting it within the constructor + continue; + } + + // get the property values from a global user/platform config + let configVal = this.ionicConfig.setting(prop); + if (configVal) { + this[prop] = configVal; + continue; + } + + // wasn't set yet, so go with property's default value + this[prop] = cls.defaultProperties[prop]; + } + } + + this.onIonInit && this.onIonInit(); + } + + getDelegate(delegateName) { + let cls = this.constructor; + + if (cls.delegates) { + let cases = cls.delegates[delegateName] || []; + + for (let i = 0; i < cases.length; i++) { + let delegateCase = cases[i]; + if (util.isArray(delegateCase)) { + let [ check, DelegateConstructor ] = delegateCase; + if (check(this)) { + return new DelegateConstructor(this); + } + + } else { + return new delegateCase(this); + } + } + } + } + + getElementRef() { + return this.elementRef; } getNativeElement() { return this.elementRef.nativeElement; } - get cssClass() { - // IonicConfig.global - - // should be able to set map of classes to add soon: - // https://github.com/angular/angular/issues/2364 - - let componentId = this.constructor.name; - - // let classes = {}; - // classes[componentId + '-ios'] = true; - // return classes; - - return true; + width() { + return this.getNativeElement().offsetWidth; } + + height() { + return this.getNativeElement().offsetHeight; + } + } diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss index 618e12c95e..2ada4bb04c 100644 --- a/ionic/components/item/extensions/ios.scss +++ b/ionic/components/item/extensions/ios.scss @@ -9,49 +9,50 @@ $item-ios-accessory-color: #8e8e93 !default; $item-ios-border-color: $list-ios-border-color !default; -.list-ios { +.list[mode="ios"] { margin-top: -1px; -} -.list-ios .item { - background: $item-ios-background-color; - min-height: $item-ios-min-height; - padding-left: $item-ios-padding-left; + .item { + background: $item-ios-background-color; + min-height: $item-ios-min-height; + padding-left: $item-ios-padding-left; - .item-media + .item-content { - margin-left: $item-ios-padding-left; + .item-media + .item-content { + margin-left: $item-ios-padding-left; + } + + .item-content { + min-height: $item-ios-min-height; + padding: 0; + @include hairline(bottom, $item-ios-border-color, $z-index-list-border); + } + + .item:last-of-type .item-content:after { + background: none; + } + + .item-accessory { + color: $item-ios-accessory-color; + } + + .item-subtitle { + width: 100%; + color: #808080; + } + .item-full { + // No left ios-style padding + padding-left: 0; + + button { + width: 100%; + font-size: 1.3em; + } + } } - .item-content { - min-height: $item-ios-min-height; - padding: 0; + .item-group-title { + // TODO: This doesn't look great when it's a header for the first item @include hairline(bottom, $item-ios-border-color, $z-index-list-border); } - .item:last-of-type .item-content:after { - background: none; - } - - .item-accessory { - color: $item-ios-accessory-color; - } - - .item-subtitle { - width: 100%; - color: #808080; - } - .item-full { - // No left ios-style padding - padding-left: 0; - - button { - width: 100%; - font-size: 1.3em; - } - } -} - -.list-ios .item-group-title { - // TODO: This doesn't look great when it's a header for the first item - @include hairline(bottom, $item-ios-border-color, $z-index-list-border); } diff --git a/ionic/components/item/item-group.ts b/ionic/components/item/item-group.ts index adec8d4fe6..7b835ee0d6 100644 --- a/ionic/components/item/item-group.ts +++ b/ionic/components/item/item-group.ts @@ -1,19 +1,19 @@ -import {Component, Directive, View, ElementRef} from 'angular2/angular2'; +import {Directive, ElementRef} from 'angular2/angular2'; -@Component({ + +@Directive({ selector: 'ion-item-group', host: { 'class': 'item-group' } }) -@View({ - template: `` -}) export class ItemGroup { constructor(elementRef: ElementRef) { this.ele = elementRef.nativeElement; } } + + @Directive({ selector: 'ion-item-group-title', host: { diff --git a/ionic/components/item/test/accessories/index.ts b/ionic/components/item/test/accessories/index.ts index 669edce61b..0a28867b95 100644 --- a/ionic/components/item/test/accessories/index.ts +++ b/ionic/components/item/test/accessories/index.ts @@ -1,12 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -14,7 +9,3 @@ class IonicApp { this.items = [1, 2, 3, 4, 5] } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/item/test/basic/index.ts b/ionic/components/item/test/basic/index.ts deleted file mode 100644 index 669edce61b..0000000000 --- a/ionic/components/item/test/basic/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; - - -@Component({ - selector: 'ion-app' -}) -@IonicView({ - templateUrl: 'main.html' -}) -class IonicApp { - constructor() { - this.items = [1, 2, 3, 4, 5] - } -} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/layout/test/basic/index.ts b/ionic/components/layout/test/basic/index.ts index ef9ff54ffc..2dac2b7a35 100644 --- a/ionic/components/layout/test/basic/index.ts +++ b/ionic/components/layout/test/basic/index.ts @@ -1,15 +1,7 @@ -import {Component, View} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} - diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss index 17d356ac69..86a6304a43 100644 --- a/ionic/components/list/extensions/ios.scss +++ b/ionic/components/list/extensions/ios.scss @@ -14,7 +14,7 @@ $list-ios-footer-font-size: 1.4rem !default; $list-ios-footer-color: #8f8f94 !default; -.list.list-ios { +.list.list[mode="ios"] { // Add the hairline to the top of the first item .item:first-of-type { @include hairline(top, $list-ios-border-color, $z-index-list-border); diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index d5fb4eab06..d390255292 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -1,6 +1,7 @@ -import {ElementRef, onInit} from 'angular2/angular2'; +import {ElementRef} from 'angular2/angular2'; import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; import {IonicDirective} from '../../config/annotations'; import {ListVirtualScroll} from './virtual'; import * as util from 'ionic/util'; @@ -15,13 +16,12 @@ import * as util from 'ionic/util'; ] }) export class List extends Ion { - constructor(elementRef: ElementRef) { - super(elementRef); + constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { + super(elementRef, ionicConfig); this.ele = elementRef.nativeElement; } - onInit() { - List.applyConfig(this); + onIonInit() { if (util.isDefined(this.virtual)) { console.log('Content', this.content); console.log('Virtual?', this.virtual); diff --git a/ionic/components/list/test/basic/index.ts b/ionic/components/list/test/basic/index.ts index 8ae1df8e63..2dac2b7a35 100644 --- a/ionic/components/list/test/basic/index.ts +++ b/ionic/components/list/test/basic/index.ts @@ -1,14 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/list/test/infinite/index.ts b/ionic/components/list/test/infinite/index.ts index 3d7100d3ba..13c46d8f7c 100644 --- a/ionic/components/list/test/infinite/index.ts +++ b/ionic/components/list/test/infinite/index.ts @@ -1,7 +1,25 @@ -import {NgFor, ProtoViewRef, ViewContainerRef} from 'angular2/angular2' -import {Component, Directive, View, Parent} from 'angular2/angular2'; +import {ProtoViewRef, ViewContainerRef} from 'angular2/angular2' +import {Directive, Parent, forwardRef} from 'angular2/angular2'; -import {Content, List, Item} from 'ionic/ionic'; +import {App, List} from 'ionic/ionic'; + + + +@App({ + templateUrl: 'main.html', + directives: [forwardRef(() => ItemCellTemplate)] +}) +class IonicApp { + constructor() { + + this.items = [] + for(let i = 0; i < 1000; i++) { + this.items.push({ + title: 'Item ' + i + }) + } + } +} /* @@ -22,26 +40,3 @@ export class ItemCellTemplate { list.setItemTemplate(this); } } - - -@Component({ selector: 'ion-app' }) -@View({ - templateUrl: 'main.html', - directives: [Content, List, Item, ItemCellTemplate, NgFor] -}) -class IonicApp { - constructor() { - console.log('IonicApp Start') - - this.items = [] - for(let i = 0; i < 1000; i++) { - this.items.push({ - title: 'Item ' + i - }) - } - } -} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/list/test/sticky/index.ts b/ionic/components/list/test/sticky/index.ts index d5016075f8..52e196e1b6 100644 --- a/ionic/components/list/test/sticky/index.ts +++ b/ionic/components/list/test/sticky/index.ts @@ -1,17 +1,11 @@ -import {NgFor, ProtoViewRef, ViewContainerRef} from 'angular2/angular2' -import {Component, Directive, View, Parent} from 'angular2/angular2'; +import {App} from 'ionic/ionic'; -import {Content, List, Item, ItemGroup, ItemGroupTitle} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@View({ - templateUrl: 'main.html', - directives: [Content, List, Item, ItemGroup, ItemGroupTitle, NgFor] +@App({ + templateUrl: 'main.html' }) class IonicApp { constructor() { - console.log('IonicApp Start') - this.groups = []; var letters = "abcdefghijklmnopqrstuvwxyz".split(''); @@ -30,7 +24,3 @@ class IonicApp { } } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/list/virtual.ts b/ionic/components/list/virtual.ts index 0bc3ca62de..6e8f2e1a1b 100644 --- a/ionic/components/list/virtual.ts +++ b/ionic/components/list/virtual.ts @@ -5,7 +5,7 @@ export class ListVirtualScroll { this.list = list; this.content = this.list.content; - this.viewportHeight = this.content.ele.offsetHeight; + this.viewportHeight = this.content.height(); this.viewContainer = this.list.itemTemplate.viewContainer; @@ -31,7 +31,7 @@ export class ListVirtualScroll { } resize() { - this.viewportHeight = this.content.ele.offsetHeight; + this.viewportHeight = this.content.height(); this.viewportScrollHeight = this.content.scrollElement.scrollHeight; this.virtualHeight = this.list.items.length * this.itemHeight; @@ -100,7 +100,7 @@ export class ListVirtualScroll { } console.log('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')'); - console.log('Container has', this.list.ele.children.length, 'children'); + console.log('Container has', this.list.getNativeElement().children.length, 'children'); } cellAtIndex(index) { diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss index b791650d88..3738882a88 100644 --- a/ionic/components/modal/modal.scss +++ b/ionic/components/modal/modal.scss @@ -28,60 +28,3 @@ ion-modal { transform: translate3d(0px, 0px, 0px); } } - - - -/*@media (min-width: $modal-inset-mode-break-point) { - // inset mode is when the modal doesn't fill the entire - // display but instead is centered within a large display - .modal { - top: $modal-inset-mode-top; - right: $modal-inset-mode-right; - bottom: $modal-inset-mode-bottom; - left: $modal-inset-mode-left; - overflow: visible; - min-height: $modal-inset-mode-min-height; - width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); - } - - .modal.ng-leave-active { - bottom: 0; - } - - // remove ios header padding from inset header - .platform-ios.platform-cordova .modal-wrapper .modal { - .bar-header:not(.bar-subheader) { - height: $bar-height; - > * { - margin-top: 0; - } - } - .tabs-top > .tabs, - .tabs.tabs-top { - top: $bar-height; - } - .has-header, - .bar-subheader { - top: $bar-height; - } - .has-subheader { - top: $bar-height + $bar-subheader-height; - } - .has-tabs-top { - top: $bar-height + $tabs-height; - } - .has-header.has-subheader.has-tabs-top { - top: $bar-height + $bar-subheader-height + $tabs-height; - } - } - - .modal-backdrop-bg { - transition: opacity 300ms ease-in-out; - background-color: $modal-backdrop-bg-active; - opacity: 0; - } - - .active .modal-backdrop-bg { - opacity: 0.5; - } -}*/ diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 7ea45bfcfc..d8d987a1ff 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -2,15 +2,11 @@ import {Injectable} from 'angular2/angular2'; import {Overlay} from '../overlay/overlay'; import {Animation} from '../../animations/animation'; -import {IonicApp} from '../app/app'; import * as util from 'ionic/util'; @Injectable() export class Modal extends Overlay { - constructor(app: IonicApp) { - super(app); - } open(ComponentType: Type, opts={}) { let defaults = { diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index c6e8197b27..214d51b796 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -1,19 +1,37 @@ import {Component} from 'angular2/angular2'; -import {IonicComponent, IonicView, IonicConfig, Platform} from 'ionic/ionic'; +import {App, IonicComponent, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic'; import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic'; -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ templateUrl: 'main.html' }) class MyAppCmp { - constructor(modal: Modal) { + constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) { this.modal = modal; + + console.log('platforms', Platform.platforms()); + console.log('mode', ionicConfig.setting('mode')); + + console.log('core', Platform.is('core')) + console.log('cordova', Platform.is('cordova')) + console.log('mobile', Platform.is('mobile')) + console.log('ipad', Platform.is('ipad')) + console.log('iphone', Platform.is('iphone')) + console.log('phablet', Platform.is('phablet')) + console.log('tablet', Platform.is('tablet')) + console.log('ios', Platform.is('ios')) + console.log('android', Platform.is('android')) + console.log('windows phone', Platform.is('windowsphone')) + + console.log('isRTL', app.isRTL()) + + Platform.ready().then(() => { + console.log('Platform.ready') + }); + } openModal() { @@ -135,40 +153,6 @@ export class ModalSecondPage { } -export function main(ionicBootstrap) { - - let myConfig = new IonicConfig(); - - // myConfig.setting('someKey', 'userConfig'); - // myConfig.setting('ios', 'someKey', 'iosConfig'); - // myConfig.setting('ipad', 'someKey', 'ipadConfig'); - - ionicBootstrap(MyAppCmp, myConfig).then(app => { - - console.log('platforms', Platform.platforms()); - console.log('mode', myConfig.setting('mode')); - - console.log('core', Platform.is('core')) - console.log('cordova', Platform.is('cordova')) - console.log('mobile', Platform.is('mobile')) - console.log('ipad', Platform.is('ipad')) - console.log('iphone', Platform.is('iphone')) - console.log('phablet', Platform.is('phablet')) - console.log('tablet', Platform.is('tablet')) - console.log('ios', Platform.is('ios')) - console.log('android', Platform.is('android')) - console.log('windows phone', Platform.is('windowsphone')) - - console.log('isRTL', app.isRTL()) - console.log('lang', app.lang()) - - Platform.ready().then(() => { - console.log('Platform.ready') - }); - - }); -} - class FadeIn extends Animation { constructor(element) { diff --git a/ionic/components/nav-bar/extensions/ios.scss b/ionic/components/nav-bar/extensions/ios.scss index 537b138e3f..1afd86eeba 100644 --- a/ionic/components/nav-bar/extensions/ios.scss +++ b/ionic/components/nav-bar/extensions/ios.scss @@ -19,7 +19,7 @@ $navbar-ios-button-text-color: #007aff !default; $navbar-ios-button-background-color: transparent !default; -.nav-ios .navbar-container { +.nav[mode="ios"] .navbar-container { min-height: $navbar-ios-height; background: $navbar-ios-background; diff --git a/ionic/components/nav-bar/extensions/material.scss b/ionic/components/nav-bar/extensions/material.scss index 3986ed42e2..6d6d3dcc6b 100644 --- a/ionic/components/nav-bar/extensions/material.scss +++ b/ionic/components/nav-bar/extensions/material.scss @@ -10,7 +10,7 @@ $navbar-material-button-font-size: 2rem !default; $navbar-material-button-text-color: #007aff !default; -.navbar-md { +.navbar[mode="md"] { height: $navbar-material-height; background: $navbar-material-background; diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss index 3eb9f41539..32d0c7830c 100644 --- a/ionic/components/nav-bar/nav-bar.scss +++ b/ionic/components/nav-bar/nav-bar.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- -ion-navbar { +.navbar { position: absolute; width: 100%; height: 100%; diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index 4ff4e1cb2d..39e280f225 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -1,7 +1,8 @@ -import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2'; +import {Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2'; import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref'; import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; import {IonicComponent} from '../../config/annotations'; import {ViewItem} from '../view/view-item'; import * as dom from '../../util/dom'; @@ -41,8 +42,9 @@ import * as dom from '../../util/dom'; ] }) export class Navbar extends Ion { - constructor(item: ViewItem, elementRef: ElementRef) { - super(elementRef); + constructor(item: ViewItem, elementRef: ElementRef, ionicConfig: IonicConfig) { + super(elementRef, ionicConfig); + this.eleRef = elementRef; this.itemEles = []; item.navbarView(this); @@ -51,10 +53,6 @@ export class Navbar extends Ion { this.bbText = ''; } - onInit() { - Navbar.applyConfig(this); - } - element() { return this.eleRef; } diff --git a/ionic/components/nav-bar/test/html-title/e2e.ts b/ionic/components/nav-bar/test/html-title/e2e.ts deleted file mode 100644 index 8b13789179..0000000000 --- a/ionic/components/nav-bar/test/html-title/e2e.ts +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ionic/components/nav-bar/test/html-title/index.ts b/ionic/components/nav-bar/test/html-title/index.ts deleted file mode 100644 index c062390041..0000000000 --- a/ionic/components/nav-bar/test/html-title/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {Component, Directive} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; - - -@Component({ selector: 'ion-app' }) -@IonicView({ - templateUrl: 'main.html' -}) -class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/nav-bar/test/html-title/main.html b/ionic/components/nav-bar/test/html-title/main.html deleted file mode 100644 index 87f9edbec9..0000000000 --- a/ionic/components/nav-bar/test/html-title/main.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - Awesome - HTML - Title - - - - - - - - - - - diff --git a/ionic/components/nav-bar/test/long-title/e2e.ts b/ionic/components/nav-bar/test/long-title/e2e.ts deleted file mode 100644 index 8b13789179..0000000000 --- a/ionic/components/nav-bar/test/long-title/e2e.ts +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ionic/components/nav-bar/test/long-title/main.html b/ionic/components/nav-bar/test/long-title/main.html deleted file mode 100644 index 8aa9b7c4bc..0000000000 --- a/ionic/components/nav-bar/test/long-title/main.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/ionic/components/nav-bar/test/lopsided-buttons/e2e.ts b/ionic/components/nav-bar/test/lopsided-buttons/e2e.ts deleted file mode 100644 index 8b13789179..0000000000 --- a/ionic/components/nav-bar/test/lopsided-buttons/e2e.ts +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ionic/components/nav-bar/test/lopsided-buttons/index.ts b/ionic/components/nav-bar/test/lopsided-buttons/index.ts deleted file mode 100644 index c062390041..0000000000 --- a/ionic/components/nav-bar/test/lopsided-buttons/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {Component, Directive} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; - - -@Component({ selector: 'ion-app' }) -@IonicView({ - templateUrl: 'main.html' -}) -class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/nav-bar/test/lopsided-buttons/main.html b/ionic/components/nav-bar/test/lopsided-buttons/main.html deleted file mode 100644 index 4eb7e73c5f..0000000000 --- a/ionic/components/nav-bar/test/lopsided-buttons/main.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - -

- A long time ago, in a galaxy far,
- far away....
-

-

- It is a period of civil war.
- Rebel spaceships, striking
- from a hidden base, have won
- their first victory against
- the evil Galactic Empire.
-

-

- During the battle, rebel
- spies managed to steal secret
- plans to the Empire's
- ultimate weapon, the DEATH
- STAR, an armored space
- station with enough power to
- destroy an entire planet.
-

-

- Pursued by the Empire's
- sinister agents, Princess
- Leia races home aboard her
- starship, custodian of the
- stolen plans that can save
- her people and restore
- freedom to the galaxy....
-

- - - diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js deleted file mode 100644 index 79e8a137ec..0000000000 --- a/ionic/components/nav/nav.js +++ /dev/null @@ -1,42 +0,0 @@ -import {Component, Directive, View, ElementRef, Parent, Optional, forwardRef, onInit, Injector} from 'angular2/angular2'; - -import {IonicComponent} from '../../config/annotations'; -import {ViewController} from '../view/view-controller'; - - -@IonicComponent({ - selector: 'ion-nav', - properties: [ - 'root' - ], - lifecycle: [onInit] -}) -@View({ - template: '', - directives: [forwardRef(() => NavPaneAnchor)] -}) -export class Nav extends ViewController { - - constructor( - @Optional() parentViewCtrl: ViewController, - injector: Injector, - elementRef: ElementRef - ) { - super(parentViewCtrl, injector, elementRef); - } - - onInit() { - if (this.root) { - this.push(this.root); - } - } - -} - - -@Directive({selector: 'template[pane-anchor]'}) -class NavPaneAnchor { - constructor(@Parent() nav: Nav, elementRef: ElementRef) { - nav.anchorElementRef(elementRef); - } -} diff --git a/ionic/components/nav/pane.ts b/ionic/components/nav/pane.ts index 4a8267cef8..9cac1bd652 100644 --- a/ionic/components/nav/pane.ts +++ b/ionic/components/nav/pane.ts @@ -1,6 +1,8 @@ import {Component, Directive, View, ElementRef, Parent, Inject, forwardRef} from 'angular2/angular2'; import {bind} from 'angular2/di'; +import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; import {ViewController} from '../view/view-controller'; import {SwipeHandle} from './swipe-handle'; import {IonicComponent} from '../../config/annotations'; @@ -96,7 +98,10 @@ export class PaneController { @IonicComponent({ selector: 'ion-pane', - classId: 'nav' + classId: 'nav', + host: { + ['[class.show-page]']: 'showPane' + } }) @View({ template: ` @@ -108,20 +113,22 @@ export class PaneController { `, directives: [PaneAnchor, PaneContentAnchor, SwipeHandle] }) -export class Pane { +export class Pane extends Ion { constructor( @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController, - elementRef: ElementRef + elementRef: ElementRef, + ionicConfig: IonicConfig ) { - this.ele = elementRef.nativeElement; + super(elementRef, ionicConfig); + viewCtrl.panes.add(this); } - width() { - return this.ele.offsetWidth; + set showPane(val) { + this._showPane = val; } - showPane(val) { - this.ele.classList[val ? 'add' : 'remove']('show-pane'); + get showPane() { + return this._showPane; } } diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index f2ad0f0900..a6c6c21baf 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/ionic/components/nav/test/basic/index.ts @@ -1,24 +1,12 @@ -import {Component, onInit} from 'angular2/angular2'; - -import {IonicView, IonicConfig, IonicRouter} from 'ionic/ionic'; -import {FirstPage} from './pages/first-page' +import {App} from 'ionic/ionic'; -@Component({ - selector: 'ion-app' -}) -@IonicView({ - template: '' -}) -class MyApp {} - - -export function main(ionicBootstrap) { - - var myRouter = new IonicRouter({ +@App({ + router: { 'FirstPage': { 'path': '/firstpage', 'module': 'dist/examples/nav/basic/pages/first-page', + 'root': true }, 'SecondPage': { 'path': '/secondpage', @@ -28,11 +16,6 @@ export function main(ionicBootstrap) { 'path': '/thirdpage', 'module': 'dist/examples/nav/basic/pages/third-page', }, - }); - - myRouter.otherwise('FirstPage'); - - let myConfig = new IonicConfig(); - - ionicBootstrap(MyApp, myConfig, myRouter); -} + } +}) +class MyApp {} diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts index f5be5b88d9..07d70222e8 100644 --- a/ionic/components/overlay/overlay.ts +++ b/ionic/components/overlay/overlay.ts @@ -9,8 +9,9 @@ import * as util from 'ionic/util'; export class Overlay { - constructor(app: IonicApp) { + constructor(app: IonicApp, ionicConfig: IonicConfig) { this.app = app; + this.ionicConfig = ionicConfig; } create(overlayType, ComponentType: Type, opts={}, context=null) { @@ -21,7 +22,8 @@ export class Overlay { annotation.selector = 'ion-' + overlayType; annotation.host = { '[style.z-index]': 'zIndex', - 'class': overlayType + ' ion-app' + 'class': overlayType + ' ion-app', + 'mode': this.ionicConfig.setting('mode') }; let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation); diff --git a/ionic/components/radio/extensions/ios.scss b/ionic/components/radio/extensions/ios.scss index f2dba066be..3192becbc1 100644 --- a/ionic/components/radio/extensions/ios.scss +++ b/ionic/components/radio/extensions/ios.scss @@ -5,7 +5,7 @@ $radio-ios-color: #007aff; -.radio-group-ios { +.radio-group[mode="ios"] { .media-radio { color: $radio-ios-color; diff --git a/ionic/components/radio/test/basic/index.ts b/ionic/components/radio/test/basic/index.ts index eafd399e5f..9f19697df8 100644 --- a/ionic/components/radio/test/basic/index.ts +++ b/ionic/components/radio/test/basic/index.ts @@ -1,10 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -15,7 +12,3 @@ class IonicApp { // }); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts index f5109e5bae..596c421dbc 100644 --- a/ionic/components/scroll/scroll.ts +++ b/ionic/components/scroll/scroll.ts @@ -1,13 +1,15 @@ -import {Component, View, ElementRef} from 'angular2/angular2'; +import {View, ElementRef} from 'angular2/angular2'; import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; +import {IonicComponent} from '../../config/annotations'; /** * ion-scroll is a non-flexboxed scroll area that can * scroll horizontally or vertically. */ -@Component({ +@IonicComponent({ selector: 'ion-scroll', properties: [ 'scrollX', 'scrollY' @@ -18,14 +20,14 @@ import {Ion} from '../ion'; } }) @View({ - template: `
` + template: '
' }) export class Scroll extends Ion { - constructor(elementRef: ElementRef) { - super(elementRef); + constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { + super(elementRef, ionicConfig); setTimeout(() => { - this.scrollElement = elementRef.nativeElement.children[0]; + this.scrollElement = this.getNativeElement().children[0]; }); } diff --git a/ionic/components/scroll/test/basic/index.ts b/ionic/components/scroll/test/basic/index.ts index ce94a63160..ff21e93aca 100644 --- a/ionic/components/scroll/test/basic/index.ts +++ b/ionic/components/scroll/test/basic/index.ts @@ -1,21 +1,11 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class MyApp { - constructor() { - console.log('IonicApp Start') - } doRefresh() { console.log('DOREFRESH') } } - -export function main(ionicBootstrap) { - ionicBootstrap(MyApp); -} diff --git a/ionic/components/scroll/test/pull-to-refresh/index.ts b/ionic/components/scroll/test/pull-to-refresh/index.ts index a11aba8903..51f5b3c816 100644 --- a/ionic/components/scroll/test/pull-to-refresh/index.ts +++ b/ionic/components/scroll/test/pull-to-refresh/index.ts @@ -1,16 +1,11 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class MyApp { - constructor() { - console.log('IonicApp Start') - } + doRefresh(refresher) { console.log('DOREFRESH', refresher) @@ -18,14 +13,12 @@ class MyApp { refresher.complete(); }) } + doStarting() { console.log('DOSTARTING'); } + doPulling(amt) { console.log('DOPULLING', amt); } } - -export function main(ionicBootstrap) { - ionicBootstrap(MyApp); -} diff --git a/ionic/components/search-bar/extensions/ios.scss b/ionic/components/search-bar/extensions/ios.scss index de0c4306d0..347eb7253a 100644 --- a/ionic/components/search-bar/extensions/ios.scss +++ b/ionic/components/search-bar/extensions/ios.scss @@ -10,7 +10,7 @@ $search-bar-ios-background-svg: " ` }) -export class SearchBar { +export class SearchBar extends Ion { constructor( - elementRef: ElementRef//, + elementRef: ElementRef, + ionicConfig: IonicConfig//, //cd:ControlDirective ) { - this.ele = elementRef.nativeElement; + super(elementRef, ionicConfig); // this.controlDirective = cd; // cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective this.query = ''; } - onInit() { - SearchBar.applyConfig(this); - } - /** * Much like ngModel, this is called from our valueAccessor for the attached * ControlDirective to update the value internally. diff --git a/ionic/components/search-bar/test/basic/index.ts b/ionic/components/search-bar/test/basic/index.ts index 3da08c0e25..4d9234dc2e 100644 --- a/ionic/components/search-bar/test/basic/index.ts +++ b/ionic/components/search-bar/test/basic/index.ts @@ -1,8 +1,6 @@ -import {Component, Directive} from 'angular2/angular2'; - import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms'; -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; import {SearchPipe} from 'ionic/components/search-bar/search-bar'; @@ -11,14 +9,11 @@ function randomTitle() { return items[Math.floor(Math.random() * items.length)]; } -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { constructor() { - console.log('IonicApp Start') - var fb = new FormBuilder(); this.form = fb.group({ searchQuery: ['', Validators.required] @@ -34,6 +29,7 @@ class IonicApp { }) } } + getItems() { var q = this.form.controls.searchQuery.value; if(q.trim() == '') { @@ -47,7 +43,3 @@ class IonicApp { }) } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/segment/extensions/ios.scss b/ionic/components/segment/extensions/ios.scss index 81a79619c2..0317005cd9 100644 --- a/ionic/components/segment/extensions/ios.scss +++ b/ionic/components/segment/extensions/ios.scss @@ -1,4 +1,9 @@ -.segment-ios .ion-segment { + +// iOS Segment +// -------------------------------------------------- + + +.segment[mode="ios"] .ion-segment { > button, > [button] { border-width: 1px; diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index d3d60cc3ab..1e5c473a6e 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -1,11 +1,12 @@ -import {View, Renderer, ElementRef, EventEmitter, onInit, Ancestor, forwardRef} from 'angular2/angular2'; +import {View, Renderer, ElementRef, EventEmitter, Ancestor, forwardRef} from 'angular2/angular2'; import {Control, NgControl,NgFormControl} from 'angular2/forms'; import {ControlGroup, ControlDirective} from 'angular2/forms' -import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations' +import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; +import {IonicDirective, IonicComponent} from '../../config/annotations' import {dom} from 'ionic/util'; -console.log(forwardRef(() => SegmentButton)); @IonicComponent({ selector: 'ion-segment', @@ -13,7 +14,6 @@ console.log(forwardRef(() => SegmentButton)); properties: [ 'value' ], - lifecycle: [onInit], host: { '(click)': 'buttonClicked($event)', '(change)': 'onChange($event)', @@ -32,12 +32,15 @@ console.log(forwardRef(() => SegmentButton)); template: '
', directives: [forwardRef(() => SegmentButton)] }) -export class Segment { +export class Segment extends Ion { constructor( cd: NgControl, elementRef: ElementRef, + ionicConfig: IonicConfig, renderer: Renderer ) { + super(elementRef, ionicConfig); + this.ele = elementRef.nativeElement this.elementRef = elementRef; this.renderer = renderer; @@ -50,10 +53,6 @@ export class Segment { this.buttons = []; } - onInit() { - Segment.applyConfig(this); - } - /** * Called by child SegmentButtons to bind themselves to * the Segment. @@ -164,8 +163,7 @@ export class SegmentControlValueAccessor { host: { '(click)': 'buttonClicked($event)', '[class.active]': 'isActive' - }, - lifecycle: [onInit] + } }) export class SegmentButton { constructor( diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts index bd44520791..3b79671565 100644 --- a/ionic/components/segment/test/basic/index.ts +++ b/ionic/components/segment/test/basic/index.ts @@ -1,15 +1,11 @@ -import {Component} from 'angular2/angular2'; import {formDirectives, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ - selector: 'ion-app', - appInjector: [FormBuilder] -}) -@IonicView({ +@App({ templateUrl: 'main.html', + appInjector: [FormBuilder], directives: [formDirectives] }) class IonicApp { @@ -26,7 +22,3 @@ class IonicApp { event.preventDefault(); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts index e1cdeef11b..0461c45ea2 100644 --- a/ionic/components/slides/test/basic/index.ts +++ b/ionic/components/slides/test/basic/index.ts @@ -1,12 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -17,7 +12,3 @@ class IonicApp { console.log('Prev'); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/slides/test/continuous/index.ts b/ionic/components/slides/test/continuous/index.ts index 4f36d13fc6..bac4986d78 100644 --- a/ionic/components/slides/test/continuous/index.ts +++ b/ionic/components/slides/test/continuous/index.ts @@ -1,12 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ template: ` @@ -36,7 +31,3 @@ class IonicApp { console.log('Prev'); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/split-view/split-nav-view.ts b/ionic/components/split-view/split-nav-view.ts deleted file mode 100644 index 5141b587fe..0000000000 --- a/ionic/components/split-view/split-nav-view.ts +++ /dev/null @@ -1,4 +0,0 @@ - -export class SplitNavView extends NavView { - -} diff --git a/ionic/components/split-view/split-view.ts b/ionic/components/split-view/split-view.ts deleted file mode 100644 index a77d2a0c98..0000000000 --- a/ionic/components/split-view/split-view.ts +++ /dev/null @@ -1,121 +0,0 @@ -import {Component, Parent, Decorator, View, ElementRef} from 'angular2/angular2' - -import {Nav} from '../nav/nav' -import * as util from 'ionic/util' - -// TODO consider more explicit API, a la tabs - -/** - * SplitViewportDecorator is temporary until the SplitView is able to query - * its children for viewports. - */ -@Decorator({ - selector: 'ion-nav[split-viewport]' -}) -class SplitViewportDecorator { - constructor( - @Parent() splitView: SplitView, - navViewport: Nav - ) { - splitView.setNav(navViewport) - } -} - -@Component({ - selector: 'ion-split-view', - properties: [ - 'defaultView', - 'navTitle' - ], -}) -@View({ - template: ` - -
- -
- - - - - `, - directives: [SplitViewportDecorator, Nav] -}) -export class SplitView { - constructor( - elementRef: ElementRef, - @Parent() navPane: NavPane - ) { - this.ele = elementRef.nativeElement - this.navPane = navPane - - // TODO mq.addEventListener() doesn't work with zone.js - // let checkScreen = () => { - // const mq = window.matchMedia('(min-width: 720px)') - // this.setEnabled(mq.matches) - // } - // window.addEventListener('resize', checkScreen) - // checkScreen() - this.setEnabled(true) - } - - // Sets the first view to be shown in the viewport to the right of the splitView. - set defaultView(DefaultClass) { - this.splitViewport.push(DefaultClass, {sync: true}) - } - - isActive(Class) { - for (let item of this.splitViewport._stack) { - if (item.Class === Class) return true - } - return false - } - - setNav(viewport) { - this.splitViewport = viewport - - this.navPane.__$push = this.navPane.push - this.navPane.push = (Class, opts) => { - if (this.isEnabled) { - opts = opts || {} - util.defaults(opts, { sync: true }) - if (this.splitViewport.containsClass(Class)) { - return this.splitViewport.popTo(0) - } else { - this.splitViewport.popAll() - return this.splitViewport.push(Class, opts) - } - } else { - return this.navPane.__$push(Class, opts) - } - }; - - } - - // TODO set enabled depending on some condition (media query in this case) - setEnabled(isEnabled) { - if (isEnabled !== this.isEnabled) { - if (isEnabled) { - this.splitViewport - } - this.isEnabled = isEnabled - } - } -} diff --git a/ionic/components/switch/extensions/ios.scss b/ionic/components/switch/extensions/ios.scss index 460cc872b8..313197f726 100644 --- a/ionic/components/switch/extensions/ios.scss +++ b/ionic/components/switch/extensions/ios.scss @@ -9,7 +9,7 @@ $switch-ios-slider-on-background: #4cd964 !default; $switch-ios-toggle-on-background: #fff !default; -.switch-ios { +.switch[mode="ios"] { .switch-toggle { width: $switch-ios-width; diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index 1b05e30fa0..5f90bc7eb6 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -1,7 +1,9 @@ -import {ElementRef} from 'angular2/angular2'; +import {View, ElementRef} from 'angular2/angular2'; import {ControlGroup, ControlDirective} from 'angular2/forms'; -import {IonicComponent, IonicView} from '../../config/annotations'; +import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; +import {IonicComponent} from '../../config/annotations'; @IonicComponent({ @@ -10,10 +12,11 @@ import {IonicComponent, IonicView} from '../../config/annotations'; 'checked' ], host: { - '(click)': 'switchClicked($event)' + '(click)': 'switchClicked($event)', + 'class': 'item' } }) -@IonicView({ +@View({ template: `
@@ -24,26 +27,17 @@ import {IonicComponent, IonicView} from '../../config/annotations';
` }) -export class Switch { +export class Switch extends Ion { constructor( elementRef: ElementRef, - cd: ControlDirective + ionicConfig: IonicConfig + //cd: ControlDirective ) { - this.ele = elementRef.nativeElement - this.config = Switch.config.invoke(this) - this.controlDirective = cd; - cd.valueAccessor = this; + super(elementRef, ionicConfig) - // TODO: These are temporary until we figure out what to do - // with @PropertSetter - //let setAriaRole = (v) => { this.ele.setAttribute('aria-role', v) } - //let setAriaChecked = (v) => { this.ele.setAttribute('aria-checked', v) } - //let setAriaInvalid = (v) => { this.ele.setAttribute('aria-invalid', v) } - //let setAriaDisabled = (v) => { this.ele.setAttribute('aria-disabled', v) } - - //let setChecked = (v) => this.ele.setAttribute('checked', v); - - this.ele.classList.add('item') + // this.config = Switch.config.invoke(this) + // this.controlDirective = cd; + // cd.valueAccessor = this; // TODO: These rely on the commented-out PropertySetter's above //setAriaRole('checkbox') @@ -71,7 +65,7 @@ export class Switch { return this._checked } - switchClicked(event) { + switchClicked(ev) { this.checked = !this.checked; } } diff --git a/ionic/components/switch/test/basic/index.ts b/ionic/components/switch/test/basic/index.ts index f7fa2ee581..99de26004d 100644 --- a/ionic/components/switch/test/basic/index.ts +++ b/ionic/components/switch/test/basic/index.ts @@ -1,11 +1,9 @@ -import {Component} from 'angular2/angular2'; -import {FormBuilder, Validators, ControlGroup} from 'angular2/forms'; +import {FormBuilder, Validators} from 'angular2/forms'; -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp { @@ -19,12 +17,8 @@ class IonicApp { }); } - doSubmit(event) { + doSubmit(ev) { console.log('Submitting form', this.form.value); - event.preventDefault(); + ev.preventDefault(); } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/tabs/extensions/ios.scss b/ionic/components/tabs/extensions/ios.scss index 7d8defdae3..1c58c49060 100644 --- a/ionic/components/tabs/extensions/ios.scss +++ b/ionic/components/tabs/extensions/ios.scss @@ -1,5 +1,5 @@ -// iOS Tab Bar +// iOS Tabs // -------------------------------------------------- $tab-bar-ios-item-padding: 0px 10px !default; @@ -8,7 +8,7 @@ $tab-bar-ios-item-icon-size: 30px !default; $tab-bar-ios-height: 49px !default; -.tabs-ios { +.tabs[mode="ios"] { .tab-bar { // iOS's UITabBar is at most 49px high diff --git a/ionic/components/tabs/extensions/material.scss b/ionic/components/tabs/extensions/material.scss index 02b1c7907e..149cf6c2f4 100644 --- a/ionic/components/tabs/extensions/material.scss +++ b/ionic/components/tabs/extensions/material.scss @@ -1,5 +1,5 @@ -// Material Design Toolbar +// Material Design Tabs // -------------------------------------------------- $tab-bar-material-item-padding: 4px 10px !default; @@ -9,7 +9,7 @@ $tab-bar-material-text-transform: uppercase !default; $tab-bar-material-text-font-weight: 500 !default; -.tabs-md { +.tabs[mode="md"] { .tab-bar-item { padding: $tab-bar-material-item-padding; diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index bb42004bdc..964095cdbb 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -1,4 +1,4 @@ -import {Component, Directive, View, onInit, Injector, NgFor, ElementRef, Optional, Parent, forwardRef} from 'angular2/angular2'; +import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Parent, forwardRef} from 'angular2/angular2'; import {ViewController} from '../view/view-controller'; import {ViewItem} from '../view/view-item'; @@ -64,10 +64,6 @@ export class Tabs extends ViewController { } - onInit() { - Tabs.applyConfig(this); - } - addTab(tab) { // tab.item refers to the ViewItem of the individual Tab being added to Tabs (ViewController) // this.item refers to the ViewItem instsance on Tabs @@ -124,8 +120,7 @@ export class Tabs extends ViewController { '[attr.aria-controls]': 'panelId', '[attr.aria-selected]': 'tab.isSelected', '(^click)': 'onClick($event)' - }, - lifecycle: [onInit] + } }) class TabButton { constructor(@Parent() tabs: Tabs) { diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts index b956189cd0..86f43624a0 100644 --- a/ionic/components/tabs/test/advanced/index.ts +++ b/ionic/components/tabs/test/advanced/index.ts @@ -1,6 +1,6 @@ import {Component} from 'angular2/angular2'; -import {IonicView, NavController} from 'ionic/ionic'; +import {App, IonicView, NavController} from 'ionic/ionic'; @Component({selector: 'ion-view'}) @@ -176,10 +176,7 @@ class Tab2Page3 { } -@Component({ - selector: 'ion-app' -}) -@IonicView({ +@App({ template: '' }) class IonicApp { @@ -187,7 +184,3 @@ class IonicApp { this.rootView = SignIn; } } - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts index 8ae1df8e63..2dac2b7a35 100644 --- a/ionic/components/tabs/test/basic/index.ts +++ b/ionic/components/tabs/test/basic/index.ts @@ -1,14 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/tabs/test/tab-bar-bottom/index.ts b/ionic/components/tabs/test/tab-bar-bottom/index.ts index 8ae1df8e63..2dac2b7a35 100644 --- a/ionic/components/tabs/test/tab-bar-bottom/index.ts +++ b/ionic/components/tabs/test/tab-bar-bottom/index.ts @@ -1,14 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/tabs/test/tab-bar-icons/index.ts b/ionic/components/tabs/test/tab-bar-icons/index.ts index 8ae1df8e63..2dac2b7a35 100644 --- a/ionic/components/tabs/test/tab-bar-icons/index.ts +++ b/ionic/components/tabs/test/tab-bar-icons/index.ts @@ -1,14 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/tabs/test/tab-bar-top/index.ts b/ionic/components/tabs/test/tab-bar-top/index.ts index 8ae1df8e63..2dac2b7a35 100644 --- a/ionic/components/tabs/test/tab-bar-top/index.ts +++ b/ionic/components/tabs/test/tab-bar-top/index.ts @@ -1,14 +1,7 @@ -import {Component} from 'angular2/angular2'; - -import {IonicView} from 'ionic/ionic'; +import {App} from 'ionic/ionic'; -@Component({ selector: 'ion-app' }) -@IonicView({ +@App({ templateUrl: 'main.html' }) class IonicApp {} - -export function main(ionicBootstrap) { - ionicBootstrap(IonicApp); -} diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss index 724aa1795e..d61ca1f106 100644 --- a/ionic/components/toolbar/extensions/ios.scss +++ b/ionic/components/toolbar/extensions/ios.scss @@ -19,7 +19,7 @@ $toolbar-ios-button-background-color: transparent !default; $toolbar-ios-padding: 0px 15px; -.mode-ios ion-toolbar { +.toolbar[mode="ios"] { padding: $toolbar-ios-padding; diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 98792089c6..07660a8ba1 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -1,6 +1,7 @@ import {Directive, View, Parent, onInit, ElementRef, forwardRef} from 'angular2/angular2'; import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; import {IonicComponent} from '../../config/annotations'; import * as dom from '../../util/dom'; @@ -30,16 +31,13 @@ import * as dom from '../../util/dom'; ] }) export class Toolbar extends Ion { - constructor(elementRef: ElementRef) { - super(elementRef); + constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { + super(elementRef, ionicConfig); + this.eleRef = elementRef; this.itemEles = []; } - onInit() { - Toolbar.applyConfig(this); - } - element() { return this.eleRef; } diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts index c10935af22..a643f831f4 100644 --- a/ionic/components/view/view-controller.ts +++ b/ionic/components/view/view-controller.ts @@ -3,6 +3,7 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; import {Ion} from '../ion'; +import {IonicConfig} from '../../config/config'; import {IonicApp} from '../app/app'; import {IonicRouter} from '../../routing/router'; import {ViewItem} from './view-item'; @@ -20,7 +21,7 @@ export class ViewController extends Ion { injector: Injector, elementRef: ElementRef ) { - super(elementRef); + super(elementRef, injector.get(IonicConfig)); this.parent = parentViewCtrl; diff --git a/ionic/components/view/view-item.ts b/ionic/components/view/view-item.ts index 88c800cdd1..4c86ef6e8b 100644 --- a/ionic/components/view/view-item.ts +++ b/ionic/components/view/view-item.ts @@ -261,7 +261,9 @@ export class ViewItem { will fire, whether it was the first load or loaded from the cache. */ didEnter() { - this.pane && this.pane.showPane(true); + if (this.pane) { + this.pane.showPane = true; + } let navbarView = this.navbarView(); if (navbarView) { navbarView.didEnter(); diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts index b9dbfa2c4e..7c36e93f3f 100644 --- a/ionic/config/annotations.ts +++ b/ionic/config/annotations.ts @@ -1,4 +1,4 @@ -import {coreDirectives, Component, Directive, View} from 'angular2/angular2' +import {coreDirectives, Component, Directive, View, forwardRef} from 'angular2/angular2' import * as util from 'ionic/util'; import {IonicConfig} from './config'; @@ -14,70 +14,99 @@ import { Checkbox, Switch, Label, Input, Segment, SegmentButton, SegmentControlValueAccessor, RadioGroup, RadioButton, SearchBar, - Nav, NavbarTemplate, Navbar, NavPush, NavPop -} from 'ionic/ionic'; + Nav, NavbarTemplate, Navbar, NavPush, NavPop, + Register +} from '../ionic'; -export function IonicView(config) { - return function(ComponentType) { +// TODO: Why is forwardRef() required when they're already imported above???? +export const IonicDirectives = [ + // Angular + coreDirectives, - const ionicDirectives = [ - // Angular - coreDirectives, + // Content + forwardRef(() => Aside), + forwardRef(() => Content), + forwardRef(() => Scroll), + forwardRef(() => Refresher), - // Content - Aside, Content, Scroll, Refresher, - List, Item, ItemGroup, ItemGroupTitle, - Slides, Slide, SlidePager, - Tabs, Tab, - Toolbar, + // Lists + forwardRef(() => List), + forwardRef(() => Item), + forwardRef(() => ItemGroup), + forwardRef(() => ItemGroupTitle), - // Media - Icon, + // Slides + forwardRef(() => Slides), + forwardRef(() => Slide), + forwardRef(() => SlidePager), - // Form elements - Segment, SegmentButton, SegmentControlValueAccessor, - //Checkbox, Switch, Label, Input - //RadioGroup, RadioButton, SearchBar, + // Tabs + forwardRef(() => Tabs), + forwardRef(() => Tab), + forwardRef(() => Toolbar), - // Nav - Nav, NavbarTemplate, Navbar, NavPush, NavPop - ]; - config.directives = (config.directives || []).concat(ionicDirectives); + // Media + forwardRef(() => Icon), - var annotations = Reflect.getMetadata('annotations', ComponentType) || []; - annotations.push(new View(config)); - Reflect.defineMetadata('annotations', annotations, ComponentType); - return ComponentType; + // Form elements + forwardRef(() => Segment), + forwardRef(() => SegmentButton), + forwardRef(() => SegmentControlValueAccessor), + //Checkbox, Switch, Label, Input + //RadioGroup, RadioButton, SearchBar, + + // Nav + forwardRef(() => Nav), + forwardRef(() => NavbarTemplate), + forwardRef(() => Navbar), + forwardRef(() => NavPush), + forwardRef(() => NavPop), + forwardRef(() => Register) +]; + +class IonicViewImpl extends View { + constructor(args = {}) { + args.directives = (args.directives || []).concat(IonicDirectives); + super(args); + } +} + +export function IonicView(args) { + return function(cls) { + var annotations = Reflect.getMetadata('annotations', cls) || []; + annotations.push(new IonicViewImpl(args)); + Reflect.defineMetadata('annotations', annotations, cls); + return cls; } } export function IonicDirective(config) { - return function(ComponentType) { - var annotations = Reflect.getMetadata('annotations', ComponentType) || []; - annotations.push(new Directive(appendModeConfig(ComponentType, config))); - Reflect.defineMetadata('annotations', annotations, ComponentType); - return ComponentType; + return function(cls) { + var annotations = Reflect.getMetadata('annotations', cls) || []; + annotations.push(new Directive(appendConfig(cls, config))); + Reflect.defineMetadata('annotations', annotations, cls); + return cls; } } export function IonicComponent(config) { - return function(ComponentType) { - var annotations = Reflect.getMetadata('annotations', ComponentType) || []; - annotations.push(new Component(appendModeConfig(ComponentType, config))); - Reflect.defineMetadata('annotations', annotations, ComponentType); - return ComponentType; + return function(cls) { + var annotations = Reflect.getMetadata('annotations', cls) || []; + annotations.push(new Component(appendConfig(cls, config))); + Reflect.defineMetadata('annotations', annotations, cls); + return cls; } } -function appendModeConfig(ComponentType, config) { +function appendConfig(cls, config) { config.host = config.host || {}; - const defaultProperties = config.defaultProperties; + cls.defaultProperties = config.defaultProperties || {}; config.properties = config.properties || []; - for (let prop in defaultProperties) { + for (let prop in cls.defaultProperties) { // add the property to the component "properties" config.properties.push(prop); @@ -86,113 +115,39 @@ function appendModeConfig(ComponentType, config) { config.host['[attr.' + util.pascalCaseToDashCase(prop) + ']'] = prop; } - // called by the component's onInit when an instance has been created and properties bound - ComponentType.applyConfig = (instance) => { - for (let prop in defaultProperties) { - // Priority: - // --------- - // 1) Value set from within constructor - // 2) Value set from the host element's attribute - // 3) Value set by the users global config - // 4) Value set by the default mode/platform config - // 5) Value set from the component's default - - if (instance[prop]) { - // this property has already been set on the instance - // could be from the user setting the element's attribute - // or from the user setting it within the constructor - continue; - } - - // get the property values from a global user/platform config - let configVal = IonicConfig.global.setting(prop); - if (configVal) { - instance[prop] = configVal; - continue; - } - - // wasn't set yet, so go with property's default value - instance[prop] = defaultProperties[prop]; - } - }; - - if (config.delegates) { - ComponentType.getDelegate = (instance, delegateName) => { - let cases = config.delegates[delegateName] || []; - for (let i = 0; i < cases.length; i++) { - let delegateCase = cases[i]; - if (util.isArray(delegateCase)) { - let [ check, DelegateConstructor ] = delegateCase; - if (check(instance)) { - return new DelegateConstructor(instance); - } - } else { - return new delegateCase(instance); - } - } - }; - } + cls.delegates = config.delegates; let componentId = config.classId || (config.selector && config.selector.replace('ion-', '')); - config.host['class'] = (componentId); + config.host['class'] = componentId; - // should be able to set map of classes to add soon: - // https://github.com/angular/angular/issues/2364 - config.host['[class.' + componentId + '-ios]'] = 'cssClass'; + // the mode will get figured out when the component is constructed + config.host['[attr.mode]'] = 'clsMode'; return config; } -export function App(settings) { - return function(ComponentClass) { +export function App(args={}) { + return function(cls) { // get current annotations - let annotations = Reflect.getMetadata('annotations', ComponentClass) || []; + let annotations = Reflect.getMetadata('annotations', cls) || []; // create @Component - let selector = settings.selector || 'ion-app'; - annotations.push(new Component({ - selector - })); + args.selector = args.selector || 'ion-app'; + annotations.push(new Component(args)); // create @View - let templateUrl = settings.templateUrl; - let template = settings.template; - // if no template was provided, default so it has a root ion-nav - if (!templateUrl && !template) { - template = ''; + if (!args.templateUrl && !args.template) { + args.template = ''; } - annotations.push(new IonicView({ - templateUrl, - template - })); + + annotations.push(new IonicViewImpl(args)); // redefine with added annotations - Reflect.defineMetadata('annotations', annotations, ComponentClass); + Reflect.defineMetadata('annotations', annotations, cls); + ionicBootstrap(cls, args.config, args.router); - // create IonicConfig - let config = null; - if (typeof settings.config === IonicConfig) { - config = settings.config - - } else if (settings.config) { - config = new IonicConfig(settings.config); - } - - // create IonicRouter - let router = null; - if (typeof settings.router === IonicRouter) { - router = settings.router - - } else if (settings.router) { - router = new IonicRouter(settings.router); - } - - setTimeout(() => { - ionicBootstrap(ComponentClass, config, router); - }, 500); - - return ComponentClass; + return cls; } } diff --git a/ionic/init.js b/ionic/init.js index ae357d0bb9..4eec8dd9b4 100644 --- a/ionic/init.js +++ b/ionic/init.js @@ -5,12 +5,7 @@ function importApp(module) { if (module) { - var appImport = System.import(module); - ionicImport.then(function(ionic) { - appImport.then(function(app) { - ionic.load(app); - }); - }); + System.import(module); } } diff --git a/ionic/routing/router.ts b/ionic/routing/router.ts index 174ab4d2dd..5b1e027388 100644 --- a/ionic/routing/router.ts +++ b/ionic/routing/router.ts @@ -1,13 +1,4 @@ -import { - RegExp, - RegExpWrapper, - RegExpMatcherWrapper, - StringWrapper, - isPresent, - isBlank, - BaseException, - normalizeBlank -} from 'angular2/src/facade/lang'; +import {RegExpWrapper} from 'angular2/src/facade/lang'; import * as util from '../util/util'; import {PathRecognizer} from './path-recognizer'; @@ -25,14 +16,19 @@ export class IonicRouter { } config(config) { - for (let routeName in config) { - this.addRoute(routeName, config[routeName]); + if (config) { + for (let routeName in config) { + this.addRoute(routeName, config[routeName]); + } } } addRoute(routeName, routeConfig) { if (routeName && routeConfig && routeConfig.path) { - this._routes[routeName] = new Route(routeName, routeConfig) + this._routes[routeName] = new Route(routeName, routeConfig); + if (routeConfig.root) { + this.otherwise(routeName); + } } } diff --git a/ionic/transitions/transition.ts b/ionic/transitions/transition.ts index 6bb27750b7..0397a88201 100644 --- a/ionic/transitions/transition.ts +++ b/ionic/transitions/transition.ts @@ -85,7 +85,8 @@ export class Transition extends Animation { STATIC CLASSES */ static create(nav, opts = {}) { - const name = opts.animation || IonicConfig.global.setting('viewTransition') || 'ios'; + //const name = opts.animation || IonicConfig.global.setting('viewTransition') || 'ios'; + const name = opts.animation || 'ios'; let TransitionClass = TransitionRegistry[name]; if (!TransitionClass) {