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

chore(): overlay refactors

Browse Source
This commit is contained in:
mhartington
2017-12-21 13:10:05 -05:00
parent 76afd9d77f
commit cca878cb3c
11 changed files with 106 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -175,14 +175,14 @@ export class ActionSheet {
return playAnimationAsync(animation);
}).then((animation) => {
animation.destroy();
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
}).then(() => {
this.ionActionSheetDidDismiss.emit({
data,
role
});
}).then(() => {
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
});
}

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

@ -36,6 +36,7 @@
<script>
window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
async function presentBasic() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();

9
packages/core/src/components/alert/alert.tsx
View File

@ -178,15 +178,14 @@ export class Alert {
return playAnimationAsync(animation);
}).then((animation) => {
animation.destroy();
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
}).then(() => {
this.ionAlertDidDismiss.emit({
data: data,
role: role
});
}).then(() => {
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
});
}

2
packages/core/src/components/alert/test/basic/index.html
View File

@ -35,6 +35,8 @@
<script>
window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
async function presentAlert() {
var alertController = document.querySelector('ion-alert-controller');

13
packages/core/src/components/loading/loading.tsx
View File

@ -171,17 +171,22 @@ export class Loading {
return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animation;
if (!this.animate) {
// if the duration is 0, it won't actually animate I don't think
// TODO - validate this
this.animation = animation.duration(0);
}
return playAnimationAsync(animation);
}).then((animation) => {
animation.destroy();
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
}).then(() => {
this.ionLoadingDidDismiss.emit({
data,
role
});
}).then(() => {
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
});
}

70
packages/core/src/components/modal/modal.tsx
View File

