@ionic/core
Version:
Base components for Ionic
68 lines (67 loc) • 3.02 kB
JavaScript
export function mdEnterAnimation(AnimationC, baseEl, ev) {
let originY = 'top';
let originX = 'left';
const contentEl = baseEl.querySelector('.popover-content');
const contentDimentions = contentEl.getBoundingClientRect();
const contentWidth = contentDimentions.width;
const contentHeight = contentDimentions.height;
const bodyWidth = window.innerWidth;
const bodyHeight = window.innerHeight;
const targetDim = ev && ev.target && ev.target.getBoundingClientRect();
const targetTop = targetDim != null && 'top' in targetDim
? targetDim.top
: bodyHeight / 2 - contentHeight / 2;
const isRTL = document.dir === 'rtl';
const targetLeft = targetDim != null && 'left' in targetDim
? isRTL
? targetDim.left - contentWidth + targetDim.width
: targetDim.left
: bodyWidth / 2 - contentWidth / 2;
const targetHeight = (targetDim && targetDim.height) || 0;
const popoverCSS = {
top: targetTop,
left: targetLeft
};
if (popoverCSS.left < POPOVER_MD_BODY_PADDING) {
popoverCSS.left = POPOVER_MD_BODY_PADDING;
}
else if (contentWidth + POPOVER_MD_BODY_PADDING + popoverCSS.left >
bodyWidth) {
popoverCSS.left = bodyWidth - contentWidth - POPOVER_MD_BODY_PADDING;
originX = 'right';
}
if (targetTop + targetHeight + contentHeight > bodyHeight &&
targetTop - contentHeight > 0) {
popoverCSS.top = targetTop - contentHeight;
baseEl.className = baseEl.className + ' popover-bottom';
originY = 'bottom';
}
else if (targetTop + targetHeight + contentHeight > bodyHeight) {
contentEl.style.bottom = POPOVER_MD_BODY_PADDING + 'px';
}
contentEl.style.top = popoverCSS.top + 'px';
contentEl.style.left = popoverCSS.left + 'px';
contentEl.style.transformOrigin = originY + ' ' + originX;
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation.fromTo('opacity', 0.01, 0.32);
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.01, 1);
const contentAnimation = new AnimationC();
contentAnimation.addElement(baseEl.querySelector('.popover-content'));
contentAnimation.fromTo('scale', 0.001, 1);
const viewportAnimation = new AnimationC();
viewportAnimation.addElement(baseEl.querySelector('.popover-viewport'));
viewportAnimation.fromTo('opacity', 0.01, 1);
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(300)
.add(backdropAnimation)
.add(wrapperAnimation)
.add(contentAnimation)
.add(viewportAnimation));
}
const POPOVER_MD_BODY_PADDING = 12;