123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- import { EventEmitter, Injectable, NgZone } from '@angular/core';
- import { Config } from '../config/config';
- import { DomController } from './dom-controller';
- import { isTextInput } from '../util/dom';
- import { KEY_TAB } from './key';
- import { Platform } from './platform';
- /**
- * @name Keyboard
- * @description
- * The `Keyboard` class allows you to work with the keyboard events provided
- * by the Ionic keyboard plugin.
- *
- * @usage
- * ```ts
- * export class MyClass {
- *
- * constructor(public keyboard: Keyboard) { }
- *
- * }
- * ```
- */
- var Keyboard = (function () {
- function Keyboard(config, _plt, _zone, _dom) {
- this._plt = _plt;
- this._zone = _zone;
- this._dom = _dom;
- this.willShow = new EventEmitter();
- this.willHide = new EventEmitter();
- this.didShow = new EventEmitter();
- this.didHide = new EventEmitter();
- this.eventsAvailable = false;
- this.focusOutline(config.get('focusOutline'));
- var win = _plt.win();
- if (win.Ionic && win.Ionic.keyboardPlugin) {
- this.listenV2(win);
- }
- else {
- this.listenV1(win);
- }
- }
- Keyboard.prototype.listenV2 = function (win) {
- var _this = this;
- var platform = this._plt;
- platform.registerListener(win, 'keyboardWillShow', function (ev) {
- _this._zone.run(function () {
- _this.willShow.emit(ev.keyboardHeight);
- });
- }, { zone: false, passive: true });
- platform.registerListener(win, 'keyboardWillHide', function () {
- _this._zone.run(function () {
- _this.willHide.emit();
- });
- }, { zone: false, passive: true });
- platform.registerListener(win, 'keyboardDidShow', function (ev) {
- _this._zone.run(function () {
- _this.didShow.emit(ev.keyboardHeight);
- });
- }, { zone: false, passive: true });
- platform.registerListener(win, 'keyboardDidHide', function () {
- _this._zone.run(function () {
- _this.didHide.emit();
- });
- }, { zone: false, passive: true });
- this.eventsAvailable = true;
- };
- Keyboard.prototype.listenV1 = function (win) {
- var _this = this;
- var platform = this._plt;
- platform.registerListener(win, 'native.keyboardhide', function () {
- _this.blurActiveInput(true);
- }, { zone: false, passive: true });
- platform.registerListener(win, 'native.keyboardshow', function () {
- _this.blurActiveInput(false);
- }, { zone: false, passive: true });
- };
- Keyboard.prototype.blurActiveInput = function (shouldBlur) {
- var _this = this;
- var platform = this._plt;
- platform.cancelTimeout(this._tmr);
- if (shouldBlur) {
- this._tmr = platform.timeout(function () {
- // this custom cordova plugin event fires when the keyboard will hide
- // useful when the virtual keyboard is closed natively
- // https://github.com/ionic-team/ionic-plugin-keyboard
- if (_this.isOpen()) {
- platform.focusOutActiveElement();
- }
- }, 80);
- }
- };
- /**
- * Check to see if the keyboard is open or not.
- *
- * ```ts
- * export class MyClass {
- * constructor(public keyboard: Keyboard) {
- *
- * }
- *
- * keyboardCheck() {
- * console.log('The keyboard is open:', this.keyboard.isOpen());
- * }
- * }
- * ```
- *
- * @return {boolean} returns a true or false value if the keyboard is open or not.
- */
- Keyboard.prototype.isOpen = function () {
- return this.hasFocusedTextInput();
- };
- /**
- * When the keyboard is closed, call any methods you want.
- *
- * ```ts
- * export class MyClass {
- * constructor(public keyboard: Keyboard) {
- * this.keyboard.onClose(this.closeCallback);
- * }
- * closeCallback() {
- * // call what ever functionality you want on keyboard close
- * console.log('Closing time');
- * }
- * }
- * ```
- *
- * @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.
- */
- Keyboard.prototype.onClose = function (callback, pollingInternval, pollingChecksMax) {
- if (pollingInternval === void 0) { pollingInternval = KEYBOARD_CLOSE_POLLING; }
- if (pollingChecksMax === void 0) { pollingChecksMax = KEYBOARD_POLLING_CHECKS_MAX; }
- (void 0) /* console.debug */;
- var self = this;
- var checks = 0;
- var promise = null;
- if (!callback) {
- // a callback wasn't provided, so let's return a promise instead
- promise = new Promise(function (resolve) { callback = resolve; });
- }
- function checkKeyboard() {
- (void 0) /* console.debug */;
- if (!self.isOpen() || checks > pollingChecksMax) {
- self._plt.timeout(function () {
- self._zone.run(function () {
- (void 0) /* console.debug */;
- callback();
- });
- }, 400);
- }
- else {
- self._plt.timeout(checkKeyboard, pollingInternval);
- }
- checks++;
- }
- self._plt.timeout(checkKeyboard, pollingInternval);
- return promise;
- };
- /**
- * Programmatically close the keyboard.
- */
- Keyboard.prototype.close = function () {
- var _this = this;
- this._dom.read(function () {
- if (_this.isOpen()) {
- // only focus out when a text input has focus
- (void 0) /* console.debug */;
- _this._dom.write(function () {
- _this._plt.focusOutActiveElement();
- });
- }
- });
- };
- /**
- * @hidden
- */
- Keyboard.prototype.focusOutline = function (setting) {
- /* Focus Outline
- * --------------------------------------------------
- * By default, when a keydown event happens from a tab key, then
- * the 'focus-outline' css class is added to the body element
- * so focusable elements have an outline. On a mousedown or
- * touchstart event, then the 'focus-outline' css class is removed.
- *
- * Config default overrides:
- * focusOutline: true - Always add the focus-outline
- * focusOutline: false - Do not add the focus-outline
- */
- var self = this;
- var platform = self._plt;
- var doc = platform.doc();
- var isKeyInputEnabled = false;
- var unRegMouse;
- var unRegTouch;
- var evOpts = { passive: true, zone: false };
- function cssClass() {
- self._dom.write(function () {
- platform.doc().body.classList[isKeyInputEnabled ? 'add' : 'remove']('focus-outline');
- });
- }
- if (setting === true) {
- isKeyInputEnabled = true;
- return cssClass();
- }
- else if (setting === false) {
- return;
- }
- // default is to add the focus-outline when the tab key is used
- function keyDown(ev) {
- if (!isKeyInputEnabled && ev.keyCode === KEY_TAB) {
- isKeyInputEnabled = true;
- enableKeyInput();
- }
- }
- function pointerDown() {
- isKeyInputEnabled = false;
- enableKeyInput();
- }
- function enableKeyInput() {
- cssClass();
- unRegMouse && unRegMouse();
- unRegTouch && unRegTouch();
- if (isKeyInputEnabled) {
- // listen for when a mousedown or touchstart event happens
- unRegMouse = platform.registerListener(doc, 'mousedown', pointerDown, evOpts);
- unRegTouch = platform.registerListener(doc, 'touchstart', pointerDown, evOpts);
- }
- }
- // always listen for tab keydown events
- platform.registerListener(platform.doc(), 'keydown', keyDown, evOpts);
- };
- Keyboard.prototype.hasFocusedTextInput = function () {
- var activeEle = this._plt.getActiveElement();
- if (isTextInput(activeEle)) {
- return (activeEle.parentElement.querySelector(':focus') === activeEle);
- }
- return false;
- };
- /**
- * Set to true to hide the additional toolbar that is on top of the keyboard.
- * This toolbar features the Prev, Next, and Done buttons.
- * @param hidden
- */
- Keyboard.prototype.hideFormAccessoryBar = function (hidden) {
- var win = this._plt.win();
- if (win && win.Keyboard && win.Keyboard.hideFormAccessoryBar) {
- win.Keyboard.hideFormAccessoryBar(hidden);
- }
- };
- Keyboard.decorators = [
- { type: Injectable },
- ];
- /** @nocollapse */
- Keyboard.ctorParameters = function () { return [
- { type: Config, },
- { type: Platform, },
- { type: NgZone, },
- { type: DomController, },
- ]; };
- return Keyboard;
- }());
- export { Keyboard };
- var KEYBOARD_CLOSE_POLLING = 150;
- var KEYBOARD_POLLING_CHECKS_MAX = 100;
- //# sourceMappingURL=keyboard.js.map
|