javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(all): dynamic import

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-05-08 19:39:07 +02:00
parent cc7ab4e3c6
commit bb809b63ed
56 changed files with 179 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/action-sheet/action-sheet.tsx
View File

@@ -2,10 +2,10 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@
import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import mdEnterAnimation from './animations/md.enter';
import mdLeaveAnimation from './animations/md.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
@Component({

2
core/src/components/action-sheet/animations/ios.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Action Sheet Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/action-sheet/animations/ios.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Action Sheet Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/action-sheet/animations/md.enter.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* MD Action Sheet Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/action-sheet/animations/md.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* MD Action Sheet Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

8
core/src/components/alert/alert.tsx
View File

@@ -3,10 +3,10 @@ import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassM
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import mdEnterAnimation from './animations/md.enter';
import mdLeaveAnimation from './animations/md.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
@Component({
tag: 'ion-alert',

2
core/src/components/alert/animations/ios.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Alert Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/alert/animations/ios.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Alert Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/alert/animations/md.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Alert Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/alert/animations/md.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Alert Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/app/app.ios.scss
View File

@@ -15,8 +15,8 @@
// TODO this can be simplified
&.statusbar-padding {
.ion-page,
> ion-header,
.ion-page > ion-header,
ion-tab ion-nav .ion-page > ion-header,
ion-menu > .menu-inner,
ion-menu > .menu-inner > ion-header {
@include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);

14
core/src/components/app/app.tsx
View File

@@ -21,6 +21,10 @@ export class App {
@Prop({ context: 'window' }) win!: Window;
@Prop({ context: 'config' }) config!: Config;
componentDidLoad() {
loadInputShims(this.win, this.config);
}
hostData() {
const hybrid = isHybrid(this.win);
const statusBar = this.config.getBoolean('statusbarPadding', hybrid);
@@ -35,13 +39,17 @@ export class App {
render() {
const device = this.config.getBoolean('isDevice', isDevice(this.win));
const inputShims = this.config.getBoolean('inputShims', needInputShims(this.win));
return [
inputShims && <ion-input-shims></ion-input-shims>,
<ion-tap-click></ion-tap-click>,
device && <ion-status-tap></ion-status-tap>,
<slot></slot>
];
}
}
async function loadInputShims(win: Window, config: Config) {
const inputShims = config.getBoolean('inputShims', needInputShims(win));
if (inputShims) {
(await import('../../utils/input-shims/input-shims')).startInputShims(win.document, config);
}
}

96
core/src/components/input-shims/hacks/common.ts
View File

@@ -1,96 +0,0 @@
const RELOCATED_KEY = '$ionRelocated';
export function relocateInput(
componentEl: HTMLElement,
inputEl: HTMLInputElement,
shouldRelocate: boolean,
inputRelativeY = 0
) {
if ((componentEl as any)[RELOCATED_KEY] === shouldRelocate) {
return;
}
console.debug(`native-input, hideCaret, shouldHideCaret: ${shouldRelocate}, input value: ${inputEl.value}`);
if (shouldRelocate) {
// this allows for the actual input to receive the focus from
// the user's touch event, but before it receives focus, it
// moves the actual input to a location that will not screw
// up the app's layout, and does not allow the native browser
// to attempt to scroll the input into place (messing up headers/footers)
// the cloned input fills the area of where native input should be
// while the native input fakes out the browser by relocating itself
// before it receives the actual focus event
// We hide the focused input (with the visible caret) invisiable by making it scale(0),
cloneInputComponent(componentEl, inputEl);
const doc = componentEl.ownerDocument;
const tx = doc.dir === 'rtl' ? 9999 : -9999;
inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0)`;
// TODO
// inputEle.style.opacity = '0';
} else {
removeClone(componentEl, inputEl);
}
(componentEl as any)[RELOCATED_KEY] = shouldRelocate;
}
export function isFocused(input: HTMLInputElement): boolean {
return input === input.ownerDocument.activeElement;
}
function removeClone(componentEl: HTMLElement, inputEl: HTMLElement) {
if (componentEl && componentEl.parentElement) {
const clonedInputEles = componentEl.parentElement.querySelectorAll('.cloned-input');
for (let i = 0; i < clonedInputEles.length; i++) {
clonedInputEles[i].remove();
}
componentEl.style.pointerEvents = '';
}
(<any>inputEl.style)['transform'] = '';
inputEl.style.opacity = '';
}
function cloneInputComponent(componentEl: HTMLElement, inputEl: HTMLInputElement) {
// Make sure we kill all the clones before creating new ones
// It is a defensive, removeClone() should do nothing
// removeClone(plt, srcComponentEle, srcNativeInputEle);
// given a native <input> or <textarea> element
// find its parent wrapping component like <ion-input> or <ion-textarea>
// then clone the entire component
const parentElement = componentEl.parentElement;
const doc = componentEl.ownerDocument;
if (componentEl && parentElement) {
// DOM READ
const srcTop = componentEl.offsetTop;
const srcLeft = componentEl.offsetLeft;
const srcWidth = componentEl.offsetWidth;
const srcHeight = componentEl.offsetHeight;
// DOM WRITE
// not using deep clone so we don't pull in unnecessary nodes
const clonedComponentEle = doc.createElement('div');
const clonedStyle = clonedComponentEle.style;
clonedComponentEle.classList.add(...Array.from(componentEl.classList));
clonedComponentEle.classList.add('cloned-input');
clonedComponentEle.setAttribute('aria-hidden', 'true');
clonedStyle.pointerEvents = 'none';
clonedStyle.position = 'absolute';
clonedStyle.top = srcTop + 'px';
clonedStyle.left = srcLeft + 'px';
clonedStyle.width = srcWidth + 'px';
clonedStyle.height = srcHeight + 'px';
const clonedInputEl = doc.createElement('input');
clonedInputEl.classList.add(...Array.from(inputEl.classList));
clonedInputEl.value = inputEl.value;
clonedInputEl.type = inputEl.type;
clonedInputEl.placeholder = inputEl.placeholder;
clonedInputEl.tabIndex = -1;
clonedComponentEle.appendChild(clonedInputEl);
parentElement.appendChild(clonedComponentEle);
componentEl.style.pointerEvents = 'none';
}
inputEl.style.transform = 'scale(0)';
}

30
core/src/components/input-shims/hacks/hide-caret.ts
View File

@@ -1,30 +0,0 @@
import { isFocused, relocateInput } from './common';
export default function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement, scrollEl: HTMLIonScrollElement) {
if (!scrollEl || !inputEl) {
return () => { return; };
}
console.debug('Input: enableHideCaretOnScroll');
const scrollHideCaret = (shouldHideCaret: boolean) => {
// console.log('scrollHideCaret', shouldHideCaret)
if (isFocused(inputEl)) {
relocateInput(componentEl, inputEl, shouldHideCaret);
}
};
const onBlur = () => relocateInput(componentEl, inputEl, false);
const hideCaret = () => scrollHideCaret(true);
const showCaret = () => scrollHideCaret(false);
scrollEl && scrollEl.addEventListener('ionScrollStart', hideCaret);
scrollEl && scrollEl.addEventListener('ionScrollEnd', showCaret);
inputEl.addEventListener('blur', onBlur);
return () => {
scrollEl.removeEventListener('ionScrollStart', hideCaret);
scrollEl.removeEventListener('ionScrollEnd', showCaret);
inputEl.addEventListener('ionBlur', onBlur);
};
}

65
core/src/components/input-shims/hacks/input-blurring.ts
View File

@@ -1,65 +0,0 @@
const SKIP_BLURRING = ['INPUT', 'TEXTAREA', 'ION-INPUT', 'ION-TEXTAREA'];
export default function enableInputBlurring(doc: Document) {
console.debug('Input: enableInputBlurring');
let focused = true;
let didScroll = false;
function onScroll() {
didScroll = true;
}
function onFocusin() {
focused = true;
}
function onTouchend(ev: any) {
// if app did scroll return early
if (didScroll) {
didScroll = false;
return;
}
const active = doc.activeElement as HTMLElement;
if (!active) {
return;
}
// only blur if the active element is a text-input or a textarea
if (SKIP_BLURRING.indexOf(active.tagName) === -1) {
return;
}
// if the selected target is the active element, do not blur
const tapped = ev.target;
if (tapped === active) {
return;
}
if (SKIP_BLURRING.indexOf(tapped.tagName) >= 0) {
return;
}
// skip if div is a cover
if (tapped.classList.contains('input-cover')) {
return;
}
focused = false;
// TODO: find a better way, why 50ms?
setTimeout(() => {
if (!focused) {
active.blur();
}
}, 50);
}
doc.addEventListener('ionScrollStart', onScroll);
doc.addEventListener('focusin', onFocusin, true);
doc.addEventListener('touchend', onTouchend, false);
return () => {
doc.removeEventListener('ionScrollStart', onScroll, true);
doc.removeEventListener('focusin', onFocusin, true);
doc.removeEventListener('touchend', onTouchend, false);
};
}

90
core/src/components/input-shims/hacks/scroll-assist.ts
View File

@@ -1,90 +0,0 @@
import { pointerCoord } from '../../../utils/helpers';
import { isFocused, relocateInput } from './common';
import { getScrollData } from './scroll-data';
export default function enableScrollAssist(
componentEl: HTMLElement,
inputEl: HTMLInputElement,
contentEl: HTMLIonContentElement,
keyboardHeight: number
) {
let coord: any;
const touchStart = (ev: Event) => {
coord = pointerCoord(ev);
console.debug(`input-base, pointerStart, type: ${ev.type}`);
};
const touchEnd = (ev: Event) => {
// input cover touchend/mouseup
console.debug(`input-base, pointerEnd, type: ${ev.type}`);
if (!coord) {
return;
}
// get where the touchend/mouseup ended
const endCoord = pointerCoord(ev);
// focus this input if the pointer hasn't moved XX pixels
// and the input doesn't already have focus
if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {
ev.preventDefault();
ev.stopPropagation();
// begin the input focus process
jsSetFocus(componentEl, inputEl, contentEl, keyboardHeight);
}
};
componentEl.addEventListener('touchstart', touchStart, true);
componentEl.addEventListener('touchend', touchEnd, true);
return () => {
componentEl.removeEventListener('touchstart', touchStart, true);
componentEl.removeEventListener('touchend', touchEnd, true);
};
}
function jsSetFocus(
componentEl: HTMLElement,
inputEl: HTMLInputElement,
contentEl: HTMLIonContentElement,
keyboardHeight: number
) {
const scrollData = getScrollData(componentEl, contentEl, keyboardHeight);
if (Math.abs(scrollData.scrollAmount) < 4) {
// the text input is in a safe position that doesn't
// require it to be scrolled into view, just set focus now
inputEl.focus();
return;
}
// temporarily move the focus to the focus holder so the browser
// doesn't freak out while it's trying to get the input in place
// at this point the native text input still does not have focus
relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
inputEl.focus();
// scroll the input into place
contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration, () => {
// the scroll view is in the correct position now
// give the native text input focus
relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);
// ensure this is the focused input
inputEl.focus();
});
}
function hasPointerMoved(threshold: number, startCoord: PointerCoordinates, endCoord: PointerCoordinates) {
if (startCoord && endCoord) {
const deltaX = (startCoord.x - endCoord.x);
const deltaY = (startCoord.y - endCoord.y);
const distance = deltaX * deltaX + deltaY * deltaY;
return distance > (threshold * threshold);
}
return false;
}
export interface PointerCoordinates {
x: number;
y: number;
}

70
core/src/components/input-shims/hacks/scroll-data.ts
View File

@@ -1,70 +0,0 @@
const SCROLL_ASSIST_SPEED = 0.3;
export interface ScrollData {
scrollAmount: number;
scrollPadding: number;
scrollDuration: number;
inputSafeY: number;
}
export function getScrollData(componentEl: HTMLElement, contentEl: HTMLElement, keyboardHeight: number): ScrollData {
if (!contentEl) {
return {
scrollAmount: 0,
scrollPadding: 0,
scrollDuration: 0,
inputSafeY: 0,
};
}
const itemEl = <HTMLElement>componentEl.closest('ion-item,[ion-item]') || componentEl;
return calcScrollData(
itemEl.getBoundingClientRect(),
contentEl.getBoundingClientRect(),
keyboardHeight,
window.innerHeight
);
}
function calcScrollData(
inputRect: ClientRect,
contentRect: ClientRect,
keyboardHeight: number,
plaformHeight: number
): ScrollData {
// compute input's Y values relative to the body
const inputTop = inputRect.top;
const inputBottom = inputRect.bottom;
// compute visible area
const visibleAreaTop = contentRect.top;
const visibleAreaBottom = Math.min(contentRect.bottom, plaformHeight - keyboardHeight);
// compute safe area
const safeAreaTop = visibleAreaTop + 10;
const safeAreaBottom = visibleAreaBottom / 2.0;
// figure out if each edge of teh input is within the safe area
const distanceToBottom = safeAreaBottom - inputBottom;
const distanceToTop = safeAreaTop - inputTop;
// The scrollAmount is the negated distance to the safe area.
const scrollAmount = Math.round((distanceToBottom < 0)
? -distanceToBottom
: (distanceToTop > 0)
? -distanceToTop
: 0);
const distance = Math.abs(scrollAmount);
const duration = distance / SCROLL_ASSIST_SPEED;
const scrollDuration = Math.min(400, Math.max(150, duration));
return {
scrollAmount,
scrollDuration,
scrollPadding: keyboardHeight,
inputSafeY: -(inputTop - safeAreaTop) + 4
};
}

45
core/src/components/input-shims/hacks/scroll-padding.ts
View File

@@ -1,45 +0,0 @@
const PADDING_TIMER_KEY = '$ionPaddingTimer';
export default function enableScrollPadding(doc: Document, keyboardHeight: number) {
console.debug('Input: enableScrollPadding');
function onFocusin(ev: any) {
setScrollPadding(ev.target, keyboardHeight);
}
function onFocusout(ev: any) {
setScrollPadding(ev.target, 0);
}
doc.addEventListener('focusin', onFocusin);
doc.addEventListener('focusout', onFocusout);
return () => {
doc.removeEventListener('focusin', onFocusin);
doc.removeEventListener('focusout', onFocusout);
};
}
function setScrollPadding(input: HTMLElement, keyboardHeight: number) {
if (input.tagName !== 'INPUT') {
return;
}
if (input.parentElement && input.parentElement.tagName === 'ION-INPUT') {
return;
}
const el = input.closest('.scroll-inner') as HTMLElement;
if (!el) {
return;
}
const timer = (el as any)[PADDING_TIMER_KEY];
if (timer) {
clearTimeout(timer);
}
if (keyboardHeight > 0) {
el.style.paddingBottom = keyboardHeight + 'px';
} else {
(el as any)[PADDING_TIMER_KEY] = setTimeout(() => {
el.style.paddingBottom = '';
}, 120);
}
}

20
core/src/components/input-shims/hacks/wip.ts
View File

@@ -1,20 +0,0 @@
// export function enableScrollMove(
// componentEl: HTMLElement,
// inputEl: HTMLElement,
// contentEl: HTMLIonContentElement,
// keyboardHeight: number
// ) {
// console.debug('Input: enableAutoScroll');
// const onFocus = () => {
// const scrollData = getScrollData(componentEl, contentEl, keyboardHeight);
// if (Math.abs(scrollData.scrollAmount) > 4) {
// contentEl.scrollBy(0, scrollData.scrollAmount);
// }
// };
// inputEl.addEventListener('focus', onFocus);
// return () => {
// inputEl.removeEventListener('focus', onFocus);
// };
// }

101
core/src/components/input-shims/input-shims.tsx
View File

@@ -1,101 +0,0 @@
import { Component, Listen, Prop } from '@stencil/core';
import { Config } from '../../interface';
import enableHideCaretOnScroll from './hacks/hide-caret';
import enableInputBlurring from './hacks/input-blurring';
import enableScrollAssist from './hacks/scroll-assist';
import enableScrollPadding from './hacks/scroll-padding';
const INPUT_BLURRING = true;
const SCROLL_ASSIST = true;
const SCROLL_PADDING = true;
const HIDE_CARET = true;
@Component({
tag: 'ion-input-shims',
})
export class InputShims {
private didLoad = false;
private hideCaret = false;
private scrollAssist = false;
private keyboardHeight = 0;
private hideCaretMap = new WeakMap<HTMLElement, Function>();
private scrollAssistMap = new WeakMap<HTMLElement, Function>();
@Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'document' }) doc!: Document;
componentDidLoad() {
this.keyboardHeight = this.config.getNumber('keyboardHeight', 290);
this.scrollAssist = this.config.getBoolean('scrollAssist', true);
this.hideCaret = this.config.getBoolean('hideCaretOnScroll', true);
const inputBlurring = this.config.getBoolean('inputBlurring', true);
if (inputBlurring && INPUT_BLURRING) {
enableInputBlurring(this.doc);
}
const scrollPadding = this.config.getBoolean('scrollPadding', true);
if (scrollPadding && SCROLL_PADDING) {
enableScrollPadding(this.doc, this.keyboardHeight);
}
// Input might be already loaded in the DOM before ion-device-hacks did.
// At this point we need to look for all the ion-inputs not registered yet
// and register them.
const inputs = Array.from(this.doc.querySelectorAll('ion-input'));
for (const input of inputs) {
this.registerInput(input);
}
this.didLoad = true;
}
@Listen('body:ionInputDidLoad')
protected onInputDidLoad(event: any) {
if (this.didLoad) {
this.registerInput(event.target);
}
}
@Listen('body:ionInputDidUnload')
protected onInputDidUnload(event: any) {
if (this.didLoad) {
this.unregisterInput(event.target);
}
}
private registerInput(componentEl: HTMLElement) {
const inputEl = componentEl.querySelector('input');
const scrollEl = componentEl.closest('ion-scroll');
const contentEl = componentEl.closest('ion-content');
if (!inputEl) {
return;
}
if (HIDE_CARET && scrollEl && this.hideCaret && !this.hideCaretMap.has(componentEl)) {
const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
this.hideCaretMap.set(componentEl, rmFn);
}
if (SCROLL_ASSIST && contentEl && this.scrollAssist && !this.scrollAssistMap.has(componentEl)) {
const rmFn = enableScrollAssist(componentEl, inputEl, contentEl, this.keyboardHeight);
this.scrollAssistMap.set(componentEl, rmFn);
}
}
private unregisterInput(componentEl: HTMLElement) {
if (HIDE_CARET && this.hideCaret) {
const fn = this.hideCaretMap.get(componentEl);
fn && fn();
this.hideCaretMap.delete(componentEl);
}
if (SCROLL_ASSIST && this.scrollAssist) {
const fn = this.scrollAssistMap.get(componentEl);
fn && fn();
this.scrollAssistMap.delete(componentEl);
}
}
}

11
core/src/components/input-shims/readme.md
View File

@@ -1,11 +0,0 @@
# ion-app
<!-- Auto Generated Below -->
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

2
core/src/components/loading/animations/ios.enter.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* iOS Loading Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/loading/animations/ios.leave.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* iOS Loading Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/loading/animations/md.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Loading Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/loading/animations/md.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Loading Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

8
core/src/components/loading/loading.tsx
View File

@@ -3,11 +3,11 @@ import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import mdEnterAnimation from './animations/md.enter';
import mdLeaveAnimation from './animations/md.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
@Component({
tag: 'ion-loading',

2
core/src/components/menu-controller/animations/base.ts
View File

@@ -6,7 +6,7 @@ import { Animation } from '../../../interface';
* type will provide their own animations for open and close
* and registers itself with Menu.
*/
export default function baseAnimation(Animation: Animation): Promise<Animation> {
export function baseAnimation(Animation: Animation): Promise<Animation> {
// https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
// https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves

4
core/src/components/menu-controller/animations/overlay.ts
View File

@@ -1,5 +1,5 @@
import { Animation, Menu } from '../../../interface';
import baseAnimation from './base';
import { baseAnimation } from './base';
const BOX_SHADOW_WIDTH = 8;
/**
@@ -8,7 +8,7 @@ const BOX_SHADOW_WIDTH = 8;
* The menu slides over the content. The content
* itself, which is under the menu, does not move.
*/
export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
export function menuOverlayAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
let closedX: string, openedX: string;
const width = menu.width + BOX_SHADOW_WIDTH;
if (menu.isEndSide) {

4
core/src/components/menu-controller/animations/push.ts
View File

@@ -1,5 +1,5 @@
import { Animation, Menu } from '../../../interface';
import baseAnimation from './base';
import { baseAnimation } from './base';
/**
* @hidden
@@ -7,7 +7,7 @@ import baseAnimation from './base';
* The content slides over to reveal the menu underneath.
* The menu itself also slides over to reveal its bad self.
*/
export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
export function menuPushAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
let contentOpenedX: string, menuClosedX: string;
const width = menu.width;

4
core/src/components/menu-controller/animations/reveal.ts
View File

@@ -1,5 +1,5 @@
import { Animation, Menu } from '../../../interface';
import baseAnimation from './base';
import { baseAnimation } from './base';
/**
* @hidden
@@ -7,7 +7,7 @@ import baseAnimation from './base';
* The content slides over to reveal the menu underneath.
* The menu itself, which is under the content, does not move.
*/
export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
export function menuRevealAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
const contentOpen = new Animation()

14
core/src/components/menu-controller/menu-controller.ts
View File

@@ -1,9 +1,9 @@
import { Component, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Menu } from '../../interface';
import MenuOverlayAnimation from './animations/overlay';
import MenuPushAnimation from './animations/push';
import MenuRevealAnimation from './animations/reveal';
import { menuOverlayAnimation } from './animations/overlay';
import { menuPushAnimation } from './animations/push';
import { menuRevealAnimation } from './animations/reveal';
@Component({
tag: 'ion-menu-controller'
@@ -16,9 +16,9 @@ export class MenuController {
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
constructor() {
this.registerAnimation('reveal', MenuRevealAnimation);
this.registerAnimation('push', MenuPushAnimation);
this.registerAnimation('overlay', MenuOverlayAnimation);
this.registerAnimation('reveal', menuRevealAnimation);
this.registerAnimation('push', menuPushAnimation);
this.registerAnimation('overlay', menuOverlayAnimation);
}
/**
@@ -279,4 +279,4 @@ export class MenuController {
}
export { MenuOverlayAnimation, MenuPushAnimation, MenuRevealAnimation };
export { menuOverlayAnimation, menuPushAnimation, menuRevealAnimation };

2
core/src/components/modal/animations/ios.enter.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* iOS Modal Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/modal/animations/ios.leave.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* iOS Modal Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/modal/animations/md.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Modal Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/modal/animations/md.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Modal Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

8
core/src/components/modal/modal.tsx
View File

@@ -5,11 +5,11 @@ import { attachComponent, detachComponent } from '../../utils/framework-delegate
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import mdEnterAnimation from './animations/md.enter';
import mdLeaveAnimation from './animations/md.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
@Component({
tag: 'ion-modal',

2
core/src/components/picker/animations/ios.enter.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* iOS Picker Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/picker/animations/ios.leave.ts
View File

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
/**
* iOS Picker Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

4
core/src/components/picker/picker.tsx
View File

@@ -4,8 +4,8 @@ import { Animation, AnimationBuilder, Config, CssClassMap, Mode, PickerButton, P
import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
@Component({
tag: 'ion-picker',

2
core/src/components/popover/animations/ios.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Popover Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
let originY = 'top';
let originX = 'left';

2
core/src/components/popover/animations/ios.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Popover Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

2
core/src/components/popover/animations/md.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Popover Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
let originY = 'top';
let originX = 'left';

2
core/src/components/popover/animations/md.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* Md Popover Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();

8
core/src/components/popover/popover.tsx
View File

@@ -5,11 +5,11 @@ import { attachComponent, detachComponent } from '../../utils/framework-delegate
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import mdEnterAnimation from './animations/md.enter';
import mdLeaveAnimation from './animations/md.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
@Component({
tag: 'ion-popover',

3
core/src/components/router/utils/debug.ts
View File

@@ -2,11 +2,12 @@ import { RouteChain } from './interface';
import { generatePath } from './path';
export function printRoutes(routes: RouteChain[]) {
console.debug('%c[ion-core]', 'font-weight: bold', `registered ${routes.length} routes`);
console.groupCollapsed(`[ion-core] registered ${routes.length} routes`);
for (const chain of routes) {
const path: string[] = [];
chain.forEach(r => path.push(...r.path));
const ids = chain.map(r => r.id);
console.debug(`%c ${generatePath(path)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
}
console.groupEnd();
}

2
core/src/components/toast/animations/ios.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Toast Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();

2
core/src/components/toast/animations/ios.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* iOS Toast Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();

2
core/src/components/toast/animations/md.enter.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* MD Toast Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();

2
core/src/components/toast/animations/md.leave.ts
View File

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
/**
* md Toast Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();

8
core/src/components/toast/toast.tsx
View File

@@ -4,11 +4,11 @@ import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import iosEnterAnimation from './animations/ios.enter';
import iosLeaveAnimation from './animations/ios.leave';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import mdEnterAnimation from './animations/md.enter';
import mdLeaveAnimation from './animations/md.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
@Component({
tag: 'ion-toast',