cristhian-aurelia-dialog v0.4.1
aurelia-dialog
This library is part of the Aurelia platform and contains a dialog plugin.
To keep up to date on Aurelia, please visit and subscribe to the official blog. If you have questions, we invite you to join us on Gitter. If you would like to have deeper insight into our development process, please install the ZenHub Chrome Extension and visit any of our repository's boards. You can get an overview of all Aurelia work by visiting the framework board.
Dependencies
This library has NO external dependencies.
Used By
This library is a plugin and is not used by the core framework.
Platform Support
This library can be used in the browser as well as on the server.
Building The Code
To build the code, follow these steps.
- Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
From the project folder, execute the following command:
npm install
Ensure that Gulp is installed. If you need to install it, use the following command:
npm install -g gulp
To build the code, you can now run:
gulp build
You will find the compiled code in the
dist
folder, available in three module formats: AMD, CommonJS and ES6.See
gulpfile.js
for other tasks related to generating the docs and linting.
Running The Tests
To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps:
Ensure that the Karma CLI is installed. If you need to install it, use the following command:
npm install -g karma-cli
Ensure that jspm is installed. If you need to install it, use the following commnand:
npm install -g jspm
Download the SystemJS module loader:
jspm dl-loader
Ensure that you have Chrome installed. Karma runs the test suite in Chrome.
You can now run the tests with this command:
karma start
How to install this plugin?
In your project install the plugin via
jspm
with following commandjspm install aurelia-dialog
Make sure you use manual bootstrapping. In order to do so open your
index.html
and locate the element with the attribute aurelia-app. Change it to look like this:<body aurelia-app="main"> ...
Create (if you haven't already) a file
main.js
in yoursrc
folder with following content:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-dialog');
aurelia.start().then(a => a.setRoot());
}
Using the plugin
There are a few ways you can take advantage of the Aurelia dialog.
You can use the dialog service to open a prompt -
import {DialogService} from 'aurelia-dialog'; import {Prompt} from './prompt'; export class Welcome { static inject = [DialogService]; constructor(dialogService) { this.dialogService = dialogService; } submit(){ this.dialogService.open({ viewModel: Prompt, model: 'Good or Bad?'}).then(response => { if (!response.wasCancelled) { console.log('good'); } else { console.log('bad'); } console.log(response.output); }); } }
This will open a prompt and return a promise that
resolve
s when closed. If the user clicks out, clicks cancel, or clicks the 'x' in the top right it will stillresolve
the promise but will have a property on the responsewasCancelled
to allow the developer to handle cancelled dialogs.There is also an
output
property that gets returned with the outcome of the user action if one was taken.You can create your own view / view-model and use the dialog service to call it from your app's view-model -
import {EditPerson} from './edit-person'; import {DialogService} from 'aurelia-dialog'; export class Welcome { static inject = [DialogService]; constructor(dialogService) { this.dialogService = dialogService; } person = { firstName: 'Wade', middleName: 'Owen', lastName: 'Watts' }; submit(){ this.dialogService.open({ viewModel: EditPerson, model: this.person}).then(response => { if (!response.wasCancelled) { console.log('good - ', response.output); } else { console.log('bad'); } console.log(response.output); }); } }
This will open a dialog and control it the same way as the prompt. The important thing to keep in mind is you need to follow the same method of utilizing a
DialogController
in yourEditPerson
view-model as well as accepting the model in your activate method -import {DialogController} from 'aurelia-dialog'; export class EditPerson { static inject = [DialogController]; person = { firstName: '' }; constructor(controller){ this.controller = controller; } activate(person){ this.person = person; } }
and the corresponding view -
<template> <ai-dialog> <ai-dialog-body> <h2>Edit first name</h2> <input value.bind="person.firstName" /> </ai-dialog-body> <ai-dialog-footer> <button click.trigger="controller.cancel()">Cancel</button> <button click.trigger="controller.ok(person)">Ok</button> </ai-dialog-footer> </ai-dialog> </template>
###Settings The settings available for the dialog are set on the dialog controller on a per-dialog basis.
lock
makes the dialog modal, and removes the close button from the top-right hand corner. (defaults to true)centerHorizontalOnly
means that the dialog will be centered horizontally, and the vertical alignment is left up to you. (defaults to false)
export class Prompt {
static inject = [DialogController];
constructor(controller){
this.controller = controller;
this.answer = null;
controller.settings.lock = false;
controller.settings.centerHorizontalOnly = true;
}
}
7 years ago