mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(input): improve focus handling, alpha39 fixes
This commit is contained in:
Adam Bradley
@ -6,7 +6,7 @@ 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/input'
|
||||
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'
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import {Component, View, Directive, ElementRef, Optional, NgControl} from 'angular2/angular2';
|
||||
import {Component, View, Directive, Optional, NgControl} from 'angular2/angular2';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonInput} from '../form/input';
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonicForm} from '../form/form';
|
||||
|
||||
/**
|
||||
* The checkbox is no different than the HTML checkbox input, except it's styled differently
|
||||
@ -44,21 +43,14 @@ import {IonicConfig} from '../../config/config';
|
||||
'<ng-content></ng-content>' +
|
||||
'</ion-item-content>'
|
||||
})
|
||||
export class Checkbox extends Ion {
|
||||
/**
|
||||
* TODO
|
||||
* @param {ElementRef} elementRef TODO
|
||||
* @param {IonicConfig} ionicConfig TODO
|
||||
* @param {NgControl=} ngControl TODO
|
||||
*/
|
||||
export class Checkbox {
|
||||
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
config: IonicConfig,
|
||||
form: IonicForm,
|
||||
@Optional() ngControl: NgControl
|
||||
) {
|
||||
super(elementRef, config);
|
||||
this.tabIndex = 0;
|
||||
this.id = IonInput.nextId();
|
||||
this.form = form;
|
||||
form.register(this);
|
||||
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
@ -72,8 +64,7 @@ export class Checkbox extends Ion {
|
||||
* TODO
|
||||
*/
|
||||
onInit() {
|
||||
super.onInit();
|
||||
this.labelId = 'label-' + this.id;
|
||||
this.labelId = 'label-' + this.inputId;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -121,4 +112,8 @@ export class Checkbox extends Ion {
|
||||
* @param {Function} fn onTouched event handler.
|
||||
*/
|
||||
registerOnTouched(fn) { this.onTouched = fn; }
|
||||
|
||||
onDestroy() {
|
||||
this.form.deregister(this);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
import {Component, Directive, View, Host, Attribute, ElementRef, forwardRef} from 'angular2/angular2';
|
||||
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonInput} from './input';
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
@Component({
|
||||
selector: 'focus-holder'
|
||||
})
|
||||
@View({
|
||||
template: '<input tabindex="999"><input tabindex="1001"><input tabindex="1002">',
|
||||
directives: [forwardRef(() => FocusInput)]
|
||||
})
|
||||
export class FocusHolder {
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
constructor() {
|
||||
this.i = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} inputType TODO
|
||||
*/
|
||||
setFocusHolder(inputType) {
|
||||
this.i[2].type = inputType;
|
||||
this.i[2].setFocus();
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} tabIndex TODO
|
||||
*/
|
||||
receivedFocus(tabIndex) {
|
||||
if (tabIndex === '999') {
|
||||
// focus on the previous input
|
||||
IonInput.focusPrevious();
|
||||
|
||||
} else if (tabIndex === '1001') {
|
||||
// focus on the next input
|
||||
IonInput.focusNext();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} input TODO
|
||||
*/
|
||||
register(input) {
|
||||
this.i.push(input);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: 'input',
|
||||
host: {
|
||||
'[type]': 'type',
|
||||
'(focus)': 'holder.receivedFocus(tabindex)',
|
||||
'(keydown)': 'keydown($event)'
|
||||
}
|
||||
})
|
||||
class FocusInput {
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
@Host() holder: FocusHolder,
|
||||
@Attribute('tabindex') tabindex: string
|
||||
) {
|
||||
this.elementRef = elementRef;
|
||||
this.holder = holder;
|
||||
this.tabindex = tabindex;
|
||||
this.holder.register(this);
|
||||
}
|
||||
|
||||
setFocus() {
|
||||
this.elementRef.nativeElement.focus();
|
||||
}
|
||||
|
||||
keydown(ev) {
|
||||
// prevent any keyboard typing when a holder has focus
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
}
|
||||
|
||||
get type() {
|
||||
// default to text type if unknown
|
||||
return this._t || 'text';
|
||||
}
|
||||
|
||||
set type(val) {
|
||||
this._t = val;
|
||||
}
|
||||
}
|
||||
235
ionic/components/form/form.ts
Normal file
235
ionic/components/form/form.ts
Normal file
@ -0,0 +1,235 @@
|
||||
import {Injectable, NgZone} from 'angular2/angular2';
|
||||
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {raf} from '../../util/dom';
|
||||
|
||||
/**
|
||||
* The Input component is used to focus text input elements.
|
||||
*
|
||||
* The `focusNext()` and `focusPrevious()` methods make it easy to focus input elements across all devices.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-input>
|
||||
* <ion-label>Name</ion-label>
|
||||
* <input value="Name" type="text">
|
||||
* </ion-input>
|
||||
* ```
|
||||
*/
|
||||
@Injectable()
|
||||
export class IonicForm {
|
||||
|
||||
constructor(config: IonicConfig, zone: NgZone) {
|
||||
this._config = config;
|
||||
this._zone = zone;
|
||||
|
||||
this._inputs = [];
|
||||
this._ids = -1;
|
||||
this._focused = null;
|
||||
|
||||
zone.runOutsideAngular(() => {
|
||||
if (this._config.get('keyboardScrollAssist')) {
|
||||
this.initHolders(document);
|
||||
}
|
||||
|
||||
if (this._config.get('keyboardInputListener') !== false) {
|
||||
this.initKeyInput(document);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
initKeyInput(document) {
|
||||
/* Focus Outline
|
||||
* --------------------------------------------------
|
||||
* When a keydown event happens, from a tab key, then the
|
||||
* 'key-input' class is added to the body element so focusable
|
||||
* elements have an outline. On a mousedown or touchstart
|
||||
* event then the 'key-input' class is removed.
|
||||
*/
|
||||
|
||||
let isKeyInputEnabled = false;
|
||||
|
||||
function keyDown(ev) {
|
||||
if (!isKeyInputEnabled && ev.keyCode == 9) {
|
||||
isKeyInputEnabled = true;
|
||||
raf(enableKeyInput);
|
||||
}
|
||||
}
|
||||
|
||||
function pointerDown() {
|
||||
isKeyInputEnabled = false;
|
||||
raf(enableKeyInput);
|
||||
}
|
||||
|
||||
|
||||
function enableKeyInput() {
|
||||
document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('key-input');
|
||||
|
||||
document.removeEventListener('mousedown', pointerDown);
|
||||
document.removeEventListener('touchstart', pointerDown);
|
||||
|
||||
if (isKeyInputEnabled) {
|
||||
document.addEventListener('mousedown', pointerDown);
|
||||
document.addEventListener('touchstart', pointerDown);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', keyDown);
|
||||
}
|
||||
|
||||
initHolders(document) {
|
||||
// raw DOM fun
|
||||
this._holder = document.createElement('focus-holder');
|
||||
|
||||
this._prev = document.createElement('input');
|
||||
this._prev.tabIndex = NO_FOCUS_TAB_INDEX;
|
||||
this._holder.appendChild(this._prev);
|
||||
|
||||
this._next = document.createElement('input');
|
||||
this._next.tabIndex = NO_FOCUS_TAB_INDEX;
|
||||
this._holder.appendChild(this._next);
|
||||
|
||||
this._temp = document.createElement('input');
|
||||
this._temp.tabIndex = NO_FOCUS_TAB_INDEX;
|
||||
this._holder.appendChild(this._temp);
|
||||
|
||||
document.body.appendChild(this._holder);
|
||||
|
||||
function preventDefault(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
}
|
||||
|
||||
this._prev.addEventListener('keydown', preventDefault);
|
||||
this._next.addEventListener('keydown', preventDefault);
|
||||
this._temp.addEventListener('keydown', preventDefault);
|
||||
|
||||
this._prev.addEventListener('focus', () => {
|
||||
this.focusPrevious();
|
||||
});
|
||||
|
||||
this._next.addEventListener('focus', () => {
|
||||
this.focusNext();
|
||||
});
|
||||
|
||||
let self = this;
|
||||
let resetTimer;
|
||||
function queueReset() {
|
||||
clearTimeout(resetTimer);
|
||||
|
||||
resetTimer = setTimeout(function() {
|
||||
self._zone.run(() => {
|
||||
self.resetInputs();
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
document.addEventListener('focusin', queueReset);
|
||||
document.addEventListener('focusout', queueReset);
|
||||
}
|
||||
|
||||
setFocusHolder(type) {
|
||||
if (this._temp) {
|
||||
this._temp.tabIndex = TEMP_TAB_INDEX;
|
||||
|
||||
this._temp.type = type || 'text';
|
||||
console.debug('setFocusHolder', this._temp.type);
|
||||
this._temp.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {TODO} input TODO
|
||||
*/
|
||||
register(input) {
|
||||
console.debug('register input', input);
|
||||
|
||||
input.inputId = ++this._ids;
|
||||
input.tabIndex = NORMAL_FOCUS_TAB_INDEX;
|
||||
this._inputs.push(input);
|
||||
}
|
||||
|
||||
deregister(input) {
|
||||
console.debug('deregister input', input);
|
||||
|
||||
let index = this._inputs.indexOf(input);
|
||||
if (index > -1) {
|
||||
this._inputs.splice(index, 1);
|
||||
}
|
||||
if (input === this._focused) {
|
||||
this._focused = null;
|
||||
}
|
||||
}
|
||||
|
||||
resetInputs() {
|
||||
this._focused = null;
|
||||
|
||||
for (let i = 0, ii = this._inputs.length; i < ii; i++) {
|
||||
if (!this._focused && this._inputs[i].hasFocus) {
|
||||
this._focused = this._inputs[i];
|
||||
this._focused.tabIndex = ACTIVE_FOCUS_TAB_INDEX;
|
||||
|
||||
} else {
|
||||
this._inputs[i].tabIndex = NORMAL_FOCUS_TAB_INDEX;
|
||||
}
|
||||
}
|
||||
|
||||
if (this._temp) {
|
||||
this._temp.tabIndex = NO_FOCUS_TAB_INDEX;
|
||||
|
||||
if (this._focused) {
|
||||
// there's a focused input
|
||||
this._prev.tabIndex = PREV_TAB_INDEX;
|
||||
this._next.tabIndex = NEXT_TAB_INDEX;
|
||||
|
||||
} else {
|
||||
this._prev.tabIndex = this._next.tabIndex = NO_FOCUS_TAB_INDEX;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Focuses the previous input element, if it exists.
|
||||
*/
|
||||
focusPrevious() {
|
||||
console.debug('focusPrevious');
|
||||
this.focusMove(-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focuses the next input element, if it exists.
|
||||
*/
|
||||
focusNext() {
|
||||
console.debug('focusNext');
|
||||
this.focusMove(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Number} inc TODO
|
||||
*/
|
||||
focusMove(inc) {
|
||||
let input = this._focused;
|
||||
if (input) {
|
||||
let index = this._inputs.indexOf(input);
|
||||
if (index > -1 && (index + inc) < this._inputs.length) {
|
||||
let siblingInput = this._inputs[index + inc];
|
||||
if (siblingInput) {
|
||||
siblingInput.initFocus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
this._focused.initFocus();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const NO_FOCUS_TAB_INDEX = -1;
|
||||
const NORMAL_FOCUS_TAB_INDEX = 0;
|
||||
const PREV_TAB_INDEX = 999;
|
||||
const ACTIVE_FOCUS_TAB_INDEX = 1000;
|
||||
const NEXT_TAB_INDEX = 1001;
|
||||
const TEMP_TAB_INDEX = 2000;
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
import {Directive, ElementRef, Query, QueryList} from 'angular2/angular2';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
import {IonicConfig} from '../../config/config';
|
||||
|
||||
|
||||
let inputRegistry = [];
|
||||
let inputItemIds = -1;
|
||||
let activeInput = null;
|
||||
let lastInput = null;
|
||||
|
||||
/**
|
||||
* The Input component is used to focus text input elements.
|
||||
*
|
||||
* The `focusNext()` and `focusPrevious()` methods make it easy to focus input elements across all devices.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-input>
|
||||
* <ion-label>Name</ion-label>
|
||||
* <input value="Name" type="text">
|
||||
* </ion-input>
|
||||
* ```
|
||||
*/
|
||||
export class IonInput extends Ion {
|
||||
/**
|
||||
* @param {TODO} input TODO
|
||||
*/
|
||||
static registerInput(input) {
|
||||
inputRegistry.push(input);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} input TODO
|
||||
*/
|
||||
static setAsLastInput(input) {
|
||||
lastInput = input;
|
||||
}
|
||||
|
||||
/**
|
||||
* Focuses the previous input element, if it exists.
|
||||
*/
|
||||
static focusPrevious() {
|
||||
this.focusMove(-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Focuses the next input element, if it exists.
|
||||
*/
|
||||
static focusNext() {
|
||||
this.focusMove(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Number} inc TODO
|
||||
*/
|
||||
static focusMove(inc) {
|
||||
let input = activeInput || lastInput;
|
||||
if (input) {
|
||||
|
||||
let index = inputRegistry.indexOf(input);
|
||||
if (index > -1 && (index + inc) < inputRegistry.length) {
|
||||
let siblingInput = inputRegistry[index + inc];
|
||||
siblingInput && siblingInput.initFocus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Number} The ID of the next input element.
|
||||
*/
|
||||
static nextId() {
|
||||
return ++inputItemIds;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
static clearTabIndexes() {
|
||||
for (let i = 0; i < inputRegistry.length; i++) {
|
||||
inputRegistry[i].tabIndex = -1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -10,8 +10,7 @@ import {
|
||||
forwardRef
|
||||
} from 'angular2/angular2';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonInput} from '../form/input';
|
||||
import {IonicForm} from '../form/form';
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {pointerCoord} from '../../util/dom';
|
||||
|
||||
@ -109,7 +108,7 @@ class MediaSwitch {
|
||||
'</media-switch>',
|
||||
directives: [MediaSwitch]
|
||||
})
|
||||
export class Switch extends Ion {
|
||||
export class Switch {
|
||||
/**
|
||||
* TODO
|
||||
* @param {ElementRef} elementRef TODO
|
||||
@ -117,24 +116,24 @@ export class Switch extends Ion {
|
||||
* @param {NgControl=} ngControl TODO
|
||||
*/
|
||||
constructor(
|
||||
form: IonicForm,
|
||||
elementRef: ElementRef,
|
||||
config: IonicConfig,
|
||||
@Optional() private ngControl: NgControl
|
||||
) {
|
||||
super(elementRef, config);
|
||||
let self = this;
|
||||
this.form = form;
|
||||
form.register(this);
|
||||
|
||||
self.id = IonInput.nextId();
|
||||
self.tabIndex = 0;
|
||||
self.lastTouch = 0;
|
||||
self.mode = config.get('mode');
|
||||
this.lastTouch = 0;
|
||||
this.mode = config.get('mode');
|
||||
|
||||
self.onChange = (_) => {};
|
||||
self.onTouched = (_) => {};
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
|
||||
if (ngControl) ngControl.valueAccessor = this;
|
||||
|
||||
|
||||
let self = this;
|
||||
function pointerMove(ev) {
|
||||
let currentX = pointerCoord(ev).x;
|
||||
|
||||
@ -156,21 +155,20 @@ export class Switch extends Ion {
|
||||
}
|
||||
|
||||
this.addMoveListener = function() {
|
||||
this.switchEle.addEventListener('touchmove', pointerMove);
|
||||
this.switchEle.addEventListener('mousemove', pointerMove);
|
||||
self.switchEle.addEventListener('touchmove', pointerMove);
|
||||
self.switchEle.addEventListener('mousemove', pointerMove);
|
||||
elementRef.nativeElement.addEventListener('mouseout', pointerOut);
|
||||
};
|
||||
|
||||
this.removeMoveListener = function() {
|
||||
this.switchEle.removeEventListener('touchmove', pointerMove);
|
||||
this.switchEle.removeEventListener('mousemove', pointerMove);
|
||||
self.switchEle.removeEventListener('touchmove', pointerMove);
|
||||
self.switchEle.removeEventListener('mousemove', pointerMove);
|
||||
elementRef.nativeElement.removeEventListener('mouseout', pointerOut);
|
||||
};
|
||||
}
|
||||
|
||||
onInit() {
|
||||
super.onInit();
|
||||
this.labelId = 'label-' + this.id;
|
||||
this.labelId = 'label-' + this.inputId;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -234,6 +232,7 @@ export class Switch extends Ion {
|
||||
onDestroy() {
|
||||
this.removeMoveListener();
|
||||
this.switchEle = this.addMoveListener = this.removeMoveListener = null;
|
||||
this.form.deregister(this);
|
||||
}
|
||||
|
||||
isDisabled(ev) {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
|
||||
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonInput} from '../form/input';
|
||||
import {IonicForm} from '../form/form';
|
||||
import {Label} from './label';
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
import {Content} from '../content/content';
|
||||
import * as dom from '../../util/dom';
|
||||
@ -15,22 +14,18 @@ import {IonicPlatform} from '../../platform/platform';
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'ion-input',
|
||||
inputs: [
|
||||
'tabIndex'
|
||||
],
|
||||
host: {
|
||||
'(focus)': 'receivedFocus(true)',
|
||||
'(blur)': 'receivedFocus(false)',
|
||||
'(touchstart)': 'pointerStart($event)',
|
||||
'(touchend)': 'pointerEnd($event)',
|
||||
'(mouseup)': 'pointerEnd($event)',
|
||||
'[class.has-focus]': 'inputHasFocus',
|
||||
'[class.has-value]': 'inputHasValue',
|
||||
'[tabIndex]': 'activeTabIndex',
|
||||
'[class.has-focus]': 'hasFocus',
|
||||
'[class.has-value]': 'hasValue',
|
||||
'class': 'item'
|
||||
}
|
||||
})
|
||||
export class TextInput extends Ion {
|
||||
export class TextInput {
|
||||
/**
|
||||
* TODO
|
||||
* @param {ElementRef} elementRef TODO
|
||||
@ -42,31 +37,30 @@ export class TextInput extends Ion {
|
||||
* @param {QueryList<Label>} labelQry TODO
|
||||
*/
|
||||
constructor(
|
||||
form: IonicForm,
|
||||
elementRef: ElementRef,
|
||||
config: IonicConfig,
|
||||
app: IonicApp,
|
||||
ngZone: NgZone,
|
||||
zone: NgZone,
|
||||
platform: IonicPlatform,
|
||||
@Optional() @Host() scrollView: Content
|
||||
) {
|
||||
super(elementRef, config);
|
||||
this.form = form;
|
||||
form.register(this);
|
||||
|
||||
this.app = app;
|
||||
this.elementRef = elementRef;
|
||||
this.zone = zone;
|
||||
this.platform = platform;
|
||||
|
||||
this.scrollView = scrollView;
|
||||
this.scrollAssist = config.get('keyboardScrollAssist');
|
||||
this.id = IonInput.nextId();
|
||||
IonInput.registerInput(this);
|
||||
|
||||
this.app = app;
|
||||
this.zone = ngZone;
|
||||
this.platform = platform;
|
||||
|
||||
this.keyboardHeight = this.config.get('keyboardHeight');
|
||||
this.keyboardHeight = config.get('keyboardHeight');
|
||||
}
|
||||
|
||||
registerInputElement(textInputElement) {
|
||||
registerInput(textInputElement) {
|
||||
this.input = textInputElement;
|
||||
this.type = textInputElement.type;
|
||||
textInputElement.tabIndex = -1;
|
||||
}
|
||||
|
||||
registerLabel(label) {
|
||||
@ -77,17 +71,15 @@ export class TextInput extends Ion {
|
||||
* TODO
|
||||
*/
|
||||
onInit() {
|
||||
super.onInit();
|
||||
|
||||
if (this.input && this.label) {
|
||||
this.input.labelledBy = this.label.id = (this.label.id || 'label-' + this.id);
|
||||
this.input.labelledBy = this.label.id = (this.label.id || 'label-' + this.inputId);
|
||||
}
|
||||
|
||||
let self = this;
|
||||
self.scrollMove = (ev) => {
|
||||
self.deregListeners();
|
||||
|
||||
if (self.inputHasFocus) {
|
||||
if (self.hasFocus) {
|
||||
self.tempFocusMove();
|
||||
}
|
||||
};
|
||||
@ -119,7 +111,7 @@ export class TextInput extends Ion {
|
||||
|
||||
// focus this input if the pointer hasn't moved XX pixels
|
||||
// and the input doesn't already have focus
|
||||
if (!dom.hasPointerMoved(8, this.startCoord, endCoord) && !this.inputHasFocus) {
|
||||
if (!dom.hasPointerMoved(8, this.startCoord, endCoord) && !this.hasFocus) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
@ -149,7 +141,6 @@ export class TextInput extends Ion {
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
//TODO inconsistent return value, sometimes undefined
|
||||
initFocus() {
|
||||
let scrollView = this.scrollView;
|
||||
|
||||
@ -327,12 +318,12 @@ export class TextInput extends Ion {
|
||||
setFocus() {
|
||||
this.zone.run(() => {
|
||||
// set focus on the input element
|
||||
this.input && this.input.setFocus();
|
||||
this.input && this.input.initFocus();
|
||||
|
||||
// ensure the body hasn't scrolled down
|
||||
document.body.scrollTop = 0;
|
||||
|
||||
IonInput.setAsLastInput(this);
|
||||
this.form.resetInputs();
|
||||
});
|
||||
|
||||
if (this.scrollAssist && this.scrollView) {
|
||||
@ -343,25 +334,26 @@ export class TextInput extends Ion {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
tempFocusMove() {
|
||||
let focusHolder = this.app.focusHolder();
|
||||
focusHolder.setFocusHolder(this.type);
|
||||
this.form.setFocusHolder(this.type);
|
||||
}
|
||||
|
||||
get inputHasFocus() {
|
||||
get hasFocus() {
|
||||
return !!this.input && this.input.hasFocus;
|
||||
}
|
||||
|
||||
get inputHasValue() {
|
||||
get hasValue() {
|
||||
return !!this.input && this.input.hasValue;
|
||||
}
|
||||
|
||||
get activeTabIndex() {
|
||||
this.input.tabIndex = (this.inputHasFocus ? 1000 : -1);
|
||||
return -1;
|
||||
get tabIndex() {
|
||||
return this.input && this.input.tabIndex;
|
||||
}
|
||||
|
||||
set tabIndex(val) {
|
||||
if (this.input) {
|
||||
this.input.tabIndex = val;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -369,7 +361,7 @@ export class TextInput extends Ion {
|
||||
* @param {boolean} receivedFocus TODO
|
||||
*/
|
||||
receivedFocus(receivedFocus) {
|
||||
if (receivedFocus && !this.inputHasFocus) {
|
||||
if (receivedFocus && !this.hasFocus) {
|
||||
this.initFocus();
|
||||
|
||||
} else {
|
||||
@ -377,6 +369,11 @@ export class TextInput extends Ion {
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
this.deregListeners();
|
||||
this.form.deregister(this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -391,31 +388,33 @@ export class TextInput extends Ion {
|
||||
host: {
|
||||
'[tabIndex]': 'tabIndex',
|
||||
'[attr.aria-labelledby]': 'labelledBy',
|
||||
'class': 'text-input input'
|
||||
'class': 'text-input'
|
||||
}
|
||||
})
|
||||
export class TextInputElement {
|
||||
/**
|
||||
* TODO
|
||||
* @param {string} type The value of the underlying element's type attribute.
|
||||
* @param {ElementRef} elementRef TODO
|
||||
* @param {IonicConfig} config TODO
|
||||
*/
|
||||
|
||||
constructor(
|
||||
form: IonicForm,
|
||||
@Attribute('type') type: string,
|
||||
elementRef: ElementRef,
|
||||
@Optional() textInput: TextInput
|
||||
@Optional() textInputWrapper: TextInput
|
||||
) {
|
||||
this.form = form;
|
||||
this.type = type;
|
||||
this.elementRef = elementRef;
|
||||
this.tabIndex = this.tabIndex || '';
|
||||
textInput && textInput.registerInputElement(this);
|
||||
this.tabIndex = 0;
|
||||
|
||||
if (textInputWrapper) {
|
||||
// it's within ionic's ion-input, let ion-input handle what's up
|
||||
textInputWrapper.registerInput(this);
|
||||
|
||||
} else {
|
||||
// not within ion-input
|
||||
form.register(this);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus the input.
|
||||
*/
|
||||
setFocus() {
|
||||
initFocus() {
|
||||
this.elementRef.nativeElement.focus();
|
||||
}
|
||||
|
||||
@ -424,7 +423,7 @@ export class TextInputElement {
|
||||
* @returns {boolean} true if the input has focus, otherwise false.
|
||||
*/
|
||||
get hasFocus() {
|
||||
return dom.hasFocus(this.elementRef);
|
||||
return dom.hasFocus(this.elementRef.nativeElement);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -434,6 +433,10 @@ export class TextInputElement {
|
||||
get hasValue() {
|
||||
return (this.elementRef.nativeElement.value !== '');
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
this.form.deregister(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ 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 {ActionSheet} from '../components/action-sheet/action-sheet';
|
||||
import {Modal} from '../components/modal/modal';
|
||||
import {Popup} from '../components/popup/popup';
|
||||
@ -45,6 +46,7 @@ export function ionicBindings(rootCmp, config) {
|
||||
bind(IonicPlatform).toValue(platform),
|
||||
bind(TapClick).toValue(tapClick),
|
||||
bind(Events).toValue(events),
|
||||
IonicForm,
|
||||
OverlayController,
|
||||
ActionSheet,
|
||||
Modal,
|
||||
@ -92,10 +94,6 @@ function setupDom(window, document, config, platform) {
|
||||
bodyEle.classList.add('enable-hover');
|
||||
}
|
||||
|
||||
if (config.get('keyboardScrollAssist')) {
|
||||
// create focus holder
|
||||
}
|
||||
|
||||
/**
|
||||
* Hairline Shim
|
||||
* Add the "hairline" CSS class name to the body tag
|
||||
|
||||
@ -14,7 +14,6 @@ export * from './platform/plugins'
|
||||
export * from './platform/storage'
|
||||
|
||||
export * from './util/click-block'
|
||||
export * from './util/focus'
|
||||
export * from './util/events'
|
||||
|
||||
export * from './animations/animation'
|
||||
|
||||
@ -176,8 +176,12 @@ export function hasPointerMoved(threshold, startCoord, endCoord) {
|
||||
(Math.abs(startCoord.x - endCoord.x) > threshold || Math.abs(startCoord.y - endCoord.y) > threshold);
|
||||
}
|
||||
|
||||
export function isActive(ele) {
|
||||
return !!(ele && (document.activeElement === ele));
|
||||
}
|
||||
|
||||
export function hasFocus(ele) {
|
||||
return !!(ele && (document.activeElement === ele.nativeElement || document.activeElement === ele));
|
||||
return isActive(ele) && (ele.parentElement.querySelector(':focus') === ele);
|
||||
}
|
||||
|
||||
export function isTextInput(ele) {
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import {raf, ready} from './dom'
|
||||
|
||||
/* Focus Outline
|
||||
* --------------------------------------------------
|
||||
* When a keydown event happens, from a tab key, then the
|
||||
* 'key-input' class is added to the body element so focusable
|
||||
* elements have an outline. On a mousedown or touchstart
|
||||
* event then the 'key-input' class is removed.
|
||||
*/
|
||||
|
||||
|
||||
let isKeyInputEnabled = false
|
||||
|
||||
function keyDown(ev) {
|
||||
if (!isKeyInputEnabled && ev.keyCode == 9) {
|
||||
isKeyInputEnabled = true
|
||||
raf(enableKeyInput)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function enableKeyInput() {
|
||||
document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('key-input')
|
||||
|
||||
if (isKeyInputEnabled) {
|
||||
document.addEventListener('mousedown', pointerDown)
|
||||
document.addEventListener('touchstart', pointerDown)
|
||||
|
||||
} else {
|
||||
document.removeEventListener('mousedown', pointerDown)
|
||||
document.removeEventListener('touchstart', pointerDown)
|
||||
}
|
||||
}
|
||||
|
||||
function pointerDown() {
|
||||
isKeyInputEnabled = false
|
||||
raf(enableKeyInput)
|
||||
}
|
||||
|
||||
|
||||
ready().then(function() {
|
||||
document.addEventListener('keydown', keyDown)
|
||||
})
|
||||
Reference in New Issue
Block a user