aurelia multi select

This is an Aurelia plugin in order for developers to create star-rate elements in their apps.

1. Installation

* ## Aurelia CLI

run the following command :

``
npm install aurelia-multi-select --save
`
or if you are using yarn

`
yarn add aurelia-multi-select
`

then update the `aurelia.json` with the following :

`
{
"name": "aurelia-multi-select",
"path": "../node_modules/aurelia-multi-select/dist/amd",
"main": "aurelia-multi-select",
"resources": [
"elements/multi-select.html"
]
}
`

no need to mention that you should have added jquery and bootstrap
in `aurelia.json` file

`
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
`

then add the plugin in your `main.ts` or `main.js` file.

` .plugin("aurelia-multi-select") `

* ## JSPM

Run the jspm install command :

`
jspm install aurelia-multiple-select=github:bondib/aurelia-multiple-select
`

then update your `main.ts` or `main.js` file.

` .plugin("aurelia-multi-select") `

2. Usage

Simple

Using the control in your .html files is so simple ;-)

`

`
keep in mind that once again you need the following line somwhere in your htmls :

`

`

Events

You can handle the callback for star rate clicked or changed in two forms :

1. Globally :
When any of the star-rate elemnts in your dom which are not read only change the rate a `StarRateClicked` message will be published which has `newRate` and `oldRate` as its data

`
import { EventAggregator } from 'aurelia-event-aggregator';
import { StarRateClicked } from 'aurelia-multi-select';

`
and then subscribe fo the message :

`
@autoinject
export class Welcome {

constructor(ea: EventAggregator) {
ea.subscribe(StarRateClicked, x => console.info(E.Aggregator : Rate changed from ${x.oldRate} to ${x.newRate}));
}

}

`


2. Element based : You can handle seperate event callbacks for individual star-rate elements
in your `.html` file use `clicked.call` as follows
`

`
and then in your `.js` or `.ts` file add your event handler :

`
private star_clicked(newRate, oldRate) {
console.info(clicked: Rate changed from ${oldRate} to ${newRate});
}
`

3. Building The Code

To build the code, follow these steps.

1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
2. Ensure that Gulp is installed. If you need to install it, use the following command:

`shell
npm install -g gulp
`
3. From the project folder (root), execute the following command:
`shell
npm install && jspm install
`

4. Install the typings from the root
`
typings install
`
5. To build the plugin, you can now run:

`shell
gulp build
`
* You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES2015.

6. to run the sample do the followings :

* run `npm install && jsmp install in the sample older
* run `gulp watch`


7. See gulpfile.js` for other tasks related to generating the docs and linting.