mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(utils): reorganize some chunks
This commit is contained in:

committed by
Manu MA

parent
ca9ec3e18a
commit
f9483a0c13
@ -1,6 +1,6 @@
|
|||||||
import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
|
import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
|
||||||
|
|
||||||
import { GESTURE_CONTROLLER } from '../../utils/gesture/gesture-controller';
|
import { GESTURE_CONTROLLER } from '../../utils/gesture';
|
||||||
import { now } from '../../utils/helpers';
|
import { now } from '../../utils/helpers';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -69,7 +69,7 @@ export class ItemSliding implements ComponentInterface {
|
|||||||
|
|
||||||
await this.updateOptions();
|
await this.updateOptions();
|
||||||
|
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.el,
|
el: this.el,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'item-swipe',
|
gestureName: 'item-swipe',
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
|
import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
|
||||||
|
|
||||||
import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Mode, Side } from '../../interface';
|
import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Mode, Side } from '../../interface';
|
||||||
import { GESTURE_CONTROLLER } from '../../utils/gesture/gesture-controller';
|
import { GESTURE_CONTROLLER } from '../../utils/gesture';
|
||||||
import { assert, isEndSide as isEnd } from '../../utils/helpers';
|
import { assert, isEndSide as isEnd } from '../../utils/helpers';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -174,7 +174,7 @@ export class Menu implements ComponentInterface, MenuI {
|
|||||||
// register this menu with the app's menu controller
|
// register this menu with the app's menu controller
|
||||||
menuCtrl!._register(this);
|
menuCtrl!._register(this);
|
||||||
|
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.doc,
|
el: this.doc,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'menu-swipe',
|
gestureName: 'menu-swipe',
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';
|
import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';
|
||||||
|
|
||||||
import { Gesture, GestureDetail, Mode, PickerColumn } from '../../interface';
|
import { Gesture, GestureDetail, Mode, PickerColumn } from '../../interface';
|
||||||
import { hapticSelectionChanged } from '../../utils';
|
import { hapticSelectionChanged } from '../../utils/haptic';
|
||||||
import { clamp } from '../../utils/helpers';
|
import { clamp } from '../../utils/helpers';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -58,7 +58,7 @@ export class PickerColumnCmp implements ComponentInterface {
|
|||||||
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
|
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.el,
|
el: this.el,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'picker-swipe',
|
gestureName: 'picker-swipe',
|
||||||
|
@ -154,7 +154,7 @@ export class Range implements ComponentInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async componentDidLoad() {
|
async componentDidLoad() {
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.rangeSlider!,
|
el: this.rangeSlider!,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'range',
|
gestureName: 'range',
|
||||||
|
@ -101,7 +101,7 @@ export class Refresher implements ComponentInterface {
|
|||||||
console.error('ion-refresher did not attach, make sure the parent is an ion-content.');
|
console.error('ion-refresher did not attach, make sure the parent is an ion-content.');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.el.closest('ion-content') as any,
|
el: this.el.closest('ion-content') as any,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'refresher',
|
gestureName: 'refresher',
|
||||||
|
@ -65,7 +65,7 @@ export class ReorderGroup implements ComponentInterface {
|
|||||||
this.scrollEl = await contentEl.getScrollElement();
|
this.scrollEl = await contentEl.getScrollElement();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.doc.body,
|
el: this.doc.body,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'reorder',
|
gestureName: 'reorder',
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, Watch } from '@stencil/core';
|
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, Watch } from '@stencil/core';
|
||||||
|
|
||||||
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Gesture, Mode, NavOutlet, RouteID, RouteWrite, RouterDirection, RouterOutletOptions, SwipeGestureHandler } from '../../interface';
|
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Gesture, Mode, NavOutlet, RouteID, RouteWrite, RouterDirection, RouterOutletOptions, SwipeGestureHandler } from '../../interface';
|
||||||
import { transition } from '../../utils';
|
|
||||||
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
|
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
|
||||||
|
import { transition } from '../../utils/transition';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-router-outlet',
|
tag: 'ion-router-outlet',
|
||||||
|
@ -125,7 +125,7 @@ export class Toggle implements ComponentInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async componentDidLoad() {
|
async componentDidLoad() {
|
||||||
this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
|
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||||
el: this.el,
|
el: this.el,
|
||||||
queue: this.queue,
|
queue: this.queue,
|
||||||
gestureName: 'toggle',
|
gestureName: 'toggle',
|
||||||
|
2
core/src/interface.d.ts
vendored
2
core/src/interface.d.ts
vendored
@ -26,7 +26,7 @@ export * from './components/virtual-scroll/virtual-scroll-interface';
|
|||||||
// TODO: review how this types are exported
|
// TODO: review how this types are exported
|
||||||
// Other types
|
// Other types
|
||||||
|
|
||||||
export { Gesture, GestureDetail } from './utils/gesture/gesture';
|
export { Gesture, GestureDetail } from './utils/gesture';
|
||||||
|
|
||||||
export * from './utils/input-interface';
|
export * from './utils/input-interface';
|
||||||
export * from './utils/animation/animation-interface';
|
export * from './utils/animation/animation-interface';
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
export class GestureController {
|
class GestureController {
|
||||||
|
|
||||||
private gestureId = 0;
|
private gestureId = 0;
|
||||||
private requestedStart = new Map<number, number>();
|
private requestedStart = new Map<number, number>();
|
||||||
@ -142,7 +142,7 @@ export class GestureController {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class GestureDelegate {
|
class GestureDelegate {
|
||||||
private ctrl?: GestureController;
|
private ctrl?: GestureController;
|
||||||
private priority: number;
|
private priority: number;
|
||||||
|
|
||||||
@ -202,7 +202,7 @@ export class GestureDelegate {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class BlockerDelegate {
|
class BlockerDelegate {
|
||||||
|
|
||||||
private ctrl?: GestureController;
|
private ctrl?: GestureController;
|
||||||
|
|
||||||
|
@ -309,3 +309,5 @@ export interface GestureConfig {
|
|||||||
onEnd?: GestureCallback;
|
onEnd?: GestureCallback;
|
||||||
notCaptured?: GestureCallback;
|
notCaptured?: GestureCallback;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { GESTURE_CONTROLLER };
|
@ -1,22 +1,4 @@
|
|||||||
|
|
||||||
let _sPassive: boolean | undefined;
|
|
||||||
|
|
||||||
function supportsPassive(node: Node) {
|
|
||||||
if (_sPassive === undefined) {
|
|
||||||
try {
|
|
||||||
const opts = Object.defineProperty({}, 'passive', {
|
|
||||||
get: () => {
|
|
||||||
_sPassive = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
node.addEventListener('optsTest', () => { return; }, opts);
|
|
||||||
} catch (e) {
|
|
||||||
_sPassive = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return !!_sPassive;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addEventListener(
|
export function addEventListener(
|
||||||
el: any,
|
el: any,
|
||||||
eventName: string,
|
eventName: string,
|
||||||
@ -48,3 +30,21 @@ export function addEventListener(
|
|||||||
el[remove](eventName, callback, listenerOpts);
|
el[remove](eventName, callback, listenerOpts);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let _sPassive: boolean | undefined;
|
||||||
|
|
||||||
|
function supportsPassive(node: Node) {
|
||||||
|
if (_sPassive === undefined) {
|
||||||
|
try {
|
||||||
|
const opts = Object.defineProperty({}, 'passive', {
|
||||||
|
get: () => {
|
||||||
|
_sPassive = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
node.addEventListener('optsTest', () => { return; }, opts);
|
||||||
|
} catch (e) {
|
||||||
|
_sPassive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return !!_sPassive;
|
||||||
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { QueueApi } from '@stencil/core';
|
import { QueueApi } from '@stencil/core';
|
||||||
|
|
||||||
import { Gesture, GestureDetail, createGesture } from './gesture';
|
import { Gesture, GestureDetail, createGesture } from './index';
|
||||||
|
|
||||||
export function createSwipeBackGesture(
|
export function createSwipeBackGesture(
|
||||||
el: HTMLElement,
|
el: HTMLElement,
|
||||||
|
@ -2,13 +2,6 @@ import { EventEmitter } from '@stencil/core';
|
|||||||
|
|
||||||
import { Side } from '../interface';
|
import { Side } from '../interface';
|
||||||
|
|
||||||
export function reorderArray(array: any[], indexes: {from: number, to: number}): any[] {
|
|
||||||
const element = array[indexes.from];
|
|
||||||
array.splice(indexes.from, 1);
|
|
||||||
array.splice(indexes.to, 0, element);
|
|
||||||
return array;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function rIC(callback: () => void) {
|
export function rIC(callback: () => void) {
|
||||||
if ('requestIdleCallback' in window) {
|
if ('requestIdleCallback' in window) {
|
||||||
(window as any).requestIdleCallback(callback);
|
(window as any).requestIdleCallback(callback);
|
||||||
|
@ -1,3 +0,0 @@
|
|||||||
export * from './haptic';
|
|
||||||
export * from './keyboard';
|
|
||||||
export * from './transition';
|
|
@ -1,17 +0,0 @@
|
|||||||
|
|
||||||
export function isTextInputFocused(doc: Document): boolean {
|
|
||||||
const activeElement = doc.activeElement;
|
|
||||||
if (activeElement && isTextInput(activeElement) && activeElement.parentElement) {
|
|
||||||
return activeElement.parentElement.querySelector(':focus') === activeElement;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const NON_TEXT_INPUT_REGEX = /^(radio|checkbox|range|file|submit|reset|color|image|button)$/i;
|
|
||||||
|
|
||||||
function isTextInput(el: any) {
|
|
||||||
return !!el &&
|
|
||||||
(el.tagName === 'TEXTAREA'
|
|
||||||
|| el.contentEditable === 'true'
|
|
||||||
|| (el.tagName === 'INPUT' && !(NON_TEXT_INPUT_REGEX.test(el.type))));
|
|
||||||
}
|
|
@ -1,38 +0,0 @@
|
|||||||
import { ActionSheetOptions, AlertOptions, LoadingOptions, ModalOptions, PickerOptions, PopoverOptions } from '../interface';
|
|
||||||
|
|
||||||
import { createOverlay } from './overlays';
|
|
||||||
|
|
||||||
export function createAlert(opts: AlertOptions) {
|
|
||||||
return createOverlay(document.createElement('ion-alert'), opts);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createActionSheet(opts: ActionSheetOptions) {
|
|
||||||
return createOverlay(document.createElement('ion-action-sheet'), opts);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createLoading(opts: LoadingOptions) {
|
|
||||||
return createOverlay(document.createElement('ion-loading'), opts);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createModal(opts: ModalOptions) {
|
|
||||||
return createOverlay(document.createElement('ion-modal'), opts);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createPopover(opts: PopoverOptions) {
|
|
||||||
return createOverlay(document.createElement('ion-popover'), opts);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createPicker(opts: PickerOptions) {
|
|
||||||
return createOverlay(document.createElement('ion-picker'), opts);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { dismissOverlay } from './overlays';
|
|
||||||
|
|
||||||
// export const alertController = {
|
|
||||||
// // Fool stencil:
|
|
||||||
// // document.createElement('ion-alert')
|
|
||||||
// create(opts: AlertOptions): Promise<HTMLIonAlertElement> {
|
|
||||||
// return createOverlay(this.doc.createElement('ion-alert'), opts);
|
|
||||||
// }
|
|
||||||
// dismiss(data)
|
|
||||||
// }
|
|
@ -43,17 +43,3 @@ export interface HTMLIonOverlayElement extends HTMLStencilElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export type OverlaySelect = HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;
|
export type OverlaySelect = HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;
|
||||||
|
|
||||||
// TODO: uncomment when TS 3.0 issues are fixed
|
|
||||||
// Overlay checks
|
|
||||||
/*
|
|
||||||
export type Conforms<T extends Required<B>, B> = T;
|
|
||||||
export type HTMLOverlaysElement =
|
|
||||||
Conforms<Required<HTMLIonModalElement>, ModalOptions> |
|
|
||||||
Conforms<Required<HTMLIonToastElement>, ToastOptions> |
|
|
||||||
Conforms<Required<HTMLIonActionSheetElement>, ActionSheetOptions> |
|
|
||||||
Conforms<Required<HTMLIonAlertElement>, AlertOptions> |
|
|
||||||
Conforms<Required<HTMLIonPopoverElement>, PopoverOptions> |
|
|
||||||
Conforms<Required<HTMLIonPickerElement>, PickerOptions> |
|
|
||||||
Conforms<Required<HTMLIonLoadingElement>, LoadingOptions>;
|
|
||||||
*/
|
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import { QueueApi } from '@stencil/core';
|
import { QueueApi } from '@stencil/core';
|
||||||
|
|
||||||
import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../components/nav/constants';
|
import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants';
|
||||||
import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../interface';
|
import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
|
||||||
|
|
||||||
const iosTransitionAnimation = () => import('./animations/ios.transition');
|
const iosTransitionAnimation = () => import('./ios.transition');
|
||||||
const mdTransitionAnimation = () => import('./animations/md.transition');
|
const mdTransitionAnimation = () => import('./md.transition');
|
||||||
|
|
||||||
export function transition(opts: TransitionOptions): Promise<TransitionResult> {
|
export function transition(opts: TransitionOptions): Promise<TransitionResult> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
@ -76,7 +76,7 @@ async function getAnimationBuilder(opts: TransitionOptions): Promise<AnimationBu
|
|||||||
async function animation(animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> {
|
async function animation(animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> {
|
||||||
await waitForReady(opts, true);
|
await waitForReady(opts, true);
|
||||||
|
|
||||||
const trans = await import('./animation').then(mod => mod.create(animationBuilder, opts.baseEl, opts));
|
const trans = await import('../animation').then(mod => mod.create(animationBuilder, opts.baseEl, opts));
|
||||||
fireWillEvents(opts.enteringEl, opts.leavingEl);
|
fireWillEvents(opts.enteringEl, opts.leavingEl);
|
||||||
await playTransition(trans, opts);
|
await playTransition(trans, opts);
|
||||||
if (opts.progressCallback) {
|
if (opts.progressCallback) {
|
Reference in New Issue
Block a user