├── .gitignore ├── ionic-rating.css ├── Makefile ├── package.json ├── bower.json ├── LICENSE ├── ionic-rating.min.js ├── README.md ├── ionic-rating.js └── ionic-rating.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /ionic-rating.css: -------------------------------------------------------------------------------- 1 | ul.rating li { 2 | display: inline; 3 | border: 0px; 4 | background: none; 5 | padding: 5px 10px; 6 | } 7 | ul.rating li i { 8 | font-size: 30px; 9 | } -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | build: 2 | node_modules/.bin/coffee -c ionic-rating.coffee 3 | 4 | uglify: 5 | node_modules/.bin/uglifyjs ionic-rating.js > ionic-rating.min.js 6 | 7 | clean: 8 | rm -rf dist 9 | 10 | .PHONY: all clean 11 | 12 | all: clean build uglify -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-rating", 3 | "version": "0.3.0", 4 | "devDependencies": { 5 | "uglify-js": "^2.4.14", 6 | "coffee-script": "^1.7.1" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/fraserxu/ionic-rating.git" 11 | }, 12 | "keywords": [ 13 | "ionic", 14 | "angularjs" 15 | ], 16 | "author": "fraserxu", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/fraserxu/ionic-rating/issues" 20 | }, 21 | "homepage": "https://github.com/fraserxu/ionic-rating" 22 | } 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-rating", 3 | "main": [ 4 | "ionic-rating.js", 5 | "ionic-rating.css" 6 | ], 7 | "version": "0.3.0", 8 | "homepage": "https://github.com/fraserxu/ionic-rating", 9 | "authors": [ 10 | "fraserxu " 11 | ], 12 | "description": "Star rating bar for ionic", 13 | "keywords": [ 14 | "ionic", 15 | "angularjs", 16 | "rating", 17 | "web" 18 | ], 19 | "license": "MIT", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 xvfeng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /ionic-rating.min.js: -------------------------------------------------------------------------------- 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;jj&&stateValuej)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:'
    '+'
    • '+'
