How to use "position" configuration setting of Aurelia-Dialog plugin

Question

Issue:

I've been trying to figure out how to use the "position" configuration settings of the Aurelia-Dialog plugin on my Aurelia based website, but I can't figure it out cannot find a single example on all of the Internet of Things.

A very vague bit of documentation can be found here: http://aurelia.io/hub.html#/doc/article/aurelia/dialog/latest/dialog-basics/5

For those of you not wishing to visit the link, for "position" it says:

Position - a callback that is called right before showing the modal with the signature: (modalContainer: Element, modalOverlay: Element) => void. This allows you to setup special classes, play with the position, etc... If specified, centerHorizontalOnly is ignored. (optional)

I've tried everything from attempting to add code directly to the plugin configuration in main.js:

plugin('aurelia-dialog', config => {} .plugin('aurelia-dialog', config => { config.useDefaults(); //config.settings.position = ; })

To attempting to use it as an argument my dialogService.open function:

showMessage(message, title = 'Message', options = ['Ok'], dismissable = false) {
    return this.dialogService.open({ viewModel: TestModal, 
    model: { message, title, options }, 
    overlayDismiss: 
    dismissable, 
    position: function(stuff){ modal, modalOverlay} });

My Question:

How do I actually use the position setting, and if my function(stuff){modal, overlay} format is correct, how do I actually pass a modal and an overlay to this function?

I'm pretty much at a dead-end on this so any help would be useful.

Thanks in Advance.

gerfen gerfen · Accepted Answer · 2017-05-16T19:03:01

In the constructor of your dialog class, you need to inject the DialogController, then define the callback function.

import { DialogController } from "aurelia-dialog";
@inject(DialogController)
export class YourDialog {
    constructor(private controller: DialogController) {
        this.controller.settings.position = (modalContainer: Element,   modalOverlay: Element) => {
        let container = modalContainer;
        let overlay = modalOverLay;
    };
   }
}

How to use "position" configuration setting of Aurelia-Dialog plugin

1 Answers