Currently not working with newest port of Aurelia

There is currently no type definition file.

Here is a conglomerate post of the design discussions we've (@Aaike and I) had so far -

Right now for the gooy/dialog-service there is a dependency on the https://github.com/gooy/aurelia-compiler to create new dialogs from a VM.

The compiler is used to be able to specify views dynamically through the templating or though the plugin configuration

We should have the ability to switch between templates (bs vs foundation, etc...) do you have any ideas for how we can do this without having multiple repos or branches?

so the @noview is actually used , then the dialog loads in the template itself and renders it

The modal should have a single view-model file for the custom element instead of having multiple to prevent too much unnecessary complexity.

Expose a tag in the markup

Using @containerless will be very helpful

Need to make sure we can make it so that the dialog can work on its own , or through a service
the dialog should just work on its own , the service just adds it to the dom , and that's it ..

Dialog appears but does not overlay the view underneath. I see the overlay element in the DOM called "dialog-overlay" but appears to be missing a background-color.

We found that updating core-js to the latest version using jspm dl-loader --latest causes the dialog to not work in Firefox. The semi-hacky fix that we found was to wrap a try/catch around the below block of code in aurelia-metadata.js > origin.js > Origin.get. The simple fact of wrapping a try around the code seems to allow the getter function to attach, thus not producing an error and working.

We heard you were making a move towards updating all the libraries to use the newest core-js, so hear is an issue.

aurelia-metadata.js

  var Origin = (function () {
    function Origin(moduleId, moduleMember) {
      _classCallCheck(this, Origin);

      this.moduleId = moduleId;
      this.moduleMember = moduleMember;
    }

    Origin.get = function get(fn) {
      var origin = originStorage.get(fn);

      if (origin === undefined) {
        _aureliaPal.PLATFORM.eachModule(function (key, value) {
          for (var _name in value) {
            // This try fixes a race condition, because it works and nothing is ever caught.
            var exp;
            try {
              exp = value[_name];
            } catch (e) {

            }

            if (exp === fn) {
              originStorage.set(fn, origin = new Origin(key, _name));
              return true;
            }
          }

          if (value === fn) {
            originStorage.set(fn, origin = new Origin(key, 'default'));
            return true;
          }
        });
      }

      return origin || unknownOrigin;
    };

    Origin.set = function set(fn, origin) {
      originStorage.set(fn, origin);
    };

    return Origin;
  })();

You can recreate this with the sample dialog app, just don't forget to add this to your index.html

<script>
  // Loads WeakMap polyfill needed by MutationObservers
  System.import('core-js').then(function() {
    // Imports MutationObserver polyfill
    return System.import('polymer/mutationobservers');
  }).then(function() {
    // Ensures start of Aurelia when all required IE9 dependencies are loaded
    System.import('aurelia-bootstrapper');
  });
</script>

It would be nice to have Prompt exported to import it for the most common use-cases.

Would this be a functionality to be built into the dialog component, or up to the app designer?
Any suggestions on how to proceed?

I suppose canDeactivate lifecycle behavior needs to be definable then..

When creating a custom dialog that uses a <compose> tag in the body, the dialog is not positioned correctly when it's opened. So for example, something like the following will result in the dialog being positioned in the lower right of the screen instead of centered vertically and horizontally.

Dialog Content

<template>
  <ai-dialog>
    <ai-dialog-body>
      <compose view-model="myViewModel"></compose>
    </ai-dialog-body>

    <ai-dialog-footer>
      <button click.trigger="controller.cancel()">Cancel</button>
      <button click.trigger="controller.ok()">Ok</button>
    </ai-dialog-footer>
  </ai-dialog>
</template>

myViewModel.html - the view that's being composed in the dialog.

<template>
  <style>
    .testContent {
      width: 600px;
      height: 300px;
    }
  </style>

  <div class="testContent">
    <p>Hello There!</p>
  </div>
</template>

Seem to be getting an error on first use. Fairly blank auerlia project and on click of submit() get
Unhandled promise rejection Error: Loaders must implement loadModule(id).

Any guidance would be welcome?

Of course I can't really get a stack trace, not had a good look yet, thought I'd log it, I'll PR it if I can figure it out and it helps you lot out :)

