input updates

2026-03-13 10:22:08 +08:00 · 2015-07-17 09:16:00 -05:00
parent e947f32898
commit ff0f8ee8f7
9 changed files with 148 additions and 105 deletions
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -8,7 +8,7 @@ import {
 } from 'angular2/angular2';

 import {Ion} from '../ion';
-import {IonInputContainer} from '../form/form';
+import {IonInputItem} from '../form/form';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent, IonicView} from '../../config/annotations';
 import {Icon} from '../icon/icon';
@@ -35,15 +35,15 @@ import {Icon} from '../icon/icon';
    '<content></content>' +
  '</div>'
 })
-export class Checkbox extends IonInputContainer {
+export class Checkbox extends IonInputItem {

  _checkbox: CheckboxInput;

  constructor(
    elementRef: ElementRef,
-    ionicConfig: IonicConfig
+    config: IonicConfig
  ) {
-    super(elementRef, ionicConfig);
+    super(elementRef, config);
  }

  onAllChangesDone() {
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -19,9 +19,10 @@ import {ScrollTo} from '../../animations/scroll-to';
  template: '<div class="scroll-content"><content></content></div>'
 })
 export class Content extends Ion {
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
-    super(elementRef, ionicConfig);
-    this.scrollPadding = false;
+  constructor(elementRef: ElementRef, config: IonicConfig) {
+    super(elementRef, config);
+
+    this.scrollPadding = config.setting('keyboardScrollAssist');
  }

  onIonInit() {
--- a/ionic/components/form/form.scss
+++ b/ionic/components/form/form.scss
@@ -103,68 +103,6 @@ textarea {
  margin-left: ($item-padding / 3) * 2;
 }

-.input-label {
-  display: table;
-  padding: 7px 10px 7px 0px;
-  max-width: 200px;
-  width: 35%;
-  color: $input-label-color;
-  font-size: 16px;
-}
-
-.placeholder-icon {
-  color: #aaa;
-  &:first-child {
-    padding-right: 6px;
-  }
-  &:last-child {
-    padding-left: 6px;
-  }
-}
-
-.item-stacked-label {
-  display: block;
-  background-color: transparent;
-  box-shadow: none;
-
-  .input-label, .icon {
-    display: inline-block;
-    padding: 4px 0 0 0px;
-    vertical-align: middle;
-  }
-}
-
-.item-stacked-label input,
-.item-stacked-label textarea {
-  border-radius: 2px;
-  padding: 4px 8px 3px 0;
-  border: none;
-  background-color: $input-bg;
-}
-.item-stacked-label input {
-  overflow: hidden;
-  height: $line-height-computed + $font-size-base + 0.5rem;
-}
-
-.item-floating-label {
-  display: block;
-  background-color: transparent;
-  box-shadow: none;
-
-  .input-label {
-    position: relative;
-    padding: 5px 0 0 0;
-    opacity: 0;
-    top: 10px;
-    transition: opacity .15s ease-in, top .2s linear;
-
-    &.has-input {
-      opacity: 1;
-      top: 0;
-      transition: opacity .15s ease-in, top .2s linear;
-    }
-  }
-}


 // Form Controls
--- a/ionic/components/form/form.ts
+++ b/ionic/components/form/form.ts
@@ -1,23 +1,31 @@
+import {Directive, ElementRef} from 'angular2/angular2';
+
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
 import * as dom  from '../../util/dom';

+
 let inputRegistry = [];
+let itemRegistry = [];
+let inputItemIds = -1;
 let activeInput = null;
 let lastInput = null;
-let containerIds = -1;


+// Input element (not the container)
 export class IonInput {
  constructor(
    elementRef: ElementRef,
    app: IonicApp,
+    config: IonicConfig,
    scrollView: Content
  ) {
    this.elementRef = elementRef;
    this.app = app;
    this.scrollView = scrollView;

+    this.scrollAssist = config.setting('keyboardScrollAssist');
+
    inputRegistry.push(this);
  }

@@ -88,32 +96,36 @@ export class IonInput {
 }


-export class IonInputContainer extends Ion {
+// Container element for the label and input element
+export class IonInputItem extends Ion {

  constructor(
    elementRef: ElementRef,
    ionicConfig: IonicConfig
  ) {
    super(elementRef, ionicConfig);
-    this.id = ++containerIds;
+    this.id = ++inputItemIds;
+    itemRegistry.push(this);
  }

  onInit() {
-    if (this.input) {
-      this.input.id = 'input-' + this.id;
-    }
-    if (this.label) {
-      this.label.id = 'label-' + this.id;
+    if (this.input && this.label) {
+      this.input.id = (this.input.id || 'input-' + this.id);
+      this.label.id = (this.label.id || 'label-' + this.id);
      this.input.labelledBy = this.label.id;
    }
  }

-  registerInput(directive) {
-    this.input = directive;
+  registerInput(input) {
+    this.input = input;
  }

-  registerLabel(directive) {
-    this.label = directive;
+  registerLabel(label) {
+    this.label = label;
+  }
+
+  focus() {
+    this.input && this.input.focus();
  }

 }
--- a/ionic/components/form/label.scss
+++ b/ionic/components/form/label.scss
@@ -1,6 +1,11 @@
-$input-label-color: #000;

-ion-label {
+// Label
+// -------------------------------
+
+$input-label-color:         #000 !default;
+
+
+.input-label {
  display: table;
  padding: 9px 10px 7px 0px;
  max-width: 200px;
@@ -9,4 +14,60 @@ ion-label {
  color: $input-label-color;
  font-size: 1.6rem;
  white-space: nowrap;
+
+  pointer-events: none;
+}
+
+.placeholder-icon {
+  color: #aaa;
+  &:first-child {
+    padding-right: 6px;
+  }
+  &:last-child {
+    padding-left: 6px;
+  }
+}
+
+.item-stacked-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label, .icon {
+    display: inline-block;
+    padding: 4px 0 0 0px;
+    vertical-align: middle;
+  }
+}
+
+.item-stacked-label input,
+.item-stacked-label textarea {
+  border-radius: 2px;
+  padding: 4px 8px 3px 0;
+  border: none;
+  background-color: $input-bg;
+}
+.item-stacked-label input {
+  overflow: hidden;
+  height: $line-height-computed + $font-size-base + 0.5rem;
+}
+
+.item-floating-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label {
+    position: relative;
+    padding: 5px 0 0 0;
+    opacity: 0;
+    top: 10px;
+    transition: opacity .15s ease-in, top .2s linear;
+
+    &.has-input {
+      opacity: 1;
+      top: 0;
+      transition: opacity .15s ease-in, top .2s linear;
+    }
+  }
 }
--- a/ionic/components/form/label.ts
+++ b/ionic/components/form/label.ts
@@ -1,7 +1,21 @@
-import {Directive} from 'angular2/angular2';
+import {Directive, Parent, Optional} from 'angular2/angular2';
+
+import {Input} from './text-input';
+import {IonicConfig} from '../../config/config';


@Directive({
-  selector: 'ion-label'
+  selector: 'label',
+  host: {
+    '[attr.id]': 'id',
+    '[class.input-label]': 'inputLabel'
+  }
 })
-export class Label {}
+export class Label {
+  constructor(@Optional() @Parent() container: Input, config: IonicConfig) {
+    if (container) {
+      container.registerLabel(this);
+      this.inputLabel = true;
+    }
+  }
+}
--- a/ionic/components/form/tap-input.ts
+++ b/ionic/components/form/tap-input.ts
@@ -2,9 +2,11 @@ import {Parent, Ancestor, Optional, ElementRef, Attribute, Directive} from 'angu

 import {IonInput} from './form';
 import {IonicApp} from '../app/app';
+import {IonicConfig} from '../../config/config';
 import {Content} from '../content/content';
 import {Checkbox} from '../checkbox/checkbox';

+
@Directive({
  selector: 'input[type=checkbox],input[type=radio]'
 })
@@ -14,9 +16,10 @@ export class TapInput extends IonInput {
    @Optional() @Ancestor() scrollView: Content,
    @Attribute('type') type: string,
    elementRef: ElementRef,
-    app: IonicApp
+    app: IonicApp,
+    config: IonicConfig
  ) {
-    super(elementRef, app, scrollView);
+    super(elementRef, app, IonicConfig, scrollView);

    if (container) {
      container.registerInput(this);
--- a/ionic/components/form/test/input/main.html
+++ b/ionic/components/form/test/input/main.html
@@ -5,59 +5,73 @@
 <ion-content class="padding">

  <ion-input>
-    <input value="1" type="text">
+    <label>Label 1</label>
+    <input value="Text 1" type="text">
  </ion-input>

  <ion-input>
-    <input value="2" type="text">
+    <label>Label 2</label>
+    <input value="Text 2" type="text">
  </ion-input>

  <ion-input>
+    <label>Label 3</label>
    <input value="3" type="number">
  </ion-input>

  <ion-input>
-    <textarea>4</textarea>
+    <label>Label 4</label>
+    <textarea>Textarea 4</textarea>
  </ion-input>

  <ion-input>
-    <input value="5" type="text">
+    <label>Label 5</label>
+    <input value="http://url5.com/" type="url">
  </ion-input>

  <ion-input>
-    <input value="6" type="text">
+    <label>Label 6</label>
+    <input value="email6@email.com" type="email">
  </ion-input>

  <ion-input>
-    <textarea>7</textarea>
+    <label>Label 7</label>
+    <textarea>Textarea 7</textarea>
  </ion-input>

  <ion-input>
-    <input value="8" type="text">
+    <label>Label 8</label>
+    <input value="Text 8" type="text">
  </ion-input>

  <ion-input>
+    <label>Label 9</label>
    <input value="9" type="number">
  </ion-input>

  <ion-input>
-    <textarea>10</textarea>
+    <label>Label 10</label>
+    <textarea>Textarea 10</textarea>
  </ion-input>

  <ion-input>
-    <input value="11" type="text">
+    <label>Label 11</label>
+    <input value="Text 11" type="text">
  </ion-input>

  <ion-input>
+    <label>Label 12</label>
    <input value="12" type="number">
  </ion-input>

  <ion-input>
-    <textarea>13</textarea>
+    <label>Label 13</label>
+    <textarea>Textarea 13</textarea>
  </ion-input>

  <ion-input>
-    <textarea>14</textarea>
+    <label>Label 14</label>
+    <textarea>Textarea 14</textarea>
  </ion-input>

 </ion-content>
--- a/ionic/components/form/text-input.ts
+++ b/ionic/components/form/text-input.ts
@@ -2,7 +2,7 @@ import {Directive, View, Parent, Ancestor, Optional, ElementRef, Attribute, forw

 import {IonicDirective} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
-import {IonInput, IonInputContainer} from './form';
+import {IonInput, IonInputItem} from './form';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
 import {ClickBlock} from '../../util/click-block';
@@ -13,7 +13,7 @@ import {Platform} from '../../platform/platform';
@IonicDirective({
  selector: 'ion-input'
 })
-export class Input extends IonInputContainer {
+export class Input extends IonInputItem {

  constructor(
    elementRef: ElementRef,
@@ -51,7 +51,7 @@ export class TextInput extends IonInput {
    app: IonicApp,
    config: IonicConfig
  ) {
-    super(elementRef, app, scrollView);
+    super(elementRef, app, config, scrollView);

    if (container) {
      container.registerInput(this);
@@ -61,8 +61,6 @@ export class TextInput extends IonInput {
    this.type = type;
    this.elementRef = elementRef;
    this.tabIndex = this.tabIndex || '';
-
-    this.scrollAssist = config.setting('keyboardScrollAssist');
  }

  pointerStart(ev) {
@@ -81,6 +79,8 @@ export class TextInput extends IonInput {

      // focus this input if the pointer hasn't moved XX pixels
      // and the input doesn't already have focus
+      console.log('!this.hasFocus()', !this.hasFocus());
+
      if (this.startCoord && !dom.hasPointerMoved(20, this.startCoord, endCoord) && !this.hasFocus()) {
        ev.preventDefault();
        ev.stopPropagation();
@@ -98,7 +98,7 @@ export class TextInput extends IonInput {
    if (scrollView && this.scrollAssist) {
      // this input is inside of a scroll view
      // scroll the input to the top
-      let inputY = this.elementRef.nativeElement.offsetTop - 8;
+      let inputY = this.elementRef.nativeElement.offsetTop - 15;

      // do not allow any clicks while it's scrolling
      ClickBlock(true, SCROLL_INTO_VIEW_DURATION + 200);