{"id":16532248,"url":"https://github.com/shahabganji/aurelia-star-rate","last_synced_at":"2025-07-18T18:35:17.137Z","repository":{"id":57186926,"uuid":"80003957","full_name":"shahabganji/aurelia-star-rate","owner":"shahabganji","description":"This is an Aurelia plugin in order for developers to create star-rate elements in their apps.","archived":false,"fork":false,"pushed_at":"2017-09-25T15:07:03.000Z","size":133,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T08:54:26.087Z","etag":null,"topics":["aurelia","aurelia-star-rate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shahabganji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-25T10:22:45.000Z","updated_at":"2022-12-31T18:13:43.000Z","dependencies_parsed_at":"2022-08-28T13:01:24.738Z","dependency_job_id":null,"html_url":"https://github.com/shahabganji/aurelia-star-rate","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/shahabganji/aurelia-star-rate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahabganji%2Faurelia-star-rate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahabganji%2Faurelia-star-rate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahabganji%2Faurelia-star-rate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahabganji%2Faurelia-star-rate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shahabganji","download_url":"https://codeload.github.com/shahabganji/aurelia-star-rate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahabganji%2Faurelia-star-rate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265060878,"owners_count":23705242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aurelia","aurelia-star-rate"],"created_at":"2024-10-11T18:12:05.433Z","updated_at":"2025-07-18T18:35:17.116Z","avatar_url":"https://github.com/shahabganji.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# *aurelia-star-rate*\n\n  A rating plugin for **[Aurelia](http://aurelia.io/)** developers, inspired by [Css Tricks](https://css-tricks.com/star-ratings/). \n\n* **Versions:**\n\t* ```2.0.0``` : no dependency\n\t* ```1.1.0``` : [bootstrap](https://getbootstrap.com/docs/3.3/getting-started/)\n\t\n* **Breaking changes**\n \n\t* The custom element name has changed from ```star-rate``` to ```au-star-rate``` :weary:\n  \n\n# 1. Installation\n\n Run the following command :\n\n  ```\n  npm install aurelia-star-rate --save\n  ```\n  or if you are using *[yarn](https://yarnpkg.com/)*\n\n  ```\n  yarn add aurelia-star-rate\n  ```\n\n* ##\tWebpack\n\n\tAdd ```aurelia-star-rate``` in your ```webpack.config``` file in which you have ```AureliaPlugin``` \n\t\n\t```javascript\n    entry: {\n          'app': ['aurelia-bootstrapper', 'aurelia-star-rate']\n      }\n\t``` \n\n\tthen add the plugin in your ```main.ts``` or ```boot.ts``` file (can be also ```js``` files). \n\n  ```javascript\n  .plugin(PLATFORM.moduleName(\"aurelia-star-rate\")) \n  ```\n\n\n* ##  Aurelia CLI\n\n \n  Update the ```aurelia.json``` with the following : \n\n  ```json\n  {\n      \"name\": \"aurelia-star-rate\",\n      \"path\": \"../node_modules/aurelia-star-rate/dist/amd\",\n      \"main\": \"aurelia-star-rate\",\n      \"resources\": [\n        \"elements/star-rate.html\"\n      ]\n   }\n  ``` \n\n  then add the plugin in your ```main.ts``` or ```boot.ts``` file (can be also ```js``` files). \n\n  ```javascript\n  .plugin(\"aurelia-star-rate\") \n  ```\n\n* ## JSPM  \n\n  Run the jspm install command : \n\n  ```\n  jspm instal npm:aurelia-star-rate@^1.0.0\n  ```\n\n  then update your ```main.ts``` or ```main.js``` file. \n\n    ``` .plugin(\"aurelia-star-rate\") ```\n\n\n# 2. Usage\n\n## HTML\n* **Simple**\n\n\tUsing the control in your .html files is as simple as the following simple :wink:\n\n\t```html\n\t\u003cau-star-rate color=\"darkgoldenrod\" read-only.bind=\"false\" rate.bind=\"viewmodel.rate\" max-rate.bind=\"5\"\u003e\u003c/au-star-rate\u003e\n\t\n\t```\n* **Integrating with other frameworks**\n\n\t\n\tThis plugin can be used side by side with other frameworks such as [font-awesome](http://fontawesome.io/) and [bootstrap](http://getbootstrap.com/), the plugin provides three properties which can be assigned by your own css classes.\n\t\n\t\tfull-star\n\t\tempty-star\n\t\thalf-star\n\t\t\n\tto use with [font-awesome](http://fontawesome.io/) for instance: \n\t\n\t```html\n\t\u003cau-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\"\u003e\u003c/au-star-rate\u003e\n\t```\n\t\n\tbear 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.\n\n* **Right to Left support**\n\n\tYou can bind the **```rtl```** property to a **boolean** value:\n\t\n\t```html\n\t\u003cau-star-rate rtl.bind=\"true\" rate.bind=\"viewmodel.rate\" max-rate.bind=\"5\"\u003e\u003c/au-star-rate\u003e\n\t```\n\n\n\n## Events\n\nYou can handle the callback for star rate clicked or changed in two forms : \n\n1. **Globally** :\n  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 \n\n  ```javascript\n  import { EventAggregator } from 'aurelia-event-aggregator';\n  import { StarRateClicked } from 'aurelia-star-rate';\n\n  ```\n  and then subscribe fo the message : \n\n  ```javascript\n  @autoinject\n  export class Welcome {\n    \n    constructor(ea: EventAggregator) {\n      ea.subscribe(StarRateClicked, x =\u003e console.info(`E.Aggregator : Rate changed from  ${x.oldRate} to ${x.newRate}`));\n    }\n\n  }\n\n  ```\n\n\n2. **Element based** : You can handle seperate event callbacks for individual star-rate elements \n in your *```.html```* file use **```clicked.call```** as follows\n\n```html\n \u003cau-star-rate clicked.call=\"star_clicked(newRate,oldRate)\" max-rate.bind=\"8\" rate.one-way=\"6\" read-only.bind=\"false\" color=\"darkgoldenrod\"\u003e\u003c/au-star-rate\u003e\n```\nand then in your ```.js``` or ```.ts``` file add your event handler : \n\n```javascript\nprivate star_clicked(newRate, oldRate) {\n    console.info(`clicked: Rate changed from  ${oldRate} to ${newRate}`);\n}\n```\n\n# 3. Building The Code\n\nTo build the code, follow these steps.\n\n1. Ensure that [NodeJS](http://nodejs.org/) is installed. This provides the platform on which the build tooling runs.\n2. Ensure that [Gulp](http://gulpjs.com/) is installed. If you need to install it, use the following command:\n\n  ```shell\n  npm install -g gulp\n  ```\n3. From the project folder (root), execute the following command:\n  ```shell\n  npm install \u0026\u0026 jspm install\n  ```\n\n4. Install the typings from the root\n  ```\n  typings install\n  ```\n5. To build the plugin, you can now run:\n\n  ```shell\n  gulp build\n  ```\n  * You will find the compiled code in the `dist` folder, available in three module formats: AMD, CommonJS and ES2015.\n\n6. to run the sample do the followings : \n\n  * run ```npm install \u0026\u0026 jsmp install`` in the sample older\n  * run ```gulp watch```\n\n\n7. See `gulpfile.js` for other tasks related to generating the docs and linting.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahabganji%2Faurelia-star-rate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahabganji%2Faurelia-star-rate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahabganji%2Faurelia-star-rate/lists"}