javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(modal): add card-style presentation with swipe to close gesture (#19428)

Browse Source 
resolves #18660
This commit is contained in:
Manu MA
2019-12-10 22:02:41 +01:00
committed by Liam DeBeasi
parent 56f67bd9a5
commit b3b3312711
29 changed files with 994 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/utils/overlays.ts
View File

@ -1,8 +1,10 @@
import { config } from '../global/config';
import { ActionSheetOptions, AlertOptions, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
import { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
let lastId = 0;
export const activeAnimations = new WeakMap<OverlayInterface, Animation[]>();
const createController = <Opts extends object, HTMLElm extends any>(tagName: string) => {
return {
create(options: Opts): Promise<HTMLElm> {
@ -140,7 +142,7 @@ export const dismiss = async (
data: any | undefined,
role: string | undefined,
name: keyof IonicConfig,
iosLeaveAnimation: AnimationBuilder,
iosLeaveAnimation: AnimationBuilder | undefined,
mdLeaveAnimation: AnimationBuilder,
opts?: any
): Promise<boolean> => {
@ -156,9 +158,13 @@ export const dismiss = async (
? overlay.leaveAnimation
: config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
if (animationBuilder !== undefined) {
await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
}
overlay.didDismiss.emit({ data, role });
activeAnimations.delete(overlay);
} catch (err) {
console.error(err);
}
@ -177,19 +183,12 @@ const overlayAnimation = async (
baseEl: any,
opts: any
): Promise<boolean> => {
if (overlay.animation) {
overlay.animation.destroy();
overlay.animation = undefined;
return false;
}
// Make overlay visible in case it's hidden
baseEl.classList.remove('overlay-hidden');
const aniRoot = baseEl.shadowRoot || overlay.el;
const animation = animationBuilder(aniRoot, opts);
overlay.animation = animation;
if (!overlay.animated || !config.getBoolean('animated', true)) {
animation.duration(0);
}
@ -203,9 +202,11 @@ const overlayAnimation = async (
});
}
const activeAni = activeAnimations.get(overlay) || [];
activeAnimations.set(overlay, [...activeAni, animation]);
await animation.play();
overlay.animation = undefined;
return true;
};