Last active
May 16, 2018 12:44
-
-
Save diarcastro/7f092622004a9d56c10cf2d48d05f78d to your computer and use it in GitHub Desktop.
Provider to handle cordova-plugin-ionic-keyboard
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Include it on your module's providers | |
import { KeyboardProvider } from 'providers/keyboard/keyboard.ts' | |
@NgModule({ | |
providers: [ | |
... | |
, KeyboardProvider | |
] | |
}); | |
// Inject on your page or component | |
import { KeyboardProvider } from 'providers/keyboard/keyboard.ts' | |
@IonicPage() | |
@Component({ | |
selector: 'my-page', | |
templateUrl: 'my-page.html', | |
}) | |
export class MyPage { | |
constructor(public keyboard: KeyboardProvider){ | |
} | |
} | |
// Use the provider methods like this: | |
this.keyboard.isVisible; // true or false | |
this.keyboard.hide(); | |
this.keyboard.show(); | |
this.keyboard.keyboardWillShow().subscribe(event => { | |
console.log('Keyboard is Visible'); | |
}); | |
this.keyboard.keyboardWillHide().subscribe( => { | |
console.log('Keyboard is Hide'); | |
}); | |
// For more information read the file keyboard.ts or follow the plugin documentation on https://github.com/ionic-team/cordova-plugin-ionic-keyboard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* cordova-plugin-ionic-keyboard Provider | |
* Diego Castro <ing.diegocastro@gmail.com> | |
* | |
*/ | |
import { Injectable, OnDestroy, OnInit } from '@angular/core'; | |
import { Observable } from 'rxjs/Observable'; | |
import { Subscription } from 'rxjs/Subscription'; | |
interface IKeyboard { | |
isVisible: boolean; | |
hideFormAccessoryBar(value: boolean, successCallback?: Function); | |
hide(); | |
show(); | |
} | |
declare var Keyboard: IKeyboard; | |
@Injectable() | |
export class KeyboardProvider implements OnDestroy, OnInit { | |
/** | |
* Keyboard instance | |
* | |
* @private | |
* @type {IKeyboard} | |
* @memberof KeyboardProvider | |
*/ | |
private _keyboard: IKeyboard; | |
private _keyboardDidHide$: Observable<void> = null; | |
private _keyboardDidShow$: Observable<KeyboardEvent> = null; | |
private _keyboardWillShow$: Observable<KeyboardEvent> = null; | |
private _keyboardWillHide$: Observable<void> = null; | |
constructor() { | |
this._keyboard = Keyboard; | |
} | |
ngOnInit() { | |
} | |
/** | |
* Determine if the keyboard is visible | |
* | |
* @readonly | |
* @type {boolean} | |
* @memberof KeyboardProvider | |
*/ | |
get isVisible(): boolean { | |
return this._keyboard.isVisible; | |
} | |
/** | |
* Hide the keyboard toolbar | |
* @param value | |
* @param successCallback | |
*/ | |
hideFormAccessoryBar(value: boolean, successCallback?: Function) { | |
this._keyboard.hideFormAccessoryBar(value, successCallback); | |
} | |
/** | |
* Show the keyboard | |
*/ | |
show() { | |
this._keyboard.show(); | |
} | |
/** | |
* Hide the keyboard | |
* | |
* @memberof KeyboardProvider | |
*/ | |
hide() { | |
this._keyboard.hide(); | |
} | |
/** | |
* This event is fired when the keyboard is fully closed. | |
* | |
* @returns {Observable<void>} | |
* @memberof KeyboardProvider | |
*/ | |
keyboardDidHide(): Observable<void> { | |
if (!this._keyboardDidHide$) { | |
this._keyboardDidHide$ = Observable.fromEvent(window, 'keyboardDidHide'); | |
} | |
return this._keyboardDidHide$; | |
} | |
/** | |
* This event is fired when the keyboard is fully open. | |
* | |
* @returns {Observable<KeyboardEvent>} | |
* @memberof KeyboardProvider | |
*/ | |
keyboardDidShow(): Observable<KeyboardEvent> { | |
if (!this._keyboardDidShow$) { | |
this._keyboardDidShow$ = Observable.fromEvent(window, 'keyboardDidShow'); | |
} | |
return this._keyboardDidShow$; | |
} | |
/** | |
* This event is fired when the keyboard is fully closed. | |
* | |
* @returns {Observable<void>} | |
* @memberof KeyboardProvider | |
*/ | |
keyboardWillHide(): Observable<void> { | |
if (!this._keyboardWillHide$) { | |
this._keyboardWillHide$ = Observable.fromEvent(window, 'keyboardWillHide'); | |
} | |
return this._keyboardWillHide$; | |
} | |
/** | |
* This event fires before keyboard will be shown. | |
* | |
* @returns {Observable<KeyboardEvent>} | |
* @memberof KeyboardProvider | |
*/ | |
keyboardWillShow(): Observable<KeyboardEvent> { | |
if (!this._keyboardWillShow$) { | |
this._keyboardWillShow$ = Observable.fromEvent(window, 'keyboardWillShow'); | |
} | |
return this._keyboardWillShow$; | |
} | |
ngOnDestroy() { | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, I keep getting the
this._keyboard.hideFormAccessoryBar is not a function
error when using this example. Does anyone know what causes this/ how to fix this?