Showing a dialog on all pages after rendering is done - dialog

Question

I'm trying to add a popup that's supposed to be displayed when the user naviagates to a new page if certain conditions are met. The problem is that even if I add a post render step to the router configuration, on views that are composed by several custom elements they sometimes import resources after the post render step has executed which causes the popup to dissapear and pretty much lock the page. This is a small reproducable example:
router.configure(config => {
config.addPostRenderStep(CustomPostRenderStep);
return config;
});
...
#inject(DialogService)
class CustomPostRenderStep{
constructor(
private mDialogService: DialogService
) {
}
run(navigationInstruction: NavigationInstruction, next: Next) {
this.mDialogService.open({
viewModel: TestModal
lock: true
});
return next();
}
}
The popup will on some pages appear on the screen for a brief moment before it disappears but the body html tag will still have the class "ux-dialog-open".
Adding a timeout helps, but how long the timeout needs to be is different on different systems which makes it an unreliable solution. Like this:
#inject(DialogService)
class CustomPostRenderStep{
constructor(
private mDialogService: DialogService
) {
}
run(navigationInstruction: NavigationInstruction, next: Next) {
window.setTimeout(() => {
this.mDialogService.open({
viewModel: TestModal
lock: true
});
}, 200);
return next();
}
}
What is the proper way to wait for everything to be rendered before displaying the popup?

Answer 1

A better option would be to utilize events fired by router after navigation success
https://ilikekillnerds.com/2015/09/understanding-aurelia-router-events/
you can subscribe to router:navigation:success in your app and create your dialog aferwards
router:navigation:success

Answer 2

You should use TaskQueue in order to be called on the next rendering loop.
See: http://aurelia.io/docs/api/task-queue/class/TaskQueue/method/queueTask
This should work:
#inject(DialogService, TaskQueue)
class CustomPostRenderStep {
constructor(
private mDialogService: DialogService
private mTaskQueue: TaskQueue
) {
}
run(navigationInstruction: NavigationInstruction, next: Next) {
this.mTaskQueue.queueTask(() => {
this.mDialogService.open({
viewModel: TestModal,
lock: true
});
});
return next();
}
}
I do not really know the RenderPipeline very well but maybe you could call next() inside your queued task.

Answer 3

View my Gist fork that is working, maybe you should investigate what is closing your dialog by setting breakpoints in aurelia-dialog code.
Here's an example: Aurelia Router Demo | PostRenderStep modal dialog example
app.js
import { inject } from 'aurelia-framework';
import { DialogService } from 'aurelia-dialog';
import { TestModal} from 'test-modal';
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{route: ['', 'home'], name: 'home', moduleId: 'home/home', nav: true, title: 'Home'},
{route: 'profile', name: 'profile', moduleId: 'profile/profile', nav: true, title: 'Profile'},
{route: 'settings', name: 'settings', moduleId: 'settings/settings', nav: true, title: 'Settings'}
]);
config.addPostRenderStep(PostRenderStep);
this.router = router;
}
}
#inject(DialogService, TestModal)
class PostRenderStep {
constructor(dialogService, testModal){
this.dialogService = dialogService;
this.testModal = testModal;
}
run(routingContext, next) {
this.dialogService.open({
viewModel: TestModal,
lock: true
});
return next();
}
}
Plus, which versions are you using?