javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into search-bar

Browse Source
This commit is contained in:
jbavari
2015-10-05 10:00:29 -06:00
parent 6cc8a43427 13e146b3e5
commit 9b4b15d468
28 changed files with 635 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/modal/index.ts
View File

@@ -11,7 +11,7 @@ class MyAppCmp {
this.modal = modal;
console.log('platforms', platform.platforms());
console.log('mode', config.setting('mode'));
console.log('mode', config.get('mode'));
console.log('core', platform.is('core'))
console.log('cordova', platform.is('cordova'))

8
ionic/components/action-sheet/action-sheet.ts
View File

@@ -110,10 +110,10 @@ export class ActionSheet extends Overlay {
open(opts={}) {
let config = this.config;
let defaults = {
enterAnimation: config.setting('actionSheetEnter'),
leaveAnimation: config.setting('actionSheetLeave'),
cancelIcon: config.setting('actionSheetCancelIcon'),
destructiveIcon: config.setting('actionSheetDestructiveIcon')
enterAnimation: config.get('actionSheetEnter'),
leaveAnimation: config.get('actionSheetLeave'),
cancelIcon: config.get('actionSheetCancelIcon'),
destructiveIcon: config.get('actionSheetDestructiveIcon')
};
let context = util.extend(defaults, opts);

8
ionic/components/app/app.ts
View File

@@ -281,7 +281,7 @@ function initApp(window, document, config, platform) {
platform.url(window.location.href);
platform.userAgent(window.navigator.userAgent);
platform.navigatorPlatform(window.navigator.platform);
platform.load(config);
platform.load();
// copy default platform settings into the user config platform settings
// user config platform settings should override default platform settings
@@ -361,7 +361,7 @@ export function ionicBootstrap(rootComponentType, views, config) {
let loader = injector.get(DynamicComponentLoader);
loader.loadNextToLocation(RootAnchor, lastElementRef).then(() => {
// append the focus holder if its needed
if (config.setting('keyboardScrollAssist')) {
if (config.get('keyboardScrollAssist')) {
app.appendComponent(FocusHolder).then(ref => {
app.focusHolder(ref.instance);
});
@@ -409,11 +409,11 @@ function applyBodyCss(document, config, platform) {
// set the mode class name
// ios
bodyEle.classList.add(config.setting('mode'));
bodyEle.classList.add(config.get('mode'));
// touch devices should not use :hover CSS pseudo
// enable :hover CSS when the "hoverCSS" setting is not false
if (config.setting('hoverCSS') !== false) {
if (config.get('hoverCSS') !== false) {
bodyEle.classList.add('enable-hover');
}

2
ionic/components/button/button.ts
View File

@@ -17,7 +17,7 @@ export class Button {
) {
let element = elementRef.nativeElement;
if (config.setting('hoverCSS') === false) {
if (config.get('hoverCSS') === false) {
element.classList.add('disable-hover');
}

2
ionic/components/icon/icon.ts
View File

@@ -34,7 +34,7 @@ export class Icon {
this.eleRef = elementRef;
this.config = config;
this.mode = config.setting('iconMode');
this.mode = config.get('iconMode');
}
/**

2
ionic/components/ion.ts
View File

@@ -35,7 +35,7 @@ export class Ion {
}
// get the property values from a global user/platform config
let configVal = this.config.setting(prop);
let configVal = this.config.get(prop);
if (configVal) {
this[prop] = configVal;
continue;

4
ionic/components/modal/modal.ts
View File

@@ -38,8 +38,8 @@ export class Modal extends Overlay {
*/
open(ComponentType: Type, opts={}) {
let defaults = {
enterAnimation: this.config.setting('modalEnter') || 'modal-slide-in',
leaveAnimation: this.config.setting('modalLeave') || 'modal-slide-out',
enterAnimation: this.config.get('modalEnter') || 'modal-slide-in',
leaveAnimation: this.config.get('modalLeave') || 'modal-slide-out',
};
return this.create(OVERLAY_TYPE, ComponentType, util.extend(defaults, opts));

2
ionic/components/modal/test/basic/index.ts
View File

@@ -11,7 +11,7 @@ class MyAppCmp {
this.modal = modal;
console.log('platforms', platform.platforms());
console.log('mode', config.setting('mode'));
console.log('mode', config.get('mode'));
console.log('core', platform.is('core'))
console.log('cordova', platform.is('cordova'))

4
ionic/components/nav-bar/nav-bar.ts
View File

@@ -83,8 +83,8 @@ export class Navbar extends ToolbarBase {
this.app = app;
viewCtrl && viewCtrl.navbarView(this);
this.bbIcon = config.setting('backButtonIcon');
this.bbDefault = config.setting('backButtonText');
this.bbIcon = config.get('backButtonIcon');
this.bbDefault = config.get('backButtonText');
}
getBackButtonRef() {

108
ionic/components/nav/nav-controller.ts
View File

@@ -13,14 +13,102 @@ import * as util from 'ionic/util';
/**
* NavController is the base class for navigation controller components like
* [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). At a basic level, it is an array of
* [views](#creating_views) representing a particular history (of a Tab for example).
* This array can be manipulated to navigate throughout an app by pushing,
* popping, inserting and removing views.
* [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). You use navigation controllers
* to navigate to [views](#creating_views) in your app. At a basic level, a
* navigation controller is an array of views representing a particular history
* (of a Tab for example). This array can be manipulated to navigate throughout
* an app by pushing and popping views or inserting and removing them at
* arbitrary locations in history.
*
* <h3 id="creating_views">How do I create views?</h3>
* Any class that is annotated with [@IonicView](../../../config/IonicView/) will
* create a view, that is, a component that can be navigated to.
* The current view is the last one in the array, or the top of the stack if we think of it
* that way. [Pushing](#push) a new view onto the top of
* the navigation stack causes the new view to be animated in, while [popping](#pop) the current
* view will navigate to the previous view in the stack.
*
* For examples on the basic usage of NavController, check out the [Navigation section](../../../../components/#navigation)
* of the Component docs. The following is a more in depth explanation of some
* of the features of NavController.
*
* Unless you are using a directive like [NavPush](../NavPush/), or need a
* specific NavController, most times you will inject and use a reference to the
* nearest NavController to manipulate the navigation stack.
*
* <h3 id="injecting_nav_controller">Injecting NavController</h3>
* Injecting NavController will always get you an instance of the nearest NavController,
* regardless of whether it is a Tab or a Nav.
*
* Behind the scenes, when Ionic instantiates a new NavController, it creates an
* injector with NavController bound to that instance (usually either a Nav or Tab)
* and adds the injector to its own bindings. For more information on binding
* and dependency injection, see [Binding and DI]().
*
* ```ts
* // class NavController
* //"this" is either Nav or Tab, both extend NavController
* this.bindings = Injector.resolve([
* bind(NavController).toValue(this)
* ]);
* ```
*
* That way you don't need to worry about getting a hold of the proper NavController
* for views that may be used in either a Tab or a Nav:
*
* ```ts
* class MyPage {
* constructor(@Optional() tab: Tab, @Optional() nav: Nav) {
* // Unhhhhh so much typinggggg
* // What if we are in a nav that is in a tab, or vice versa, so these both resolve?
* }
* }
* ```
*
* Instead, you can inject NavController and know that it is the correct
* navigation controller for most situations (for more advanced situations, see
* [Menu](../../Menu/Menu/) and [Tab](../../Tab/Tab/)).
*
* ```ts
* class MyComponent {
* constructor(nav: NavController) {
* this.nav = nav;
* }
* }
* ```
*
* <h2 id="creating_views">View creation</h2>
* Views are created when they are added to the navigation stack. For methods
* like [push()](#push), the NavController takes any component class that is
* decorated with [@IonicView](../../../config/IonicView/) as its first
* argument. The NavController then [compiles]() that component, adds it to the
* DOM in a similar fashion to Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html),
* and animates it into view.
*
* By default, views are cached and left in the DOM if they are navigated away from but
* still in the navigation stack (the exiting view on a `push()` for example). They are
* destroyed when removed from the navigation stack (on [pop()](#pop) or [setRoot()](#setRoot)).
*
*
* <h2 id="Lifecycle">Lifecycle events</h2>
* Lifecycle events are fired during various stages of navigation. They can be
* defined in any `@IonicView` decorated component class.
*
* ```ts
* @IonicView({
* template: 'Hello World'
* })
* class HelloWorld {
* onViewLoaded() {
* console.log("I'm alive!");
* }
* }
* ```
*
* - `onViewLoaded` - Runs when the view has loaded. This event only happens once per view being created and added to the DOM. If a view leaves but is cached, then this event will not fire again on a subsequent viewing. The `onViewLoaded` event is good place to put your setup code for the view.
* - `onViewWillEnter` - Runs when the view is about to enter and become the active view.
* - `onViewDidEnter` - Runs when the view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view.
* - `onViewWillLeave` - Runs when the view is about to leave and no longer be the active view.
* - `onViewDidLeave` - Runs when the view has finished leaving and is no longer the active view.
* - `onViewWillUnload` - Runs when the view is about to be destroyed and have its elements removed.
* - `onViewDidUnload` - Runs after the view has been destroyed and its elements have been removed.
*
*/
export class NavController extends Ion {
@@ -46,8 +134,8 @@ export class NavController extends Ion {
this.views = [];
this._sbTrans = null;
this._sbEnabled = config.setting('swipeBackEnabled') || false;
this._sbThreshold = config.setting('swipeBackThreshold') || 40;
this._sbEnabled = config.get('swipeBackEnabled') || false;
this._sbThreshold = config.get('swipeBackThreshold') || 40;
this.id = ++ctrlIds;
this._ids = -1;
@@ -333,7 +421,7 @@ export class NavController extends Ion {
}
if (!opts.animation) {
opts.animation = this.config.setting('viewTransition');
opts.animation = this.config.get('viewTransition');
}
// wait for the new view to complete setup

38
ionic/components/nav/nav.ts
View File

@@ -5,12 +5,38 @@ import {IonicComponent} from '../../config/decorators';
import {NavController} from './nav-controller';
/**
* Nav is a basic navigation controller component. It handles animating between
* incoming and outgoing views, and as a subclass of [NavController](../NavController/)
* it also exposes the underlying navigation stack.
* Nav is a basic navigation controller component. As a subclass of [NavController](../NavController/)
* you use it to navigate to views in your app and manipulate the navigation stack.
* Nav automatically animates transitions between views for you.
*
* For more information on using navigation controllers like Nav or [Tabs](../../Tabs/Tabs/),
* please take a look at the [NavController API reference](../NavController/).
* take a look at the [NavController API reference](../NavController/).
*
* You must set a root view to be loaded initially for any Nav you create, using
* the 'root' property:
*
* ```ts
* import {GettingStartedPage} from 'getting-started';
* @App({
* template: `<ion-nav [root]="rootPage"></ion-nav>`
* })
* class MyApp {
* constructor(){
* this.rootPage = GettingStartedPage;
* }
* }
* ```
*
* <h2 id="back_navigation">Back navigation</h2>
* If a [view](../NavController/#creating_views) you navigate to has a [NavBar](../NavBar/),
* Nav will automatically add a back button to it if there is a view
* before the one you are navigating to in the navigation stack.
*
* Additionally, specifying the `swipe-back-enabled` property will allow you to
* swipe to go back:
* ```ts
* <ion-nav swipe-back-enabled="false" [root]="rootPage"></ion-nav>
* ```
*
* Here is a diagram of how Nav animates smoothly between [views](../NavController/#creating_views):
*
@@ -66,8 +92,8 @@ import {NavController} from './nav-controller';
*
* ### Panes
*
* NOTE: You don't have to do anything with panes, it is all taken care of for you.
* This is just an explanation of how Nav works to accompany the diagram above.
* NOTE: You don't have to do anything with panes, Ionic takes care of animated
* transitions for you. This is an explanation of how Nav works to accompany the diagram above.
*
* When you push a new view onto the navigation stack using [NavController.push()](../NavController/#push)
* or the [NavPush directive](../NavPush/), Nav animates the new view into the

2
ionic/components/overlay/overlay.ts
View File

@@ -11,7 +11,7 @@ export class Overlay {
constructor(app: IonicApp, config: IonicConfig) {
this.app = app;
this.config = config;
this.mode = config.setting('mode');
this.mode = config.get('mode');
}
create(overlayType, componentType: Type, opts={}, context=null) {

4
ionic/components/popup/popup.ts
View File

@@ -74,8 +74,8 @@ export class Popup extends Overlay {
return new Promise((resolve, reject)=> {
let config = this.config;
let defaults = {
enterAnimation: config.setting('popupPopIn'),
leaveAnimation: config.setting('popupPopOut'),
enterAnimation: config.get('popupPopIn'),
leaveAnimation: config.get('popupPopOut'),
};
opts.promiseResolve = resolve;

2
ionic/components/switch/switch.ts
View File

@@ -130,7 +130,7 @@ export class Switch extends Ion {
self.id = IonInput.nextId();
self.tabIndex = 0;
self.lastTouch = 0;
self.mode = config.setting('mode');
self.mode = config.get('mode');
self.onChange = (_) => {};
self.onTouched = (_) => {};

35
ionic/components/tabs/tab.ts
View File

@@ -7,14 +7,37 @@ import {Tabs} from './tabs';
/**
* @name ionTab
* @requires ionTabs
* @description
* Contains a tab's content. The content only exists while the given tab is selected.
* Tab components are basic navigation controllers used with [Tabs](). Much like
* [Nav](), they are a subclass of [NavController]() and are used to navigate to
* views and manipulate the navigation stack of a particular tab.
*
* @usage
* For basic Tabs usage, see the [Tabs section]() of the component docs.
*
* Like Nav, you must set a root view to be loaded initially for each Tab with
* the 'root' property:
* ```
* import {GettingStartedPage} from 'getting-started';
* @App({
* template: `<ion-tabs>
* <ion-tab [root]="tabOneRoot"></ion-tab>
* <ion-tab [root]="tabTwoRoot"></ion-tab>
* <ion-tabs>`
* })
* class MyApp {
* constructor(){
* this.tabOneRoot = GettingStartedPage;
* this.tabTwoRoot = GettingStartedPage;
* }
* }
* ```
*
* To change the title and icon for each tab, use the `tab-title` and `tab-icon`
* properties:
* ```html
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
* <ion-tabs>
* <ion-tab tab-title="Home" tab-icon="home" [root]="tabOneRoot"></ion-tab>
* <ion-tab tab-title="Login" tab-icon="star" [root]="tabTwoRoot"></ion-tab>
* <ion-tabs>
* ```
*/
@Component({

76
ionic/components/tabs/tabs.ts
View File

@@ -11,28 +11,49 @@ import * as dom from 'ionic/util/dom';
/**
* @name ionTabs
* @description
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages"
* that can be tabbed through.
* The Tabs component is a container with a [TabBar]() and any number of
* individual [Tab]() components. On iOS, the TabBar is placed on the bottom of
* the screen, while on Android it is at the top.
*
* Assign any tabs attribute to the element to define its look and feel.
* For basic Tabs usage, see the [Tabs section](../../../../components/#tabs) of the component docs.
* See the [Tab API reference](../Tab/) for more details on individual Tab components.
*
* For iOS, tabs will appear at the bottom of the screen. For Android, tabs
* will be at the top of the screen, below the nav-bar. This follows each platform's
* design specification, but can be configured with IonicConfig.
* You can override the platform specific TabBar placement by using the
* `tab-bar-placement` property:
*
* See the ionTab component's documentation for more details on individual tabs.
*
* @usage
* ```html
* <ion-tabs>
* <ion-tab tab-title="Heart" tab-icon="heart-" [root]="root1"></ion-tab>
* <ion-tab tab-title="Star" tab-icon="star" [root]="root2"></ion-tab>
* <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
* ```ts
* <ion-tabs tab-bar-placement="top">
* <ion-tab [root]="tabRoot"></ion-tab>
* </ion-tabs>
* ```
*
* To change the location of the icons in the TabBar, use the `tab-bar-icons`
* property:
* ```ts
* <ion-tabs tab-bar-icons="bottom">
* <ion-tab [root]="tabRoot"></ion-tab>
* </ion-tabs>
* ```
*
* You can select tabs programatically by injecting Tabs into any child
* component, and using the [select()](#select) method:
* ```ts
* @IonicView({
* template: `<button (click)="goToTabTwo()">Go to Tab2</button>`
* })
* class TabOne {
* constructor(tabs: Tabs){
* this.tabs = tabs;
* }
*
* goToTabTwo() {
* this.tabs.select(this.tabs.tabs[1]);
* }
* }
* ```
* The [tabs](#tabs) property is an array of all child [Tab](../Tab/) components
* of this Tabs component.
*
*/
@IonicComponent({
selector: 'ion-tabs',
@@ -111,6 +132,10 @@ export class Tabs extends NavController {
}
/**
* @private
* TODO
*/
addTab(tab) {
this.add(tab.viewCtrl);
@@ -162,6 +187,7 @@ export class Tabs extends NavController {
}
/**
* @private
* "Touch" the active tab, either going back to the root view of the tab
* or scrolling the tab to the top
*/
@@ -174,6 +200,10 @@ export class Tabs extends NavController {
}
}
/**
* TODO
* @return TODO
*/
get tabs() {
return this.instances();
}
@@ -181,6 +211,7 @@ export class Tabs extends NavController {
}
/**
* @private
* TODO
*/
@Directive({
@@ -202,7 +233,7 @@ class TabButton extends Ion {
super(elementRef, config);
this.tabs = tabs;
if (config.setting('hoverCSS') === false) {
if (config.get('hoverCSS') === false) {
elementRef.nativeElement.classList.add('disable-hover');
}
}
@@ -226,13 +257,16 @@ class TabButton extends Ion {
}
}
/**
* @private
* TODO
*/
@Directive({
selector: 'tab-highlight'
})
class TabHighlight {
constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
if (config.setting('mode') === 'md') {
if (config.get('mode') === 'md') {
tabs.highlight = this;
this.elementRef = elementRef;
}
@@ -256,6 +290,10 @@ class TabHighlight {
}
/**
* @private
* TODO
*/
@Directive({selector: 'template[navbar-anchor]'})
class TabNavBarAnchor {
constructor(

2
ionic/components/tap-click/activator.ts
View File

@@ -9,7 +9,7 @@ export class Activator {
this.active = [];
this.clearStateTimeout = 180;
this.clearAttempt = 0;
this.activatedClass = config.setting('activatedClass') || 'activated';
this.activatedClass = config.get('activatedClass') || 'activated';
this.x = 0;
this.y = 0;
}

4
ionic/components/tap-click/tap-click.ts
View File

@@ -18,9 +18,9 @@ export class TapClick {
self.disableClick = 0;
self.disableClickLimit = 1000;
self.tapPolyfill = (config.setting('tapPolyfill') !== false);
self.tapPolyfill = (config.get('tapPolyfill') !== false);
if (config.setting('mdRipple')) {
if (config.get('mdRipple')) {
self.activator = new RippleActivator(app, config);
} else {
self.activator = new Activator(app, config);

2
ionic/components/text-input/label.ts
View File

@@ -26,7 +26,7 @@ export class Label {
* @param {IonicConfig} config
*/
constructor(config: IonicConfig) {
this.scrollAssist = config.setting('keyboardScrollAssist');
this.scrollAssist = config.get('keyboardScrollAssist');
}
/**

4
ionic/components/text-input/text-input.ts
View File

@@ -111,7 +111,7 @@ export class TextInput extends Ion {
super(elementRef, config);
this.scrollView = scrollView;
this.scrollAssist = config.setting('keyboardScrollAssist');
this.scrollAssist = config.get('keyboardScrollAssist');
this.id = IonInput.nextId();
IonInput.registerInput(this);
@@ -121,7 +121,7 @@ export class TextInput extends Ion {
this.inputQry = inputQry;
this.labelQry = labelQry;
this.keyboardHeight = this.config.setting('keyboardHeight');
this.keyboardHeight = this.config.get('keyboardHeight');
}
/**

266
ionic/config/config.ts
View File

@@ -1,4 +1,4 @@
import {IonicPlatform} from '../platform/platform';
import {isObject, isDefined, isFunction, extend} from '../util/util';
/**
@@ -10,56 +10,129 @@ export class IonicConfig {
* TODO
* @param {Object} settings The settings for your app
*/
constructor(settings) {
constructor(settings={}) {
this._s = settings;
this._c = {}; // cached values
}
// defaults
this._settings = {};
/**
* For setting and getting multiple config values
*/
settings() {
const args = arguments;
switch (args.length) {
case 0:
return this._s;
case 1:
// settings({...})
this._s = args[0];
this._c = {}; // clear cache
break;
case 2:
// settings('ios', {...})
this._s.platforms = this._s.platforms || {};
this._s.platforms[args[0]] = args[1];
this._c = {}; // clear cache
break;
// override defaults w/ user config
if (settings) {
extend(this._settings, settings);
}
}
get(key) {
let settings = this._settings;
/**
* For setting a single config values
*/
set() {
const args = arguments;
const arg0 = args[0];
const arg1 = args[1];
if (!isDefined(this._settings[key])) {
switch (args.length) {
case 2:
// set('key', 'value') = set key/value pair
// arg1 = value
this._s[arg0] = arg1;
delete this._c[arg0]; // clear cache
break;
case 3:
// setting('ios', 'key', 'value') = set key/value pair for platform
// arg0 = platform
// arg1 = key
// arg2 = value
this._s.platforms = this._s.platforms || {};
this._s.platforms[arg0] = this._s.platforms[arg0] || {};
this._s.platforms[arg0][arg1] = args[2];
delete this._c[arg1]; // clear cache
break;
}
return this;
}
/**
* For getting a single config values
*/
get(key) {
if (!isDefined(this._c[key])) {
// if the value was already set this will all be skipped
// if there was no user config then it'll check each of
// the user config's platforms, which already contains
// settings from default platform configs
this._settings[key] = null;
this._c[key] = null;
// check the platform settings object for this value
// loop though each of the active platforms
let activePlatformKeys = this._platforms;
let platformSettings = this._settings.platforms;
let platformObj = null;
if (platformSettings) {
let platformValue = undefined;
let userPlatformValue = undefined;
let platformValue = undefined;
let userDefaultValue = this._s[key];
let modeValue = undefined;
if (this._platform) {
// check the platform settings object for this value
// loop though each of the active platforms
let platformObj = null;
// array of active platforms, which also knows the hierarchy,
// with the last one the most important
let activePlatformKeys = this._platform.platforms();
// loop through all of the active platforms we're on
for (let i = 0; i < activePlatformKeys.length; i++) {
platformObj = platformSettings[ activePlatformKeys[i] ];
if (platformObj) {
if (isDefined(platformObj[key])) {
// check assigned platform settings
platformValue = platformObj[key];
} else if (platformObj.mode) {
// check the platform default mode settings
platformObj = IonicConfig.modeConfig(platformObj.mode);
if (platformObj) {
platformValue = platformObj[key];
}
// get user defined platform values
if (this._s.platforms) {
platformObj = this._s.platforms[ activePlatformKeys[i] ];
if (platformObj && isDefined(platformObj[key])) {
userPlatformValue = platformObj[key];
}
}
}
if (isDefined(platformValue)) {
this._settings[key] = platformValue;
// get default platform's setting
platformObj = IonicPlatform.get(activePlatformKeys[i]);
if (platformObj && platformObj.settings) {
if (isDefined(platformObj.settings[key])) {
// found a setting for this platform
platformValue = platformObj.settings[key];
}
platformObj = IonicConfig.modeConfig(platformObj.settings.mode);
if (platformObj && isDefined(platformObj[key])) {
// found setting for this platform's mode
modeValue = platformObj[key];
}
}
}
}
// cache the value
this._c[key] = isDefined(userPlatformValue) ? userPlatformValue : isDefined(platformValue) ? platformValue : isDefined(userDefaultValue) ? userDefaultValue : isDefined(modeValue) ? modeValue : null;
}
// return key's value
@@ -67,124 +140,11 @@ export class IonicConfig {
// or it was from the users platform configs
// or it was from the default platform configs
// in that order
if (isFunction(this._settings[key])) {
this._settings[key] = settings[key](this._platform);
}
return this._settings[key];
}
/**
* TODO
*/
setting() {
const args = arguments;
const arg0 = args[0];
const arg1 = args[1];
let settings = this._settings;
switch (args.length) {
case 0:
// setting() = get settings object
return settings;
case 1:
// setting({...}) = set settings object
// setting('key') = get value
if (isObject(arg0)) {
// setting({...}) = set settings object
// arg0 = setting object
this._settings = arg0;
return this;
}
// time for the big show, get the value
// setting('key') = get value
// arg0 = key
if (!isDefined(settings[arg0])) {
// if the value was already set this will all be skipped
// if there was no user config then it'll check each of
// the user config's platforms, which already contains
// settings from default platform configs
settings[arg0] = null;
// check the platform settings object for this value
// loop though each of the active platforms
let activePlatformKeys = this._platforms;
let platformSettings = settings.platforms;
let platformObj = null;
if (platformSettings) {
let platformValue = undefined;
for (let i = 0; i < activePlatformKeys.length; i++) {
platformObj = platformSettings[ activePlatformKeys[i] ];
if (platformObj) {
if (isDefined(platformObj[arg0])) {
// check assigned platform settings
platformValue = platformObj[arg0];
} else if (platformObj.mode) {
// check the platform default mode settings
platformObj = IonicConfig.modeConfig(platformObj.mode);
if (platformObj) {
platformValue = platformObj[arg0];
}
}
}
}
if (isDefined(platformValue)) {
settings[arg0] = platformValue;
}
}
}
// return key's value
// either it came directly from the user config
// or it was from the users platform configs
// or it was from the default platform configs
// in that order
if (isFunction(settings[arg0])) {
settings[arg0] = settings[arg0](this._platform);
}
return settings[arg0];
case 2:
// setting('ios', {...}) = set platform config object
// setting('key', 'value') = set key/value pair
if (isObject(arg1)) {
// setting('ios', {...}) = set platform config object
// arg0 = platform
// arg1 = platform config object
settings.platforms = settings.platforms || {};
settings.platforms[arg0] = arg1;
} else {
// setting('key', 'value') = set key/value pair
// arg0 = key
// arg1 = value
settings[arg0] = arg1;
}
return this;
case 3:
// setting('ios', 'key', 'value') = set key/value pair for platform
// arg0 = platform
// arg1 = key
// arg2 = value
settings.platforms = settings.platforms || {};
settings.platforms[arg0] = settings.platforms[arg0] || {};
settings.platforms[arg0][arg1] = args[2];
return this;
if (isFunction(this._c[key])) {
return this._c[key](this._platform);
}
return this._c[key];
}
/**
@@ -193,14 +153,6 @@ export class IonicConfig {
*/
setPlatform(platform) {
this._platform = platform;
// get the array of active platforms, which also knows the hierarchy,
// with the last one the most important
this._platforms = platform.platforms();
// copy default platform settings into the user config platform settings
// user config platform settings should override default platform settings
this._settings.platforms = extend(platform.settings(), this._settings.platforms || {});
}
static modeConfig(mode, config) {

12
ionic/config/decorators.ts
View File

@@ -26,7 +26,6 @@ import {
* template.
*/
export const IONIC_DIRECTIVES = [
// TODO: Why is forwardRef() required when they're already imported above????
// Angular
CORE_DIRECTIVES,
FORM_DIRECTIVES,
@@ -95,6 +94,9 @@ export const IONIC_DIRECTIVES = [
forwardRef(() => HideWhen)
];
/**
* @private
*/
class IonicViewImpl extends View {
constructor(args = {}) {
args.directives = (args.directives || []).concat(IONIC_DIRECTIVES);
@@ -103,7 +105,13 @@ class IonicViewImpl extends View {
}
/**
* TODO
* the IonicView decorator indicates that the decorated class is an Ionic
* navigation view, meaning it can be navigated to using a [NavController](../../Nav/NavController/)
*
* Ionic views are automatically wrapped in `<ion-view>`, so although you may
* see these tags if you inspect your markup, you don't need to include them in
* your templates.
*
*/
export function IonicView(args) {
return function(cls) {

205
ionic/config/test/config.spec.ts
View File

@@ -2,9 +2,206 @@ import {IonicConfig, IonicPlatform} from 'ionic/ionic';
export function run() {
it('should get ios mode for core platform', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['core']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('ios');
});
it('should get ios mode for ipad platform', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['mobile', 'ios', 'ipad', 'tablet']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('ios');
});
it('should get md mode for windowsphone platform', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['mobile', 'windowsphone']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('md');
});
it('should get md mode for android platform', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['mobile', 'android']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('md');
});
it('should override ios mode config with user platform setting', () => {
let config = new IonicConfig({
tabBarPlacement: 'hide',
platforms: {
ios: {
tabBarPlacement: 'top'
}
}
});
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should override ios mode config with user setting', () => {
let config = new IonicConfig({
tabBarPlacement: 'top'
});
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should get setting from md mode', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['android']);
config.setPlatform(platform);
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should get setting from ios mode', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
expect(config.get('tabBarPlacement')).toEqual('bottom');
});
it('should set/get platform setting from set()', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
config.set('tabBarPlacement', 'bottom');
config.set('ios', 'tabBarPlacement', 'top');
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should set/get setting from set()', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
config.set('tabBarPlacement', 'top');
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should set ios platform settings from settings()', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
config.settings('ios', {
key: 'iosValue'
});
expect(config.get('key')).toEqual('iosValue');
});
it('should set/get mobile setting even w/ higher priority ios', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['mobile', 'ios']);
config.setPlatform(platform);
config.settings({
key: 'defaultValue',
platforms: {
mobile: {
key: 'mobileValue'
}
}
});
expect(config.get('key')).toEqual('mobileValue');
});
it('should set/get mobile setting even w/ higher priority ios', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['mobile', 'ios']);
config.setPlatform(platform);
config.settings({
key: 'defaultValue',
platforms: {
mobile: {
key: 'mobileValue'
}
}
});
expect(config.get('key')).toEqual('mobileValue');
});
it('should set/get android setting w/ higher priority than mobile', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['mobile', 'android']);
config.setPlatform(platform);
config.settings({
key: 'defaultValue',
platforms: {
mobile: {
key: 'mobileValue'
},
android: {
key: 'androidValue'
}
}
});
expect(config.get('key')).toEqual('androidValue');
});
it('should set/get ios setting w/ platforms set', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
config.settings({
key: 'defaultValue',
platforms: {
ios: {
key: 'iosValue'
},
android: {
key: 'androidValue'
}
}
});
expect(config.get('key')).toEqual('iosValue');
});
it('should set/get default setting w/ platforms set, but no platform match', () => {
let config = new IonicConfig();
config.settings({
key: 'defaultValue',
platforms: {
ios: {
key: 'iosValue'
},
android: {
key: 'androidValue'
}
}
});
expect(config.get('key')).toEqual('defaultValue');
});
it('should set setting object', () => {
let config = new IonicConfig();
config.setting({
config.settings({
name: 'Doc Brown',
occupation: 'Weather Man'
});
@@ -26,8 +223,8 @@ export function run() {
it('should set/get single setting', () => {
let config = new IonicConfig();
config.setting('name', 'Doc Brown');
config.setting('occupation', 'Weather Man');
config.set('name', 'Doc Brown');
config.set('occupation', 'Weather Man');
expect(config.get('name')).toEqual('Doc Brown');
expect(config.get('name')).toEqual('Doc Brown');
@@ -50,7 +247,7 @@ export function run() {
occupation: 'Weather Man'
});
expect(config.setting()).toEqual({
expect(config.settings()).toEqual({
name: 'Doc Brown',
occupation: 'Weather Man'
});

19
ionic/platform/platform.ts
View File

@@ -7,9 +7,8 @@ import * as dom from '../util/dom';
*/
export class IonicPlatform {
constructor() {
this._settings = {};
this._platforms = [];
constructor(platforms=[]) {
this._platforms = platforms;
this._versions = {};
this._onResizes = [];
@@ -283,12 +282,12 @@ export class IonicPlatform {
* TODO
* @param {TODO} config TODO
*/
load(config) {
load(platformOverride) {
let rootPlatformNode = null;
let engineNode = null;
let self = this;
this.platformOverride = config.setting('platform');
this.platformOverride = platformOverride;
// figure out the most specific platform and active engine
let tmpPlatform = null;
@@ -359,9 +358,6 @@ export class IonicPlatform {
// the last one in the array the most important
this._platforms.push(platformNode.name());
// copy default platform settings into this platform settings obj
this._settings[platformNode.name()] = util.extend({}, platformNode.settings());
// get the platforms version if a version parser was provided
this._versions[platformNode.name()] = platformNode.version(this);
@@ -394,13 +390,6 @@ export class IonicPlatform {
return rootNode;
}
settings(val) {
if (arguments.length) {
this._settings = val;
}
return this._settings;
}
}
function insertSuperset(platformNode) {

49
ionic/platform/test/platform.spec.ts
View File

@@ -1,13 +1,21 @@
import {IonicConfig, IonicPlatform} from 'ionic/ionic';
import {IonicPlatform} from 'ionic/ionic';
export function run() {
it('should set core as the fallback', () => {
let platform = new IonicPlatform();
platform.userAgent('idk');
platform.load();
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('core')).toEqual(true);
});
it('should set android via platformOverride, despite ios user agent', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
config.setting('platform', 'android');
platform.userAgent(IPAD_UA);
platform.load(config);
platform.load('android');
expect(platform.is('android')).toEqual(true);
expect(platform.is('ios')).toEqual(false);
@@ -15,10 +23,8 @@ export function run() {
it('should set ios via platformOverride, despite android querystring', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
config.setting('platform', 'ios');
platform.url('/?ionicplatform=android');
platform.load(config);
platform.load('ios');
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(true);
@@ -26,9 +32,7 @@ export function run() {
it('should set ios via platformOverride', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
config.setting('platform', 'ios');
platform.load(config);
platform.load('ios');
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(true);
@@ -36,9 +40,7 @@ export function run() {
it('should set android via platformOverride', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
config.setting('platform', 'android');
platform.load(config);
platform.load('android');
expect(platform.is('android')).toEqual(true);
expect(platform.is('ios')).toEqual(false);
@@ -46,9 +48,8 @@ export function run() {
it('should set ios via querystring', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.url('/?ionicplatform=ios');
platform.load(config);
platform.load();
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('android')).toEqual(false);
@@ -58,10 +59,9 @@ export function run() {
it('should set ios via querystring, even with android user agent', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.url('/?ionicplatform=ios');
platform.userAgent(ANDROID_UA);
platform.load(config);
platform.load();
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(true);
@@ -69,9 +69,8 @@ export function run() {
it('should set android via querystring', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.url('/?ionicplatform=android');
platform.load(config);
platform.load();
expect(platform.is('android')).toEqual(true);
expect(platform.is('ios')).toEqual(false);
@@ -79,10 +78,9 @@ export function run() {
it('should set android via querystring, even with ios user agent', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.url('/?ionicplatform=android');
platform.userAgent(IPHONE_UA);
platform.load(config);
platform.load();
expect(platform.is('android')).toEqual(true);
expect(platform.is('ios')).toEqual(false);
@@ -90,9 +88,8 @@ export function run() {
it('should set android via user agent', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.userAgent(ANDROID_UA);
platform.load(config);
platform.load();
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('android')).toEqual(true);
@@ -101,9 +98,8 @@ export function run() {
it('should set iphone via user agent', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.userAgent(IPHONE_UA);
platform.load(config);
platform.load();
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('android')).toEqual(false);
@@ -114,9 +110,8 @@ export function run() {
it('should set ipad via user agent', () => {
let platform = new IonicPlatform();
let config = new IonicConfig();
platform.userAgent(IPAD_UA);
platform.load(config);
platform.load();
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('android')).toEqual(false);

22
ionic/transitions/ios-transition.ts
View File

@@ -26,7 +26,7 @@ class IOSTransition extends Transition {
this.enteringContent
.to(TRANSLATEX, CENTER)
.to(OPACITY, 1)
.before.setStyles({ zIndex: this.entering.index });
.before.setStyles({ zIndex: this.enteringZ });
this.enteringTitle
.fadeIn()
@@ -36,16 +36,16 @@ class IOSTransition extends Transition {
.to(TRANSLATEX, CENTER);
// leaving view moves off screen
this.leavingContent && this.leavingContent
this.leavingContent
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1)
.before.setStyles({ zIndex: this.leaving.index });
.before.setStyles({ zIndex: this.leavingZ });
this.leavingTitle && this.leavingTitle
this.leavingTitle
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
this.leavingNavbarBg && this.leavingNavbarBg
this.leavingNavbarBg
.from(TRANSLATEX, CENTER);
// set properties depending on direction
@@ -62,15 +62,15 @@ class IOSTransition extends Transition {
this.enteringNavbarBg
.from(TRANSLATEX, OFF_LEFT);
this.leavingContent && this.leavingContent
this.leavingContent
.to(TRANSLATEX, '100%')
.to(OPACITY, 1);
this.leavingTitle && this.leavingTitle
this.leavingTitle
.to(TRANSLATEX, '100%')
.to(OPACITY, 0);
this.leavingNavbarBg && this.leavingNavbarBg
this.leavingNavbarBg
.to(TRANSLATEX, '100%');
if (this.leaving && this.leaving.enableBack() && this.viewWidth() > 200) {
@@ -91,15 +91,15 @@ class IOSTransition extends Transition {
this.enteringNavbarBg
.from(TRANSLATEX, '99.5%');
this.leavingContent && this.leavingContent
this.leavingContent
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
this.leavingTitle && this.leavingTitle
this.leavingTitle
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, 0);
this.leavingNavbarBg && this.leavingNavbarBg
this.leavingNavbarBg
.to(TRANSLATEX, OFF_LEFT);
if (this.entering.enableBack() && this.viewWidth() > 200) {

16
ionic/transitions/md-transition.ts
View File

@@ -15,19 +15,19 @@ class MaterialTransition extends Transition {
// entering item moves in bottom to center
this.enteringContent
.to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index });
.before.setStyles({ zIndex: this.enteringZ });
// entering item moves in bottom to center
this.enteringNavbar
.to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index + 10 });
.before.setStyles({ zIndex: this.enteringZ + 10 });
// leaving view stays put
this.leavingContent && this.leavingContent
.before.setStyles({ zIndex: this.leaving.index });
this.leavingContent
.before.setStyles({ zIndex: this.leavingZ });
this.leavingNavbar && this.leavingNavbar
.before.setStyles({ zIndex: this.leaving.index + 10 });
this.leavingNavbar
.before.setStyles({ zIndex: this.leavingZ + 10 });
// set properties depending on direction
if (opts.direction === 'back') {
@@ -41,11 +41,11 @@ class MaterialTransition extends Transition {
.from(TRANSLATEY, CENTER);
// leaving view goes center to bottom
this.leavingContent && this.leavingContent
this.leavingContent
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut();
this.leavingNavbar && this.leavingNavbar
this.leavingNavbar
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut();

52
ionic/transitions/transition.ts
View File

@@ -17,60 +17,62 @@ export class Transition extends Animation {
let entering = this.entering = nav.getStagedEnteringView();
let leaving = this.leaving = nav.getStagedLeavingView();
this.enteringZ = entering.index;
this.leavingZ = (leaving && leaving.index) || 0;
// create animation for the entering view's content area
this.enteringContent = new Animation(entering.viewElementRef());
this.enteringContent.before.addClass(SHOW_VIEW_CSS);
this.add(this.enteringContent);
let enteringNavbar = this.enteringNavbar = new Animation(entering.navbarRef());
this.enteringBackButton = new Animation(entering.backBtnRef());
this.enteringTitle = new Animation(entering.titleRef());
this.enteringNavbarItems = new Animation(entering.navbarItemRefs());
this.enteringNavbarBg = new Animation(entering.navbarBgRef());
if (opts.navbar !== false) {
let enteringNavbar = this.enteringNavbar = new Animation(entering.navbarRef());
enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
if (entering.enableBack()) {
// only animate in the back button if the entering view has it enabled
let enteringBackButton = this.enteringBackButton = new Animation(entering.backBtnRef());
enteringBackButton
this.enteringBackButton
.before.addClass(SHOW_BACK_BUTTON)
.fadeIn();
enteringNavbar.add(enteringBackButton);
enteringNavbar.add(this.enteringBackButton);
}
this.enteringTitle = new Animation(entering.titleRef());
enteringNavbar.add(this.enteringTitle);
enteringNavbar
.add(this.enteringTitle)
.add(this.enteringNavbarItems.fadeIn())
.add(this.enteringNavbarBg);
this.add(enteringNavbar);
this.enteringNavbarItems = new Animation(entering.navbarItemRefs());
enteringNavbar.add(this.enteringNavbarItems.fadeIn());
this.enteringNavbarBg = new Animation(entering.navbarBgRef());
enteringNavbar.add(this.enteringNavbarBg);
}
this.leavingContent = new Animation(leaving && leaving.viewElementRef());
let leavingNavbar = this.leavingNavbar = new Animation(leaving && leaving.navbarRef());
this.leavingBackButton = new Animation(leaving && leaving.backBtnRef());
this.leavingTitle = new Animation(leaving && leaving.titleRef());
this.leavingNavbarItems = new Animation(leaving && leaving.navbarItemRefs());
this.leavingNavbarBg = new Animation(leaving && leaving.navbarBgRef());
if (leaving) {
// setup the leaving item if one exists (initial viewing wouldn't have a leaving item)
this.leavingContent = new Animation(leaving.viewElementRef());
this.leavingContent.after.removeClass(SHOW_VIEW_CSS);
let leavingNavbar = this.leavingNavbar = new Animation(leaving.navbarRef());
leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
let leavingBackButton = this.leavingBackButton = new Animation(leaving.backBtnRef());
leavingBackButton
this.leavingBackButton
.after.removeClass(SHOW_BACK_BUTTON)
.fadeOut();
leavingNavbar.add(leavingBackButton);
this.leavingTitle = new Animation(leaving.titleRef());
leavingNavbar.add(this.leavingTitle);
this.leavingNavbarItems = new Animation(leaving.navbarItemRefs());
leavingNavbar.add(this.leavingNavbarItems.fadeOut());
this.leavingNavbarBg = new Animation(leaving.navbarBgRef());
leavingNavbar.add(this.leavingNavbarBg);
leavingNavbar
.add(this.leavingBackButton)
.add(this.leavingTitle)
.add(this.leavingNavbarItems.fadeOut())
.add(this.leavingNavbarBg);
this.add(this.leavingContent, leavingNavbar);
}