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

fix(keyboard): do not use keyboard ctrl

Browse Source
This commit is contained in:
Adam Bradley
2017-10-16 12:25:25 -05:00
parent 54412a2a8c
commit 4f571c2da1
2 changed files with 9 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/core/src/components/keyboard-controller/keyboard-controller.tsx
View File

@ -1,5 +1,4 @@
import { Component, Event, EventEmitter, Prop} from '@stencil/core'; import { Component, Event, EventEmitter, Prop} from '@stencil/core';
import { KeyboardController } from './keyboard-interfaces';
import { Config } from '../..'; import { Config } from '../..';
import { focusOutActiveElement, getDocument, getWindow, hasFocusedTextInput } from '../../utils/helpers'; import { focusOutActiveElement, getDocument, getWindow, hasFocusedTextInput } from '../../utils/helpers';
import { KEY_TAB } from './keys'; import { KEY_TAB } from './keys';
@ -15,7 +14,7 @@ let timeoutValue: number = null;
@Component({ @Component({
tag: 'ion-keyboard-controller' tag: 'ion-keyboard-controller'
}) })
export class IonKeyboardController implements KeyboardController { export class IonKeyboardController {
@Prop({context: 'config'}) config: Config; @Prop({context: 'config'}) config: Config;
@Prop({context: 'dom'}) domController: any; @Prop({context: 'dom'}) domController: any;
@ -38,7 +37,7 @@ export class IonKeyboardController implements KeyboardController {
} }
} }
export function onCloseImpl(keyboardController: KeyboardController, callback: Function, pollingInterval: number, maxPollingChecks: number): Promise<any> { export function onCloseImpl(keyboardController: IonKeyboardController, callback: Function, pollingInterval: number, maxPollingChecks: number): Promise<any> {
let numChecks = 0; let numChecks = 0;
const promise: Promise<any> = callback ? null : new Promise((resolve) => { const promise: Promise<any> = callback ? null : new Promise((resolve) => {
@ -60,8 +59,8 @@ export function onCloseImpl(keyboardController: KeyboardController, callback: Fu
return promise; return promise;
} }
export function componentDidLoadImpl(keyboardController: KeyboardController) { export function componentDidLoadImpl(keyboardController: IonKeyboardController) {
focusOutline(getDocument(), keyboardController.config.get('focusOutline'), keyboardController); focusOutline(getDocument(), keyboardController.config.get('focusOutline'));
if (keyboardController.config.getBoolean('keyboardResizes', false)) { if (keyboardController.config.getBoolean('keyboardResizes', false)) {
listenV2(getWindow(), keyboardController); listenV2(getWindow(), keyboardController);
} else { } else {
@ -69,7 +68,7 @@ export function componentDidLoadImpl(keyboardController: KeyboardController) {
} }
} }
export function listenV2(win: Window, keyboardController: KeyboardController) { export function listenV2(win: Window, keyboardController: IonKeyboardController) {
v2KeyboardWillShowHandler = () => { v2KeyboardWillShowHandler = () => {
keyboardController.keyboardWillShow.emit(); keyboardController.keyboardWillShow.emit();
}; };
@ -91,7 +90,7 @@ export function listenV2(win: Window, keyboardController: KeyboardController) {
win.addEventListener('keyboardDidHide', v2KeyboardDidHideHandler); win.addEventListener('keyboardDidHide', v2KeyboardDidHideHandler);
} }
export function listenV1(win: Window, keyboardController: KeyboardController) { export function listenV1(win: Window, keyboardController: IonKeyboardController) {
v1keyboardHide = () => { v1keyboardHide = () => {
blurActiveInput(true, keyboardController); blurActiveInput(true, keyboardController);
}; };
@ -103,7 +102,7 @@ export function listenV1(win: Window, keyboardController: KeyboardController) {
win.addEventListener('native.keyboardshow', v1keyboardShow); win.addEventListener('native.keyboardshow', v1keyboardShow);
} }
export function blurActiveInput(shouldBlur: boolean, keyboardController: KeyboardController) { export function blurActiveInput(shouldBlur: boolean, keyboardController: IonKeyboardController) {
clearTimeout(timeoutValue); clearTimeout(timeoutValue);
if (shouldBlur) { if (shouldBlur) {
timeoutValue = setTimeout(() => { timeoutValue = setTimeout(() => {
@ -114,7 +113,7 @@ export function blurActiveInput(shouldBlur: boolean, keyboardController: Keyboar
} }
} }
export function focusOutline(doc: Document, value: boolean, keyboardController: KeyboardController) { export function focusOutline(doc: Document, value: boolean) {
/* Focus Outline /* Focus Outline
* -------------------------------------------------- * --------------------------------------------------
* By default, when a keydown event happens from a tab key, then * By default, when a keydown event happens from a tab key, then
@ -130,7 +129,7 @@ export function focusOutline(doc: Document, value: boolean, keyboardController:
let isKeyInputEnabled = false; let isKeyInputEnabled = false;
const cssClass = () => { const cssClass = () => {
keyboardController.dom.write(() => { window.requestAnimationFrame(() => {
doc.body.classList[isKeyInputEnabled ? 'add' : 'remove']('focus-outline'); doc.body.classList[isKeyInputEnabled ? 'add' : 'remove']('focus-outline');
}); });
}; };

14
packages/core/src/components/keyboard-controller/keyboard-interfaces.d.ts vendored
View File

@ -1,14 +0,0 @@
import { EventEmitter } from '@stencil/core';
import { Config } from '../..';
export interface KeyboardController {
config?: Config;
dom?: any; // TODO, make dom controller
keyboardWillShow?: EventEmitter;
keyboardDidShow?: EventEmitter;
keyboardWillHide?: EventEmitter;
keyboardDidHide?: EventEmitter;
isOpen?(): boolean;
onClose?(callback: Function, pollingInterval: number, maxPollingchecks: number): Promise<any>;
}