javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): fix tabbing between tappable inputs

Browse Source
This commit is contained in:
Adam Bradley
2016-11-18 15:20:53 -06:00
parent 86b158008d
commit c4cf9df387
5 changed files with 74 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/checkbox/checkbox.ts
View File

@ -2,7 +2,7 @@ import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, Host
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Config } from '../../config/config';
import { Form } from '../../util/form';
import { Form, IonicTapInput } from '../../util/form';
import { Ion } from '../ion';
import { isTrueProperty } from '../../util/util';
import { Item } from '../item/item';
@ -72,7 +72,7 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
providers: [CHECKBOX_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
})
export class Checkbox extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, ControlValueAccessor, OnDestroy {
/** @private */
_checked: boolean = false;
/** @private */
@ -210,6 +210,13 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
this.onTouched();
}
/**
* @private
*/
initFocus() {
this._elementRef.nativeElement.querySelector('button').focus();
}
/**
* @private
*/

11
src/components/radio/radio-button.ts
View File

@ -1,7 +1,7 @@
import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
import { Config } from '../../config/config';
import { Form } from '../../util/form';
import { Form, IonicTapInput } from '../../util/form';
import { Ion } from '../ion';
import { isBlank, isCheckedProperty, isPresent, isTrueProperty } from '../../util/util';
import { Item } from '../item/item';
@ -63,7 +63,7 @@ import { RadioGroup } from './radio-group';
},
encapsulation: ViewEncapsulation.None,
})
export class RadioButton extends Ion implements OnDestroy, OnInit {
export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit {
/**
* @internal
@ -180,6 +180,13 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
this._item && this._item.setElementClass('item-radio-disabled', this._disabled);
}
/**
* @private
*/
initFocus() {
this._elementRef.nativeElement.querySelector('button').focus();
}
/**
* @internal
*/

26
src/components/toggle/toggle.ts
View File

@ -1,12 +1,13 @@
import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Config } from '../../config/config';
import { Form } from '../../util/form';
import { Form, IonicTapInput } from '../../util/form';
import { isTrueProperty } from '../../util/util';
import { Ion } from '../ion';
import { Item } from '../item/item';
import { pointerCoord } from '../../util/dom';
import { Key } from '../../util/key';
import { Haptic } from '../../util/haptic';
import { UIEventManager } from '../../util/ui-event-manager';
@ -74,7 +75,7 @@ export const TOGGLE_VALUE_ACCESSOR: any = {
providers: [TOGGLE_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
})
export class Toggle extends Ion implements AfterContentInit, ControlValueAccessor, OnDestroy {
export class Toggle extends Ion implements IonicTapInput, AfterContentInit, ControlValueAccessor, OnDestroy {
/** @private */
_checked: boolean = false;
/** @private */
@ -285,6 +286,25 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
});
}
/**
* @private
*/
@HostListener('keyup', ['$event']) _keyup(ev: KeyboardEvent) {
if (ev.keyCode === Key.SPACE || ev.keyCode === Key.ENTER) {
console.debug(`toggle, keyup: ${ev.keyCode}`);
ev.preventDefault();
ev.stopPropagation();
this.onChange(!this._checked);
}
}
/**
* @private
*/
initFocus() {
this._elementRef.nativeElement.querySelector('button').focus();
}
/**
* @private
*/

23
src/util/form.ts
View File

@ -25,7 +25,7 @@ export class Form {
}
focusOut() {
let activeElement = <HTMLElement>document.activeElement;
const activeElement = <HTMLElement>document.activeElement;
activeElement && activeElement.blur && activeElement.blur();
}
@ -61,3 +61,24 @@ export class Form {
}
}
export abstract class IonicTapInput implements IonicFormInput {
abstract initFocus();
abstract get checked(): boolean;
abstract set checked(val: boolean);
abstract get disabled(): boolean;
abstract set disabled(val: boolean);
}
export abstract class IonicFormInput {
abstract initFocus();
}

15
src/util/key.ts
View File

@ -1,5 +1,12 @@
export enum Key {
ENTER = <any> 13,
ESCAPE = <any> 27,
TAB = <any> 9
};
LEFT = 37,
UP = 38,
RIGHT = 39,
DOWN = 40,
ENTER = 13,
ESCAPE = 27,
SPACE = 32,
TAB = 9
}