javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(overlay): update to latest overlay syntax

Browse Source
This commit is contained in:
Brandy Carney
2017-08-12 14:43:52 -04:00
parent 3b09d0f4a0
commit f1c0a63476
23 changed files with 280 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/core/demos/action-sheet/basic.html
View File

@ -1,53 +0,0 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<ion-button id="presentActionSheet">Show ActionSheet</ion-button>
</ion-content>
</ion-app>
<script>
document.getElementById('presentActionSheet')
.addEventListener('click', function(clickEvt) {
Ionic.controller('action-sheet', {
title: "Hello World",
subTitle: 'Sub Title',
buttons: [{
text: 'Destructive',
role: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
}, {
icon: 'trash',
text: 'Archive',
handler: () => {
console.log('Archive clicked');
return false
}
}, {
icon: 'close',
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
})
.then(actionSheet => {
actionSheet.present()
});
});
</script>
</body>
</html>

16
packages/core/demos/vanilla/index.html
View File

@ -162,8 +162,8 @@
<ion-button>Default</ion-button> <ion-button>Default</ion-button>
<ion-loading-ctrl></ion-loading-ctrl> <ion-loading-controller></ion-loading-controller>
<ion-modal-ctrl></ion-modal-ctrl> <ion-modal-controller></ion-modal-controller>
<script> <script>
@ -219,8 +219,8 @@
console.log('open profile modal for userId:', userId); console.log('open profile modal for userId:', userId);
var modalCtrl = document.querySelector('ion-modal-ctrl'); var modalController = document.querySelector('ion-modal-controller');
modalCtrl.create({ component: 'profile-page', componentProps: { userId: userId } }).then(modal => { modalController.create({ component: 'profile-page', componentProps: { userId: userId } }).then(modal => {
console.log('start presenting modal, userId:', modal.componentProps.userId); console.log('start presenting modal, userId:', modal.componentProps.userId);
modal.present().then(() => { modal.present().then(() => {
@ -271,8 +271,8 @@
document.getElementById('presentLoading').addEventListener('click', function() { document.getElementById('presentLoading').addEventListener('click', function() {
console.log('open loading'); console.log('open loading');
var loadingCtrl = document.querySelector('ion-loading-ctrl'); var loadingController = document.querySelector('ion-loading-controller');
loadingCtrl.create({ duration: 1000 }).then(loading => { loadingController.create({ duration: 1000 }).then(loading => {
console.log('start presenting loading'); console.log('start presenting loading');
loading.present().then(() => { loading.present().then(() => {
@ -285,10 +285,10 @@
document.getElementById('toggleMenu').addEventListener('click', function() { document.getElementById('toggleMenu').addEventListener('click', function() {
console.log('toggle menu'); console.log('toggle menu');
Ionic.controller('menu').then(menuCtrl => { Ionic.controller('menu').then(menucontroller => {
console.log('start menu toggle'); console.log('start menu toggle');
menuCtrl.toggle().then(() => { menucontroller.toggle().then(() => {
console.log('finished menu toggle'); console.log('finished menu toggle');
}); });
}); });

10
packages/core/src/components/action-sheet-controller/action-sheet-controller.scss
View File

@ -1,10 +0,0 @@
@import "../../themes/ionic.globals";
// ActionSheet Controller
// --------------------------------------------------
ion-action-sheet-controller {
display: none;
}

79
packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
View File

@ -1,75 +1,66 @@
import { Component, Listen } from '@stencil/core'; import { Component, Listen, Method } from '@stencil/core';
import { import { ActionSheet, ActionSheetEvent, ActionSheetOptions } from '../../index';
ActionSheetEvent,
ActionSheetOptions,
ActionSheet,
IonicControllerApi,
Ionic
} from '../../index';
@Component({ @Component({
tag: 'ion-action-sheet-controller', tag: 'ion-action-sheet-controller'
styleUrl: 'action-sheet-controller.scss'
}) })
export class ActionSheetController implements IonicControllerApi { export class ActionSheetController {
private ids = 0; private ids = 0;
private actionsheetResolves: { [actionsheetId: string]: Function } = {}; private actionSheetResolves: { [actionSheetId: string]: Function } = {};
private actionsheets: ActionSheet[] = []; private actionSheets: ActionSheet[] = [];
private appRoot: Element;
ionViewDidLoad() { @Method()
this.appRoot = document.querySelector('ion-app') || document.body; create(opts?: ActionSheetOptions) {
Ionic.registerController('action-sheet', this); // create ionic's wrapping ion-action-sheet component
} const actionSheet = document.createElement('ion-action-sheet');
load(opts?: ActionSheetOptions) {
// create ionic's wrapping ion-actionsheet component
const actionsheet = document.createElement('ion-action-sheet');
const id = this.ids++; const id = this.ids++;
// give this actionsheet a unique id // give this action sheet a unique id
actionsheet.id = `action-sheet-${id}`; actionSheet.id = `action-sheet-${id}`;
actionsheet.style.zIndex = (20000 + id).toString(); actionSheet.style.zIndex = (20000 + id).toString();
// convert the passed in actionsheet options into props // convert the passed in action sheet options into props
// that get passed down into the new actionsheet // that get passed down into the new action sheet
Object.assign(actionsheet, opts); Object.assign(actionSheet, opts);
// append the actionsheet element to the document body // append the action sheet element to the document body
this.appRoot.appendChild(actionsheet as any); const appRoot = document.querySelector('ion-app') || document.body;
appRoot.appendChild(actionSheet as any);
// store the resolve function to be called later up when the actionsheet loads // store the resolve function to be called later up when the action sheet loads
return new Promise<ActionSheet>(resolve => { return new Promise<ActionSheet>(resolve => {
this.actionsheetResolves[actionsheet.id] = resolve; this.actionSheetResolves[actionSheet.id] = resolve;
}); });
} }
@Listen('body:ionActionSheetDidLoad') @Listen('body:ionActionSheetDidLoad')
viewDidLoad(ev: ActionSheetEvent) { protected viewDidLoad(ev: ActionSheetEvent) {
const actionsheet = ev.detail.actionsheet; const actionSheet = ev.detail.actionSheet;
const actionsheetResolve = this.actionsheetResolves[actionsheet.id]; const actionSheetResolve = this.actionSheetResolves[actionSheet.id];
if (actionsheetResolve) { if (actionSheetResolve) {
actionsheetResolve(actionsheet); actionSheetResolve(actionSheet);
delete this.actionsheetResolves[actionsheet.id]; delete this.actionSheetResolves[actionSheet.id];
} }
} }
@Listen('body:ionActionSheetWillPresent') @Listen('body:ionActionSheetWillPresent')
willPresent(ev: ActionSheetEvent) { protected willPresent(ev: ActionSheetEvent) {
this.actionsheets.push(ev.detail.actionsheet); this.actionSheets.push(ev.detail.actionSheet);
} }
@Listen('body:ionActionSheetWillDismiss, body:ionActionSheetDidUnload') @Listen('body:ionActionSheetWillDismiss, body:ionActionSheetDidUnload')
willDismiss(ev: ActionSheetEvent) { protected willDismiss(ev: ActionSheetEvent) {
const index = this.actionsheets.indexOf(ev.detail.actionsheet); const index = this.actionSheets.indexOf(ev.detail.actionSheet);
if (index > -1) { if (index > -1) {
this.actionsheets.splice(index, 1); this.actionSheets.splice(index, 1);
} }
} }
@Listen('body:keyup.escape') @Listen('body:keyup.escape')
escapeKeyUp() { protected escapeKeyUp() {
const lastActionSheet = this.actionsheets[this.actionsheets.length - 1]; const lastActionSheet = this.actionSheets[this.actionSheets.length - 1];
if (lastActionSheet) { if (lastActionSheet) {
lastActionSheet.dismiss(); lastActionSheet.dismiss();
} }

4
packages/core/src/components/action-sheet/action-sheet.scss
View File

@ -36,3 +36,7 @@ ion-action-sheet {
.action-sheet-button { .action-sheet-button {
width: $action-sheet-width; width: $action-sheet-width;
} }
ion-action-sheet-controller {
display: none;
}

124
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -1,13 +1,5 @@
import { import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
Component, import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
Element,
Event,
EventEmitter,
Listen,
Prop,
CssClassMap
} from '@stencil/core';
import { AnimationBuilder, Animation, Ionic } from '../../index';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
@ -28,12 +20,15 @@ export class ActionSheet {
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
@Event() ionActionSheetDidLoad: EventEmitter; @Event() private ionActionSheetDidLoad: EventEmitter;
@Event() ionActionSheetWillPresent: EventEmitter; @Event() private ionActionSheetDidPresent: EventEmitter;
@Event() ionActionSheetDidPresent: EventEmitter; @Event() private ionActionSheetWillPresent: EventEmitter;
@Event() ionActionSheetWillDismiss: EventEmitter; @Event() private ionActionSheetWillDismiss: EventEmitter;
@Event() ionActionSheetDidDismiss: EventEmitter; @Event() private ionActionSheetDidDismiss: EventEmitter;
@Event() ionActionSheetDidUnload: EventEmitter; @Event() private ionActionSheetDidUnload: EventEmitter;
@Prop({ connect: 'ion-animation' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
@Prop() cssClass: string; @Prop() cssClass: string;
@Prop() title: string; @Prop() title: string;
@ -46,17 +41,6 @@ export class ActionSheet {
@Prop() exitAnimation: AnimationBuilder; @Prop() exitAnimation: AnimationBuilder;
@Prop() id: string; @Prop() id: string;
@Listen('ionDismiss')
onDismiss(ev: UIEvent) {
ev.stopPropagation();
ev.preventDefault();
this.dismiss();
}
ionViewDidLoad() {
this.ionActionSheetDidLoad.emit({ actionsheet: this });
}
present() { present() {
return new Promise<void>(resolve => { return new Promise<void>(resolve => {
@ -69,22 +53,26 @@ export class ActionSheet {
this.animation.destroy(); this.animation.destroy();
this.animation = null; this.animation = null;
} }
this.ionActionSheetWillPresent.emit({ actionsheet: this }); this.ionActionSheetWillPresent.emit({ actionSheet: this });
let animationBuilder = this.enterAnimation // get the user's animation fn if one was provided
? this.enterAnimation let animationBuilder = this.enterAnimation;
: iOSEnterAnimation;
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 // build the animation and kick it off
Ionic.controller('animation').then(Animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animationBuilder(Animation, this.el); this.animation = animation;
this.animation
.onFinish((a: any) => { animation.onFinish((a: any) => {
a.destroy(); a.destroy();
this.ionActionSheetDidLoad.emit({ actionsheet: this }); this.ionViewDidEnter();
resolve(); resolve();
}) }).play();
.play();
}); });
} }
@ -93,34 +81,56 @@ export class ActionSheet {
this.animation.destroy(); this.animation.destroy();
this.animation = null; this.animation = null;
} }
return new Promise<void>(resolve => { return new Promise(resolve => {
this.ionActionSheetWillDismiss.emit({ actionsheet: this }); this.ionActionSheetWillDismiss.emit({ actionSheet: this });
let animationBuilder = this.exitAnimation
? this.exitAnimation // get the user's animation fn if one was provided
: iOSLeaveAnimation; 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 // build the animation and kick it off
Ionic.controller('animation').then(Animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animationBuilder(Animation, this.el); this.animation = animation;
this.animation
.onFinish((a: any) => { animation.onFinish((a: any) => {
a.destroy(); a.destroy();
this.ionActionSheetDidDismiss.emit({ actionsheet: this }); this.ionActionSheetDidDismiss.emit({ actionSheet: this });
Core.dom.write(() => {
Context.dom.write(() => {
this.el.parentNode.removeChild(this.el); this.el.parentNode.removeChild(this.el);
}); });
resolve(); resolve();
}) }).play();
.play();
}); });
}); });
} }
ionViewDidUnload() { protected ionViewDidUnload() {
this.ionActionSheetDidUnload.emit({ actionsheet: this }); this.ionActionSheetDidUnload.emit({ actionSheet: this });
} }
backdropClick() { @Listen('ionDismiss')
protected onDismiss(ev: UIEvent) {
ev.stopPropagation();
ev.preventDefault();
this.dismiss();
}
protected ionViewDidLoad() {
this.ionActionSheetDidLoad.emit({ actionSheet: this });
}
protected ionViewDidEnter() {
this.ionActionSheetDidPresent.emit({ loading: this });
}
protected backdropClick() {
if (this.enableBackdropDismiss) { if (this.enableBackdropDismiss) {
// const opts: NavOptions = { // const opts: NavOptions = {
// minClickBlockDuration: 400 // minClickBlockDuration: 400
@ -129,7 +139,7 @@ export class ActionSheet {
} }
} }
click(button: ActionSheetButton) { protected click(button: ActionSheetButton) {
let shouldDismiss = true; let shouldDismiss = true;
if (button.handler) { if (button.handler) {
if (button.handler() === false) { if (button.handler() === false) {
@ -141,7 +151,7 @@ export class ActionSheet {
} }
} }
render() { protected render() {
let userCssClass = 'action-sheet-content'; let userCssClass = 'action-sheet-content';
if (this.cssClass) { if (this.cssClass) {
userCssClass += ' ' + this.cssClass; userCssClass += ' ' + this.cssClass;
@ -239,6 +249,6 @@ export interface ActionSheetButton {
export interface ActionSheetEvent { export interface ActionSheetEvent {
detail: { detail: {
actionsheet: ActionSheet; actionSheet: ActionSheet;
}; };
} }

11
packages/core/src/components/action-sheet/test/basic.html
View File

@ -17,6 +17,8 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button> <ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
<ion-button block onclick="presentActionSheet2()">Present Action Sheet 2</ion-button> <ion-button block onclick="presentActionSheet2()">Present Action Sheet 2</ion-button>
<ion-button block onclick="presentActionSheet3()">Present Action Sheet 3</ion-button> <ion-button block onclick="presentActionSheet3()">Present Action Sheet 3</ion-button>
@ -28,7 +30,8 @@
function presentActionSheet1() { function presentActionSheet1() {
var mode = Ionic.mode; var mode = Ionic.mode;
Ionic.controller('action-sheet', { var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
title: "Albums", title: "Albums",
buttons: [{ buttons: [{
text: 'Delete', text: 'Delete',
@ -70,7 +73,8 @@
} }
function presentActionSheet2() { function presentActionSheet2() {
Ionic.controller('action-sheet', { var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [{ buttons: [{
text: 'Archive', text: 'Archive',
handler: () => { handler: () => {
@ -96,7 +100,8 @@
} }
function presentActionSheet3() { function presentActionSheet3() {
Ionic.controller('action-sheet', { var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [{ buttons: [{
text: 'Open Alert', text: 'Open Alert',
handler: () => { handler: () => {

2
packages/core/src/components/animation/animation.tsx → packages/core/src/components/animation-controller/animation-controller.tsx
View File

@ -4,7 +4,7 @@ import { Animator } from './animator';
@Component({ @Component({
tag: 'ion-animation' tag: 'ion-animation-controller'
}) })
export class AnimationController { export class AnimationController {

0
packages/core/src/components/animation/animation-interface.tsx → packages/core/src/components/animation-controller/animation-interface.tsx
View File

0
packages/core/src/components/animation/animator.tsx → packages/core/src/components/animation-controller/animator.tsx
View File

0
packages/core/src/components/animation/constants.ts → packages/core/src/components/animation-controller/constants.ts
View File

0
packages/core/src/components/animation/transition-end.ts → packages/core/src/components/animation-controller/transition-end.ts
View File

2
packages/core/src/components/gesture-controller/gesture-controller.ts
View File

@ -2,7 +2,7 @@ import { Component } from '@stencil/core';
@Component({ @Component({
tag: 'ion-gesture-ctrl' tag: 'ion-gesture-controller'
}) })
export class GestureController { export class GestureController {
private id: number = 0; private id: number = 0;

4
packages/core/src/components/loading-controller/loading-controller.tsx
View File

@ -1,9 +1,9 @@
import { Component, Listen, Method } from '@stencil/core'; import { Component, Listen, Method } from '@stencil/core';
import { LoadingEvent, LoadingOptions, Loading } from '../../index'; import { Loading, LoadingEvent, LoadingOptions } from '../../index';
@Component({ @Component({
tag: 'ion-loading-ctrl' tag: 'ion-loading-controller'
}) })
export class LoadingController { export class LoadingController {
private ids = 0; private ids = 0;

2
packages/core/src/components/modal-controller/modal-controller.tsx
View File

@ -3,7 +3,7 @@ import { Modal, ModalEvent, ModalOptions } from '../../index';
@Component({ @Component({
tag: 'ion-modal-ctrl' tag: 'ion-modal-controller'
}) })
export class ModalController { export class ModalController {
private ids = 0; private ids = 0;

36
packages/core/src/components/popover-controller/popover-controller.scss
View File

@ -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;
}

31
packages/core/src/components/popover-controller/popover-controller.tsx
View File

@ -1,25 +1,17 @@
import { Component, Listen } from '@stencil/core'; import { Component, Listen, Method } from '@stencil/core';
import { PopoverEvent, PopoverOptions, Popover, IonicControllerApi, Ionic } from '../../index'; import { PopoverEvent, PopoverOptions, Popover } from '../../index';
@Component({ @Component({
tag: 'ion-popover-controller', tag: 'ion-popover-controller'
// styleUrl: 'popover-controller.scss'
}) })
export class PopoverController implements IonicControllerApi { export class PopoverController {
private ids = 0; private ids = 0;
private popoverResolves: {[popoverId: string]: Function} = {}; private popoverResolves: {[popoverId: string]: Function} = {};
private popovers: Popover[] = []; private popovers: Popover[] = [];
private appRoot: Element;
@Method()
ionViewDidLoad() { create(opts?: PopoverOptions) {
this.appRoot = document.querySelector('ion-app') || document.body;
Ionic.registerController('popover', this);
}
load(opts?: PopoverOptions) {
// create ionic's wrapping ion-popover component // create ionic's wrapping ion-popover component
const popover = document.createElement('ion-popover'); const popover = document.createElement('ion-popover');
const id = this.ids++; const id = this.ids++;
@ -33,7 +25,8 @@ export class PopoverController implements IonicControllerApi {
Object.assign(popover, opts); Object.assign(popover, opts);
// append the popover element to the document body // 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 // store the resolve function to be called later up when the popover loads
return new Promise<Popover>(resolve => { return new Promise<Popover>(resolve => {
@ -43,7 +36,7 @@ export class PopoverController implements IonicControllerApi {
@Listen('body:ionPopoverDidLoad') @Listen('body:ionPopoverDidLoad')
viewDidLoad(ev: PopoverEvent) { protected viewDidLoad(ev: PopoverEvent) {
const popover = ev.detail.popover; const popover = ev.detail.popover;
const popoverResolve = this.popoverResolves[popover.id]; const popoverResolve = this.popoverResolves[popover.id];
if (popoverResolve) { if (popoverResolve) {
@ -54,13 +47,13 @@ export class PopoverController implements IonicControllerApi {
@Listen('body:ionPopoverWillPresent') @Listen('body:ionPopoverWillPresent')
willPresent(ev: PopoverEvent) { protected willPresent(ev: PopoverEvent) {
this.popovers.push(ev.detail.popover); this.popovers.push(ev.detail.popover);
} }
@Listen('body:ionPopoverWillDismiss, body:ionPopoverDidUnload') @Listen('body:ionPopoverWillDismiss, body:ionPopoverDidUnload')
willDismiss(ev: PopoverEvent) { protected willDismiss(ev: PopoverEvent) {
const index = this.popovers.indexOf(ev.detail.popover); const index = this.popovers.indexOf(ev.detail.popover);
if (index > -1) { if (index > -1) {
this.popovers.splice(index, 1); this.popovers.splice(index, 1);
@ -69,7 +62,7 @@ export class PopoverController implements IonicControllerApi {
@Listen('body:keyup.escape') @Listen('body:keyup.escape')
escapeKeyUp() { protected escapeKeyUp() {
const lastPopover = this.popovers[this.popovers.length - 1]; const lastPopover = this.popovers[this.popovers.length - 1];
if (lastPopover) { if (lastPopover) {
lastPopover.dismiss(); lastPopover.dismiss();

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

@ -1,14 +1,13 @@
import { Animation, PopoverOptions } from '../../../index'; import { Animation } from '../../../index';
export default function popoverEnter(
Animation: Animation, /**
baseElm: HTMLElement, * iOS Popover Enter Animation
evtSource: Event */
) { export default function(Animation: Animation, baseElm: HTMLElement) {
const baseAnimation = new Animation(); const baseAnimation = new Animation();
const backdropAnimation = new Animation(); const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop')); backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
const wrapperAnimation = new Animation(); const wrapperAnimation = new Animation();

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

@ -1,7 +1,7 @@
import { Animation } from '../../../index'; import { Animation } from '../../../index';
/** /**
* iOS Modal Leave Animation * iOS Popover Leave Animation
*/ */
export default function(Animation: Animation, baseElm: HTMLElement) { export default function(Animation: Animation, baseElm: HTMLElement) {
const baseAnimation = new Animation(); const baseAnimation = new Animation();
@ -10,12 +10,11 @@ export default function(Animation: Animation, baseElm: HTMLElement) {
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop')); backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
const wrapperAnimation = new Animation(); const wrapperAnimation = new Animation();
const wrapperElm = baseElm.querySelector('.popover-wrapper'); wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.99, 0); wrapperAnimation.fromTo('opacity', 0.99, 0);
backdropAnimation.fromTo('opacity', 0.08, 0); backdropAnimation.fromTo('opacity', 0.08, 0);
return baseAnimation return baseAnimation
.addElement(baseElm) .addElement(baseElm)
.easing('ease') .easing('ease')

30
packages/core/src/components/popover/popover.scss
View File

@ -3,6 +3,9 @@
// Popover // Popover
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Color of the backdrop
$popover-backdrop-color: #000 !default;
ion-popover { ion-popover {
@include position(0, 0, 0, 0); @include position(0, 0, 0, 0);
@ -42,3 +45,30 @@ ion-popover {
.popover-content .scroll-content { .popover-content .scroll-content {
position: relative; 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;
}

114
packages/core/src/components/popover/popover.tsx
View File

@ -1,12 +1,6 @@
import { import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
Component, import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
Element,
Event,
EventEmitter,
Listen,
Prop
} from '@stencil/core';
import { AnimationBuilder, Animation, Ionic } from '../../index';
import { createThemedClasses } from '../../utils/theme'; import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
@ -24,14 +18,19 @@ import iOSLeaveAnimation from './animations/ios.leave';
} }
}) })
export class Popover { export class Popover {
private animation: Animation;
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
@Event() ionPopoverDidLoad: EventEmitter; @Event() private ionPopoverDidLoad: EventEmitter;
@Event() ionPopoverWillPresent: EventEmitter; @Event() private ionPopoverDidPresent: EventEmitter;
@Event() ionPopoverDidPresent: EventEmitter; @Event() private ionPopoverWillPresent: EventEmitter;
@Event() ionPopoverWillDismiss: EventEmitter; @Event() private ionPopoverWillDismiss: EventEmitter;
@Event() ionPopoverDidDismiss: EventEmitter; @Event() private ionPopoverDidDismiss: EventEmitter;
@Event() ionPopoverDidUnload: EventEmitter; @Event() private ionPopoverDidUnload: EventEmitter;
@Prop({ connect: 'ion-animation' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
@Prop() mode: string; @Prop() mode: string;
@Prop() color: string; @Prop() color: string;
@ -45,19 +44,6 @@ export class Popover {
@Prop() id: string; @Prop() id: string;
@Prop() showBackdrop: boolean = true; @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() { present() {
return new Promise<void>(resolve => { return new Promise<void>(resolve => {
@ -73,20 +59,23 @@ export class Popover {
this.ionPopoverWillPresent.emit({ popover: this }); this.ionPopoverWillPresent.emit({ popover: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation let animationBuilder = this.enterAnimation;
? this.enterAnimation
: iOSEnterAnimation; 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 // build the animation and kick it off
Ionic.controller('animation').then(Animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animationBuilder(Animation, this.el, this.ev); this.animation = animation;
this.animation
.onFinish((a: any) => { animation.onFinish((a: any) => {
a.destroy(); a.destroy();
this.ionPopoverDidPresent.emit({ popover: this }); this.ionViewDidEnter();
resolve(); resolve();
}) }).play();
.play();
}); });
} }
@ -95,35 +84,56 @@ export class Popover {
this.animation.destroy(); this.animation.destroy();
this.animation = null; this.animation = null;
} }
return new Promise<void>(resolve => { return new Promise(resolve => {
this.ionPopoverWillDismiss.emit({ popover: this }); this.ionPopoverWillDismiss.emit({ popover: this });
let animationBuilder = this.exitAnimation // get the user's animation fn if one was provided
? this.exitAnimation let animationBuilder = this.exitAnimation;
: iOSLeaveAnimation; 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 // build the animation and kick it off
Ionic.controller('animation').then(Animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animationBuilder(Animation, this.el); this.animation = animation;
this.animation
.onFinish((a: any) => { animation.onFinish((a: any) => {
a.destroy(); a.destroy();
this.ionPopoverDidDismiss.emit({ popover: this }); this.ionPopoverDidDismiss.emit({ popover: this });
Core.dom.write(() => {
Context.dom.write(() => {
this.el.parentNode.removeChild(this.el); this.el.parentNode.removeChild(this.el);
}); });
resolve(); resolve();
}) }).play();
.play();
}); });
}); });
} }
ionViewDidUnload() { protected ionViewDidUnload() {
this.ionPopoverDidUnload.emit({ popover: this }); 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) { if (this.enableBackdropDismiss) {
// const opts: NavOptions = { // const opts: NavOptions = {
// minClickBlockDuration: 400 // minClickBlockDuration: 400

26
packages/core/demos/popover/basic.html → packages/core/src/components/popover/test/basic.html
View File

@ -12,28 +12,31 @@
<ion-app> <ion-app>
<ion-content> <ion-content>
<ion-button id="presentPopover">Show Popover</ion-button> <ion-button onclick="presentPopover(event)">Show Popover</ion-button>
<ion-popover-controller></ion-popover-controller>
</ion-content> </ion-content>
</ion-app> </ion-app>
<script> <script>
document.getElementById('presentPopover').addEventListener('click', function(clickEvt) { function presentPopover(event) {
Ionic.controller('popover', { var popoverController = document.querySelector('ion-popover-controller');
popoverController.create({
component: 'profile-page', component: 'profile-page',
ev: clickEvt ev: event
}).then(popover => { }).then(popover => {
console.log(popover) popover.present();
popover.present()
});
}); });
}
class ProfilePage extends HTMLElement { class ProfilePage extends HTMLElement {
constructor() { constructor() {
super(); super();
const shadowRoot = this.attachShadow({ const shadowRoot = this.attachShadow({
mode: 'open' mode: 'open'
}); });
shadowRoot.innerHTML =
` shadowRoot.innerHTML = `
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
My Profile My Profile
@ -43,9 +46,9 @@
<p> <p>
<ion-button>Dismiss</ion-button> <ion-button>Dismiss</ion-button>
</p> </p>
</ion-content> </ion-content>`;
`;
} }
connectedCallback() { connectedCallback() {
var btn = this.shadowRoot.querySelector('ion-button'); var btn = this.shadowRoot.querySelector('ion-button');
btn.addEventListener('click', (uiEvent) => { btn.addEventListener('click', (uiEvent) => {
@ -57,6 +60,7 @@
}); });
} }
} }
customElements.define('profile-page', ProfilePage); customElements.define('profile-page', ProfilePage);
</script> </script>
</body> </body>

6
packages/core/stencil.config.js
View File

@ -4,7 +4,7 @@ exports.config = {
publicPath: '/dist', publicPath: '/dist',
generateCollection: true, generateCollection: true,
bundles: [ 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-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-action-sheet', 'ion-action-sheet-controller'] },
{ components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] }, { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
@ -17,9 +17,9 @@ exports.config = {
{ components: ['ion-grid', 'ion-row', 'ion-col'] }, { 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-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-input', 'ion-textarea'] },
{ components: ['ion-loading', 'ion-loading-ctrl'] }, { components: ['ion-loading', 'ion-loading-controller'] },
{ components: ['ion-menu'], priority: 'low' }, { 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-popover', 'ion-popover-controller'] },
{ components: ['ion-searchbar'] }, { components: ['ion-searchbar'] },
{ components: ['ion-segment', 'ion-segment-button'] }, { components: ['ion-segment', 'ion-segment-button'] },