refactor(): IonicForm/IonicKeyboard

Closes #224

ionic/components.ts

@@ -6,7 +6,6 @@ export * from 'ionic/components/blur/blur'
 export * from 'ionic/components/button/button'
 export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
-export * from 'ionic/components/form/form'
 export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
 export * from 'ionic/components/item/item-group'

ionic/components/checkbox/checkbox.ts

@@ -1,7 +1,7 @@
 import {Component, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonicForm} from '../form/form';
+import {IonicForm} from '../../util/form';
 
 /**
  * The checkbox is no different than the HTML checkbox input, except it's styled differently

ionic/components/content/content.ts

@@ -2,7 +2,7 @@ import {Component, ElementRef, Optional} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
-import {IonicPlatform} from '../../platform/platform';
+import {IonicKeyboard} from '../../util/keyboard';
 import {ViewController} from '../nav/view-controller';
 import {Tab} from '../tabs/tab';
 import {ScrollTo} from '../../animations/scroll-to';
@@ -33,10 +33,10 @@ export class Content extends Ion {
    * @param {ElementRef} elementRef  A reference to the component's DOM element.
    * @param {IonicConfig} config  The config object to change content's default settings.
    */
-  constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform, @Optional() viewCtrl: ViewController) {
+  constructor(elementRef: ElementRef, config: IonicConfig, keyboard: IonicKeyboard, @Optional() viewCtrl: ViewController) {
     super(elementRef, config);
     this.scrollPadding = 0;
-    this.platform = platform;
+    this.keyboard = keyboard;
 
     if(viewCtrl) {
       viewCtrl.setContent(this);
@@ -168,7 +168,7 @@ export class Content extends Ion {
 
       if (!this.keyboardPromise) {
 
-        this.keyboardPromise = this.platform.onKeyboardClose(() => {
+        this.keyboardPromise = this.keyboard.onClose(() => {
           if (this) {
             this.scrollPadding = 0;
             if (this.scrollElement) this.scrollElement.style.paddingBottom = '';

ionic/components/form/form.scss

@@ -1,98 +0,0 @@
-
-// Forms
-// --------------------------------------------------
-
-ion-input {
-
-  // text inputs
-  textarea,
-  input[type="text"],
-  input[type="password"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="date"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"],
-  input[type="number"],
-  input[type="email"],
-  input[type="url"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="color"] {
-    display: block;
-    background: transparent;
-    border: 0;
-    width: 100%;
-  }
-
-}
-
-textarea {
-  margin: 0;
-  padding: 0;
-  height: auto;
-  overflow: auto;
-  font: inherit;
-  color: inherit;
-}
-
-.platform-mobile textarea {
-  resize: none;
-}
-
-
-
-// Placeholder
-// -------------------------------
-input,
-textarea {
-  @include placeholder();
-}
-
-
-// DISABLED STATE
-// -------------------------------
-
-// Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-select[readonly] {
-  cursor: not-allowed;
-}
-
-
-// Focus Utils
-// -------------------------------
-
-focus-ctrl {
-  position: fixed;
-
-  input,
-  button {
-    position: fixed;
-    top: 1px;
-    width: 9px;
-    left: -9999px;
-    z-index: 9999;
-  }
-}
-
-
-/*focus-ctrl input[tabindex="999"] {
-  left: 0px;
-}
-
-focus-ctrl input[tabindex="1001"] {
-  left: 20px;
-}
-
-focus-ctrl input[tabindex="1002"] {
-  left: auto;
-  right: 10px;
-}
-
-focus-ctrl input:focus {
-  background: red;
-}*/

ionic/components/menu/menu.ts

@@ -5,6 +5,7 @@ import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
 import {IonicPlatform} from '../../platform/platform';
+import {IonicKeyboard} from '../../util/keyboard';
 import * as gestures from  './menu-gestures';
 
 
@@ -67,11 +68,13 @@ export class Menu extends Ion {
     app: IonicApp,
     elementRef: ElementRef,
     config: IonicConfig,
-    platform: IonicPlatform
+    platform: IonicPlatform,
+    keyboard: IonicKeyboard
   ) {
     super(elementRef, config);
     this.app = app;
     this.platform = platform;
+    this.keyboard = keyboard;
 
     this.opening = new EventEmitter('opening');
     this.isOpen = false;
@@ -188,6 +191,7 @@ export class Menu extends Ion {
 
     this._disable();
     this.app.setTransitioning(true);
+    this.keyboard.close();
   }
 
   _after(isOpen) {

ionic/components/menu/test/basic/page1.html

@@ -40,6 +40,11 @@
     <button class="e2eContentToggleMenu" menu-toggle="rightMenu">Toggle Right Menu</button>
   </p>
 
-  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <ion-card>
+    <ion-input>
+      <ion-label>Username:<ion-label>
+      <input type="text">
+    </ion-input>
+  </ion-card>
 
 </ion-content>

ionic/components/switch/switch.ts

@@ -1,6 +1,6 @@
 import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
 
-import {IonicForm} from '../form/form';
+import {IonicForm} from '../../util/form';
 import {IonicConfig} from '../../config/config';
 import {pointerCoord} from '../../util/dom';
 

ionic/components/text-input/text-input.scss

@@ -8,6 +8,31 @@ $input-focus-box-shadow:        inset 0px 0px 8px 0px $input-focus-border-color
 $text-input-background-color:   $list-background-color !default;
 
 
+ion-input {
+
+  // text inputs
+  textarea,
+  input[type="text"],
+  input[type="password"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"],
+  input[type="number"],
+  input[type="email"],
+  input[type="url"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="color"] {
+    display: block;
+    background: transparent;
+    border: 0;
+    width: 100%;
+  }
+}
+
 ion-input.item {
   align-items: flex-start;
 }
@@ -37,3 +62,22 @@ ion-input.has-focus [text-input] {
 ion-input textarea {
   padding-top: 9px;
 }
+
+textarea {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  overflow: auto;
+  font: inherit;
+  color: inherit;
+}
+
+.platform-mobile textarea {
+  resize: none;
+}
+
+input,
+textarea {
+  @include placeholder();
+}
+

ionic/components/text-input/text-input.ts

@@ -1,7 +1,7 @@
 import {Directive, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
-import {IonicForm} from '../form/form';
+import {IonicForm} from '../../util/form';
 import {Label} from './label';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';

ionic/config/bootstrap.ts

@@ -5,7 +5,8 @@ import {IonicApp} from '../components/app/app';
 import {IonicConfig} from './config';
 import {IonicPlatform} from '../platform/platform';
 import {OverlayController} from '../components/overlay/overlay-controller';
-import {IonicForm} from '../components/form/form';
+import {IonicForm} from '../util/form';
+import {IonicKeyboard} from '../util/keyboard';
 import {ActionSheet} from '../components/action-sheet/action-sheet';
 import {Modal} from '../components/modal/modal';
 import {Popup} from '../components/popup/popup';
@@ -47,6 +48,7 @@ export function ionicBindings(rootCmp, config) {
     bind(TapClick).toValue(tapClick),
     bind(Events).toValue(events),
     IonicForm,
+    IonicKeyboard,
     OverlayController,
     ActionSheet,
     Modal,

ionic/ionic.core.scss

@@ -28,7 +28,6 @@
   "components/icon/icon",
   "components/item/item",
   "components/item/item-media",
-  "components/form/form",
   "components/grid/grid",
   "components/text-input/text-input",
   "components/text-input/label",

ionic/platform/platform.ts

@@ -211,34 +211,6 @@ export class IonicPlatform {
     return !this.isPortrait();
   }
 
-  isKeyboardOpen() {
-    return dom.hasFocusedTextInput();
-  }
-
-  onKeyboardClose(callback) {
-    const self = this;
-
-    let promise = null;
-
-    if (!callback) {
-      // a callback wasn't provided, so let's return a promise instead
-      promise = new Promise(resolve => { callback = resolve; });
-    }
-
-    function checkKeyboard() {
-      if (!self.isKeyboardOpen()) {
-        callback();
-
-      } else {
-        setTimeout(checkKeyboard, 500);
-      }
-    }
-
-    setTimeout(checkKeyboard, 100);
-
-    return promise;
-  }
-
   windowResize() {
     let self = this;
     clearTimeout(self._resizeTimer);

ionic/util/form.ts

@@ -1,7 +1,8 @@
 import {Injectable, NgZone} from 'angular2/angular2';
 
-import {IonicConfig} from '../../config/config';
-import {raf} from '../../util/dom';
+import {IonicConfig} from '../config/config';
+import {raf} from './dom';
+
 
 /**
  * The Input component is used to focus text input elements.

ionic/util/keyboard.ts

@@ -0,0 +1,51 @@
+import {Injectable} from 'angular2/angular2';
+
+import {IonicForm} from './form';
+import * as dom from './dom';
+
+
+@Injectable()
+export class IonicKeyboard {
+
+  constructor(form: IonicForm) {
+    this.form = form;
+  }
+
+  isOpen() {
+    return dom.hasFocusedTextInput();
+  }
+
+  onClose(callback) {
+    const self = this;
+
+    let promise = null;
+
+    if (!callback) {
+      // a callback wasn't provided, so let's return a promise instead
+      promise = new Promise(resolve => { callback = resolve; });
+    }
+
+    function checkKeyboard() {
+      if (!self.isOpen()) {
+        callback();
+
+      } else {
+        setTimeout(checkKeyboard, 500);
+      }
+    }
+
+    setTimeout(checkKeyboard, 100);
+
+    return promise;
+  }
+
+  close() {
+    dom.raf(() => {
+      if (dom.hasFocusedTextInput()) {
+        // only focus out when a text input has focus
+        this.form.focusOut();
+      }
+    });
+  }
+
+}

ionic/util/util.scss

@@ -53,6 +53,23 @@
 }
 
 
+// Focus Controls
+// -------------------------------
+
+focus-ctrl {
+  position: fixed;
+
+  input,
+  button {
+    position: fixed;
+    top: 1px;
+    width: 9px;
+    left: -9999px;
+    z-index: 9999;
+  }
+}
+
+
 // Backdrop
 // --------------------------------------------------