OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter ORION
  • Start date Start date
O

ORION

Guest
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:

Code:
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.

<p><strong>Issue:</strong></p>

<p>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.</p>

<p>A very vague bit of documentation can be found here:
<a href="http://aurelia.io/hub.html#/doc/article/aurelia/dialog/latest/dialog-basics/5" rel="nofollow noreferrer">http://aurelia.io/hub.html#/doc/article/aurelia/dialog/latest/dialog-basics/5</a></p>

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

<blockquote>
<p><strong>Position -</strong> 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)</p>
</blockquote>

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

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

<p>To attempting to use it as an argument my <code>dialogService.open</code> function:</p>

<pre><code>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} });
</code></pre>

<p><strong>My Question:</strong></p>

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

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

<p><strong>Thanks in Advance.</strong> </p>
 
Top