@ -78,14 +78,14 @@ export class Modal {
@Prop() enterAnimation: AnimationBuilder;
@Prop() leaveAnimation: AnimationBuilder;
@Prop() animate: boolean;
@Prop() animate: boolean = true;
@Prop({ mutable: true }) delegate: FrameworkDelegate;
private animation: Animation;
private usersComponentElement: HTMLElement;
@Method()
async present() {
present() {
if (this.animation) {
this.animation.destroy();
this.animation = null;
@ -111,29 +111,30 @@ export class Modal {
// add the modal by default to the data being passed
this.data = this.data || {};
this.data.modal = this.el;
const mountingData = await this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses);
this.usersComponentElement = mountingData.element;
this.animation = await this.animationCtrl.create(animationBuilder, this.el);
if (!this.animate) {
// if the duration is 0, it won't actually animate I don't think
// TODO - validate this
this.animation = this.animation.duration(0);
}
await playAnimationAsync(this.animation);
this.animation.destroy();
this.ionModalDidPresent.emit();
this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
.then((mountingData) => {
this.usersComponentElement = mountingData.element;
});
return this.animationCtrl.create(animationBuilder, this.el)
.then(animation => {
this.animation = animation;
if (!this.animate) this.animation = animation.duration(0);
return playAnimationAsync(animation);
})
.then((animation) => {
animation.destroy();
this.ionModalDidPresent.emit();
});
}
@Method()
async dismiss(data?: any, role?: string) {
dismiss(data?: any, role?: string) {
if (this.animation) {
this.animation.destroy();
this.animation = null;
}
this.ionModalWillDismiss.emit({
data,
role
});
this.ionModalWillDismiss.emit({data, role});
if (!this.delegate) {
this.delegate = new DomFrameworkDelegate();
@ -142,22 +143,25 @@ export class Modal {
// get the user's animation fn if one was provided
const animationBuilder = this.leaveAnimation || this.config.get('modalLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
this.animation = await this.animationCtrl.create(animationBuilder, this.el);
await playAnimationAsync(this.animation);
this.animation.destroy();
await domControllerAsync(this.dom.write, () => {});
// TODO - Figure out how to make DOM controller work with callbacks that return a promise or are async
const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
await this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
this.el.parentElement.removeChild(this.el);
this.ionModalDidDismiss.emit({
data,
role
return this.animationCtrl.create(animationBuilder, this.el)
.then(animation => {
this.animation = animation;
if (!this.animate) {
this.animation = animation.duration(0);
}
return playAnimationAsync(animation);
})
.then((animation) => {
animation.destroy();
this.ionModalDidDismiss.emit({data, role});
})
.then(() => {
return domControllerAsync(this.dom.write, () => {
const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
this.el.parentNode.removeChild(this.el);
});
});
}

2
packages/core/src/components/modal/test/basic/index.html
View File

@ -27,6 +27,8 @@
</ion-app>
<script>
window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
async function presentModal() {
const element = document.createElement('div');
element.innerHTML = `

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

@ -108,27 +108,26 @@ export class Popover {
cssClasses.push(this.cssClass);
}
// add the modal by default to the data being passed
this.data = this.data || {};
this.data.modal = this.el;
return this.delegate.attachViewToDom(userComponentParent, this.component,
this.data, cssClasses).then((mountingData) => {
this.usersComponentElement = mountingData.element;
return this.animationCtrl.create(animationBuilder, this.el, this.ev);
}).then((animation) => {
this.animation = animation;
if (!this.animate) {
// if the duration is 0, it won't actually animate I don't think
// TODO - validate this
this.animation = animation.duration(0);
}
return playAnimationAsync(animation);
}).then((animation) => {
animation.destroy();
this.componentDidEnter();
});
}
// add the modal by default to the data being passed
this.data = this.data || {};
this.data.modal = this.el;
return this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
.then((mountingData) => {
this.usersComponentElement = mountingData.element;
return domControllerAsync(this.dom.raf, () => { })
.then(() => this.animationCtrl.create(animationBuilder, this.el, this.ev))
})
.then((animation) => {
this.animation = animation;
if (!this.animate) this.animation = animation.duration(0);
return playAnimationAsync(animation);
})
.then((animation) => {
animation.destroy();
this.componentDidEnter();
});
}
@Method()
dismiss(data?: any, role?: string) {
@ -137,10 +136,7 @@ export class Popover {
this.animation = null;
}
this.ionPopoverWillDismiss.emit({
data,
role
});
this.ionPopoverWillDismiss.emit({ data, role });
if (!this.delegate) {
this.delegate = new DomFrameworkDelegate();
@ -148,23 +144,22 @@ export class Popover {
const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animation;
return playAnimationAsync(animation);
}).then((animation) => {
animation.destroy();
return domControllerAsync(this.dom.write, () => {});
}).then(() => {
// TODO - Figure out how to make DOM controller work with callbacks that return a promise or are async
const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
return this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
}).then(() => {
this.el.parentElement.removeChild(this.el);
this.ionPopoverDidDismiss.emit({
data,
role
return this.animationCtrl.create(animationBuilder, this.el)
.then(animation => {
this.animation = animation;
return playAnimationAsync(animation);
})
.then((animation) => {
animation.destroy();
this.ionPopoverDidDismiss.emit({ data, role });
})
.then(() => {
return domControllerAsync(this.dom.write, () => {
const userComponentParent = this.el.querySelector(`.${USER_COMPONENT_POPOVER_CONTAINER_CLASS}`);
this.delegate.removeViewFromDom(userComponentParent, this.usersComponentElement);
this.el.parentNode.removeChild(this.el);
});
});
});
}
componentDidLoad() {
@ -217,7 +212,7 @@ export class Popover {
class='popover-backdrop'
/>,
<div class={wrapperClasses}>
<div class='popover-arrow'/>
<div class='popover-arrow' />
<div class='popover-content'>
<div class={USER_COMPONENT_POPOVER_CONTAINER_CLASS}>
</div>

4
packages/core/src/components/popover/test/basic/index.html
View File

@ -44,6 +44,10 @@
</ion-page>
</ion-app>
<script>
// window.addEventListener('ionPopoverDidDismiss', function(e){console.log('didDismiss', e)})
// window.addEventListener('ionPopoverWillDismiss', function(e){console.log('willDismiss', e)})
async function presentPopover(opts) {
const popoverController = document.querySelector('ion-popover-controller');
await popoverController.componentOnReady();

3
packages/core/src/components/toast/test/basic/index.html
View File

@ -59,6 +59,9 @@
</ion-page>
</ion-app>
<script>
window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
async function presentToast(position) {
const toastController = document.querySelector('ion-toast-controller');
await toastController.componentOnReady();

8
packages/core/src/components/toast/toast.tsx
View File

@ -121,14 +121,14 @@ export class Toast {
return playAnimationAsync(animation);
}).then((animation) => {
animation.destroy();
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
}).then(() => {
this.ionToastDidDismiss.emit({
data,
role
});
}).then(() => {
return domControllerAsync(this.dom.write, () => {
this.el.parentNode.removeChild(this.el);
});
});
}