aurelia / dialog Goto Github PK
View Code? Open in Web Editor NEWA dialog plugin for Aurelia.
License: MIT License
A dialog plugin for Aurelia.
License: MIT License
The Skeleton app was working fine
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
Regards,
Petter
Shouldn't the Promise reject when the DialogController cancel()
s?
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.
Currently not working with newest port of Aurelia
There is no background css style for ai-dialog, which causes the background of the dialog to be transparent.
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.
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)
The dialog does not reposition itself when the screen is resized.
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
The README uses this in its example:
import {DialogService, Prompt} from 'aurelia-dialog';
This does not work: Prompt
is not exported.
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?
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
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
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?
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>
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.
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 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.
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)
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.
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.
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 stylesheet is currently hardcoded into the plugin. Would like to see this as an option so the look can be more customizable.
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.
I might be doing something completely wrong, but I'm having issues with using aurelia-dialog multiple times throughout my application.
What's happening is:
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.
I'm trying the simple Prompt example, but response contains the value typed in and no wasCancelled or output properties are found!
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?
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?
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!
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
DialogController.cancel()
is not triggering this._reject
, so that catch
part of the dialogService.open()
is never executed.
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?
This is to allow extending the template much easier.
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>
It would be nice to have Prompt
exported to import it for the most common use-cases.
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.
There is currently no type definition file.
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.
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
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)
I have this use case:
this.dialogService.open
: "Do the update?": [Yes] [No]this.dialogService.open
: "Progress of the update.": (no buttons)this.dialogService.close
.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.
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.
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.
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>
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.
This line: import {DialogService, Prompt} from 'aurelia/modal';
Shouldbe: import {DialogService, Prompt} from 'aurelia-dialog';
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 ..
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..
(moved from aurelia/framework#142)
.autofocus
/ autofocus
:A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.