diff --git a/ionic/components.ts b/ionic/components.ts index 216549c947..d768049511 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -8,7 +8,7 @@ export * from 'ionic/components/icon/icon' export * from 'ionic/components/item/item' export * from 'ionic/components/item/item-group' export * from 'ionic/components/form/form' -export * from 'ionic/components/form/input' +export * from 'ionic/components/form/text-input' export * from 'ionic/components/form/label' export * from 'ionic/components/list/list' export * from 'ionic/components/modal/modal' diff --git a/ionic/components/form/form.ts b/ionic/components/form/form.ts index af4e26c612..80d785efe2 100644 --- a/ionic/components/form/form.ts +++ b/ionic/components/form/form.ts @@ -1,9 +1,11 @@ +import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; import * as dom from '../../util/dom'; let inputRegistry = []; let activeInput = null; let lastInput = null; +let containerIds = -1; export class IonInput { @@ -85,3 +87,33 @@ export class IonInput { } + +export class IonInputContainer extends Ion { + + constructor( + elementRef: ElementRef, + ionicConfig: IonicConfig + ) { + super(elementRef, ionicConfig); + this.id = ++containerIds; + } + + onInit() { + if (this.input) { + this.input.id = 'input-' + this.id; + } + if (this.label) { + this.label.id = 'label-' + this.id; + this.input.labelledBy = this.label.id; + } + } + + registerInput(directive) { + this.input = directive; + } + + registerLabel(directive) { + this.label = directive; + } + +} diff --git a/ionic/components/form/tap-input.ts b/ionic/components/form/tap-input.ts new file mode 100644 index 0000000000..72001a0901 --- /dev/null +++ b/ionic/components/form/tap-input.ts @@ -0,0 +1,28 @@ +import {Parent, Ancestor, Optional, ElementRef, Attribute} from 'angular2/angular2'; + +import {IonInput} from './form'; +import {IonicApp} from '../app/app'; +import {Content} from '../content/content'; + + +export class TapInput extends IonInput { + constructor( + @Optional() @Parent() container: Input, + @Optional() @Ancestor() scrollView: Content, + @Attribute('type') type: string, + elementRef: ElementRef, + app: IonicApp + ) { + super(elementRef, app, scrollView); + + if (container) { + container.registerInput(this); + this.container = container; + } + + this.type = type; + this.elementRef = elementRef; + this.tabIndex = this.tabIndex || ''; + } + +} diff --git a/ionic/components/form/input.ts b/ionic/components/form/text-input.ts similarity index 82% rename from ionic/components/form/input.ts rename to ionic/components/form/text-input.ts index 3ce0ce3962..08280083a0 100644 --- a/ionic/components/form/input.ts +++ b/ionic/components/form/text-input.ts @@ -2,8 +2,7 @@ import {Directive, View, Parent, Ancestor, Optional, ElementRef, Attribute, forw import {IonicDirective} from '../../config/annotations'; import {IonicConfig} from '../../config/config'; -import {IonInput} from './form'; -import {Ion} from '../ion'; +import {IonInput, IonInputContainer} from './form'; import {IonicApp} from '../app/app'; import {Content} from '../content/content'; import {ClickBlock} from '../../util/click-block'; @@ -14,32 +13,13 @@ import {Platform} from '../../platform/platform'; @IonicDirective({ selector: 'ion-input' }) -export class Input extends Ion { +export class Input extends IonInputContainer { constructor( elementRef: ElementRef, ionicConfig: IonicConfig ) { super(elementRef, ionicConfig); - this.id = ++inputIds; - } - - onInit() { - if (this.input) { - this.input.id = 'input-' + this.id; - } - if (this.label) { - this.label.id = 'label-' + this.id; - this.input.labelledBy = this.label.id; - } - } - - registerInput(directive) { - this.input = directive; - } - - registerLabel(directive) { - this.label = directive; } } @@ -148,14 +128,12 @@ export class TextInput extends IonInput { } receivedFocus(receivedFocus) { - console.log('receivedFocus: ', receivedFocus) let self = this; let scrollView = self.scrollView; self.isActiveInput(receivedFocus); function touchMove(ev) { - console.log('touchMove') if (!self.isPressHold()) { self.setFocusHolder(self.type); self.deregTouchMove(); @@ -177,27 +155,9 @@ export class TextInput extends IonInput { } isPressHold() { - console.log('pressStart:', this.pressStart, ' pressStart + 500 < now:', this.pressStart + 500 < Date.now()) return this.pressStart && (this.pressStart + 500 < Date.now()); } } - -@Directive({ - selector: 'label', - host: { - '[attr.id]': 'id' - } -}) -export class InputLabel { - constructor(@Optional() @Parent() container: Input) { - if (container) { - container.registerLabel(this); - } - } -} - const SCROLL_INTO_VIEW_DURATION = 500; - -let inputIds = -1; diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts index a1ac5beb69..fa184c880e 100644 --- a/ionic/config/annotations.ts +++ b/ionic/config/annotations.ts @@ -12,7 +12,7 @@ import { Toolbar, Icon, Checkbox, Switch, - Input, TextInput, InputLabel, + Input, TextInput, Label, Segment, SegmentButton, SegmentControlValueAccessor, RadioGroup, RadioButton, SearchBar, Nav, NavbarTemplate, Navbar, NavPush, NavPop, @@ -61,7 +61,7 @@ export const IonicDirectives = [ // Input forwardRef(() => Input), forwardRef(() => TextInput), - forwardRef(() => InputLabel), + forwardRef(() => Label), // Nav forwardRef(() => Nav),