I would like to use Ionic modalController to create a modal from an external page, but rather than calling modal.present() I would like to attach the created modal component to the y value of a pan event.
The affect I’m going for is the user dragging the modal up from a ion-footer drawer handle.
Below is some stripped down code, this is a simplified version and I realise that it is incomplete, but it serves in demonstrating what I want to do for this question.
export class MyPage {
myModal: any;
constructor(public elementRef: ElementRef, public modalCtrl: ModalController) { }
ngAfterViewInit() {
let hammer = new window['Hammer'](this.elementRef.nativeElement);
hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_VERTICAL });
hammer.on('panstart', (event) => {
this.onPanstart(event);
});
hammer.on('pan', (event) => {
this.onPan(event);
});
}
onPanstart(event) {
this.myModal = this.modalCtrl.create('MyModalPage');
};
onPan(event) {
// This is where I am stuck...
// Rather than calling modal present,
// I want to allow the modal to be draggable.
this.myModal.y = event.center.y;
};
}
There is this excellent tutorial by Josh Morony that explores what I’m attempting to do but the crucial difference is that I need to use a modal page for my implementation and a ion-footer component as the drawer handle.
I’m not sure how I can use the object returned from ModalController.create() or how I would apply css to position the modal window. All help greatly appreciated.