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

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

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

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

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

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

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

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

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

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 { 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<Popover>(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();

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,
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();

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

@ -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')

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

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

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

@ -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<void>(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) => {
this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animation;
animation.onFinish((a: any) => {
a.destroy();
this.ionPopoverDidPresent.emit({ popover: this });
this.ionViewDidEnter();
resolve();
})
.play();
}).play();
});
}
@ -95,35 +84,56 @@ export class Popover {
this.animation.destroy();
this.animation = null;
}
return new Promise<void>(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) => {
this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animation;
animation.onFinish((a: any) => {
a.destroy();
this.ionPopoverDidDismiss.emit({ popover: this });
Core.dom.write(() => {
Context.dom.write(() => {
this.el.parentNode.removeChild(this.el);
});
resolve();
})
.play();
}).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

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

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

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

@ -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'] },