From f9483a0c13af5df437bb2ef6e118c30b8ff68e14 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Fri, 28 Dec 2018 18:54:08 +0100 Subject: [PATCH] refactor(utils): reorganize some chunks --- core/src/components/backdrop/backdrop.tsx | 2 +- .../components/item-sliding/item-sliding.tsx | 2 +- core/src/components/menu/menu.tsx | 4 +- .../picker-column/picker-column.tsx | 4 +- core/src/components/range/range.tsx | 2 +- core/src/components/refresher/refresher.tsx | 2 +- .../reorder-group/reorder-group.tsx | 2 +- .../components/router-outlet/route-outlet.tsx | 2 +- core/src/components/toggle/toggle.tsx | 2 +- core/src/interface.d.ts | 2 +- core/src/utils/gesture/gesture-controller.ts | 6 +-- .../utils/gesture/{gesture.ts => index.ts} | 2 + core/src/utils/gesture/listener.ts | 36 +++++++++--------- core/src/utils/gesture/swipe-back.ts | 2 +- core/src/utils/helpers.ts | 7 ---- core/src/utils/index.ts | 3 -- core/src/utils/keyboard.ts | 17 --------- core/src/utils/overlay-public.ts | 38 ------------------- core/src/utils/overlays-interface.ts | 14 ------- .../{transition.ts => transition/index.ts} | 10 ++--- .../ios.transition.ts | 0 .../md.transition.ts | 0 22 files changed, 41 insertions(+), 118 deletions(-) rename core/src/utils/gesture/{gesture.ts => index.ts} (99%) delete mode 100644 core/src/utils/index.ts delete mode 100644 core/src/utils/keyboard.ts delete mode 100644 core/src/utils/overlay-public.ts rename core/src/utils/{transition.ts => transition/index.ts} (94%) rename core/src/utils/{animations => transition}/ios.transition.ts (100%) rename core/src/utils/{animations => transition}/md.transition.ts (100%) diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index d282fc36bf..bb2426155a 100644 --- a/core/src/components/backdrop/backdrop.tsx +++ b/core/src/components/backdrop/backdrop.tsx @@ -1,6 +1,6 @@ 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'; @Component({ diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 9ac116258b..73e251bd59 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -69,7 +69,7 @@ export class ItemSliding implements ComponentInterface { await this.updateOptions(); - this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ + this.gesture = (await import('../../utils/gesture')).createGesture({ el: this.el, queue: this.queue, gestureName: 'item-swipe', diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 0818a30172..f98e3d34ee 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -1,7 +1,7 @@ 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 { GESTURE_CONTROLLER } from '../../utils/gesture/gesture-controller'; +import { GESTURE_CONTROLLER } from '../../utils/gesture'; import { assert, isEndSide as isEnd } from '../../utils/helpers'; @Component({ @@ -174,7 +174,7 @@ export class Menu implements ComponentInterface, MenuI { // register this menu with the app's menu controller menuCtrl!._register(this); - this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ + this.gesture = (await import('../../utils/gesture')).createGesture({ el: this.doc, queue: this.queue, gestureName: 'menu-swipe', diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index a8158b8677..0542d45c75 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -1,7 +1,7 @@ import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core'; import { Gesture, GestureDetail, Mode, PickerColumn } from '../../interface'; -import { hapticSelectionChanged } from '../../utils'; +import { hapticSelectionChanged } from '../../utils/haptic'; import { clamp } from '../../utils/helpers'; @Component({ @@ -58,7 +58,7 @@ export class PickerColumnCmp implements ComponentInterface { this.refresh(); - this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ + this.gesture = (await import('../../utils/gesture')).createGesture({ el: this.el, queue: this.queue, gestureName: 'picker-swipe', diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index e4560e88a1..f8b2f56bdb 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -154,7 +154,7 @@ export class Range implements ComponentInterface { } async componentDidLoad() { - this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ + this.gesture = (await import('../../utils/gesture')).createGesture({ el: this.rangeSlider!, queue: this.queue, gestureName: 'range', diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 63222f2f53..0452758d41 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -101,7 +101,7 @@ export class Refresher implements ComponentInterface { 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, queue: this.queue, gestureName: 'refresher', diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index e3d212055b..92b6d5fdf9 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -65,7 +65,7 @@ export class ReorderGroup implements ComponentInterface { this.scrollEl = await contentEl.getScrollElement(); } - this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ + this.gesture = (await import('../../utils/gesture')).createGesture({ el: this.doc.body, queue: this.queue, gestureName: 'reorder', diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index eaa7d6b2a7..e54ca22086 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -1,8 +1,8 @@ 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 { transition } from '../../utils'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; +import { transition } from '../../utils/transition'; @Component({ tag: 'ion-router-outlet', diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index adce542e0d..24af5f46cb 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -125,7 +125,7 @@ export class Toggle implements ComponentInterface { } async componentDidLoad() { - this.gesture = (await import('../../utils/gesture/gesture')).createGesture({ + this.gesture = (await import('../../utils/gesture')).createGesture({ el: this.el, queue: this.queue, gestureName: 'toggle', diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index 41080d9feb..8364808f6c 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -26,7 +26,7 @@ export * from './components/virtual-scroll/virtual-scroll-interface'; // TODO: review how this types are exported // Other types -export { Gesture, GestureDetail } from './utils/gesture/gesture'; +export { Gesture, GestureDetail } from './utils/gesture'; export * from './utils/input-interface'; export * from './utils/animation/animation-interface'; diff --git a/core/src/utils/gesture/gesture-controller.ts b/core/src/utils/gesture/gesture-controller.ts index ba9310b245..c6cf51708d 100644 --- a/core/src/utils/gesture/gesture-controller.ts +++ b/core/src/utils/gesture/gesture-controller.ts @@ -1,5 +1,5 @@ -export class GestureController { +class GestureController { private gestureId = 0; private requestedStart = new Map(); @@ -142,7 +142,7 @@ export class GestureController { } } -export class GestureDelegate { +class GestureDelegate { private ctrl?: GestureController; private priority: number; @@ -202,7 +202,7 @@ export class GestureDelegate { } } -export class BlockerDelegate { +class BlockerDelegate { private ctrl?: GestureController; diff --git a/core/src/utils/gesture/gesture.ts b/core/src/utils/gesture/index.ts similarity index 99% rename from core/src/utils/gesture/gesture.ts rename to core/src/utils/gesture/index.ts index 018f644697..bd6959cec5 100644 --- a/core/src/utils/gesture/gesture.ts +++ b/core/src/utils/gesture/index.ts @@ -309,3 +309,5 @@ export interface GestureConfig { onEnd?: GestureCallback; notCaptured?: GestureCallback; } + +export { GESTURE_CONTROLLER }; diff --git a/core/src/utils/gesture/listener.ts b/core/src/utils/gesture/listener.ts index 986b03382e..e1d140a5d7 100644 --- a/core/src/utils/gesture/listener.ts +++ b/core/src/utils/gesture/listener.ts @@ -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( el: any, eventName: string, @@ -48,3 +30,21 @@ export function addEventListener( 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; +} diff --git a/core/src/utils/gesture/swipe-back.ts b/core/src/utils/gesture/swipe-back.ts index 381c4ec8e0..ee005ed1a2 100644 --- a/core/src/utils/gesture/swipe-back.ts +++ b/core/src/utils/gesture/swipe-back.ts @@ -1,6 +1,6 @@ import { QueueApi } from '@stencil/core'; -import { Gesture, GestureDetail, createGesture } from './gesture'; +import { Gesture, GestureDetail, createGesture } from './index'; export function createSwipeBackGesture( el: HTMLElement, diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 2dca54b0cc..888687097a 100644 --- a/core/src/utils/helpers.ts +++ b/core/src/utils/helpers.ts @@ -2,13 +2,6 @@ import { EventEmitter } from '@stencil/core'; 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) { if ('requestIdleCallback' in window) { (window as any).requestIdleCallback(callback); diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts deleted file mode 100644 index e5ce6951fe..0000000000 --- a/core/src/utils/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './haptic'; -export * from './keyboard'; -export * from './transition'; diff --git a/core/src/utils/keyboard.ts b/core/src/utils/keyboard.ts deleted file mode 100644 index b5ae9432f6..0000000000 --- a/core/src/utils/keyboard.ts +++ /dev/null @@ -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)))); -} diff --git a/core/src/utils/overlay-public.ts b/core/src/utils/overlay-public.ts deleted file mode 100644 index 1ee6a325b8..0000000000 --- a/core/src/utils/overlay-public.ts +++ /dev/null @@ -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 { -// return createOverlay(this.doc.createElement('ion-alert'), opts); -// } -// dismiss(data) -// } diff --git a/core/src/utils/overlays-interface.ts b/core/src/utils/overlays-interface.ts index 370da413ae..a641633b2e 100644 --- a/core/src/utils/overlays-interface.ts +++ b/core/src/utils/overlays-interface.ts @@ -43,17 +43,3 @@ export interface HTMLIonOverlayElement extends HTMLStencilElement { } export type OverlaySelect = HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement; - -// TODO: uncomment when TS 3.0 issues are fixed -// Overlay checks -/* -export type Conforms, B> = T; -export type HTMLOverlaysElement = - Conforms, ModalOptions> | - Conforms, ToastOptions> | - Conforms, ActionSheetOptions> | - Conforms, AlertOptions> | - Conforms, PopoverOptions> | - Conforms, PickerOptions> | - Conforms, LoadingOptions>; -*/ diff --git a/core/src/utils/transition.ts b/core/src/utils/transition/index.ts similarity index 94% rename from core/src/utils/transition.ts rename to core/src/utils/transition/index.ts index cc319c006d..5c43a850a1 100644 --- a/core/src/utils/transition.ts +++ b/core/src/utils/transition/index.ts @@ -1,10 +1,10 @@ import { QueueApi } from '@stencil/core'; -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 { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants'; +import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface'; -const iosTransitionAnimation = () => import('./animations/ios.transition'); -const mdTransitionAnimation = () => import('./animations/md.transition'); +const iosTransitionAnimation = () => import('./ios.transition'); +const mdTransitionAnimation = () => import('./md.transition'); export function transition(opts: TransitionOptions): Promise { return new Promise((resolve, reject) => { @@ -76,7 +76,7 @@ async function getAnimationBuilder(opts: TransitionOptions): Promise { 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); await playTransition(trans, opts); if (opts.progressCallback) { diff --git a/core/src/utils/animations/ios.transition.ts b/core/src/utils/transition/ios.transition.ts similarity index 100% rename from core/src/utils/animations/ios.transition.ts rename to core/src/utils/transition/ios.transition.ts diff --git a/core/src/utils/animations/md.transition.ts b/core/src/utils/transition/md.transition.ts similarity index 100% rename from core/src/utils/animations/md.transition.ts rename to core/src/utils/transition/md.transition.ts