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

alpha39 updates

Browse Source
This commit is contained in:
Adam Bradley
2015-10-07 10:51:08 -05:00
parent a960069d01
commit 1befe94802
20 changed files with 55 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/app/structure.scss
View File

@ -131,7 +131,7 @@ ion-view {
}
}
.no-navbar > .navbar-container {
[no-navbar] > .navbar-container {
display: none;
}

26
ionic/components/card/card.ts
View File

@ -1,24 +1,12 @@
import {ElementRef} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicDirective} from '../../config/decorators';
import {ListVirtualScroll} from './virtual';
import * as util from 'ionic/util';
import {Directive} from 'angular2/angular2';
/**
* TODO
*/
@IonicDirective({
selector: 'ion-card'
})
export class Card extends Ion {
/**
* TODO
* @param {ElementeRef} elementRef TODO
* @param {IonicConfig} ionicConfig TODO
*/
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
@Directive({
selector: 'ion-card',
host: {
'class': 'card'
}
}
})
export class Card {}

11
ionic/components/checkbox/checkbox.ts
View File

@ -1,15 +1,8 @@
import {
View,
Directive,
ElementRef,
Optional,
NgControl
} from 'angular2/angular2';
import {Component, View, Directive, ElementRef, Optional, NgControl} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonInput} from '../form/input';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/decorators';
/**
* The checkbox is no different than the HTML checkbox input, except it's styled differently
@ -23,7 +16,7 @@ import {IonicComponent} from '../../config/decorators';
* </ion-checkbox>
* ```
*/
@IonicComponent({
@Component({
selector: 'ion-checkbox',
inputs: [
'value',

1
ionic/components/content/content.ts
View File

@ -3,7 +3,6 @@ import {Component, View, ElementRef, Optional, Host} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicPlatform} from '../../platform/platform';
import {IonicComponent} from '../../config/decorators';
import {ViewController} from '../nav/view-controller';
import {Tab} from '../tabs/tab';
import {ScrollTo} from '../../animations/scroll-to';

27
ionic/components/item/item.ts
View File

@ -1,6 +1,4 @@
import {Component, Directive, View, ElementRef, NgIf, ViewQuery, QueryList} from 'angular2/angular2';
import * as util from 'ionic/util';
import {Component, View} from 'angular2/angular2';
/**
@ -31,25 +29,6 @@ import * as util from 'ionic/util';
'<ion-item-content>' +
'<ng-content></ng-content>'+
'</ion-item-content>' +
'<ng-content select="ion-item-options"></ng-content>' +
'<ng-content select="[item-right]"></ng-content>',
directives: [NgIf]
'<ng-content select="[item-right]"></ng-content>'
})
export class Item {
/**
* TODO
* @param {ElementRef} elementRef A reference to the component's DOM element.
*/
constructor(elementRef: ElementRef) {
this._isOpen = false;
this._isSlideActive = false;
this._isTransitioning = false;
this._transform = '';
this.ele = elementRef.nativeElement;
this.swipeButtons = {};
this.optionButtons = {};
}
}
export class Item {}

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

@ -2,7 +2,6 @@ import {Directive, ElementRef} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicDirective} from '../../config/decorators';
import {ListVirtualScroll} from './virtual';
import * as util from 'ionic/util';
@ -17,13 +16,16 @@ import * as util from 'ionic/util';
* interaction modes such as swipe to edit, drag to reorder, and removing items.
*
*/
@IonicDirective({
@Directive({
selector: 'ion-list',
inputs: [
'items',
'virtual',
'content'
]
],
host: {
'class': 'list'
}
})
export class List extends Ion {
/**

2
ionic/components/menu/test/basic/e2e.ts
View File

@ -5,5 +5,5 @@ it('should toggle open menu', function() {
it('should close menu', function() {
element(by.css('.e2eCloseMenu')).click();
element(by.css('[menu-close=leftMenu]')).click();
});

2
ionic/components/menu/test/basic/main.html
View File

@ -12,7 +12,7 @@
{{p.title}}
</button>
<button ion-item menu-toggle="leftMenu" detail-none class="e2eCloseMenu">
<button ion-item menu-close="leftMenu" detail-none>
Close Menu
</button>

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

@ -430,7 +430,7 @@ class Pane {
showNavbar(hasNavbar) {
this.navbar = hasNavbar;
if (!hasNavbar) {
this.renderer.setElementClass(this.elementRef, 'no-navbar', true);
this.renderer.setElementAttribute(this.elementRef, 'no-navbar', '');
}
}

7
ionic/components/radio/radio.ts
View File

@ -1,6 +1,5 @@
import {ElementRef, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
import {IonicDirective, IonicComponent} from '../../config/decorators';
import {IonicConfig} from '../../config/config';
import {Ion} from '../ion';
import {ListHeader} from '../list/list';
@ -43,7 +42,7 @@ import {ListHeader} from '../list/list';
* ```
*/
@IonicDirective({
@Directive({
selector: 'ion-radio-group',
host: {
'class': 'list',
@ -162,7 +161,7 @@ export class RadioGroup extends Ion {
* ```
*
*/
@IonicComponent({
@Component({
selector: 'ion-radio',
inputs: [
'value',

5
ionic/components/scroll/scroll.ts
View File

@ -1,8 +1,7 @@
import {View, ElementRef, onInit} from 'angular2/angular2';
import {Component, View, ElementRef, onInit} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/decorators';
import {Gesture} from '../../gestures/gesture';
import {CSS} from '../../util/dom';
import {Animation} from '../../animations/animation';
@ -13,7 +12,7 @@ import * as util from 'ionic/util';
* Scroll is a non-flexboxed scroll area that can scroll horizontally or
* vertically.
*/
@IonicComponent({
@Component({
selector: 'ion-scroll',
inputs: [
'scrollX', 'scrollY', 'zoom', 'maxZoom'

2
ionic/components/search-bar/search-bar.ts
View File

@ -1,5 +1,4 @@
import {ElementRef, Pipe, NgControl, Renderer, View} from 'angular2/angular2';
//import {ControlGroup} from 'angular2/forms'
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
@ -22,7 +21,6 @@ import {IonicComponent} from '../../config/decorators';
'query'
],
defaultInputs: {
'showCancel': false,
'cancelText': 'Cancel',
'placeholder': 'Search',

135
ionic/components/search-bar/search-bar.ts.orig
View File

@ -1,135 +0,0 @@
import {ElementRef, Pipe, NgControl, Renderer, View} from 'angular2/angular2';
//import {ControlGroup} from 'angular2/forms'
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/decorators';
/**
* @name Search Bar
* @description
* The Search Bar service adds an input field which can be used to search or filter items.
*
* @usage
* ```html
* <ion-search-bar ng-control="searchQuery"></ion-search-bar>
* ```
*/
@IonicComponent({
selector: 'ion-search-bar',
inputs: [
'list',
'query'
],
<<<<<<< HEAD
defaultInputs: {
=======
defaultProperties: {
'showCancel': false,
>>>>>>> master
'cancelText': 'Cancel',
'placeholder': 'Search',
'cancelAction': function() {
console.log('Default Cancel');
this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != '';
// TODO input blur
}
}
})
@View({
template: `
<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
<div class="search-bar-search-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">
<div class="search-bar-close-icon" (click)="clearInput()"></div>
</div>
<button *ng-if="showCancel" (click)="cancelAction()" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>`
})
export class SearchBar extends Ion {
/**
* TODO
* @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO
*/
constructor(
elementRef: ElementRef,
config: IonicConfig,
ngControl: NgControl,
renderer: Renderer
) {
super(elementRef, config);
this.renderer = renderer;
this.elementRef = elementRef;
if(!ngControl) {
// They don't want to do anything that works, so we won't do anything that breaks
return;
}
this.ngControl = ngControl;
ngControl.valueAccessor = this;
this.query = '';
}
/**
* Much like ngModel, this is called from our valueAccessor for the attached
* ControlDirective to update the value internally.
*/
writeValue(value) {
this.value = value;
this.renderer.setElementProperty(this.elementRef, 'value', this.value);
}
registerOnChange(val) {
}
registerOnTouched(val) {
}
inputChanged(event) {
this.value = event.target.value;
this.ngControl.valueAccessor.writeValue(this.value);
this.ngControl.control.updateValue(this.value);
}
inputFocused() {
this.isFocused = true;
this.shouldLeftAlign = true;
}
inputBlurred() {
this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != '';
}
clearInput() {
this.value = '';
this.ngControl.control.updateValue('');
}
}
/*
export class SearchPipe extends Pipe {
constructor() {
super();
this.state = 0;
}
supports(newValue) {
return true;
}
transform(value, ...args) {
return value;
//return `${value} state:${this.state ++}`;
}
create(cdRef) {
return new SearchPipe(cdRef);
}
}
*/

3
ionic/components/search-bar/test/floating/index.ts
View File

@ -1,5 +1,4 @@
import {NgControl} from 'angular2/angular2';
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
import {App} from 'ionic/ionic';
import {SearchPipe} from 'ionic/components/search-bar/search-bar';

10
ionic/components/segment/segment.ts
View File

@ -1,17 +1,15 @@
import {View, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
import {Component, Directive, View, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
import {Control, NgControl, NgFormControl, ControlGroup, ControlDirective} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicDirective, IonicComponent} from '../../config/decorators'
import {dom} from 'ionic/util';
/**
* TODO
*/
@IonicComponent({
@Component({
selector: 'ion-segment',
appInjector: [ NgControl ],
inputs: [
'value'
],
@ -123,7 +121,7 @@ export class Segment extends Ion {
/**
* TODO
*/
@IonicDirective({
@Directive({
selector: 'ion-segment',
//inputs: ['value'],
host: {
@ -190,7 +188,7 @@ export class SegmentControlValueAccessor {
/**
* TODO
*/
@IonicDirective({
@Directive({
selector: 'ion-segment-button',
inputs: [
'value'

11
ionic/components/slides/slides.ts
View File

@ -1,11 +1,9 @@
import {Component, View, QueryList, ElementRef, EventEmitter, onInit,
Host, forwardRef, NgFor, NgIf, NgClass} from 'angular2/angular2';
import {Directive, Component, View, ElementRef, Host, NgIf, NgClass} from 'angular2/angular2';
import {Ion} from '../ion';
import {Animation} from 'ionic/animations/animation';
import {Gesture} from 'ionic/gestures/gesture';
import {DragGesture} from 'ionic/gestures/drag-gesture';
import {IonicComponent, IonicDirective} from '../../config/decorators';
import {IonicConfig} from '../../config/config';
import {dom} from 'ionic/util';
import {CSS} from '../../util/dom';
@ -14,6 +12,7 @@ import * as util from 'ionic/util';
import {Swiper} from './swiper-widget';
import {Scroll} from '../scroll/scroll';
/**
* Slides is a slide box implementation based on Swiper.js
*
@ -29,7 +28,7 @@ import {Scroll} from '../scroll/scroll';
* Licensed under MIT
*
*/
@IonicComponent({
@Component({
selector: 'ion-slides',
inputs: [
'loop',
@ -447,7 +446,7 @@ export class Slides extends Ion {
/**
* TODO
*/
@IonicComponent({
@Component({
selector: 'ion-slide',
inputs: ['zoom']
})
@ -471,7 +470,7 @@ export class Slide {
}
}
@IonicDirective({
@Directive({
selector: 'slide-lazy',
})
export class SlideLazy {

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

@ -1,11 +1,11 @@
import {
Component,
View,
Directive,
ElementRef,
Host,
Optional,
NgControl,
Renderer,
Inject,
forwardRef
} from 'angular2/angular2';
@ -13,7 +13,6 @@ import {
import {Ion} from '../ion';
import {IonInput} from '../form/input';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/decorators';
import {pointerCoord} from '../../util/dom';
/**
@ -77,7 +76,7 @@ class MediaSwitch {
* ```
*
*/
@IonicComponent({
@Component({
selector: 'ion-switch',
inputs: [
'value',

16
ionic/components/tabs/test/tab-bar-scenarios/main.html
View File

@ -1,6 +1,6 @@
<!-- Text -->
<ion-tabs class="no-navbar">
<ion-tabs no-navbar>
<ion-tab tab-title="Recents"></ion-tab>
<ion-tab tab-title="Favorites"></ion-tab>
<ion-tab tab-title="Settings"></ion-tab>
@ -8,7 +8,7 @@
<!-- Icons -->
<ion-tabs class="no-navbar">
<ion-tabs no-navbar>
<ion-tab tab-icon="call"></ion-tab>
<ion-tab tab-icon="heart"></ion-tab>
<ion-tab tab-icon="settings"></ion-tab>
@ -16,7 +16,7 @@
<!-- Icons on top of text -->
<ion-tabs class="no-navbar">
<ion-tabs no-navbar>
<ion-tab tab-title="Location" tab-icon="navigate"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="star"></ion-tab>
<ion-tab tab-title="Radio" tab-icon="musical-notes"></ion-tab>
@ -24,7 +24,7 @@
<!-- Icons below text -->
<ion-tabs tab-bar-icons="bottom" class="no-navbar">
<ion-tabs tab-bar-icons="bottom" no-navbar>
<ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
@ -32,7 +32,7 @@
<!-- Icons right of text -->
<ion-tabs tab-bar-icons="right" class="no-navbar">
<ion-tabs tab-bar-icons="right" no-navbar>
<ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
@ -40,21 +40,21 @@
<!-- Icons left of text -->
<ion-tabs tab-bar-icons="left" class="no-navbar">
<ion-tabs tab-bar-icons="left" no-navbar>
<ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
</ion-tabs>
<!-- No icons -->
<ion-tabs tab-bar-icons="hide" class="no-navbar">
<ion-tabs tab-bar-icons="hide" no-navbar>
<ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
<ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
<ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
</ion-tabs>
<!-- No overflow text -->
<ion-tabs class="no-navbar">
<ion-tabs no-navbar>
<ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
<ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
<ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>

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

@ -1,6 +1,5 @@
import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
import {IonicDirective} from '../../config/decorators';
import {IonicConfig} from '../../config/config';
import {IonInput} from '../form/input';
import {Label} from './label';
@ -14,9 +13,8 @@ import {IonicPlatform} from '../../platform/platform';
/**
* TODO
*/
@IonicDirective({
@Directive({
selector: 'ion-input',
classId: 'item-input',
inputs: [
'tabIndex'
],

26
ionic/config/decorators.ts
View File

@ -78,18 +78,6 @@ export function IonicView(args) {
}
}
/**
* TODO
*/
export function IonicDirective(config) {
return function(cls) {
var annotations = Reflect.getMetadata('annotations', cls) || [];
annotations.push(new Directive(appendConfig(cls, config)));
Reflect.defineMetadata('annotations', annotations, cls);
return cls;
}
}
/**
* TODO
*/
@ -109,22 +97,22 @@ export function makeComponent(cls, config) {
function appendConfig(cls, config) {
config.host = config.host || {};
cls.defaultProperties = config.defaultProperties || {};
cls.defaultInputs = config.defaultInputs || {};
config.properties = config.properties || [];
config.inputs = config.inputs || [];
for (let prop in cls.defaultProperties) {
// add the property to the component "properties"
config.properties.push(prop);
for (let prop in cls.defaultInputs) {
// add the property to the component "inputs"
config.inputs.push(prop);
// set the component "hostProperties", so the instance's
// property value will be used to set the element's attribute
// input value will be used to set the element's attribute
config.host['[attr.' + util.pascalCaseToDashCase(prop) + ']'] = prop;
}
cls.delegates = config.delegates;
let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
let componentId = (config.selector && config.selector.replace('ion-', ''));
config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
return config;