Merge pull request MurhafSousli#2 from MurhafSousli/dev

First release v1.0.0

CHANGELOG.md

@@ -1,39 +1,5 @@
 # Changelog
 
-## 2.1.0
+## 1.0.0
 
- - refactor(DisqusComponent) remove unnecessary checks for input changes
- - refactor(DisqusService) remove unnecessary getters for `window`
-
- **Breaking changes**
-
- - `shortname` input is removed, set your disqus shortname here `DisqusModule.forRoot('disqus_shortname')`
- - `categoryId` input is renamed to `category`
-
-## 2.0.0
-
- - Change package name to `ngx-disqus`
-
-## 1.1.1
-
- - Cleanup
- - Update dependencies
-
-## 1.1.0
-
- - (fix) Passing identifiers, closes [#3](https://github.com/MurhafSousli/ng2-disqus/issues/3)
- - (feat) @Output() `comment` callback (output)
- - **[removeOnDestroy]** input is deprecated, it will remove disqus script on destroy by default.
-
-
-## 1.0.4
- - Improve component code
- - Add URL validator
- - Add tests for window service
-
-## 1.0.3
- - AOT support
- - Adds window service
-
-## 1.0.2
- - initial release
+ - First release

README.md

@@ -1,54 +1,215 @@
 <p align="center">
-  <img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-rating/master/assets/logo.svg">
-  <h1 align="center">Angular Rating</h1>
+  <img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-bar-rating/master/assets/logo.svg">
+  <h1 align="center">Angular Bar Rating</h1>
+  <p align="center">Minimal, light-weight Angular ratings.</p>
 </p>
 
-[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-rating/)
-[![npm](https://img.shields.io/npm/v/ngx-rating.svg)](https://github.com/MurhafSousli/ngx-rating)
-[![Build Status](https://travis-ci.org/MurhafSousli/ngx-rating.svg)](https://travis-ci.org/MurhafSousli/ngx-rating)
+  ___
+
+[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-bar-rating)
+[![npm](https://img.shields.io/npm/v/ngx-bar-rating.svg)](https://github.com/MurhafSousli/ngx-bar-rating)
+[![Build Status](https://travis-ci.org/MurhafSousli/ngx-bar-rating.svg)](https://travis-ci.org/MurhafSousli/ngx-bar-rating)
 [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)
 
+## Table of Contents 
+
+ - [Live Demo](https://MurhafSousli.github.io/ngx-bar-rating)
+ - [Installation](#installation)
+ - [Usage](#usage) 
+ - [Options](#options)
+ - [Themes](#themes)
+ - [Custom Style](#styling)  
+ - [Issues](#issues) 
+ - [Author](#author)
+
+<a name="installation"/>
+
 ## Installation
 
 Install it with npm
 
-`npm install --save ngx-rating`
+`npm install --save ngx-bar-rating`
 
 ### SystemJS
 
 If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
 
-In your systemjs config file, map needs to tell the System loader where to look for ngx-rating:
+In your systemjs config file, map needs to tell the System loader where to look for ngx-bar-rating:
 
 ```
 map: {
-  'ngx-rating': 'node_modules/ngx-rating/bundles/ngx-rating.umd.js',
+  'ngx-bar-rating': 'node_modules/ngx-bar-rating/bundles/ngx-bar-rating.umd.js',
 }
 ```
+Here is a working [plunkr](https://plnkr.co/edit/ZLSw4BV3ejRYkuWWAmoF?p=preview)
+
+<a name="usage"/>
 
 ## Basic usage:
 
-Import `RatingModule` in the root module
+Import `BarRatingModule` in the root module
 
 ```ts
-import { RatingModule } from "ngx-rating";
+import { BarRatingModule } from "ngx-bar-rating";
+
 @NgModule({
   imports: [
     // ...
-    RatingModule
+    BarRatingModule
   ]
 })
 ```
 
-Add Rating component
+In your template
 
 ```html
-<Rating></Rating>
+<bar-rating [(rate)]="rate" [max]="5"></bar-rating>
+```
+
+<a name="options"/>
+
+## Rating options (inputs):
+
+ - **[rate]**: Current rating. Can be a decimal value like 3.14, default `undefined`
+
+ - **[max]**: Maximal rating that can be given using this widget.
+
+ - **[readOnly]**: A flag indicating if rating can be updated.
+
+ - **[theme]**: Theme class. default `default`, see available [themes](#themes).
+
+ - **[showText]**: Display rating title if set, otherwise display rate value, default `false`.
+
+ - **[titles]**: Titles array. current rate value the title displayed each index of the array represents the rate value, default `[]`.
+
+ - **[required]**: A flag indicating if rating is required for form validation., default `false`.
+
+ - **[disabled]**: A flag indicating if rating is disabled. works only with forms, default `false`.
+
+ - **(rateChange)**: An event fired when a user selects a new rating.
+
+   *Event's payload equals to the newly selected rating.*
+
+ - **(hover)**: An event fired when a user is hovering over a given rating.
+
+   *Event's payload equals to the rating being hovered over.*
+
+ - **(leave)**: An event fired when a user stops hovering over a given rating.
+
+   *Event's payload equals to the rating of the last item being hovered over.*
+
+
+#### Movie rating example
+
+```html
+<bar-rating [(rate)]="rate" [max]="4" [theme]="'movie'" [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"></bar-rating>
+```
+
+It can be used with angular forms and reactive forms, for example:
+
+```html
+<form #form="ngForm">
+  <bar-rating name="rating" [(ngModel)]="formRating" [max]="4" required disabled></bar-rating>
+</form>
+<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
+<pre>{{ formRating }}</pre>
+```
+
+<a name="themes"/>
+
+## Predefined themes
+
+Import rating theme using in the global style `style.css`
+
+ - pure css stars (default)
+```css
+@import '~ngx-bar-rating/themes/br-default-theme';
+```
+ - bootstrap stars
+```css
+@import '~ngx-bar-rating/themes/br-bootstrap-theme';
+```
+ - fontawesome stars
+```css
+@import '~ngx-bar-rating/themes/br-fontawesome-theme';
+```
+ - fontawesome-o stars
+```css
+@import '~ngx-bar-rating/themes/br-fontawesome-o-theme';
+```
+ - horizontal bars
+```css
+@import '~ngx-bar-rating/themes/br-horizontal-theme';
 ```
+ - vertical bars
+```css
+@import '~ngx-bar-rating/themes/br-vertical-theme';
+```
+ - custom svg stars
+```css
+@import '~ngx-bar-rating/themes/br-custom-stars-theme';
+```
+ - movie rating
+```css
+@import '~ngx-bar-rating/themes/br-movie-theme';
+```
+ - square rating
+```css
+@import '~ngx-bar-rating/themes/br-square-theme';
+```
+
+<a name="styling"/>
+
+## Custom Style
+
+You can extend or create your own theme using these classes
+
+```scss
+.br {
+
+  // rating wrapper
+
+  .br-units {
+
+    // units container
+  }
+
+  .br-unit {
+
+    // units (stars)
+
+    &.br-active{
+
+      // hovered units (stars)
+    } 
+    &.br-selected {
+
+      // selected units (stars)
+    }
+  }
+
+  &.br-readonly {
+
+    .br-active, .br-selected {
+
+      // selected or active in read
+    }
+  }
+
+  .br-text {
+
+    // Rate text
+  }
+}
+```
+You can also do the same for forms classes such as `untouched, touched, dirty, invalid, valid ...etc`
+
+*If you have a nice rating style you would like to share, propuse your theme and I will include it in the package.*
+
 
 ## Issues
 
-If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-rating/issues). I am excited to see what the community thinks of this project, and I would love your input!
+If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-bar-rating/issues). I am excited to see what the community thinks of this project, and I would love your input!
 
 ## Author
 

config/webpack.test.js

@@ -45,7 +45,6 @@ const getConfig = (hasCoverage, isTddMode) => {
                     loader: 'source-map-loader',
                     exclude: [
                         // these packages have problems with their sourcemaps
-                        helpers.root('node_modules/rxjs'),
                         helpers.root('node_modules/@angular')
                     ]
                 },

demo/.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "advanced-progress"
+    "name": "ngx-bar-rating-demo"
   },
   "apps": [
     {
@@ -17,7 +17,7 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "",
+      "prefix": "app",
       "styles": [
         "styles.scss"
       ],

demo/README.md

@@ -1,6 +1,6 @@
-# AdvancedProgress
+# NgxBarRating
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.1.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.3.
 
 ## Development server
 

demo/e2e/app.e2e-spec.ts

@@ -1,10 +1,10 @@
-import { AdvancedProgressPage } from './app.po';
+import { NgxBarRatingPage } from './app.po';
 
-describe('advanced-progress App', () => {
-  let page: AdvancedProgressPage;
+describe('ngx-bar-rating App', () => {
+  let page: NgxBarRatingPage;
 
   beforeEach(() => {
-    page = new AdvancedProgressPage();
+    page = new NgxBarRatingPage();
   });
 
   it('should display message saying app works', () => {

demo/e2e/app.po.ts

@@ -1,6 +1,6 @@
-import { browser, element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
 
-export class AdvancedProgressPage {
+export class NgxBarRatingPage {
   navigateTo() {
     return browser.get('/');
   }

demo/e2e/tsconfig.e2e.json

@@ -4,7 +4,7 @@
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
     "target": "es5",
-    "types":[
+    "types": [
       "jasmine",
       "node"
     ]