From 03cb1a7a5b6e9ce49c9ed74174bfade62c9d0696 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 9 Oct 2015 11:29:57 -0500 Subject: [PATCH] refactor(): IonicForm/IonicKeyboard Closes #224 --- ionic/components.ts | 1 - ionic/components/checkbox/checkbox.ts | 2 +- ionic/components/content/content.ts | 8 +- ionic/components/form/form.scss | 98 --------------------- ionic/components/menu/menu.ts | 6 +- ionic/components/menu/test/basic/page1.html | 7 +- ionic/components/switch/switch.ts | 2 +- ionic/components/text-input/text-input.scss | 44 +++++++++ ionic/components/text-input/text-input.ts | 2 +- ionic/config/bootstrap.ts | 4 +- ionic/ionic.core.scss | 1 - ionic/platform/platform.ts | 28 ------ ionic/{components/form => util}/form.ts | 5 +- ionic/util/keyboard.ts | 51 +++++++++++ ionic/util/util.scss | 17 ++++ 15 files changed, 136 insertions(+), 140 deletions(-) delete mode 100644 ionic/components/form/form.scss rename ionic/{components/form => util}/form.ts (98%) create mode 100644 ionic/util/keyboard.ts diff --git a/ionic/components.ts b/ionic/components.ts index cde02aa715..b8e6e64809 100644 --- a/ionic/components.ts +++ b/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' diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index e32ff3fd4e..97d9346997 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/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 diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index c670aafa5b..ac0c2ecf88 100644 --- a/ionic/components/content/content.ts +++ b/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 = ''; diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss deleted file mode 100644 index 03d613739d..0000000000 --- a/ionic/components/form/form.scss +++ /dev/null @@ -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; -}*/ diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index c3bd5b3dd9..caf94842a3 100644 --- a/ionic/components/menu/menu.ts +++ b/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) { diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html index 2bc5c792c5..d7372948a9 100644 --- a/ionic/components/menu/test/basic/page1.html +++ b/ionic/components/menu/test/basic/page1.html @@ -40,6 +40,11 @@

- + + + Username: + + + diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index 2be28c6133..88e67faa89 100644 --- a/ionic/components/switch/switch.ts +++ b/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'; diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss index 550a3d5d91..e341572096 100644 --- a/ionic/components/text-input/text-input.scss +++ b/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(); +} + diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index b89fb382ba..baac463615 100644 --- a/ionic/components/text-input/text-input.ts +++ b/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'; diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts index 4e1079c875..14c1389541 100644 --- a/ionic/config/bootstrap.ts +++ b/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, diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 612c128cdb..ca6ad490ff 100644 --- a/ionic/ionic.core.scss +++ b/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", diff --git a/ionic/platform/platform.ts b/ionic/platform/platform.ts index a3335126f1..708d3e05ca 100644 --- a/ionic/platform/platform.ts +++ b/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); diff --git a/ionic/components/form/form.ts b/ionic/util/form.ts similarity index 98% rename from ionic/components/form/form.ts rename to ionic/util/form.ts index ce0c856933..5c8a6015c1 100644 --- a/ionic/components/form/form.ts +++ b/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. diff --git a/ionic/util/keyboard.ts b/ionic/util/keyboard.ts new file mode 100644 index 0000000000..5c7caea0ae --- /dev/null +++ b/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(); + } + }); + } + +} diff --git a/ionic/util/util.scss b/ionic/util/util.scss index fc3abce1cd..5b4bb3559f 100755 --- a/ionic/util/util.scss +++ b/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 // --------------------------------------------------