Works fine when I remove the dialog dependency (but then my dialogs don't work!)

FYI this works fine on FF/Chrome (as usual!)

Shouldn't the Promise reject when the DialogController cancel()s?

Using 0.1.1
When I import Prompt from 'aurelia-dialog' all is fine, dialog opens, but when I copy prompt.js and prompt.html to my project I get an error

TypeError: 'self' getter called on an object that does not implement interface Window.
Stack trace:
e/</</r.prototype.newModule/</<.get@http://localhost:3030/jspm_packages/system.js:4:10103
get/<@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/aurelia-metadata.js:132:17
System.forEachModule@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/aurelia-loader-default.js:54:13
get@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/aurelia-metadata.js:130:9
_getViewModel@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/dialog-service.js:28:33
open/<@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/dialog-service.js:55:16
Promise@http://localhost:3030/jspm_packages/npm/[email protected]/modules/es6.promise.js:193:9
open@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/dialog-service.js:43:1
askRemove@http://localhost:3030/dist/pages/profiles-index.js:69:1
evaluate@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:1369:14
bind/this._disposeListener<@http://localhost:3030/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:5032:22

bower.json is not up to date with dependency versions compared to config.js. As a result, bower install is causing conflict resolution. I understand adding a resolution section will resolve the issue, but the file should be still updated to match the latest version supported.

Hey guys, got the following error being displayed in IE11/10/9 and is forcing the app to completely crash.

Unhandled promise rejection WrongDocumentError
Error loading <app-url>/jspm_packages/github/aurelia/[email protected]/ai-dialog.html!template-registry-entry

The issue is not present on any other browser. Is anyone also seeing this?

V0.4.1. - Errors disappears if .plugin("aurelia-dialog") is removed.

Declaration

aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("aurelia-dialog")
.plugin("aurelia-flux");

SystemJS declaration

"github:aurelia/[email protected]": {
  "aurelia-dependency-injection": "github:aurelia/[email protected]",
  "aurelia-framework": "github:aurelia/[email protected]",
  "aurelia-metadata": "github:aurelia/[email protected]",
  "aurelia-templating": "github:aurelia/[email protected]",
  "text": "github:systemjs/[email protected]"
},

Error

Unhandled promise rejection TypeError: Cannot read property 'endsWith' of undefined
at Function.convertModuleIdToViewUrl (http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:408:24)
at new ConventionalViewStrategy (http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:399:47)
at Function.getDefault (http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:344:20)
at HtmlBehaviorResource.load (http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3174:74)
at ResourceDescription.load (http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3319:25)
at ResourceModule.load (http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3259:33)
at http://localhost:50082/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2407:43
at run (http://localhost:50082/jspm_packages/npm/[email protected]/modules/es6.promise.js:91:43)
at http://localhost:50082/jspm_packages/npm/[email protected]/modules/es6.promise.js:105:11
at module.exports (http://localhost:50082/jspm_packages/npm/[email protected]/modules/$.invoke.js:6:25)
at queue.(anonymous function) (http://localhost:50082/jspm_packages/npm/[email protected]/modules/$.task.js:40:9)
at Number.run (http://localhost:50082/jspm_packages/npm/[email protected]/modules/$.task.js:27:7)
at listner (http://localhost:50082/jspm_packages/npm/[email protected]/modules/$.task.js:31:9)

Changing the plugin into the main.js file is missing

.plugin('aurelia-dialog')

Additionally, the installation steps that are provided are a little vague. Thank you.

I have this use case:

1. Open one modal for confirmation via this.dialogService.open: "Do the update?": [Yes] [No]
2. Open one modal for progress via this.dialogService.open: "Progress of the update.": (no buttons)
3. Close the modal via this.dialogService.close.
4. Open one modal for progress via this.dialogService.open: "Complete. Refresh page.": [Refresh]

I expect to be able to run step 3, but the dialog service class has no such method. Without that method, calling another this.dialogService.open will open the original modal from step 1.

Hi,

In the file 'ai-dialog-footer.js' line 16, I think that 'DialogFooter' should be renamed 'AiDialogFooter'.

export class AiDialogFooter {
  ...
  close(buttonValue) {
    if (DialogFooter.isCancelButton(buttonValue)) {
      this.controller.cancel(buttonValue);
    } else {
      this.controller.ok(buttonValue);
    }
  }
  ...
  static isCancelButton(value) {
    return value === 'Cancel';
  }
}

Thank you for this awesome library.

I was reading some Aurelia source code and I really couldn't help but notice those terrible pyramids of Promise. Look for instance at dialog-controller.js for a short file where the style of coding is obvious.

One (smaller) benefit of the Promise API is that we can flatten our code compared to callbacks and put all the .then() on the same level:

return p1
  .then((result1) => {
    return p2;
  })
  .then((result2) => {
    return p3;
  })
  .then(() => { /* etc */ });

I understand that returning the first .then() rather than the nested ones has a subtly different semantic and behavior, but I can't find a reason for that in the code. Actually, it seems to me that it makes more sense to return the last promise in the chain and not the first one. EDIT: actually I think that given how the returns are nested the end result is exactly the same, but the code is less readable and less performant.

Other example:
https://github.com/aurelia/dialog/blob/master/src/dialog-service.js#L44
Also note that the return on this line (L44) is useless.

I'm having trouble setting up the aurelia-dialog plugin (0.2.0) with my test Aurelia app.

Unfortunately, the README.MD file that details how to accomplish this has some serious holes. First, it doesn't mention having to inject the aureliaDialog into your class, so I tried this first:

@inject(HttpClient, DialogService)
export class MyClass{
  constructor(http, dialogService) {
    this.http = http;
    this.dialogService = dialogService;
  }
  ...
}

I tried to invoke the dialog box using:

this.dialogService.open({ viewModel: Prompt, model: 'Good or Bad?' })

The above results in the following errors:

Unhandled promise rejection ReferenceError: info is not defined
    at Container.invoke (http://127.0.0.1:9000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:401:30)
    at Array.<anonymous> (http://127.0.0.1:9000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:272:44)
    at Container.get (http://127.0.0.1:9000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:329:24)
    at http://127.0.0.1:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3685:75
    at run (http://127.0.0.1:9000/jspm_packages/npm/[email protected]/modules/es6.promise.js:91:43)
    at http://127.0.0.1:9000/jspm_packages/npm/[email protected]/modules/es6.promise.js:105:11
    at module.exports (http://127.0.0.1:9000/jspm_packages/npm/[email protected]/modules/$.invoke.js:6:25)
    at queue.(anonymous function) (http://127.0.0.1:9000/jspm_packages/npm/[email protected]/modules/$.task.js:40:9)
    at Number.run (http://127.0.0.1:9000/jspm_packages/npm/[email protected]/modules/$.task.js:27:7)
    at listner (http://127.0.0.1:9000/jspm_packages/npm/[email protected]/modules/$.task.js:31:9) Unhandled promise rejection ReferenceError: info is not defined(…)(anonymous function) @ es6.promise.js:139module.exports @ $.invoke.js:6queue.(anonymous function) @ $.task.js:40run @ $.task.js:27listner @ $.task.js:31

Next, I tried to add the configuration of the plugin to my main.js file:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-animator-css')
    .plugin('aurelia-dialog'); // <----- this is what I added

  aurelia.start().then(a => a.setRoot());
}

Now my app doesn't start at all and produces the following error while trying (and failing) to start:

DEBUG [aurelia] Configured plugin aurelia-dialog. aurelia-logging-console.js:38 
DEBUG [templating] importing resources for undefined [] es6.promise.js:139 
  Unhandled promise rejection Error: Cannot read property 'querySelectorAll' of undefined(…)
  (anonymous function) @ es6.promise.js:139module.exports @ $.invoke.js:6queue.
  (anonymous function) @ $.task.js:40run @ $.task.js:27listner @ $.task.js:31

I am now at a loss of what to try next. Thanks for any insight you can offer with this issue.

I'm also hopeful that the maintainer of the aurelia-dialog plugin revises the docs to make the setup process less painful.

Thanks,
Greg

Bootstrap modal is setting .modal-open class on the body element to set overflow: hidden. Can you add this behaviour so that scrolling will not scroll page under dialog?

If you open more than one dialog, then closing just one of them will remove the ai-dialog-open css class from body.

The class should not be removed, if there's still a visible dialog.

I'm having trouble using @inject(Element) to access the DOM inside my dialog. Perhaps this is because the view-model is created dynamically, outside the main framework? I need access to the <input> field inside the dialog, and the only way to get it seems to be with "old-fashioned" DOM access, document.getElementById().

Thoughts? Am I doing something wrong here?

@inject(Element)
export class MyDialog {
    constructor(element) {
        this.root = element;    // returns null
    }
}

<template>
    <dialog>
        <dialog-header>...</dialog-header>
        <dialog-body>
                <input ...>
        </dialog-body>
        <dialog-footer>...</dialog-footer>
    </dialog>
</template>

If your dialog contains any child element which transition at the same time of the dialog closing, the transitionend event of this child element will close prematurely the dialog. The dialog is listening to transitionend event on modalContainer element. This event bubble, so its fired when any of its children ends its transition. The closing event listener should check if target is really modalContainer.

A use case should be a dialog with a save button which has its own transition of 0.2sec and which close the dialog on click. The dialog has a transition of 1sec. You'll see that the dialog will disappears at 0.2sec before finishing its own transition.

• Downloaded the skeleton-navigation-0.18.1 source
• Ran the following commands
  npm install
  jspm install -y
  gulp watch

The Skeleton app was working fine

• Modified the welcome.js as follows:

import {inject} from 'aurelia-framework';
import {DialogService, Prompt} from 'aurelia-dialog';

@Inject(DialogService)
export class Welcome{
// ...
constructor(dialogService){
this.dialogService = dialogService;
}
// ...
submit(){
this.dialogService.open({ viewModel: Prompt, model: 'Good or Bad?'}).then(() => {
console.log('good');
}).catch(() => {
console.log('bad');
});
}

// ...
// END OF FILE

• Installed the added dependecy
  jspm install aurelia-dialog
• When I click the submit button I get the following error in the console:
  Unhandled promise rejection Error: Error instantiating configure. Check the inner error for details.(…)

Regards,
Petter

The following code is what I am using to filter an array, which is what is creating the "Uncaught TypeError: Cannot read property 'length' of undefined" error.

<div repeat.for="label of labels"></div>

set search(value){
    this.search = value;
     if (value === '' || value.length != 4){
        this.labels = this.allLabels;
      } else {
        var labels = this.allLabels.filter(x =>
                (x.item_year != null && x.item_year == value));
        this.labels = labels;
      }
  }

Full Error :

Uncaught TypeError: Cannot read property 'length' of undefined
removeAt @ aurelia-templating.js:1041
_contentSelectorRemoveAll @ aurelia-templating.js:1400
processItems @ repeat.js:133
itemsChanged @ repeat.js:122
BindableProperty.createObserver.self
Subscriber @ aurelia-templating.js:2937
call @ aurelia-templating.js:2809
flushMicroTaskQueue @ aurelia-task-queue.js:110
(anonymous function) @ aurelia-task-queue.js:60

Hello,

I'm trying to use aurelia-dialog plugin, and if I try the example from the documentation I receive the following error.
I've got the latest aurelia version from gitbub and the error still occurs.

Unhandled promise rejection Error: Error instantiating configure. Check the inner error for details.
You can check the error at this address : http://notes-popescurazvan.c9.io/
Just hit the Submit button and will see the error in console.

Thanks

inner error: TypeError: Cannot read property 'globalizeResources' of undefined
at new configure (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/dialog@master/index.js:13:12)
at Object.n.construct (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1980:21)
at ClassActivator.invoke (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:186:22)
at Container.invoke (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:399:31)
at Array. (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:272:44)
at Container.get (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:329:24)
at http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3264:75
at f (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13

at b.exports (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)

inner error: TypeError: Cannot read property 'globalizeResources' of undefined
at new configure (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/dialog@master/index.js:13:12)
at Object.n.construct (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1980:21)
at ClassActivator.invoke (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:186:22)
at Container.invoke (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:399:31)
at Array. (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:272:44)
at Container.get (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:329:24)
at http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3264:75
at f (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13
at b.exports (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)
at Object.AggregateError (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-logging.js:24:15)
at Container.invoke (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:409:31)
at Array. (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:272:44)
at Container.get (http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:329:24)
at http://notes-popescurazvan.c9.io/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3264:75
at f (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13
at b.exports (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)
at b.(anonymous function) (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1625:11)
at Number.f (http://notes-popescurazvan.c9.io/jspm_packages/npm/[email protected]/client/shim.min.js:1596:24)

(moved from aurelia/framework#142)

1. .autofocus / autofocus:
2. preventing users from tabbing off modals onto the underlying page
3. Ensuring the focus is restored to the previously focused element when the modal is closed.
4. Nested modals: Are all the scenarios above handled when multiple modals are opened?

There is no background css style for ai-dialog, which causes the background of the dialog to be transparent.

It would be kind of cool to pass in a callback to configure some global stuff in the renderer (or anything for that matter).. something like:

 aurelia.use('aurelia-dialog', config => {
   config.renderer.defaultSettings.lock = true;
 });

or something like that, so i don't have to put configuration in each place where I use the controller.

I can whip up an example if you guys would like?

Let me know what you think

I believe there is a bug in the dialog plugin where @bindable answer does not trigger answerChanged() when directly in the dialog. @bindables work fine for custom elements inside the modal though

I have reproduced this with the latest skeleton here. If you remove this line you even get an error when you open the dialog:

Unhandled promise rejection TypeError: Cannot read property 'getValue' of undefined
    at Prompt.descriptor.get [as answer] (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2933:49)
    at AccessScope.evaluate (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:1145:21)
    at Binding.bind (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-binding.js:4305:36)
    at View.bind (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:833:21)
    at View.bind (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:848:21)
    at View.bind (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:848:21)
    at Controller.bind (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2747:19)
    at Controller.automate (http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2701:12)
    at http://192.168.178.23:9001/jspm_packages/github/aurelia/[email protected]/dialog-service.js:63:28
    at h (http://192.168.178.23:9001/jspm_packages/npm/[email protected]/client/shim.min.js:1773:66)

I would expect to also see prompt: answer changed

This is to allow extending the template much easier.

I am trying to create a reusable dialog for users to confirm whether they want to do something or not

to do this I am creating a custom element, but how do I know when the confirm button on my custom element is clicked?

To solve this problem I am hoping to use this repo but I am getting this error when loading the default example

ex = Error: Loaders must implement loadModule(id). at Loader.loadModule

Stack:

Unhandled promise rejection Error: Out of stack space
script block (123) (139,13)
   "Unhandled promise rejection"
   {
      [functions]: ,
      __proto__: { },
      description: "Out of stack space",
      message: "Out of stack space",
      name: "Error",
      number: -2146828260,
      stack: "Error: Out of stack space
   at compileNode (Unknown script code:1942:7)
   at compile (Unknown script code:1923:7)
   at compileElement (Unknown script code:2109:9)
   at compileNode (Unknown script code:1944:11)
   at compile (Unknown script code:1923:7)
   at compileElement (Unknown script code:2109:9)
   at compileNode (Unknown script code:1944:11)
   at compile (Unknown script code:1923:7)
   at compileElement (Unknown script code:2109:9)
   at compileNode (Unknown script code:1944:11)"
   }

Changing from:

<template>
  <content></content>

  <template if.bind="buttons.length > 0">
    <button type="button" class="btn btn-default" repeat.for="button of buttons" click.trigger="close(button)">${button}</button>
  </template>
</template>

to

<template>
  <content></content>

  <div if.bind="buttons.length > 0">
    <button type="button" class="btn btn-default" repeat.for="button of buttons" click.trigger="close(button)">${button}</button>
  </div>
</template>

Can I create a pull request? I haven't tested the issue on the previous versions of IE.

I might be doing something completely wrong, but I'm having issues with using aurelia-dialog multiple times throughout my application.

Behavior

What's happening is:

1. I go to page foo, trigger opening a modal: works fine
2. I go to page bar, trigger opening a different modal: It fails with an error (described below)
3. I go back to page foo, trigger opening the modal again, and I get the content of page bar in stead.
4. This behavior now stays the same. The wrong content on page foo, and an error on page bar.

Technically

I get the following error in the console:

Unhandled promise rejection Error: No Aurelia APIs are defined for the referenced element.

The code I'm using is simply:

overview.js:

this.dialogService.open({viewModel: Create}).then(response => {
  if (!response.wasCancelled) {
    this.companies.push(response.output);
  }
});

create-modal.js:

import CompanyEntity from 'entity/company';
import {inject} from 'aurelia-framework';
import {Notification}  from 'service/notification';
import {Router} from 'aurelia-router';
import {DialogController} from 'aurelia-dialog';

@inject(CompanyEntity, Notification, Router, DialogController)
export class Create {

  requestInFlight = false;

  constructor (CompanyEntity, Notification, Router, DialogController) {
    this.notification                             = Notification;
    this.entity                                   = CompanyEntity;
    this.router                                   = Router;
    this.controller                               = DialogController;
    this.controller.settings.lock                 = false;
    this.controller.settings.centerHorizontalOnly = true;
  }

  create () {
    this.requestInFlight = true;

    this.entity.save()
      .then(result => {
        this.requestInFlight = false;
        this.notification.success('Location created successfully');
        this.controller.ok(result);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

I'm using the default controller, and as far as I can tell I'm not doing anything weird.

The stylesheet is currently hardcoded into the plugin. Would like to see this as an option so the look can be more customizable.

A quick guess is you are using JavaScript to calculate the margins for the dialog container since they are being added as an inline style?

• the position of the dialog is not being re-centered when you resize the browser
• using JavaScript to get the screen dimensions is gonna cause a world of hurt on mobile browsers (often report incorrect screen sizes and screw up on orientation changes)
• using inline styles means you can't override the positioning with custom CSS

There are pure CSS approaches to centering a div element that would work better than a fixed calculated margin.

You might want to consider vertical alignment with transform:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Its also really easy if you are using flexbox with something like this:

.ai-dialog-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-dialog {
  display: flex;
  flex-grow: 0;
  height: 300px;
  width: 300px;
}

I can work on this if you would prefer a pull-request with a solution. Let me know!

Using 0.4.4

For example I have a dialog open with a link inside it, if the link is clicked and the page navigates, the dialog remains open, blocking the page.

Not sure if this is even a bug or the intended behaviour.

Hello,

I'm trying to pass arguments into my modal, so I can make an update modal. It looks like that's not possible right now. Am I missing something, or is this module missing something?

This line: import {DialogService, Prompt} from 'aurelia/modal';

Shouldbe: import {DialogService, Prompt} from 'aurelia-dialog';

The dialog does not reposition itself when the screen is resized.

I'm trying the simple Prompt example, but response contains the value typed in and no wasCancelled or output properties are found!

I don't know if this is the correct fix, but by adding "background: white" to the dialog css class, it resolved the issue.

This fix is not needed for Chrome.

Can you add imports to the index.js so that bundler will bundle all files? Currenlty only index.js is bundled and the rest is loaded on demand.

If i include this line in main.js
.plugin('aurelia-dialog')

my app won't load and i get the exception

Unhandled promise rejection TypeError: Cannot read property 'endsWith' of undefined
at Function.convertModuleIdToViewUrl (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:408:24)
at new ConventionalViewStrategy (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:399:47)
at Function.getDefault (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:344:20)
at HtmlBehaviorResource.load (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3174:74)
at ResourceDescription.load (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3319:25)
at ResourceModule.load (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3259:33)
at http://localhost:9000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:2407:43
at f (http://localhost:9000/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://localhost:9000/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13
at b.exports (http://localhost:9000/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)

Not a big issue, but a little bit of code for setDefaultButton would help reduce a few lines of code. Can it be included?

Similar questions with jquery ui dialog: http://stackoverflow.com/questions/2522125/jquery-ui-dialog-make-a-button-in-the-dialog-the-default-action-enter-key

The README uses this in its example:

import {DialogService, Prompt} from 'aurelia-dialog';

This does not work: Prompt is not exported.

DialogController.cancel() is not triggering this._reject, so that catch part of the dialogService.open() is never executed.