From f1c0a634761273e0bbf3f9d1e92f4a45d77bbe4a Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Sat, 12 Aug 2017 14:43:52 -0400 Subject: [PATCH] refactor(overlay): update to latest overlay syntax --- packages/core/demos/action-sheet/basic.html | 53 ------- packages/core/demos/vanilla/index.html | 16 +-- .../action-sheet-controller.scss | 10 -- .../action-sheet-controller.tsx | 79 +++++----- .../components/action-sheet/action-sheet.scss | 4 + .../components/action-sheet/action-sheet.tsx | 136 ++++++++++-------- .../components/action-sheet/test/basic.html | 13 +- .../animation-controller.tsx} | 2 +- .../animation-interface.tsx | 0 .../animator.tsx | 0 .../constants.ts | 0 .../transition-end.ts | 0 .../gesture-controller/gesture-controller.ts | 2 +- .../loading-controller/loading-controller.tsx | 4 +- .../modal-controller/modal-controller.tsx | 2 +- .../popover-controller.scss | 36 ----- .../popover-controller/popover-controller.tsx | 31 ++-- .../popover/animations/ios.enter.ts | 13 +- .../popover/animations/ios.leave.ts | 5 +- .../core/src/components/popover/popover.scss | 30 ++++ .../core/src/components/popover/popover.tsx | 128 +++++++++-------- .../components/popover/test}/basic.html | 44 +++--- packages/core/stencil.config.js | 6 +- 23 files changed, 280 insertions(+), 334 deletions(-) delete mode 100644 packages/core/demos/action-sheet/basic.html delete mode 100644 packages/core/src/components/action-sheet-controller/action-sheet-controller.scss rename packages/core/src/components/{animation/animation.tsx => animation-controller/animation-controller.tsx} (93%) rename packages/core/src/components/{animation => animation-controller}/animation-interface.tsx (100%) rename packages/core/src/components/{animation => animation-controller}/animator.tsx (100%) rename packages/core/src/components/{animation => animation-controller}/constants.ts (100%) rename packages/core/src/components/{animation => animation-controller}/transition-end.ts (100%) delete mode 100644 packages/core/src/components/popover-controller/popover-controller.scss rename packages/core/{demos/popover => src/components/popover/test}/basic.html (60%) diff --git a/packages/core/demos/action-sheet/basic.html b/packages/core/demos/action-sheet/basic.html deleted file mode 100644 index 8e921e110d..0000000000 --- a/packages/core/demos/action-sheet/basic.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - Action Sheet Basic - - - - - - - - - Show ActionSheet - - - - - - diff --git a/packages/core/demos/vanilla/index.html b/packages/core/demos/vanilla/index.html index 5406b0ad8f..07dc8993bf 100644 --- a/packages/core/demos/vanilla/index.html +++ b/packages/core/demos/vanilla/index.html @@ -162,8 +162,8 @@ Default - - + + - + \ No newline at end of file diff --git a/packages/core/src/components/animation/animation.tsx b/packages/core/src/components/animation-controller/animation-controller.tsx similarity index 93% rename from packages/core/src/components/animation/animation.tsx rename to packages/core/src/components/animation-controller/animation-controller.tsx index 108d6520e4..d1242894c1 100644 --- a/packages/core/src/components/animation/animation.tsx +++ b/packages/core/src/components/animation-controller/animation-controller.tsx @@ -4,7 +4,7 @@ import { Animator } from './animator'; @Component({ - tag: 'ion-animation' + tag: 'ion-animation-controller' }) export class AnimationController { diff --git a/packages/core/src/components/animation/animation-interface.tsx b/packages/core/src/components/animation-controller/animation-interface.tsx similarity index 100% rename from packages/core/src/components/animation/animation-interface.tsx rename to packages/core/src/components/animation-controller/animation-interface.tsx diff --git a/packages/core/src/components/animation/animator.tsx b/packages/core/src/components/animation-controller/animator.tsx similarity index 100% rename from packages/core/src/components/animation/animator.tsx rename to packages/core/src/components/animation-controller/animator.tsx diff --git a/packages/core/src/components/animation/constants.ts b/packages/core/src/components/animation-controller/constants.ts similarity index 100% rename from packages/core/src/components/animation/constants.ts rename to packages/core/src/components/animation-controller/constants.ts diff --git a/packages/core/src/components/animation/transition-end.ts b/packages/core/src/components/animation-controller/transition-end.ts similarity index 100% rename from packages/core/src/components/animation/transition-end.ts rename to packages/core/src/components/animation-controller/transition-end.ts diff --git a/packages/core/src/components/gesture-controller/gesture-controller.ts b/packages/core/src/components/gesture-controller/gesture-controller.ts index 81f9a8d774..7ca519fc0c 100644 --- a/packages/core/src/components/gesture-controller/gesture-controller.ts +++ b/packages/core/src/components/gesture-controller/gesture-controller.ts @@ -2,7 +2,7 @@ import { Component } from '@stencil/core'; @Component({ - tag: 'ion-gesture-ctrl' + tag: 'ion-gesture-controller' }) export class GestureController { private id: number = 0; diff --git a/packages/core/src/components/loading-controller/loading-controller.tsx b/packages/core/src/components/loading-controller/loading-controller.tsx index f2f1fad2ea..cd985e9f6b 100644 --- a/packages/core/src/components/loading-controller/loading-controller.tsx +++ b/packages/core/src/components/loading-controller/loading-controller.tsx @@ -1,9 +1,9 @@ import { Component, Listen, Method } from '@stencil/core'; -import { LoadingEvent, LoadingOptions, Loading } from '../../index'; +import { Loading, LoadingEvent, LoadingOptions } from '../../index'; @Component({ - tag: 'ion-loading-ctrl' + tag: 'ion-loading-controller' }) export class LoadingController { private ids = 0; diff --git a/packages/core/src/components/modal-controller/modal-controller.tsx b/packages/core/src/components/modal-controller/modal-controller.tsx index ab88b5033b..6106bae561 100644 --- a/packages/core/src/components/modal-controller/modal-controller.tsx +++ b/packages/core/src/components/modal-controller/modal-controller.tsx @@ -3,7 +3,7 @@ import { Modal, ModalEvent, ModalOptions } from '../../index'; @Component({ - tag: 'ion-modal-ctrl' + tag: 'ion-modal-controller' }) export class ModalController { private ids = 0; diff --git a/packages/core/src/components/popover-controller/popover-controller.scss b/packages/core/src/components/popover-controller/popover-controller.scss deleted file mode 100644 index 2367a64ab2..0000000000 --- a/packages/core/src/components/popover-controller/popover-controller.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../themes/ionic.globals"; - - -// Popover Controller -// -------------------------------------------------- - -ion-popover-controller { - display: none; -} - - -// Popover Controller Backdrop -// -------------------------------------------------- - -/// @prop - Color of the backdrop -$popover-backdrop-color: #000 !default; - - -.popover-backdrop { - position: absolute; - top: 0; - left: 0; - z-index: $z-index-backdrop; - display: block; - - width: 100%; - height: 100%; - - background-color: $popover-backdrop-color; - opacity: .01; - transform: translateZ(0); -} - -.popover-backdrop.backdrop-no-tappable { - cursor: auto; -} diff --git a/packages/core/src/components/popover-controller/popover-controller.tsx b/packages/core/src/components/popover-controller/popover-controller.tsx index 2966f4be84..f601ff2827 100644 --- a/packages/core/src/components/popover-controller/popover-controller.tsx +++ b/packages/core/src/components/popover-controller/popover-controller.tsx @@ -1,25 +1,17 @@ -import { Component, Listen } from '@stencil/core'; -import { PopoverEvent, PopoverOptions, Popover, IonicControllerApi, Ionic } from '../../index'; +import { Component, Listen, Method } from '@stencil/core'; +import { PopoverEvent, PopoverOptions, Popover } from '../../index'; @Component({ - tag: 'ion-popover-controller', - // styleUrl: 'popover-controller.scss' + tag: 'ion-popover-controller' }) -export class PopoverController implements IonicControllerApi { +export class PopoverController { private ids = 0; private popoverResolves: {[popoverId: string]: Function} = {}; private popovers: Popover[] = []; - private appRoot: Element; - - ionViewDidLoad() { - this.appRoot = document.querySelector('ion-app') || document.body; - Ionic.registerController('popover', this); - } - - - load(opts?: PopoverOptions) { + @Method() + create(opts?: PopoverOptions) { // create ionic's wrapping ion-popover component const popover = document.createElement('ion-popover'); const id = this.ids++; @@ -33,7 +25,8 @@ export class PopoverController implements IonicControllerApi { Object.assign(popover, opts); // append the popover element to the document body - this.appRoot.appendChild(popover as any); + const appRoot = document.querySelector('ion-app') || document.body; + appRoot.appendChild(popover as any); // store the resolve function to be called later up when the popover loads return new Promise(resolve => { @@ -43,7 +36,7 @@ export class PopoverController implements IonicControllerApi { @Listen('body:ionPopoverDidLoad') - viewDidLoad(ev: PopoverEvent) { + protected viewDidLoad(ev: PopoverEvent) { const popover = ev.detail.popover; const popoverResolve = this.popoverResolves[popover.id]; if (popoverResolve) { @@ -54,13 +47,13 @@ export class PopoverController implements IonicControllerApi { @Listen('body:ionPopoverWillPresent') - willPresent(ev: PopoverEvent) { + protected willPresent(ev: PopoverEvent) { this.popovers.push(ev.detail.popover); } @Listen('body:ionPopoverWillDismiss, body:ionPopoverDidUnload') - willDismiss(ev: PopoverEvent) { + protected willDismiss(ev: PopoverEvent) { const index = this.popovers.indexOf(ev.detail.popover); if (index > -1) { this.popovers.splice(index, 1); @@ -69,7 +62,7 @@ export class PopoverController implements IonicControllerApi { @Listen('body:keyup.escape') - escapeKeyUp() { + protected escapeKeyUp() { const lastPopover = this.popovers[this.popovers.length - 1]; if (lastPopover) { lastPopover.dismiss(); diff --git a/packages/core/src/components/popover/animations/ios.enter.ts b/packages/core/src/components/popover/animations/ios.enter.ts index d0bd9caf2a..76bd7f8047 100644 --- a/packages/core/src/components/popover/animations/ios.enter.ts +++ b/packages/core/src/components/popover/animations/ios.enter.ts @@ -1,14 +1,13 @@ -import { Animation, PopoverOptions } from '../../../index'; +import { Animation } from '../../../index'; -export default function popoverEnter( - Animation: Animation, - baseElm: HTMLElement, - evtSource: Event -) { + +/** + * iOS Popover Enter Animation + */ +export default function(Animation: Animation, baseElm: HTMLElement) { const baseAnimation = new Animation(); const backdropAnimation = new Animation(); - backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop')); const wrapperAnimation = new Animation(); diff --git a/packages/core/src/components/popover/animations/ios.leave.ts b/packages/core/src/components/popover/animations/ios.leave.ts index 000b3422d2..a46266738f 100644 --- a/packages/core/src/components/popover/animations/ios.leave.ts +++ b/packages/core/src/components/popover/animations/ios.leave.ts @@ -1,7 +1,7 @@ import { Animation } from '../../../index'; /** - * iOS Modal Leave Animation + * iOS Popover Leave Animation */ export default function(Animation: Animation, baseElm: HTMLElement) { const baseAnimation = new Animation(); @@ -10,12 +10,11 @@ export default function(Animation: Animation, baseElm: HTMLElement) { backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop')); const wrapperAnimation = new Animation(); - const wrapperElm = baseElm.querySelector('.popover-wrapper'); + wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper')); wrapperAnimation.fromTo('opacity', 0.99, 0); backdropAnimation.fromTo('opacity', 0.08, 0); - return baseAnimation .addElement(baseElm) .easing('ease') diff --git a/packages/core/src/components/popover/popover.scss b/packages/core/src/components/popover/popover.scss index 8785d6967a..deda498311 100644 --- a/packages/core/src/components/popover/popover.scss +++ b/packages/core/src/components/popover/popover.scss @@ -3,6 +3,9 @@ // Popover // -------------------------------------------------- +/// @prop - Color of the backdrop +$popover-backdrop-color: #000 !default; + ion-popover { @include position(0, 0, 0, 0); @@ -41,4 +44,31 @@ ion-popover { .popover-content .scroll-content { position: relative; +} + +ion-popover-controller { + display: none; +} + + +// Popover Backdrop +// -------------------------------------------------- + +.popover-backdrop { + position: absolute; + top: 0; + left: 0; + z-index: $z-index-backdrop; + display: block; + + width: 100%; + height: 100%; + + background-color: $popover-backdrop-color; + opacity: .01; + transform: translateZ(0); +} + +.popover-backdrop.backdrop-no-tappable { + cursor: auto; } \ No newline at end of file diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index eb0efe7e56..1008502f7f 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -1,12 +1,6 @@ -import { - Component, - Element, - Event, - EventEmitter, - Listen, - Prop -} from '@stencil/core'; -import { AnimationBuilder, Animation, Ionic } from '../../index'; +import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core'; +import { AnimationBuilder, Animation, AnimationController, Config } from '../../index'; + import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; @@ -24,14 +18,19 @@ import iOSLeaveAnimation from './animations/ios.leave'; } }) export class Popover { + private animation: Animation; + @Element() private el: HTMLElement; - @Event() ionPopoverDidLoad: EventEmitter; - @Event() ionPopoverWillPresent: EventEmitter; - @Event() ionPopoverDidPresent: EventEmitter; - @Event() ionPopoverWillDismiss: EventEmitter; - @Event() ionPopoverDidDismiss: EventEmitter; - @Event() ionPopoverDidUnload: EventEmitter; + @Event() private ionPopoverDidLoad: EventEmitter; + @Event() private ionPopoverDidPresent: EventEmitter; + @Event() private ionPopoverWillPresent: EventEmitter; + @Event() private ionPopoverWillDismiss: EventEmitter; + @Event() private ionPopoverDidDismiss: EventEmitter; + @Event() private ionPopoverDidUnload: EventEmitter; + + @Prop({ connect: 'ion-animation' }) animationCtrl: AnimationController; + @Prop({ context: 'config' }) config: Config; @Prop() mode: string; @Prop() color: string; @@ -45,19 +44,6 @@ export class Popover { @Prop() id: string; @Prop() showBackdrop: boolean = true; - private animation: Animation; - - @Listen('ionDismiss') - onDismiss(ev: UIEvent) { - ev.stopPropagation(); - ev.preventDefault(); - - this.dismiss(); - } - - ionViewDidLoad() { - this.ionPopoverDidLoad.emit({ popover: this }); - } present() { return new Promise(resolve => { @@ -73,20 +59,23 @@ export class Popover { this.ionPopoverWillPresent.emit({ popover: this }); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation - ? this.enterAnimation - : iOSEnterAnimation; - // + let animationBuilder = this.enterAnimation; + + if (!animationBuilder) { + // user did not provide a custom animation fn + // decide from the config which animation to use + animationBuilder = iOSEnterAnimation; + } + // build the animation and kick it off - Ionic.controller('animation').then(Animation => { - this.animation = animationBuilder(Animation, this.el, this.ev); - this.animation - .onFinish((a: any) => { - a.destroy(); - this.ionPopoverDidPresent.emit({ popover: this }); - resolve(); - }) - .play(); + this.animationCtrl.create(animationBuilder, this.el).then(animation => { + this.animation = animation; + + animation.onFinish((a: any) => { + a.destroy(); + this.ionViewDidEnter(); + resolve(); + }).play(); }); } @@ -95,35 +84,56 @@ export class Popover { this.animation.destroy(); this.animation = null; } - return new Promise(resolve => { + return new Promise(resolve => { this.ionPopoverWillDismiss.emit({ popover: this }); - let animationBuilder = this.exitAnimation - ? this.exitAnimation - : iOSLeaveAnimation; + // get the user's animation fn if one was provided + let animationBuilder = this.exitAnimation; + if (!animationBuilder) { + // user did not provide a custom animation fn + // decide from the config which animation to use + animationBuilder = iOSLeaveAnimation; + } // build the animation and kick it off - Ionic.controller('animation').then(Animation => { - this.animation = animationBuilder(Animation, this.el); - this.animation - .onFinish((a: any) => { - a.destroy(); - this.ionPopoverDidDismiss.emit({ popover: this }); - Core.dom.write(() => { - this.el.parentNode.removeChild(this.el); - }); - resolve(); - }) - .play(); + this.animationCtrl.create(animationBuilder, this.el).then(animation => { + this.animation = animation; + + animation.onFinish((a: any) => { + a.destroy(); + this.ionPopoverDidDismiss.emit({ popover: this }); + + Context.dom.write(() => { + this.el.parentNode.removeChild(this.el); + }); + + resolve(); + }).play(); }); }); } - ionViewDidUnload() { + protected ionViewDidUnload() { this.ionPopoverDidUnload.emit({ popover: this }); } - backdropClick() { + @Listen('ionDismiss') + protected onDismiss(ev: UIEvent) { + ev.stopPropagation(); + ev.preventDefault(); + + this.dismiss(); + } + + protected ionViewDidLoad() { + this.ionPopoverDidLoad.emit({ popover: this }); + } + + protected ionViewDidEnter() { + this.ionPopoverDidPresent.emit({ popover: this }); + } + + protected backdropClick() { if (this.enableBackdropDismiss) { // const opts: NavOptions = { // minClickBlockDuration: 400 diff --git a/packages/core/demos/popover/basic.html b/packages/core/src/components/popover/test/basic.html similarity index 60% rename from packages/core/demos/popover/basic.html rename to packages/core/src/components/popover/test/basic.html index 641f812e21..9d5b5698aa 100644 --- a/packages/core/demos/popover/basic.html +++ b/packages/core/src/components/popover/test/basic.html @@ -12,40 +12,43 @@ - Show Popover + Show Popover + + diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js index 7931ce0238..7e1e0ac8ce 100644 --- a/packages/core/stencil.config.js +++ b/packages/core/stencil.config.js @@ -4,7 +4,7 @@ exports.config = { publicPath: '/dist', generateCollection: true, bundles: [ - { components: ['ion-animation'] }, + { components: ['ion-animation-controller'] }, { components: ['ion-app', 'ion-content', 'ion-fixed', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] }, { components: ['ion-action-sheet', 'ion-action-sheet-controller'] }, { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] }, @@ -17,9 +17,9 @@ exports.config = { { components: ['ion-grid', 'ion-row', 'ion-col'] }, { components: ['ion-item', 'ion-item-divider', 'ion-item-sliding', 'ion-item-options', 'ion-item-option', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text'] }, { components: ['ion-input', 'ion-textarea'] }, - { components: ['ion-loading', 'ion-loading-ctrl'] }, + { components: ['ion-loading', 'ion-loading-controller'] }, { components: ['ion-menu'], priority: 'low' }, - { components: ['ion-modal', 'ion-modal-ctrl'] }, + { components: ['ion-modal', 'ion-modal-controller'] }, { components: ['ion-popover', 'ion-popover-controller'] }, { components: ['ion-searchbar'] }, { components: ['ion-segment', 'ion-segment-button'] },