mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
@ -3,6 +3,7 @@ import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEn
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
import {Config} from '../../config/config';
|
||||
import {Keyboard} from '../../util/keyboard';
|
||||
import {raf, transitionEnd, pointerCoord} from '../../util/dom';
|
||||
import {ViewController} from '../nav/view-controller';
|
||||
import {Animation} from '../../animations/animation';
|
||||
@ -38,6 +39,7 @@ import {ScrollView} from '../../util/scroll-view';
|
||||
})
|
||||
export class Content extends Ion {
|
||||
private _padding: number = 0;
|
||||
private _inputPolling: boolean = false;
|
||||
private _scroll: ScrollView;
|
||||
private _scLsn: Function;
|
||||
private _scrollEle: HTMLElement;
|
||||
@ -46,6 +48,7 @@ export class Content extends Ion {
|
||||
private _elementRef: ElementRef,
|
||||
private _config: Config,
|
||||
private _app: IonicApp,
|
||||
private _keyboard: Keyboard,
|
||||
private _zone: NgZone,
|
||||
@Optional() viewCtrl: ViewController
|
||||
) {
|
||||
@ -356,7 +359,7 @@ export class Content extends Ion {
|
||||
* Adds padding to the bottom of the scroll element when the keyboard is open
|
||||
* so content below the keyboard can be scrolled into view.
|
||||
*/
|
||||
addScrollPadding(newPadding) {
|
||||
addScrollPadding(newPadding: number) {
|
||||
if (newPadding > this._padding) {
|
||||
console.debug('content addScrollPadding', newPadding);
|
||||
|
||||
@ -365,4 +368,17 @@ export class Content extends Ion {
|
||||
}
|
||||
}
|
||||
|
||||
clearScrollPaddingFocusOut() {
|
||||
if (!this._inputPolling) {
|
||||
this._inputPolling = true;
|
||||
|
||||
this._keyboard.onClose(() => {
|
||||
this._padding = 0;
|
||||
this._scrollEle.style.paddingBottom = '';
|
||||
this._inputPolling = false;
|
||||
this.addScrollPadding(0);
|
||||
}, 200, Infinity);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -21,7 +21,8 @@ export class InputBase {
|
||||
protected _keyboardHeight;
|
||||
protected _scrollMove: EventListener;
|
||||
protected _type: string = 'text';
|
||||
protected _useAssist: boolean = true;
|
||||
protected _useAssist: boolean;
|
||||
protected _usePadding: boolean;
|
||||
protected _value = '';
|
||||
protected _isTouch: boolean;
|
||||
protected _autoFocusAssist: string;
|
||||
@ -47,8 +48,9 @@ export class InputBase {
|
||||
protected _nav: NavController,
|
||||
ngControl: NgControl
|
||||
) {
|
||||
this._useAssist = config.get('scrollAssist');
|
||||
this._keyboardHeight = config.get('keyboardHeight');
|
||||
this._useAssist = config.getBoolean('scrollAssist', false);
|
||||
this._usePadding = config.getBoolean('scrollPadding', this._useAssist);
|
||||
this._keyboardHeight = config.getNumber('keyboardHeight');
|
||||
|
||||
this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
|
||||
this._autoComplete = config.get('autocomplete', 'off');
|
||||
@ -359,8 +361,10 @@ export class InputBase {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._usePadding) {
|
||||
// add padding to the bottom of the scroll view (if needed)
|
||||
scrollView.addScrollPadding(scrollData.scrollPadding);
|
||||
}
|
||||
|
||||
// manually scroll the text input to the top
|
||||
// do not allow any clicks while it's scrolling
|
||||
@ -385,6 +389,10 @@ export class InputBase {
|
||||
this._app.setEnabled(true);
|
||||
this._nav && this._nav.setTransitioning(false);
|
||||
this.regScrollMove();
|
||||
|
||||
if (this._usePadding) {
|
||||
this._scrollView.clearScrollPaddingFocusOut();
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
|
@ -70,7 +70,7 @@ export class Keyboard {
|
||||
* @param {function} callback method you want to call when the keyboard has been closed
|
||||
* @return {function} returns a callback that gets fired when the keyboard is closed
|
||||
*/
|
||||
onClose(callback, pollingInternval = KEYBOARD_CLOSE_POLLING) {
|
||||
onClose(callback, pollingInternval = KEYBOARD_CLOSE_POLLING, pollingChecksMax = KEYBOARD_POLLING_CHECKS_MAX) {
|
||||
console.debug('keyboard onClose');
|
||||
const self = this;
|
||||
let checks = 0;
|
||||
@ -84,7 +84,7 @@ export class Keyboard {
|
||||
|
||||
function checkKeyboard() {
|
||||
console.debug('keyboard isOpen', self.isOpen(), checks);
|
||||
if (!self.isOpen() || checks > 100) {
|
||||
if (!self.isOpen() || checks > pollingChecksMax) {
|
||||
rafFrames(30, () => {
|
||||
self._zone.run(() => {
|
||||
console.debug('keyboard closed');
|
||||
@ -183,3 +183,4 @@ export class Keyboard {
|
||||
}
|
||||
|
||||
const KEYBOARD_CLOSE_POLLING = 150;
|
||||
const KEYBOARD_POLLING_CHECKS_MAX = 100;
|
||||
|
Reference in New Issue
Block a user