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() { | |
} | |
} |
I am more or less in same situation, so I decided to stick with the old (depreciated) ionic-plugin-keyboard.
I've posted an issue here, related to provider :
ionic-team/cordova-plugin-ionic-keyboard#9
They gave some 'workaround' :
danielsogl/awesome-cordova-plugins#2306
But it looks messy for me really.
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?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The provider has no reference to cordova-plugin-ionic-keyboard. I expected to see an import at least?! And when I use it I have the same messages as the depricated plugin (which is not there anymore, I even wiped the node-modules, www and re-installed the platforms). If I call .show() in iOS I get : WARN: Showing keyboard not supported in iOS due to platform limitations in Xcode. Please tell me what I'm doing wrong.