',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); 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ionic-rating 2 | ============ 3 | 4 | An angularjs directive that take care of visualising a star rating bar, build 5 | for ionic. 6 | 7 | ![rating](https://cloud.githubusercontent.com/assets/1183541/3007107/3cee642c-de6c-11e3-8449-18b86ca130a7.png) 8 | 9 | Also able to print half star (display only) : 10 | 11 | ![rating-half](https://cloud.githubusercontent.com/assets/7658059/12101509/67ee6d6c-b335-11e5-9ef6-0ceb92018fd2.png) 12 | 13 | #### Why? 14 | 15 | `angular-ui` has the same [rating](http://angular-ui.github.io/bootstrap/#/rating) directive, 16 | but it is build on top of bootstrap. This repo just reuse most of the js code, but build for 17 | the [ionic](http://ionicframework.com/) framework. 18 | 19 | #### How to use? 20 | 21 | Install with bower: 22 | 23 | ``` 24 | $ bower install ionic-rating 25 | ``` 26 | 27 | In your index.html 28 | 29 | ```HTML 30 | 31 | ``` 32 | 33 | In you template: 34 | 35 | ```HTML 36 | 37 | ``` 38 | 39 | In you controller: 40 | 41 | ```JavaScript 42 | // first inject it into your app 43 | angular.module('youApp', ['ionic.rating']) 44 | 45 | .controller('yourCtrl', function($scope) { 46 | 47 | // set the rate and max variables 48 | $scope.rating = {}; 49 | $scope.rating.rate = 3; 50 | $scope.rating.max = 5; 51 | 52 | }); 53 | 54 | ``` 55 | 56 | For strict-di, you can use 57 | 58 | ``` 59 | .controller('RatingController', [ '$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig) ] 60 | ``` 61 | 62 | If you want to make it read only 63 | 64 | > added readonly="readOnly" to rating directive, and $scope.readOnly = true; to the controller. 65 | 66 | **Note:** You may also need to include the style file. But I suggest you just copy it to your 67 | project. 68 | 69 | #### Build 70 | 71 | ``` 72 | $ npm i 73 | $ make all 74 | ``` 75 | 76 | #### License 77 | 78 | MIT 79 | -------------------------------------------------------------------------------- /ionic-rating.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.9.1 2 | (function() { 3 | angular.module('ionic.rating', []).constant('ratingConfig', { 4 | max: 5 5 | }).controller('RatingController', function($scope, $attrs, ratingConfig) { 6 | var ngModelCtrl; 7 | ngModelCtrl = { 8 | $setViewValue: angular.noop 9 | }; 10 | this.init = function(ngModelCtrl_) { 11 | var max, ratingStates; 12 | ngModelCtrl = ngModelCtrl_; 13 | ngModelCtrl.$render = this.render; 14 | max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : ratingConfig.max; 15 | return $scope.range = this.buildTemplateObjects(ngModelCtrl.$modelValue, max); 16 | }; 17 | this.buildTemplateObjects = function(stateValue, max) { 18 | var i, j, len, states = []; 19 | 20 | for (j = 0; j < max; j++) { 21 | if(stateValue > j && stateValue < j+1) 22 | states[j] = 2; 23 | else if(stateValue > j) 24 | states[j] = 1; 25 | else 26 | states[j] = 0; 27 | } 28 | 29 | return states; 30 | }; 31 | $scope.rate = function(value) { 32 | if (!$scope.readonly && value >= 0 && value <= $scope.range.length) { 33 | ngModelCtrl.$setViewValue(value); 34 | return ngModelCtrl.$render(); 35 | } 36 | }; 37 | $scope.onKeydown = function(evt) { 38 | if (/(37|38|39|40)/.test(evt.which)) { 39 | evt.preventDefault(); 40 | evt.stopPropagation(); 41 | return $scope.rate($scope.value + (evt.which === 38 || evt.which === 39 ? { 42 | 1: -1 43 | } : void 0)); 44 | } 45 | }; 46 | this.render = function() { 47 | return $scope.value = ngModelCtrl.$viewValue; 48 | }; 49 | return this; 50 | }).directive('rating', function($timeout) { 51 | return { 52 | restrict: 'EA', 53 | require: ['rating', 'ngModel'], 54 | scope: { 55 | readonly: '@' 56 | }, 57 | controller: 'RatingController', 58 | template: '
    ' + '
    • ' + '
', 59 | replace: true, 60 | link: function(scope, element, attrs, ctrls) { 61 | var ngModelCtrl, ratingCtrl; 62 | ratingCtrl = ctrls[0]; 63 | ngModelCtrl = ctrls[1]; 64 | if (ngModelCtrl) { 65 | $timeout(function(){ 66 | return ratingCtrl.init(ngModelCtrl); 67 | }) 68 | } 69 | } 70 | }; 71 | }); 72 | 73 | }).call(this); 74 | -------------------------------------------------------------------------------- /ionic-rating.coffee: -------------------------------------------------------------------------------- 1 | angular.module 'ionic.rating', [] 2 | 3 | .constant 'ratingConfig', { 4 | max: 5 5 | stateOn: null 6 | stateOff: null 7 | } 8 | 9 | .controller 'RatingController', ($scope, $attrs, ratingConfig) -> 10 | ngModelCtrl = { $setViewValue: angular.noop } 11 | 12 | this.init = (ngModelCtrl_) -> 13 | ngModelCtrl = ngModelCtrl_ 14 | ngModelCtrl.$render = this.render 15 | 16 | this.stateOn = if angular.isDefined($attrs.stateOn) 17 | then $scope.$parent.$eval($attrs.stateOn) 18 | else ratingConfig.stateOn 19 | 20 | this.stateOff = if angular.isDefined($attrs.stateOff) 21 | then $scope.$parent.$eval($attrs.stateOff) 22 | else ratingConfig.stateOff 23 | 24 | max = if angular.isDefined($attrs.max) then $scope.$parent.$eval($attrs.max) else ratingConfig.max 25 | 26 | ratingStates = if angular.isDefined($attrs.ratingStates) 27 | then $scope.$parent.$eval($attrs.ratingStates) 28 | else new Array(max) 29 | 30 | $scope.range = this.buildTemplateObjects(ratingStates) 31 | 32 | this.buildTemplateObjects = (states) -> 33 | for i in states.length 34 | states[i] = angular.extend { index: 1 }, { stateOn: this.stateOn, stateOff: this.stateOff }, states[i] 35 | return states 36 | 37 | $scope.rate = (value) -> 38 | if not $scope.readonly and value >= 0 && value <= $scope.range.length 39 | ngModelCtrl.$setViewValue value 40 | ngModelCtrl.$render() 41 | 42 | $scope.reset = -> 43 | $scope.value = ngModelCtrl.$viewValue 44 | $scope.onLeave() 45 | 46 | $scope.enter = (value) -> 47 | if not $scope.readonly 48 | $scope.value = value 49 | $scope.onHover({value: value}) 50 | 51 | $scope.onKeydown = (evt) -> 52 | if /(37|38|39|40)/.test evt.which 53 | evt.preventDefault() 54 | evt.stopPropagation() 55 | $scope.rate $scope.value + (if evt.which is 38 or evt.which is 39 then 1 : -1 ) 56 | 57 | this.render = -> 58 | $scope.value = ngModelCtrl.$viewValue 59 | 60 | return this 61 | 62 | .directive 'rating', -> 63 | return { 64 | restrict: 'EA' 65 | require: ['rating', 'ngModel'] 66 | scope: 67 | readonly: '@' 68 | onHover: '&' 69 | onLeave: '&' 70 | controller: 'RatingController' 71 | template: '
    ' + 72 | '
    • ' + 73 | '
' 74 | replace: true 75 | link: (scope, element, attrs, ctrls) -> 76 | ratingCtrl = ctrls[0] 77 | ngModelCtrl = ctrls[1] 78 | 79 | if ngModelCtrl 80 | ratingCtrl.init ngModelCtrl 81 | } 82 | 83 | --------------------------------------------------------------------------------