This is an Aurelia plugin in order for developers to create star-rate elements in their apps.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
build
dist
sample
src
.editorconfig
.gitignore
.npmignore
CONTRIBUTING.md
README.md
config.js
gulpfile.js
package.json
tsconfig.json
tslint.json
typings.json
yarn.lock

README.md

aurelia-star-rate

A rating plugin for Aurelia developers, inspired by Css Tricks.

  • Versions:

  • Breaking changes

    • The custom element name has changed from star-rate to au-star-rate 😩

1. Installation

Run the following command :

npm install aurelia-star-rate --save

or if you are using yarn

yarn add aurelia-star-rate
  • Webpack

    Add aurelia-star-rate in your webpack.config file in which you have AureliaPlugin

     entry: {
           'app': ['aurelia-bootstrapper', 'aurelia-star-rate']
       }

    then add the plugin in your main.ts or boot.ts file (can be also js files).

    .plugin(PLATFORM.moduleName("aurelia-star-rate")) 
  • Aurelia CLI

    Update the aurelia.json with the following :

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

    then add the plugin in your main.ts or boot.ts file (can be also js files).

    .plugin("aurelia-star-rate") 
  • JSPM

    Run the jspm install command :

    jspm instal npm:aurelia-star-rate@^1.0.0
    

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

    .plugin("aurelia-star-rate")

2. Usage

HTML

  • Simple

    Using the control in your .html files is as simple as the following simple 😉

     <au-star-rate color="darkgoldenrod" read-only.bind="false" rate.bind="viewmodel.rate" max-rate.bind="5"></au-star-rate>
     
  • Integrating with other frameworks

    This plugin can be used side by side with other frameworks such as font-awesome and bootstrap, the plugin provides three properties which can be assigned by your own css classes.

      full-star
      empty-star
      half-star
    

    to use with font-awesome for instance:

     <au-star-rate full-star="fa fa-star" empty-star="fa fa-star-o" half-star="fa fa-star-half-o" rate.bind="viewmodel.rate" max-rate.bind="5"></au-star-rate>

    bear in mind that this plugin accepts floting point values if and only if you provide a value for half-star css class property, otherwise it uses fixed point values. Similarly you can use bootstrap glyphicons.

  • Right to Left support

    You can bind the rtl property to a boolean value:

     <au-star-rate rtl.bind="true" rate.bind="viewmodel.rate" max-rate.bind="5"></au-star-rate>

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-star-rate';

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}`));
  }

}
  1. Element based : You can handle seperate event callbacks for individual star-rate elements in your .html file use clicked.call as follows
 <au-star-rate clicked.call="star_clicked(newRate,oldRate)" max-rate.bind="8" rate.one-way="6" read-only.bind="false" color="darkgoldenrod"></au-star-rate>

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:
npm install -g gulp
  1. From the project folder (root), execute the following command:
npm install && jspm install
  1. Install the typings from the root
typings install
  1. To build the plugin, you can now run:
gulp build
  • You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES2015.
  1. to run the sample do the followings :
  • run ```npm install && jsmp install`` in the sample older
  • run gulp watch
  1. See gulpfile.js for other tasks related to generating the docs and linting.