Repository: fraserxu/ionic-rating
Branch: master
Commit: 1f2a04c13959
Files: 9
Total size: 8.9 KB

Directory structure:
gitextract_83c56qvz/

├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── bower.json
├── ionic-rating.coffee
├── ionic-rating.css
├── ionic-rating.js
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2014 xvfeng

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: Makefile
================================================
build:
	node_modules/.bin/coffee -c ionic-rating.coffee

uglify:
	node_modules/.bin/uglifyjs ionic-rating.js > ionic-rating.min.js

clean:
	rm -rf dist

.PHONY: all clean

all: clean build uglify

================================================
FILE: README.md
================================================
ionic-rating
============

An angularjs directive that take care of visualising a star rating bar, build
for ionic.

![rating](https://cloud.githubusercontent.com/assets/1183541/3007107/3cee642c-de6c-11e3-8449-18b86ca130a7.png)

Also able to print half star (display only) :

![rating-half](https://cloud.githubusercontent.com/assets/7658059/12101509/67ee6d6c-b335-11e5-9ef6-0ceb92018fd2.png)

#### Why?

`angular-ui` has the same [rating](http://angular-ui.github.io/bootstrap/#/rating) directive,
but it is build on top of bootstrap. This repo just reuse most of the js code, but build for
the [ionic](http://ionicframework.com/) framework.

#### How to use?

Install with bower:

```
$ bower install ionic-rating
```

In your index.html

```HTML
<script src="lib/ionic-rating/ionic-rating.min.js"></script>
```

In you template:

```HTML
<rating ng-model="rating.rate" max="rating.max"></rating>
```

In you controller:

```JavaScript
// first inject it into your app
angular.module('youApp', ['ionic.rating'])

.controller('yourCtrl', function($scope) {

  // set the rate and max variables
  $scope.rating = {};
  $scope.rating.rate = 3;
  $scope.rating.max = 5;

});

```

For strict-di, you can use

```
.controller('RatingController', [ '$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig) ]
```

If you want to make it read only

> added readonly="readOnly" to rating directive, and $scope.readOnly = true; to the controller.

**Note:** You may also need to include the style file. But I suggest you just copy it to your
project.

#### Build

```
$ npm i
$ make all
```

#### License

MIT


================================================
FILE: bower.json
================================================
{
  "name": "ionic-rating",
  "main": [
    "ionic-rating.js",
    "ionic-rating.css"
  ],
  "version": "0.3.0",
  "homepage": "https://github.com/fraserxu/ionic-rating",
  "authors": [
    "fraserxu <xvfeng123@gmail.com>"
  ],
  "description": "Star rating bar for ionic",
  "keywords": [
    "ionic",
    "angularjs",
    "rating",
    "web"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}


================================================
FILE: ionic-rating.coffee
================================================
angular.module 'ionic.rating', []

.constant 'ratingConfig', {
    max: 5
    stateOn: null
    stateOff: null
}

.controller 'RatingController', ($scope, $attrs, ratingConfig) ->
    ngModelCtrl = { $setViewValue: angular.noop }

    this.init = (ngModelCtrl_) ->
        ngModelCtrl = ngModelCtrl_
        ngModelCtrl.$render = this.render

        this.stateOn = if angular.isDefined($attrs.stateOn)
        then $scope.$parent.$eval($attrs.stateOn)
        else ratingConfig.stateOn

        this.stateOff = if angular.isDefined($attrs.stateOff)
        then $scope.$parent.$eval($attrs.stateOff)
        else ratingConfig.stateOff

        max = if angular.isDefined($attrs.max) then $scope.$parent.$eval($attrs.max) else ratingConfig.max

        ratingStates = if angular.isDefined($attrs.ratingStates)
        then $scope.$parent.$eval($attrs.ratingStates)
        else new Array(max)

        $scope.range = this.buildTemplateObjects(ratingStates)

    this.buildTemplateObjects = (states) ->
        for i in states.length
            states[i] = angular.extend { index: 1 }, { stateOn: this.stateOn, stateOff: this.stateOff }, states[i]
        return states

    $scope.rate = (value) ->
        if not $scope.readonly and value >= 0 && value <= $scope.range.length
            ngModelCtrl.$setViewValue value
            ngModelCtrl.$render()

    $scope.reset = ->
        $scope.value = ngModelCtrl.$viewValue
        $scope.onLeave()

    $scope.enter = (value) ->
        if not $scope.readonly
            $scope.value = value
        $scope.onHover({value: value})

    $scope.onKeydown = (evt) ->
        if /(37|38|39|40)/.test evt.which
            evt.preventDefault()
            evt.stopPropagation()
            $scope.rate $scope.value + (if evt.which is 38 or evt.which is 39 then 1 : -1 )

    this.render = ->
        $scope.value = ngModelCtrl.$viewValue

    return this

.directive 'rating', ->
    return {
        restrict: 'EA'
        require: ['rating', 'ngModel']
        scope:
            readonly: '@'
            onHover: '&'
            onLeave: '&'
        controller: 'RatingController'
        template: '<ul class="rating" ng-mouseleave="reset()" ng-keydown="onKeydown($event)">' +
            '<li ng-repeat="r in range track by $index" ng-click="rate($index + 1)"><i class="icon" ng-class="$index < value && (r.stateOn || \'ion-ios-star\') || (r.stateOff || \'ion-ios-star-outline\')"></i></li>' +
            '</ul>'
        replace: true
        link: (scope, element, attrs, ctrls) ->
            ratingCtrl = ctrls[0]
            ngModelCtrl = ctrls[1]

            if ngModelCtrl
                ratingCtrl.init ngModelCtrl
    }



================================================
FILE: ionic-rating.css
================================================
ul.rating li {
  display: inline;
  border: 0px;
  background: none;
  padding: 5px 10px;
}
ul.rating li i {
  font-size: 30px;
}

================================================
FILE: ionic-rating.js
================================================
// Generated by CoffeeScript 1.9.1
(function() {
  angular.module('ionic.rating', []).constant('ratingConfig', {
    max: 5
  }).controller('RatingController', function($scope, $attrs, ratingConfig) {
    var ngModelCtrl;
    ngModelCtrl = {
      $setViewValue: angular.noop
    };
    this.init = function(ngModelCtrl_) {
      var max, ratingStates;
      ngModelCtrl = ngModelCtrl_;
      ngModelCtrl.$render = this.render;
      max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : ratingConfig.max;
      return $scope.range = this.buildTemplateObjects(ngModelCtrl.$modelValue, max);
    };
    this.buildTemplateObjects = function(stateValue, max) {
      var i, j, len, states = [];

      for (j = 0; j < max; j++) {
        if(stateValue > j && stateValue < j+1)
          states[j] = 2;
        else if(stateValue > j)
          states[j] = 1;
        else
          states[j] = 0;
      }

      return states;
    };
    $scope.rate = function(value) {
      if (!$scope.readonly && value >= 0 && value <= $scope.range.length) {
        ngModelCtrl.$setViewValue(value);
        return ngModelCtrl.$render();
      }
    };
    $scope.onKeydown = function(evt) {
      if (/(37|38|39|40)/.test(evt.which)) {
        evt.preventDefault();
        evt.stopPropagation();
        return $scope.rate($scope.value + (evt.which === 38 || evt.which === 39 ? {
              1: -1
            } : void 0));
      }
    };
    this.render = function() {
      return $scope.value = ngModelCtrl.$viewValue;
    };
    return this;
  }).directive('rating', function($timeout) {
    return {
      restrict: 'EA',
      require: ['rating', 'ngModel'],
      scope: {
        readonly: '@'
      },
      controller: 'RatingController',
      template: '<ul class="rating" ng-keydown="onKeydown($event)">' + '<li ng-repeat="r in range track by $index" ng-click="rate($index + 1)"><i class="icon" ng-class="value === undefined ? (r === 1 ? \'ion-ios-star\' : (r === 2 ? \'ion-ios-star-half\' : \'ion-ios-star-outline\')) : (value > $index ? (value < $index+1 ? \'ion-ios-star-half\' : \'ion-ios-star\') : \'ion-ios-star-outline\')"></i></li>' + '</ul>',
      replace: true,
      link: function(scope, element, attrs, ctrls) {
        var ngModelCtrl, ratingCtrl;
        ratingCtrl = ctrls[0];
        ngModelCtrl = ctrls[1];
        if (ngModelCtrl) {
          $timeout(function(){
          return ratingCtrl.init(ngModelCtrl);
          })
        }
      }
    };
  });

}).call(this);


================================================
FILE: package.json
================================================
{
  "name": "ionic-rating",
  "version": "0.3.0",
  "devDependencies": {
    "uglify-js": "^2.4.14",
    "coffee-script": "^1.7.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/fraserxu/ionic-rating.git"
  },
  "keywords": [
    "ionic",
    "angularjs"
  ],
  "author": "fraserxu",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/fraserxu/ionic-rating/issues"
  },
  "homepage": "https://github.com/fraserxu/ionic-rating"
}